Final Tutorial: Coding an HTML5 Layout From Scratch

Ok... I know some of us are probably way past this stage. Maybe not... Since HTML5 is still developing there is possibly something in this tutorial that will be new to you. The reason I chose to do this tutorial is basically because I am still figuring out how to use HTML5 and what can be done with the tags. This HTML5 tutorial also includes some elements of graceful degradation and progressive enhancement. I've "borrowed" this tutorial I'm going to attempt to explain the steps for the HTML part in my own words for both yours and my own benefit. You can refer to the original for the CSS3 styling information. Just for the kicks, I've found a link to the W3C page which has all of the HTML5 tags. They've clearly labeled which ones are new and which ones are no longer supported.

So... When we're done with the tutorial our page SHOULD look something like this:



Here's the code sample we'll be working with:


If you broke the code down into a visual map of how it's laid out it would look like this:


Now... Let's start with the HEADER which is written in code as <. header .> .


The code for this section also includes the <. nav .> tag. The <. nav .> is the container where the menu is housed. Each navigational element is still coded as a <.ul.> or "unordered list" item You'll also notice the word "active" within the code. This is used to make a highlight over the word in the navigation menu that says which page you are on.

Beneath the coding for the HEADER is the FEATURED section. This area is coded as an <.aside.> which is a good place to put sidebar content (stuff that's related to the current topic but not specific enough to be in the main article) like fun facts or tips.


There's some coding in this "aside" section that I kind of understand but don't really know how to explain so here's a screenshot that may help:


Next, is the body content. This part is contained in a <. section .> tag. The "section" is "id"ed as "content" and "class"ed as "body". I believe the reason for this is within this article are several smaller articles which will have their posting dates and times attached. All of this activity in this block is made possible by using something called a microformat. A microformat allows you to put pieces of coding into place that record the time and date without you having to remember the exact time and date and write it in yourself. The specific type of microformat used here is called an hAtom microformat. You can read about those here: http://microformats.org/wiki/hatom Here's the coding sample for this part: I'm going to skip over the the "Extras" block (which is a <. section.> with two <. div .> tags within it; one div for the "blogroll" and one for the "social" networking links) and go to the "About" and "Footer" blocks. In HTML5, there is a new tag specifically for "footer"s: <. footer .>. A document can have more than one "footer" but "footer"s cannot be placed within one another or placed within headers. Within the <. footer .> you will usually find the <. address .> tag. This tag is used for making up the contact info for the page or document. It can contain physical/postal addresses or website URLs but they should only be the ones that link to the owner of the page or document. The <. address .> tag cannot contain < .article. >, < .aside. >, < .nav. >, < .section. >, < .header. >, < .footer. >, < .hgroup. >, any < .h1 - h6. > or other < .address. > elements.

The final code sample:



**P.S.: I put periods in the tags to help them show up as just plain text**

LINKS AND EXTRA STUFF:
The long form of this tutorial http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

More about microformats http://speckyboy.com/2011/01/24/beginners-study-guide-to-html5-microformats/

http://css-tricks.com/what-beautiful-html-code-looks-like/

http://webdesigneraid.com/essential-html5-books-and-cheat-sheets-to-improve-your-html5-ninja-skills/

Final Sites: Michael Vinson

Here are the links to the final versions of my sites:

Sustainability Site (changed the background of the Amazon page to actual cardboard box)

Local Biz Site

WP version of Biz Site

Chiao's world press

I has problem for some part. Is that possible to change html? I would like to know how to change the title"CHIAO WORDPRESS TEST SITE" and navigator list. Have anybody know how?

here is the link.

Final Tutorial: Samantha Taggart

For my tutorial, I chose to explore something that I wanted to incorporate into my Sustainability Site, but it just didn't work out. I got intimidated by all the code and ended up making graphics, but after I took the time to learn about it, I found out its really not that complicated. It is now my favorite part of HTML5. Welcome to the fabulous world of HTML5's canvas element. What is the canvas element? I'll quote the W3C's official spec:

"The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly."

There are only 2 methods to use it:
• width
• height
Yup, that's it! Easy enough.

There are also 2 methods to use it:
• getContext (string contextId)
• toData URL ([string type], arg1, arg2...)
The first one takes an id and returns a reference to a context of the element. The second one returns a URL to an image in a canvas.

There are several attributes to use with the getContext (string contextId) that requires JavaScript. The following are for creating a bar graph, but consult this cheat sheet for more attributes. The attributes for the bar graph example are the following:
• beginPath() - resets current path
• closePath() - marks current sub path as closed and starts a new sub path that points to the same start and end of the path that just closed
• fill() - fills sub paths w/ current fill style
• stroke() - draws a stroke on the current stroke style
• moveTo(float x, float y) - creates a new sub path w/ given x y coordinates
• lineTo(float x, float y) - adds point indicated by x y coordinates to the sub path and connects it to previous sub path w/ a straight line
• rect(float x, float y, float w, float h) - adds new closed sub path to path that represents a rectangle using given values
• fillText(string text, float x, float y, [float maxWidth]) - fills given text in given position

Now, let's get started on making our bar graph:

1. Define the canvas in your HTML5 document.


2. Add in the JavaScript. It ensures that the element is actually within the DOM and checks if the browser supports it. It also obtains a context to the element.


3. Contain the bar chart data within an array. Inside each element is the name of the data. The data's value is separated by a comma. Add a call to drawBar Chart(). This takes the data and draws a bar chart.


4. Add two more functions: drawLine() and drawRectangle().


5. Canvas isn't supported by IE, so use this JavaScript from explorecanvas.



Here is my example.

References:
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
http://code.google.com/p/explorercanvas/
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
http://diveintohtml5.org/canvas.html#divingin
http://www.rgraph.net/
http://html5doctor.com/an-introduction-to-the-canvas-2d-api/

Final Tutorial: Chiao-Chih Cheng

After all the research for this semester, I would like share one CSS selector— Pseudo Class. Because there has not much clear explanation and full example about how we use Pseudo Class. And I think this is a very important and helpful function, I will do an example so you can easy to understand and apply on your coding. Example

First, I create an unordered list.

And I create a css style for the list item, float to the left, no list-style and 100px width for each item. I also give a background color so we can easy to see.

I will also create a style for unorder list(ul). I will set width 460px, and background color, also just because the lists item are float we can use hidden overflow the close or contain those float. And set margin auto on the center the page.

But why the list item looks center also, that is because the computer defaults. Let’s add padding and margin to clean it out. Line 14 and 22. Also add margin on the bottom to add some space. Line 15.

So what we want here is for the list item to take all the space, with evenly divided with forth one all the way to the end of ul container. The width of ul is 460px, and every list item is 100px width, so we want to have 20px space between every item.

Okay, after do the math, let’s try adding 20px on the right margin.

That’s not what we want. Because we only want the margin-right on first three items (milk, egg and bread), but not fourth(butter). So how we do this? This is the time Pesudo Class for. We want every fourth one has no right margin at all.

After I refresh the browser. The fist row is been fixed, because we target it. But we only tell the computer to target number four but not every fourth one. Here is the “n” for. That is meaning every four nth-child. So now we have everything divided perfect and nicely.

Now, we have a basic understanding and we can do some more. Let’s say we want every fist item in the row has red background.

But is not working like before. Because “1n” means everyone. We want first one be target and from the first one to the next target will be the fourth item.

Like this situation we need work form right to left.

It just so much easier once you understand it.

If you wants to do even and odd, you can just type in even or odd.

Final Tutorial: Michael Vinson

It was the one thing I had the biggest pain trying to find: how to customize a theme to make it look like you want it to. I found plenty of stuff on finding themes and implementing them, but when it came to actually customizing them, my resources surprisingly slimmed down. Anyway, I am here to save the day.

To start off with, you have to have at theme to actually customize. To do this you will want to go under the Appearances tab on your WP dashboard and click the Themes button. This will then lead you to a page which looks like this:

At the top left is my current theme I am running on my site. Then below that are the other themes I have downloaded at one point or another. The Install Themes tab is where you will want to download and activate a new theme for yourself. Here is a search I did for a theme with a Right Sidebar:

You can then select one and preview it or even activate it on spot. This video did a wonderful explanation for me of explaining this process. The first 4 minutes of the video shows the process I just explained above, which is the most popular way to get a theme, the second half goes into uploading and installing themes you download from other sites. Also, before I get into my way of editing CSS, here was another video I found while researching that goes into a little more painstaking way of editing your CSS.

But anyway, to the real reason we are here: customizing this theme. Here is a my site with a basic theme I downloaded:

Not a whole lot going on here at the moment. However before we begin, it is a good idea to take a look with the help of Firebug to see some of the things we would like to change in this site. This was one of the things I never saw brought up in other tutorials, like the ones mentioned above or a 3rd listed in my bibliography at the end of this post. For this example we will start to customize the header, and when I say header, I am referring to the part of the site that contains the site name "Michael's Test Site" and the little blurb beneath it. So lets say we want to change the font of Michael's Test Site. First, we can Ctrl-click that text and then hit "Inspect Element" to bring up this page:

As you can see, the link is now highlighted in blue and at the bottom right we can see that it's styling properties are contained in line 127 of the style.css file; so let's take a look at that file, shall we?

To get to the page shown above, click once again on the Appearances tab on your Admin page and then select Editor. IMPORTANT NOTE: When you arrive at this page, be sure that below where it says "Edit Themes" that the stylesheet listed in parentheses is titled style.css. Sometimes, when you click on the Editor it will open first the rtl.css or ie6.css file, which does you DO NOT want to edit. If it does show rtl.css, simply scroll down the page a little and on the bottom right select style.css to edit from the Styles heading.

Now, to make your life a little bit simpler, I recommend dragging and dropping your stylesheet into your own text editor. Since I'm on a Mac at this time, I will drop it into Text Wrangler:

I am a fan of line numbers in my CSS, especially when working with WP Themes. To show these in Text Wrangler, I went to View->Text Display->Show Line Numbers (it only says hide because I already have them shown). Then I can scroll down to line 127 to start editing my header:

As you can see, I've gone in and added a new color of red for the font color as well as changed the font style to Georgia. I then can select all of the stylesheet in text wrangler and paste it back into my Editor in WP. After you have done that make sure to hit the Update button on the Editor page. Now if we go to my test page it looks like this:

 

So there you have it, at least strictly delving into the CSS. One last thing I'd like to show you is where your images are when you want to add them to your CSS, at least, where they are within your WordPress Admin page:

If you click on the Media tab you are automatically sent to your library where all your media is housed (images, video, audio, etc.). Now that's look at one of these to see where it is in our actual site. How about the first image:

Clicking on the image brings you to the Edit Media page, and as you can see circled in red, there is your File URL. If you copy that into your CSS for an image location you will have it appear on your site, like so:

First, the relevant CSS change:

And the outcome:

I didn't style it just so you can see that it works. But you can do this within any element where you can have a background. I also see that this post has run a bit long, so I will end here and hope that I have provided you guys with enough info to get out there and start styling your own WordPress site. Happy coding!

Bibliography:
Theme Installation Tutorial for WordPress 3.0
How to Edit a WordPress Stylesheet: Easy Way + Hard Way
WordPress 3.0: Simple CSS Edits

Sam's Sustainability Sute

my sustainability site

feedback appreciated! :)

-Sam