Friday, May 6, 2011
Final Tutorial: Coding an HTML5 Layout From Scratch
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.
Wednesday, May 4, 2011
Final Sites: Michael Vinson
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
Tuesday, May 3, 2011
Final Tutorial: Samantha Taggart
"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/
Sunday, May 1, 2011
Final Tutorial: Chiao-Chih Cheng
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.