The Craftsman four-square firmly rejected the highly asymmetric designs of the Queen Anne period that preceded it.
Well, most of them did. This sort-of-four-square Craftsman home embraces the asymmetries of the Queen Anne (1890s) period. It also shows the Craftsman hipped roof, hipped dormers, porch roof supported by strong, square columns: all Craftsman characteristics.
This is a large home, presumably built for a prosperous businessman. It shows great strength, but at the same time it has some fun.
Craftsman four-square, embracing Queen Anne asymmetries, Warwick, NY, c. 1920.
Edges to Rubies The Complete SketchUp Tutorial
Chapter 18—HTML and CSS
You cannot build WebDialog interfaces to your Rubies if you do not know some HTML, HyperText Markup Language, and CSS, Cascading Style Sheets. This chapter will get you started. Google will find answers to more detailed questions.
HTML, Really Fast!
We'll begin with HTML, which is really a set of markup tags, not a language.
Create a test file. It should contain this HTML:
<!-- /r/t.html - html test file -->
<html>
<head>
<title>HTML Tests</title>
</head>
<body>
</body>
</html>
<!-- end of /r/t.html -->
You can see four important things here:
<!-- HTML comments are written this way. -->
<tag> tags start this way
</tag> tags end this way
HTML is written between <html> and </html> tags. (At least it should be. Browsers include anything above the <html> tag and anything below the </html> tag, too.
There are two tag-delimited sections in most HTML files: <head> and <body>.
Save this in a directory you create for its convenience. Mine's in /r/t.html. In your browser (Opera is best for PC testing, Safari's fine on Mac) open this page in a new tab. You'll see your title in the tab. (WebDialogs don't show titles. You won't need one.) (P.S. Opera aggressively caches graphics. If you need to swap graphics, switch to Firefox. Return to Opera when you get to JavaScript testing.)
Your WebDialog on the PC will run under MSIE but that will regularly crash your computer during development. Do just your final tests with MSIE.
From here on you'll see a long table with tags in the left side, the results of using those tags on the right. Type interesting variations on the tags into the body section of your HTML. Save. Reload in your browser. (Arrange editor and browser so you can easily click the browser's Reload button after you click the editor's Save button.) Again: you won't learn HTML by reading about it. You'll learn HTML by typing it. Good luck!
Bold and Italic.
This is plain text. <b>This is bold text.</b> <i> This is italic text. </i> <b><i>This is bold, italic text. </i> </b>
This is plain text. This is bold text. This is italic text. This is bold, italic text.
Break and Paragraph
This is one line.
This looks like another line.
Throw in a break to force a new line.<br>
Use a paragraph to get paragraph space.<p>
Like this one!
This is one line.
This looks like another line.
Throw in a break to force a new line.
Use a paragraph to get paragraph space.
Center
<center>
This text<br>
is centered.
</center>
This text
is centered.
Attributes
Some tags have additional modifiers, called "attributes." According to HTML's governing body, all values assigned to attributes are strings and in HTML strings must be in quotes. (They're pretending that HTML is a language, which it isn't.) According to all browsers a consecutive string of non-blanks following the attribute= is a string, with or without quotes. (Browsers think that lots of web pages are created by amateurs, which is true.) If you want to include blanks in the value passed to an attribute you must enclose it in quotes. Otherwise, it's up to you.
Image
The "<img>" tag has no end tag. Simplest image: <img src='snoozy-kitty.gif'>. Problem! MSIE defaults to 1px border. Everyone else defaults to 0px. Always specify border. alt attribute: used by visually impaired. (Google's web crawlers are visually impaired.) Used by MSIE for tooltip unless title is present. Not used for tooltip by other browsers. You may set height and width, but it's best to use image software to get the right height and width in the file. Model:
download page. The Lumberman package includes all the graphics as well as finished versions of the Ruby, HTML and JavaScript. Refer to my code if you get totally stuck. If you get yours working without looking at my code, you're really mastering this stuff. I'll forgive you for stealing the graphics.
Think you're getting this? I hope so. Time to meet the Lumberman project. This is a lumberyard where The SketchUp modeler can go to get a custom-cut board. Here's what the WebDialog looks like:
I was very pleased with the way this came out. I don't think any user will have any problem getting the lumber they want cut to size. Simplicity in the UI is one of the hardest things to achieve.
Consider this. The user selects "blue" for the length axis. The radio buttons are adjusted to read "red" and "green", neither is checked. The image is replaced with one that says "Width axis?". The user chooses a width axis. The text following "Thickness axis" is adjusted to the one remaining axis. The picture swaps in a picture of a board on the axes specified. The programmer works hard to get JavaScript to do all this. The users don't work hard to get the boards they want. That's the way it should be.
We'll use this WebDialog in this chapter to show you HTML tips and tricks. We'll use it again in the next chapter for JavaScript tips and tricks. On to the HTML.
This being the 21st century you should lay that table out with CSS. Separates content from format, they say. They have a good point if you need to think about the visually impaired. Of course, if you are writing SketchUp WebDialogs, you are working on Rubies for sighted people, so this isn't a relevant concern. Let's use the twentieth century technique of using tables for layout.
Here's the table-based portion of that WebDialog with every table's border attribute set to 1:
Your job is to create the HTML for this form. For now, just say "dropdown widget" instead of actually trying to get the right element. We'll go for real widgets after we cover HTML forms. Begin your own lumberman.html with a copy of this skeleton:
Save the file and open it in your favorite browser. Think up and add something appropriate for making boards for the name, product, trustworthiness and slogan. You've finished the easy part.
Tables within tables and tables within tables within tables are devilish, until you learn the trick.
Begin with the big table. Begin every table with border=1. (Without content it will be a small table, but you'll fatten it up as you go.) Put just a word or two in each TD.:
Take a look at this much. Fix anything that's broken. Add table attributes. Look/fix/add until you're happy.
Now the trick: Start your first table within a table, the one for picking axes, below the big table. Not inside the big table, outside and below it. It should look something like this:
On your own, now, the other tables: one below the other. Get them all happy on their own. Put the length table and the materials table inside their immediate container (the one that you'll eventually put into the big table).
Hint: for buttons that at least look like buttons, use <button>Geometry</button>.
Save! Save again (under another name, of course)!
Now, very carefully, copy your nesting tables into the appropriate parts of the big table. Expecting to get it right on the first try is not realistic. Work slowly, save after each smaller table becomes part of the big table.
Got it right? Looking good? Congratulations. You must be learning HTML.
More HTML
Back to your tester and your study of HTML. Our last topic is forms. You're just two topics away from forms.
Colors
HTML has some named colors. It has far too many to remember, far too few to get exactly what you want. Forget them. Use the hexadecimal color spec.
Colors are specified with #rrggbb, a "#" followed by six hex digits. The first two digits specify the amount of red. The next two specify the amount of green. The last two specify the amount of blue. Hexadecimal digits are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. (You may use capital letters, but why not go with the ones that are easier to type?)
¹Serious problem re <input type=file>: For security reasons, JavaScript is not allowed access to the path. You can see it. Your user can select it and see it. Your program can't see it. In Ruby, use UI.openpanel() or UI.savepanel() to let the user select a file.
<textarea cols=40 rows=5 readonly> Another attribute is "wrap". It may be "wrap=hard" (carriage returns inserted), "wrap=soft" (wrapped, but returns not inserted) or "wrap=off" (leave it up to user).</textarea>
<p>
In HTML, many elements can contain many other elements. The list example showed ordered lists within other lists. For a clickable picture, put an <img> inside <a href = '...'> <img...> </a>.
Now you should know enough to finish the Lumberman's HTML. Stick in those widgets. You'll need JavaScript to hook them all up, but for now, you should be happy with HTML that drops down when you click a dropdown.
We skipped two important HTML tags, <div> and <span> as they are almost useless without CSS styles. We'll get to these tags soon.
Further activity:
I assume you are here because you have a Ruby, or a plan for one, that needs a WebDialog. Write its HTML.
Use your browser's View Source option (often a right click option) to look at this page's HTML. Test anything you don't understand in your test file.
If you cannot connect your styles to your HTML, styles are useless. If you do not have any styles to connect, connecting styles is useless. Catch 22.
So, here's your first style and value: background-color: #ff0000;. That sets the background color of an element to pure red. Pure red is overkill, unless you are trying to test your style/HTML connections, where it is perfect.
Styles can be placed in separate CSS files. CSS files can link to other CSS files, hence Cascading Style Sheets. For WebDialog programming separate CSS files are probably a bad idea. Styles can also be declared within tags and in the <head> section of your HTML. I'll introduce you to both, starting with styles in the tag.
A span is an inline element in your HTML. (The "inline" elements—words, links, images—flow across the page, space permitting. The "block" elements—headings, tables, lists, paragraphs, ...— normally flow one above the other.)
Test this span code: <span bgcolor=red> test span </span>
It doesn't work. There is no bgcolor attribute for the <span> tag. Any element can have a style tag, which means than any style can be applied to any element.
Test this span code: <span style='background-color: #ff0000;'>test span</span>
That gives you a bright red test span.
Suppose you had a color that you wanted to apply regularly, such as the green that colors code, here. Suppose you had multiple styles to apply to a single span, as the code here is also shown in a monospaced font, slightly larger size, etc. Baking in your styles in every tag is possible, but it's not the easy way. Creating CSS style classes in your page's <head> section is the easy way:
Now you can attach that class to any tag. This will attach it to a span: <span class='code_class'>. There are other ways to connect styles in the <head> section to elements in the <body> section and we'll meet one of them shortly. This one will handle most of your WebDialog needs. Note: the class name is preceded with a period in the <style> section of the <head> section. That tells your page "this is a CSS class specification". The period does not reappear after class=.
Real style sections typically have multiple styles per class and multiple classes:
A <div> is a block element, as a span is an inline element. The big green blocks in the previous section where styles are defined in the header? They are <div class='code'> at their tops, and, of course </div> at their bottoms.
The Styles Hierarchy
More explicit styles override less explicit styles. <div class='code' style='background-color:#ff0000'> will be bright red, regardless of what the code class says.
All the Styles You Need to Know
Google for a "CSS reference." Pick one you like and make it your friend.
Positioning: if you try position:absolute; you are definitely on your own. Good luck! Some of the best stuff on the web uses absolute positioning.
Tables: laying out a web page using tables, borders off so you don't see them, was the way it was done before CSS. Please don't tell, but it's still the way I lay things out.
The default font size in forms is absurdly small. The following four additions to the <style> section in the page header will bring the form's fonts up to whatever size the user prefers for text:
Did you note that these are not classes? (Classes are prefixed with a dot in the <style> section. The dot disappears in the class= attribute assignment.) If you use a tag name, every occurence of that tag is given the style(s) you specify. Here's another one I use a lot: body { font-family: FreeSans, Arial, sans-serif; }.
What other styles do I use for WebDialogs? Actually, mostly one: background-color. I'm also using display. (display:none makes things disappear. display:block makes them reappear.) If you want to experiment a bit, try padding and margin. And experiment with border but use it like fresh-ground black pepper: a little is good; a lot is awful.
Now go back and look at the styles I defined. Should any of them apply to what you've built so far? (Hint: I don't define styles for a giggle.) Notice how I used "bluer" and "whiter" to separate parts of the dialog? Go for it!
HTML, CSS and the beginning of a serious WebDialog! Congratulations. We'll get that WebDialog working (and you'll get some JavaScript working) in Chapter 19.
