TSG HTML5 Class Part 3

Today's our talk is focusing on CSS3, and here is the slide we have used in the class.

Readings

For those of you who wants a brush up on your css, you can take a look of this site -  http://www.htmldog.com/guides/cssbeginner/ , they have beginner, intermediate and advance level topics on html and css.

Samples
Here are some samples we've used in the class, feel free to change anything you want

• http://cssdesk.com/4GQxd
• http://cssdesk.com/suXVw

Note
Some people asked how come in chrome and firefox the animation is reversed?
That's because of the vendor prefix, I hope you all remembered.  You can make different browser use different css3 by using the vendor prefix.

• -moz-    (firefox)
• -webkit- (chrome)
• -o- (opera)
• ... etc

We have introduced another tool yesterday, it is http://jsfiddle.net/ , it is similar to cssdesk, but it will let you do javascript also and it is a good tool for developer to write testing code and play around with stuff.

There is a good link Edward has mentioned, take your time to take a brief look even though it's a little bit lengthy - http://html5center.sourceforge.net/building-apps-in-html5

Next Tuesday is our field trip to Linkedin, no class next week.
How to Make Your JavaScript Fast ( Linkedin Campus )
http://www.meetup.com/SF-Web-Performance-Group/events/37966322/

Homework! Homework!
Since we have quite a long time in between until the next class, and thus I have changed my mind and assign you some homework.

Your homework is - without using the cssdesk, try to create a simple page from scratch using HTML and CSS.  You can do whatever you want with only one limitation, your css must be less than 150 lines of code.

Feel free to ask any questions in the email thread or through the blog. Thanks and enjoy :)

One handsome guy

Thanks Pojen for sending me those pictures, I think I look handsome in there :)

TSG HTML5 Class Part 2

Today's our talk is focusing on web forms. Hopefully it is not too hard for you all. Please feel free to send me email or leave comments in the blog for any questions you have.

Today's Presentation
http://www.standardista.com/forms/
...

The following is the Linkedin talk I mentioned in the class, you need to signup first if you plan to go.  But it is optional, only go if you are interested, it is a field trip for our class.

How to Make Your JavaScript Fast ( Linkedin Campus )
http://www.meetup.com/SF-Web-Performance-Group/events/37966322/
...
Q&A
Someone asked in the class
"How do I know which browser support what?"

Ok, now below are some cool tools for your reference

• http://caniuse.com/  - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
• http://html5demos.com/ - HTML5demos will let you know instantly which property can be used on a specific browser.
• http://www.standardista.com/html5/html5-web-forms/

Also, someone asked this in the class

"Can we use the HTML5 form now? But not all the browser supports it?"

Well, yes, you can use it now.  For those browser that doesn't support the new form attribute will fall back to "text", and you will need extra javascript to do the validation and extra css for styling.  Meanwhile, there are already written tools to make HTML5 form cross browser and so you don't need to recreate the wheel again - http://code.google.com/p/webforms2/

...

Reading for this week
http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features

...

Homework
Create as many web forms as you would like and test different features.   ( Note: you don't have to use cssdesk, that's just a handy tool only. )

For your homework, here is a good example for you to take a look - http://www.useragentman.com/tests/html5Widgets/bradshawenterprises.com/index.html

And if you would like to explore more about how people do HTML5 in the industry, you can this tool to generate your own HTML5 template, just trial and error and play around with it - http://switchtohtml5.com/

See you all next week in the class.