HTML5 and CSS3 Today

Editor's Notes

3. We must deal with changing standards. It’s part of our job.
4. HTML5 and CSS offer some amazing ways for you to improve not only the look of your site, but also its accessibility and usability.
5. HTML5 brings these features, which I feel are the most important out of the whole specification.
6. CSS3 has ways to help you style things better without resorting to Javascript
7. Accessibility really means usable by anyone. We tend to focus on things like
8. Blind and low vision users are the ones who are obviously affected, and the hearing impaired have trouble with videos without captions. The physically impaired may have trouble working mice, and cognitive impairments can be anything from reading comprehension to dyslexia, which means you need to make wise choices about your fonts and spacing.
9. search engines, mobile devices, slow computers, and people without javascript
10. Who knows what this means? Build it simple, build it to work for the lowest common denominator first, add the icing.
11. Web apps without js are still cake. They may not be as awesome as cake without frosting, but they can still be quite tasty if done right.
12. That’s a fine line.What we really mean is that your stuff should WORK everywhere. Add the whiz-bang JavaScript at the END, not from the start.
14. There’s not a single image on this page.
15. but look, the content (most important part) is readable without any images.
16. .You can build rich interfaces with HTML5.
18. We’ve been stuck using the same tags forever. It’s time for some new ones.
19. Overuse of Divs. Terrible disease, very contagious. You can get it from sharing code with friends or strangers. Watch out.
20. To keep this straight we need to add comments in our code! And the only reason we have all of those divs is to make sure we have style handles.
21. We can use less, and more meaningful, code to express our content. Sections, headings, and articles are perfect for what we need to do. We don’t need classes to tell us that things are posts.... a “post” is an article inside of the posts section!
22. Browsers don’t actually throw up if they don’t understand an element, but you can’t style them with CSS unless you declare them. So we use JS.
23. Once you understand how browsers can recognize these new elements, adding this library to your code should be your next step.
24. Ever have a need to embed data into your pages that you need to access with JS?
25. Makes it easy to see the size of the window too!
26. We can use that data to generate the popups. No more onClicks
27. How about a less contrived example?
28. Here’s a regular form that will do a regular post. What if we wanted this to be a form that posted with AJAX instead? Notice the data-remote attribute?
29. use jquery to find all of those data-remote forms and turn them into AJAX requests.
30. We can build better forms
31. We have some wonderful new input types in HTML5
32. Using the email field makes iphones happy,
33. Using the URL field makes URL entry happy.
34. Using number controls have some neat advantages too.
35. You can use sliders too.
36. There are date pickers too. Only Opera implements this currently. Other devices are still catching up.
37. Right now. Change your apps. Use these fields right now. IE doesn’t support them right away, but they’ll just be text fields.
38. We can find elements by their attributes with CSS3, and use jQuery to bolt on the datepicker easily.
39. No need for extra classes on form fields in most cases. Use the css3 attribute selector, supported by jQuery and other libraries.
40. Modernizr is great for adding detection, not support, for HTML5 features. Just make sure you understand the code.
42. Placeholder text can sometimes be helpful to your users if you use it as example text.
43. Too much code to show thanks to IE. You cannot change a password file into a text field in IE. There are plugins available to do this work for you, and another alternative is to place the placeholder text to the right of the input field as “example” text.
45. Autofocus places the cursor in the text field you specify.
46. Pretty much the same detection here. And you know how to focus on a field with jQuery now. $(“field”).focus();
48. HTML5 has native video support. The browser treats video like images now.
49. Video support is basic.
51. Up till now there’s been a fight about which to support.
57. Adobe’s flash player will play WebM.
58. But Apple won’t. They’ll stick with H264
59. So at this point in time, it’s looking like H264 or Flash, and many people encode videos in Flash using H264.
60. Google wanted HTML5 video for youtube and other properties. But it’s all in H264 now because Apple wants it that way.
61. Controversial topic
62. They did it with VHS, they did it with Windows Media, they made Flash the standard for video delivery.
63. They want “personal devices” to view adult content and that means they need H264 video.
66. Flash fallback, mobile support, lots of goodness. Best solution out there now, but requires multiple encodes of videos.
67. So this should be easier, right?
68. Encode audio twice, offer a download.
69. We have the same problem with codecs when it comes to audio.
70. HTML5 video and audio have a rich Javascript API. Eventually you’ll be able to trigger sounds and manipulate video very easily.
72. So we have some content in a DIV....
73. You get equal-width columns. So you’re just spliting the content, you’re not making a “main” and “sidebar” column with this. We’re talking newspapers here.
75. Use less markup to style things!
78. Conditional comments and this will give you all the stuff you need in IE.
81. Rounding requires all of the browser prefixes. You can round text fields too which can look quite nice.
84. Shadows on text is going to be the new Blink tag. They’re also hard to read and you should watch your use of this technique.
85. You can add shadows to boxes too.
87. Put those URLs in parenthesis after each link in the printed version of your page. Very handy!
89. All the sub elements are editable too! You can have change or blur events attached and you just persist the changes to the backend using AJAX.
90. You’ll need an action to submit your edits to anyway.
94. We can easily set and get items using the simple API.
95. A fallback solution is easy to create with only about 30 lines of JS or one of the various plugins available. Just remember that these are cookie-based.
96. Localstorage persists in a local key/value store in your browser. It’s relatively secure, and the main key is the domain you’re browsing. LocalStorage stuff never leaves your browser either, unlike cookies.
97. Webkit browsers have the support!
98. We can easily select records, and we get transaction support too!
99. iOs, android, chrome, safari
100. Firefox wants their own technology, IndexedDB, to take off. It’s a NoSQL solution, like localstorage on steroids.
101. So it’s nice to be able to store things client side, but why would we want to do that?
102. If we were making offline mobile applications.
103. We make a manifest file, and then link to it. Everything we need offline gets listed in the manifest
104. No long submission processes, just put it out there and go!
105. As long as we’re talking mobile,
106. We can detect the device width and apply different stylesheet rules based on the query.
108. Push content to your users!
109. Long polling, refreshing constantly, ajax, etc
110. True socket connections
111. This server is written in Ruby using EventMachine. NodeJS works just as well, and is about the same size in code.
112. The API for websockets is dead simple. Just a few events. Connect, message, close.
113. Flash has had support for sockets for a long time and we can use that to support old browsers.
114. Accessible rich internet apps
115. Help the blind by telling them about it.
116. Screenreaders see the polite region and know that not only does it update, but that updates shouldn’t interrupt the reader when it’s reading other areas.
117. We can help screenreaders find areas of the page with important content.
118. Really handy way to help screenreader users find elements. “Documents” are static documents we read. Screenreaders have shortcut keys for navigating. “Application” role tells screenreaders to turn off the shortcut keys so that the apps can use those shortcut keys instead.
120. Ok, so here are the things I think you should do right now, when you leave this room, start implementing these things today:
121. This site will let you try HTML5 and CSS3 things right in your browser.
122. I hear this book is pretty good. It’s available now as a PDF and will be in bookstores in December.