Head First HTML 2/e

From WikiContent

(Difference between revisions)
Jump to: navigation, search
Line 249: Line 249:
* Transitioning to HTML5 strict from HTML - is there a doctype for html5 strict? not sure that there is, but we still transition them the same way by writing "strict" code before going to XHTML5.
* Transitioning to HTML5 strict from HTML - is there a doctype for html5 strict? not sure that there is, but we still transition them the same way by writing "strict" code before going to XHTML5.
* Transitioning to XHTML5 from HTML5. Update XHTML chapter to reflect XHTML5 - strict version of HTML5. Same issues with mime types and servers.
* Transitioning to XHTML5 from HTML5. Update XHTML chapter to reflect XHTML5 - strict version of HTML5. Same issues with mime types and servers.
- 
- 
-
= Resources =
 
-
(This section needs redoing, moved all HTML5 JavaScript API stuff to http://commons.oreilly.com/wiki/index.php/HF_HTML_5)
 
- 
-
* http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=241
 
-
* http://www.w3.org/TR/html5-diff/
 
-
* http://blog.whatwg.org/category/tutorials
 
-
* http://www.alistapart.com/articles/previewofhtml5/
 
-
* http://www.webstandards.org/learn/articles/askw3c/sep2003/
 
-
* http://html5doctor.com/html-5-xml-xhtml-5/
 
-
* http://www.zeldman.com/2009/07/07/in-defense-of-web-developers/
 
-
* http://www.alistapart.com/articles/get-ready-for-html-5/ - covers relationship between HTML 5 and XHTML 5, form input, canvas
 
-
* http://9elements.com/io/?p=153
 
-
* http://www.ddj.com/article/printableArticle.jhtml?articleID=219401362&dept_url=/web-development/
 
-
* http://html5gallery.com/
 
-
* http://www.alistapart.com/topics/topic/htmlxhtml/ - list of HTML / XHTML related articles on A List Apart
 
-
* http://mobiforge.com/designing/story/comparison-css-21-css-mp-wcss-and-css-level-1 - comparison of CSS versions
 
-
* http://www.slideshare.net/svcseattle/designing-iphone-apps - Great presentation on HTML5 and CSS on mobile by Brian Fling, who is writing [http://mobiledesign.org/book/ Mobile Design for O'Reilly]
 
-
* http://diveintohtml5.org/ - online book about HTML5 - really great resource
 
-
* http://css-tricks.com/what-beautiful-html-code-looks-like/
 
-
* Example of cool stuff you can do: http://9elements.com/io/?p=153
 
-
* 30 influential people in web design: http://www.webdesigndev.com/roundups/30-most-influential-people-in-web-design
 
- 
-
= Mobile =
 
- 
-
== Resources ==
 
- 
-
* http://www.alistapart.com/articles/smartphone-browser-landscape/ - Dec 2010
 
- 
- 
- 
-
== '''Resources''' ==
 
- 
-
* W3C HTML5 Reference: http://www.w3.org/TR/html-markup/Overview.html#toc
 
-
* Net Renderer: test your pages on IE: http://ipinfo.info/netrenderer/
 
-
* Dive Into HTML5: http://diveintohtml5.org/, http://diveintomark.org/archives/2011/01/09/dive-into-2010
 
-
* Net Tuts: HTML5 and You: http://net.tutsplus.com/sessions/html5-and-you/
 
-
* 4 part series on HTML5 at InfoWorld: http://infoworld.com/d/application-development/html5-in-the-web-browser-html5-forms-890
 
-
* http://craftymind.com/factory/html5video/CanvasVideo.html - awesome example of using video and canvas
 
-
* http://apirocks.com/html5/html5.html - Presentation using HTML 5 about new features
 
-
* Amazing art created with HTML5
 
-
** 389.com - several art projects: http://www.the389.com/
 
-
** ChromeExperiments - several art projects:
 
-
*** http://www.chromeexperiments.com/detail/harmony/ - Sketch into canvas
 
-
*** http://www.chromeexperiments.com/detail/wavy-scrollbars/ - Wavy scrollbars
 
-
* Lovely balls! http://mrdoob.com/projects/chromeexperiments/ball_pool/
 
-
* Google's HTML5 "book" http://www.20thingsilearned.com/
 
-
* http://radar.oreilly.com/2010/03/why-html5-is-worth-your-time.html - why it's worth learning html5
 
-
* http://boblet.tumblr.com/post/141239118/html5-structure4 - great resource for converting html4 and xhtml1 to html5 and trade-offs
 
-
* A List Apart Resources
 
-
** Progressive Enhancement and JavaScript coding practices:
 
-
*** http://www.alistapart.com/articles/progressiveenhancementwithjavascript/
 
-
*** http://www.alistapart.com/articles/behavioralseparation
 
-
** [http://www.alistapart.com/topics/code/html5/ HTML5 topics at A List Apart]
 
-
** Get Ready for HTML5: http://www.alistapart.com/articles/get-ready-for-html-5/
 
-
* http://blog.templatemonster.com/2010/06/16/25-html5-tutorials-techniques/
 
-
* Really terrific article on semantics of html5 elements: http://designshack.co.uk/articles/html/html5-semantic-changes-3-of-4
 
-
* Summary of elements and attributes! very nice: http://www.whatwg.org/specs/web-apps/current-work/multipage/section-index.html
 
-
* Nice article about web forms, html5 features: http://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/
 
-
* Nice graphic of HTML5/CSS3 Readiness in browser versions
 
-
* Nike's Better World site, first page is HTML5 (a very cool design!) http://nikebetterworld.com/index
 
-
* Bibliotype: HTML5 implementation of a browser book-reader: http://www.alistapart.com/articles/a-simpler-page/, http://craigmod.com/bibliotype/demo/, https://github.com/cmod/bibliotype
 
-
* Article covering the new APIs: http://blog.frontendforce.com/2010/04/html5-javascript-api-whats-new/
 
-
* Article about drag-n-drop: http://html5doctor.com/native-drag-and-drop/
 
-
* Article about video controversy: http://techcrunch.com/2011/01/14/google-h264-flash/
 
-
* W3C HTML5 Logo: http://www.w3.org/html/logo/#the-logo
 
-
* Joke site for IE9: http://theie9countdown.com/
 
-
* Javascript Garden: http://bonsaiden.github.com/JavaScript-Garden/
 
-
* HTML5 Attributes: http://www.htmlgoodies.com/primers/html/article.php/3875431/Whats-New-with-HTML-5-Global-Attributes.htm
 
-
* Information about IE and handling of errors, standards mode, and versioning: http://www.alistapart.com/articles/beyonddoctype/
 
-
* Good article on local storage: http://www.ibm.com/developerworks/xml/library/x-html5mobile2/
 
-
* Presentation on HTML5 and semantics (good overview and good fodder for our presentations): http://adactio.com/extras/slides/microformatsHTML5/HTML5.html
 
-
* CSS Media Queries: http://www.w3.org/TR/css3-mediaqueries/
 
Line 403: Line 329:
-
=== Resources ===
 
- 
-
* Nice color picker: http://html-color-codes.info/
 
-
* CSS3 Generator: http://css3generator.com/
 
-
* CSS3 Please: http://css3please.com/
 
-
* CSS3 Guru (twitter, with links to articles)
 
-
* CSS3 Info blog: http://www.css3.info/
 
-
* Collection of CSS3 examples: http://www.robertnyman.com/css3/, includes info about support in browsers
 
-
* CSS3 PDF: http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf, contains all supported properties in CSS3
 
-
* http://www.css3.com/ is a great site with TONS of info about CSS
 
-
* Opera site with info on CSS support in various versions of Opera: http://www.opera.com/docs/specs/presto27/
 
-
* Support for HTML5/CSS3 in Firefox 3.5: https://developer.mozilla.org/en/firefox_3.5_for_developers
 
-
* CSS selectors test: http://tools.css3.info/selectors-test/test.html
 
-
* Test browser support of CSS3: http://www.findmebyip.com/#target-selector
 
-
* Nice table of browser support for HTML5/CSS3: http://caniuse.com/#statuses=rec,pr,cr,wd
 
-
* Great page that explains radial gradients for webkit and moz: http://www.the-art-of-web.com/css/radial-gradients/
 
-
* Examples of CSS transitions and animations: http://webdeveloperjuice.com/demos/css/css3effects.html#first
 
-
* Nice examples of CSS transform on photos:
 
-
** http://media.24ways.org/2009/14/5/index.html and tutorial: http://24ways.org/2009/going-nuts-with-css-transitions
 
-
** http://www.zurb.com/playground/css3-polaroids
 
-
** (Jquery as well) http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php
 
-
** http://www.alexandtheweb.com/demos/transitions-test.html
 
-
** http://devfiles.myopera.com/articles/1041/image-gallery.html
 
-
* Nice example of CSS menus: http://development.tobypitman.com/css/menu.html
 
-
* Matrix falling text CSS transitions example: http://girliemac.com/sandbox/matrix.html
 
-
* CSS Transitions tutorial: http://onwebdev.blogspot.com/2011/02/css3-transitions-tutorial.html
 
-
* Excellent Transitions and Animations tutorial: http://css3.bradshawenterprises.com/ and another: http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
 
- 
- 
-
Articles
 
-
* http://www.dzinepress.com/2010/03/50-excellent-tutorials-for-web-development-using-css3/ - Links to 50 tutorials on how to use various CSS3 properties
 
-
* http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html - more tutorials about CSS
 
-
* http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
 
-
* http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
 
-
* Nice article with links to resources on CSS3: http://www.w3avenue.com/2009/06/22/css3-unleashed-tips-tricks-and-techniques/, covers new stuff and browser differences
 
-
* http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it - multi-part article
 
-
* How to make drop-down menus with CSS3: http://www.cssplay.co.uk/menus/css3-drop-everything.html
 
-
* CSS3 and jQuery: http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html
 
-
* Some neat typography with CSS3: http://creativefan.com/way-cool-css3-typography-experiments/
 
- 
- 
-
Libraries
 
-
* http://cssuseragent.org/ JS library to get around browser differences
 
-
* http://www.modernizr.com/ for HTML5 and CSS3 - seems to be *the* library that everyone is using for cross-browser support for HTML5
 
Line 486: Line 368:
** CSS Button with gradient, border radius (exercise), text-shadow (exercise), add shadow to button (exercise)
** CSS Button with gradient, border radius (exercise), text-shadow (exercise), add shadow to button (exercise)
-
=== Resources ===
+
=== Font Resources ===
* Really beautiful web site illustrating the use of fonts: http://lostworldsfairs.com/
* Really beautiful web site illustrating the use of fonts: http://lostworldsfairs.com/
Line 565: Line 447:
or write HTML4.1 and use class names to simulate the new elements you want for an easier transition in the future.
or write HTML4.1 and use class names to simulate the new elements you want for an easier transition in the future.
Address briefly in the book, but assume users are NOT using IE8 to test pages.
Address briefly in the book, but assume users are NOT using IE8 to test pages.
 +
 +
 +
= Resources =
 +
(This section needs redoing, moved all HTML5 JavaScript API stuff to http://commons.oreilly.com/wiki/index.php/HF_HTML_5)
 +
 +
* http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=241
 +
* http://www.w3.org/TR/html5-diff/
 +
* http://blog.whatwg.org/category/tutorials
 +
* http://www.alistapart.com/articles/previewofhtml5/
 +
* http://www.webstandards.org/learn/articles/askw3c/sep2003/
 +
* http://html5doctor.com/html-5-xml-xhtml-5/
 +
* http://www.zeldman.com/2009/07/07/in-defense-of-web-developers/
 +
* http://www.alistapart.com/articles/get-ready-for-html-5/ - covers relationship between HTML 5 and XHTML 5, form input, canvas
 +
* http://9elements.com/io/?p=153
 +
* http://www.ddj.com/article/printableArticle.jhtml?articleID=219401362&dept_url=/web-development/
 +
* http://html5gallery.com/
 +
* http://www.alistapart.com/topics/topic/htmlxhtml/ - list of HTML / XHTML related articles on A List Apart
 +
* http://mobiforge.com/designing/story/comparison-css-21-css-mp-wcss-and-css-level-1 - comparison of CSS versions
 +
* http://www.slideshare.net/svcseattle/designing-iphone-apps - Great presentation on HTML5 and CSS on mobile by Brian Fling, who is writing [http://mobiledesign.org/book/ Mobile Design for O'Reilly]
 +
* http://diveintohtml5.org/ - online book about HTML5 - really great resource
 +
* http://css-tricks.com/what-beautiful-html-code-looks-like/
 +
* Example of cool stuff you can do: http://9elements.com/io/?p=153
 +
* 30 influential people in web design: http://www.webdesigndev.com/roundups/30-most-influential-people-in-web-design
 +
 +
== Mobile Resources ==
 +
 +
* http://www.alistapart.com/articles/smartphone-browser-landscape/ - Dec 2010
 +
 +
 +
 +
== '''HTML5 Resources''' ==
 +
 +
* W3C HTML5 Reference: http://www.w3.org/TR/html-markup/Overview.html#toc
 +
* Net Renderer: test your pages on IE: http://ipinfo.info/netrenderer/
 +
* Dive Into HTML5: http://diveintohtml5.org/, http://diveintomark.org/archives/2011/01/09/dive-into-2010
 +
* Net Tuts: HTML5 and You: http://net.tutsplus.com/sessions/html5-and-you/
 +
* 4 part series on HTML5 at InfoWorld: http://infoworld.com/d/application-development/html5-in-the-web-browser-html5-forms-890
 +
* http://craftymind.com/factory/html5video/CanvasVideo.html - awesome example of using video and canvas
 +
* http://apirocks.com/html5/html5.html - Presentation using HTML 5 about new features
 +
* Amazing art created with HTML5
 +
** 389.com - several art projects: http://www.the389.com/
 +
** ChromeExperiments - several art projects:
 +
*** http://www.chromeexperiments.com/detail/harmony/ - Sketch into canvas
 +
*** http://www.chromeexperiments.com/detail/wavy-scrollbars/ - Wavy scrollbars
 +
* Lovely balls! http://mrdoob.com/projects/chromeexperiments/ball_pool/
 +
* Google's HTML5 "book" http://www.20thingsilearned.com/
 +
* http://radar.oreilly.com/2010/03/why-html5-is-worth-your-time.html - why it's worth learning html5
 +
* http://boblet.tumblr.com/post/141239118/html5-structure4 - great resource for converting html4 and xhtml1 to html5 and trade-offs
 +
* A List Apart Resources
 +
** Progressive Enhancement and JavaScript coding practices:
 +
*** http://www.alistapart.com/articles/progressiveenhancementwithjavascript/
 +
*** http://www.alistapart.com/articles/behavioralseparation
 +
** [http://www.alistapart.com/topics/code/html5/ HTML5 topics at A List Apart]
 +
** Get Ready for HTML5: http://www.alistapart.com/articles/get-ready-for-html-5/
 +
* http://blog.templatemonster.com/2010/06/16/25-html5-tutorials-techniques/
 +
* Really terrific article on semantics of html5 elements: http://designshack.co.uk/articles/html/html5-semantic-changes-3-of-4
 +
* Summary of elements and attributes! very nice: http://www.whatwg.org/specs/web-apps/current-work/multipage/section-index.html
 +
* Nice article about web forms, html5 features: http://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/
 +
* Nice graphic of HTML5/CSS3 Readiness in browser versions
 +
* Nike's Better World site, first page is HTML5 (a very cool design!) http://nikebetterworld.com/index
 +
* Bibliotype: HTML5 implementation of a browser book-reader: http://www.alistapart.com/articles/a-simpler-page/, http://craigmod.com/bibliotype/demo/, https://github.com/cmod/bibliotype
 +
* Article covering the new APIs: http://blog.frontendforce.com/2010/04/html5-javascript-api-whats-new/
 +
* Article about drag-n-drop: http://html5doctor.com/native-drag-and-drop/
 +
* Article about video controversy: http://techcrunch.com/2011/01/14/google-h264-flash/
 +
* W3C HTML5 Logo: http://www.w3.org/html/logo/#the-logo
 +
* Joke site for IE9: http://theie9countdown.com/
 +
* Javascript Garden: http://bonsaiden.github.com/JavaScript-Garden/
 +
* HTML5 Attributes: http://www.htmlgoodies.com/primers/html/article.php/3875431/Whats-New-with-HTML-5-Global-Attributes.htm
 +
* Information about IE and handling of errors, standards mode, and versioning: http://www.alistapart.com/articles/beyonddoctype/
 +
* Good article on local storage: http://www.ibm.com/developerworks/xml/library/x-html5mobile2/
 +
* Presentation on HTML5 and semantics (good overview and good fodder for our presentations): http://adactio.com/extras/slides/microformatsHTML5/HTML5.html
 +
* CSS Media Queries: http://www.w3.org/TR/css3-mediaqueries/
 +
 +
=== CSS Resources ===
 +
 +
* Nice color picker: http://html-color-codes.info/
 +
* CSS3 Generator: http://css3generator.com/
 +
* CSS3 Please: http://css3please.com/
 +
* CSS3 Guru (twitter, with links to articles)
 +
* CSS3 Info blog: http://www.css3.info/
 +
* Collection of CSS3 examples: http://www.robertnyman.com/css3/, includes info about support in browsers
 +
* CSS3 PDF: http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf, contains all supported properties in CSS3
 +
* http://www.css3.com/ is a great site with TONS of info about CSS
 +
* Opera site with info on CSS support in various versions of Opera: http://www.opera.com/docs/specs/presto27/
 +
* Support for HTML5/CSS3 in Firefox 3.5: https://developer.mozilla.org/en/firefox_3.5_for_developers
 +
* CSS selectors test: http://tools.css3.info/selectors-test/test.html
 +
* Test browser support of CSS3: http://www.findmebyip.com/#target-selector
 +
* Nice table of browser support for HTML5/CSS3: http://caniuse.com/#statuses=rec,pr,cr,wd
 +
* Great page that explains radial gradients for webkit and moz: http://www.the-art-of-web.com/css/radial-gradients/
 +
* Examples of CSS transitions and animations: http://webdeveloperjuice.com/demos/css/css3effects.html#first
 +
* Nice examples of CSS transform on photos:
 +
** http://media.24ways.org/2009/14/5/index.html and tutorial: http://24ways.org/2009/going-nuts-with-css-transitions
 +
** http://www.zurb.com/playground/css3-polaroids
 +
** (Jquery as well) http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php
 +
** http://www.alexandtheweb.com/demos/transitions-test.html
 +
** http://devfiles.myopera.com/articles/1041/image-gallery.html
 +
* Nice example of CSS menus: http://development.tobypitman.com/css/menu.html
 +
* Matrix falling text CSS transitions example: http://girliemac.com/sandbox/matrix.html
 +
* CSS Transitions tutorial: http://onwebdev.blogspot.com/2011/02/css3-transitions-tutorial.html
 +
* Excellent Transitions and Animations tutorial: http://css3.bradshawenterprises.com/ and another: http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
 +
 +
 +
Articles
 +
* http://www.dzinepress.com/2010/03/50-excellent-tutorials-for-web-development-using-css3/ - Links to 50 tutorials on how to use various CSS3 properties
 +
* http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html - more tutorials about CSS
 +
* http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
 +
* http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
 +
* Nice article with links to resources on CSS3: http://www.w3avenue.com/2009/06/22/css3-unleashed-tips-tricks-and-techniques/, covers new stuff and browser differences
 +
* http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it - multi-part article
 +
* How to make drop-down menus with CSS3: http://www.cssplay.co.uk/menus/css3-drop-everything.html
 +
* CSS3 and jQuery: http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html
 +
* Some neat typography with CSS3: http://creativefan.com/way-cool-css3-typography-experiments/
 +
 +
 +
Libraries
 +
* http://cssuseragent.org/ JS library to get around browser differences
 +
* http://www.modernizr.com/ for HTML5 and CSS3 - seems to be *the* library that everyone is using for cross-browser support for HTML5

Revision as of 21:00, 28 November 2011

Contents

Plan for HF HTML 2ed

Update HF HTML to *be* HTML5:

  • Doctype updates
  • new structural elements from HTML5
  • new CSS selectors
  • a few CSS properties (e.g. box shadow, text shadow, rgba, text layout, etc.)
  • new CSS layout (table, flex)
  • possibly simple transforms
  • some of the Forms stuff
  • REMOVE: moving from transitional to strict
  • MOVE: XHTML chapters to end


Errata to fix

Confirmed Errata (not complete, still working on this list):

  • Page 19 - include info on how to find File > Open in IE (it can be hidden)
  • First example (page 30) - make sure it works in all browsers (including IE6)
  • Page 323 - lounge.html should be elixir.html


Chapter Updates and New Chapters

  • Across the board - we'll need some browser Watch It's for features not supported in certain browsers. I like doing the Watch It's for this because they are easy to take out later!

Chapter 1: The Language of the Web

  • Update instructions to create file and load into browser
    • Use Firefox or IE8
    • Update security issue for files/images (chapter 5 too)
  • Page 6 - need question about "I've heard about HTML5, what's the story"
  • Page 12 - Step 3: Update Keep in Dock - it's now in the Options> submenu (need new screenshot)
  • Page 13 - Step 5: Options still the same, but screenshots of preferences menus are different, need to update those
  • Pages 14, 15, 18, 19, 20 - Update screenshots of windows
  • Page 16 - Update apps - golive is dead, fp is dead
  • Page 16 - Add new browsers to list - chrome, etc
  • Page 29 - A little issue here, we use type="text/css", which needs to change. Further we use it to introduce the idea of an "attribute", I'd suggest a simple comment and go with it, and later we can explain ti can be relaxed. The NDQs below is probably the place to say it isn't necessary.
  • Page 36 - Just a note on attributes here - I think it is okay as is.

Chapter 2: Meeting the HT in HTML

  • Page 51 - style use here.
  • Page 51 - strictness language is too strong, needs to be backed down (minor issue)
  • Page 52 - update reference to definitive HTML source
  • Page 55 - Just a note to look a <a> usage in case it has any slight changes

Chapter 3: Web Page Construction

  • Page 77 - Reference to Toolman may be too dated

Chapter 4: A Trip to Webville

  • Page 145 - style usage
  • Page 149 - Need santity check on title attribute in <a>
  • Page 157 - Making sure _top is still kosher

Chapter 5: Meeting the Media

  • Use PNG as primary format along with JPG and GIF
  • Update images of iPod
  • Page 169-170, 175, 192, 205 - needs to include PNG
  • Page 178 - may appear dated - use iPod Touch perhaps
  • Page 182 - check default size guidelines given - still valid?
  • Page 185-190 - Use Online tool, not photoshop elements

Chapter 6: Serious HTML

This chapter has some real work in it

  • Page 225 - add Chrome to list
  • Page 226-227 - Write the history to kill XHTML and add HTML5
  • Page 228-233 - change HTML4.01 to HTML5, including text and doctypes. Fairly minor treatment.
  • Page 234-237 - look at validator, adopt for html5
  • Page 240 - shorten meta to html5 version, question 2 of the NDQ probably needs to go, we'll fill in another.
  • Page 241 - this may go away, probably not an issue with the html5 validator
  • Page 243-250, 256-258 - all get deleted
  • Page 251 - some of this may be worth saving, let's see how the validator path works out
  • 254 - check semantics against html5
  • 255 - need to consider impact on this chapter to these questions.
  • 260 rework in html5
  • 261 - clean this out, change forward reference

Chapter 7: Putting the X in XHTML

All pages are deleted, in their place a small memorial intermission page.

Update: wondering if we should keep the chapter, move it to the end and say for people who really want to do XHTML, XHTML1.1 is alive and well for documents.

Chapter 8: Adding a Little Style

  • Update all code to HTML5 (remove DOCTYPEs etc.) e.g. page 291
  • Change all references of XHTML to HTML
  • Update p305 for closeup
  • Update p324-325 to use HTML

Chapter 9: Fonts and Colors

  • Update all code to HTML5 (remove DOCTYPEs etc.) e.g. page 349
  • Change all references of XHTML to HTML
  • Page 351: forward ref to using font extensions?
  • Page 355: Update Watch It? - this would also affect NDQ on 358
  • Page 368: Update description of rgb colors to include rgba? (and use in example?)
  • Page 372: Change color chooser to be web-based? color picker is very similar to web based color pickers
  • Page 373: Update screen shot of wikipedia color chart?
  • ADD: @font-face; how to link to and use Google fonts
  • Do we want to add any other text decoration, like text-shadow?

Chapter 10: The Box Model

  • Change all references of XHTML to HTML
  • Update 2 minute guide to borders to include:
    • border-radius
    • possibly border-image
  • Add box-shadow in the Border fit and finish section?
  • Update p422 - expand to use CSS media queries instead of media attribute (http://www.alistapart.com/articles/responsive-web-design/)

Chapter 11: Advanced Web Construction

  • Currently focuses on divs and spans
  • Update all code to HTML5 (remove DOCTYPEs etc.)
  • Change all references of XHTML to HTML (and update style of tags, depending on what we do - XML style or regular style)
  • Modify example to include ::pseudo-element? We could use ::first-letter and style the first letter of a paragraph or something
  • Last page of this chapter is a cliff hanger for what will now be chapter 13 (was, chapter 12). I think this can still work, but we may need to revisit

Chapter 12 (NEW): Semantic Structure

  • Need a nice transition from Advanced Web Construction
  • Be right up front that everything we did in Chapter 11 is HTML4. Now, with HTML5 we have more elements for "construction"
  • I think we can use chapter 2 from HF HTML5 almost as is in this place with a good transition in place.
  • We'll probably want to use the lounge as an example (along with Bleeding Edge gadgets). Could add some exercises for the reader to update the lounge files

Chapter 12: Layout and Positioning

  • QUESTION: Should table layout replace float entirely? very possibly. But we still need to describe flow and so would need a whole different lead into flow. This would be a MAJOR change.
  • Change all references of XHTML to HTML (and update style of tags, depending on what we do - XML style or regular style)
  • Ref to super brain power needs to change
  • p497: Flexible box layout (ie, can change the flow) - add section to describe flexible box layout here? Lounge isn't a great example to use it with (Starbuzz is better, but we may need to describe it here since it goes with the "flow" section).
  • p500: Markup for Starbuzz - use semantic structure for header, footer, sidebar
  • p503: Goal for Starbuzz - show *even* columns to motivate table or flex-box layout?
  • p507: Fixing the two-column problem - should lead into table and flex-box layout here... but I think the discussion on liquid vs. frozen is really good and important.
  • p519: This is probably where we want to go to the flex-box and table layout options.
  • If we do it on p519, then we'll need another example to demonstrate absolute positioning that we can use to lead into relative positioning
  • p530: We'll need to change the fireside chat. Can we have a four-way chat? that would probably be too confusing
  • Major Issue: Going to be a challenge to present all the layout options and keep clear when to use what and why
  • Three columns and beyond - update to use table/flex - can we make this an exercise? It's very easy to do with table or flex

Chapter 13: Tables and More Lists

  • Change all references of XHTML to HTML
  • p566: can we use nth child selectors to color alternating rows in the table? If not, we can use that on the list of items Tony is taking with him (p579)

Chapter 14: HTML Forms

Some of these can end up in the "What more could possibly go into a form" section?

  • New input element attributes:
    • autofocus
    • autocomplete
    • list (use with datalist element)
    • required
    • range - easier form of validation than regex
    • regex - difficult to explain because it would need regular expression discussion, but it's very powerful. Could put this into an NDQ and forward ref to appendix?
    • placeholder
  • New input types - updates pp598, 599
    • URL
    • Email
    • Telephone
    • Color

(Add Email and Telephone to Starbuzz example, p602 and beyond)

  • New form elements
    • datalist
    • progress
    • meter
    • Skip: keygen, output (although, output is very cool, could compute price and tax or something on Starbuzz with this)

QUESTION: Should we use a table for layout or use the table CSS layout instead? probably the latter! If so, then the section starting with the fireside chat on page 624 will change to use the table layout instead of html table.

Resources

Appendices

  • #1 More selectors - expand?
  • #2 Frames - remove!
  • #3 Expand to include Video and Audio HTML
  • #4 Update for latest tools
  • #5 Update to include JS APIs for HTML5
  • #6 Bring up to date (probably want to replace Perl with Rails)
  • #7 Update with latest on SEO
  • #8 probably fine as is, except use media queries instead
  • #9 Update a lot! Mobile is huge now. Use media queries.
  • #10 Probably okay as is unless we want to expand to include Wordpress
  • #11 (Extra!!) What's in HTML5, with pointer to HF HTML5
  • Possible appendix: webkit CSS properties: transition, reflect, mask, etc.

HTML5 Tags

Sectioning Content

  • article: A composition that forms an independent part of a document, page, application, or site.
  • aside: Content that is tangentially related to the content around the aside element
  • nav: A section with navigation links.
  • section: A generic document or application section.

Heading groups

  • hgroup: Used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

Flow content

  • header: A group of introductory or navigational aids.
  • footer: A footer for its nearest ancestor sectioning content. No heading content descendants, no sectioning content descendants, and no header or footer element descendants allowed.
  • figure: Content, optionally with a legend, that is self-contained and is typically referenced as a single unit from the main flow of the document.

Phrasing content

  • mark: A run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
  • time: A time on a 24 hour clock, or a precise date in the Gregorian calendar.

Input types

New input types include: search, tel, email, url, datetime, datetime-local, date, month, week, time, number, range and color.

  • number: A text field or spinner control. <input type="number" min=0 max=10>
  • range: A slider control. <input type="range" min=0 max=100>
  • color: A colour well. <input type="color" value="#000000">


Updates to existing tags and topics

W3C

  • Update all screenshots and pages related to validation - w3c changed the validator since these pages were done

Metadata content

  • style: The optional scoped attribute indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole document.
  • script
  • Character encoding: <meta charset="utf-8">

Forms

  • input element can now check input using attributes. min, max, url, email, date, and time. Also regular expressions, but probably won't go into depth in book on these

Definite Topics

  • DOCTYPE
  • How to use HTML 5 element names without messing up old browsers
  • Transitioning to HTML5 strict from HTML - is there a doctype for html5 strict? not sure that there is, but we still transition them the same way by writing "strict" code before going to XHTML5.
  • Transitioning to XHTML5 from HTML5. Update XHTML chapter to reflect XHTML5 - strict version of HTML5. Same issues with mime types and servers.


Ideas

Which elements would you invite to a cocktail party? Which ones would you want to stay home?

HTML5 has new elements, updated elements, and obsolete elements

Content models - instead of just "inline" and "block" we now have more categories of content (see http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#content-models). Could we do an updated tag soup that splits the elements into the groups just like they do in the spec?

  • Inline and Block? Need to figure out how this works now, and how it relates to inline, block in CSS
  • Probably will just do a regular tag soup on the most common elements and ignore the categories. They don't seem to be that important unless you want to understand HTML at a developer/implementor level.

Need to explain difference between "sectioning" content and "grouping" content - hard to understand (see http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/) - may be way to complex to get into.

New elements to talk about: section, header, footer, nav, aside (see http://html5doctor.com/understanding-aside/), article, time, abbr (ones to add to the tag soup, but probably not talk about much: hgroup, meter, progress, mark, ...)

Old elements that have semantic meaning: i, small,

Old elements that have had a serious update: a

Elements that are now obsolete: acronym, and all the old "presentational" elements we hope you weren't using anyway (like font, big, etc.)

Use semantic elements instead of div - adds meaning to your content, you'll need to style yourself. (how to handle different browsers styling default different? use css reset!)

Examples we could use:

  • Newspaper - I think a "Webville Times" example might encompass many of the ideas we want to talk about in this chapter. We can bring it back later if we want/need to (e.g. to show columns in CSS or offline storage)
    • basic page
    • create an outline; use hgroup to leave out the 'taglines'
    • add a table? or blockquote? to leave out of the outline?

Resources

Adding your own Style

- Meet CSS3, overview of CSS3

Rethink: - FOCUS on animations and transitions ("rich web apps" experience) - Leave the rest for a rewrite in HTML

Things to cover

  • Simple animations
  • Simple transitions

Example Ideas

  • Comic book; use arrows to slide new pages in and out; use hover to transform images on mouse over (e.g. mouse over "POW" and it gets a lot bigger)

Things for HF HTML rewrite

  • Browser-specific properties (and generics for later)
  • New selectors
    • Attribute selectors
    • Sibling selector
    • Pseudo-classes
    • Pseudo-elements
  • Media Queries
  • Opacity
  • Drop Shadow
  • Text Shadow
  • Gradients
  • Border radius / image

Maybe's... (probably leave out)

  • Box-model sizing
  • Multiple backgrounds

NDQs

  • When I look up some of these CSS things, I see "modules". What's that all about?



Not that kind of Text'ing

- Overview of new font, multicolumn and text capabilities

Stuff we could cover


Example Ideas

Tony

  • Tony wants to add a "my story" to his website, and link to his blog from there. This page would have a design that requires:
    • Multi-column layout of text to excerpt the eBook he's writing about his travels
    • Pseudo-classes to make some of the text look "book like"
    • Media queries to have a mobile version as well as a web version
    • Drop shadow on a picture at the top

Starbuzz

  • Starbuzz CEO comes and says, I've redone my site to include some of the semantic elements (show HTML). Now I need help with the CSS. Can you fix my columns for once and for all with CSS; can we use the multi-column text thing you just did for Tony?
  • Exercise: can you?
  • No, you can't. Introduce flexible box layout and table-cell layout to solve problem.
  • Other enhancements:
    • Text shadow on the headings
    • Border radius (and we can show border image too as a sidebar)
    • CSS Button with gradient, border radius (exercise), text-shadow (exercise), add shadow to button (exercise)

Font Resources


Custom Data Attributes, Data Sets


Cache Manifest

If you're running apache, you can try this on your own web server.

If you are running Apache2: First you'll need to add the text/cache-manifest mime type to your Apache mime.types file.

Locate this file in /etc/apache2. Edit this file - you'll need to use sudo or use a root account to do this. E.g. sudo vi mime.types Find the mime types starting with text and add the line

text/cache-manifest manifest 

to this file.

Save, and restart Apache. If you're on a Mac, the easiest way to do this is to go to System Preferences -> Sharing and turn web sharing off then back on.

Create your manifest file. This will include every file you want to cache from your web application. This would include html, css and javascript files, as well as images.

Then create your website and in the header of every .html file you'll need to include the manifest attribute on the html tag and link to your manifest file.

Examples:

  • Show basic example of a small website that lists all files
  • Show "fallback" to remove the need to list all files
  • Show an example that shows progress of download to cache, completion and hot swap to newly cached version - illustrate by changing information on the web pages after it's already been cached once

Because most browsers are set up to cache static files for several hours, if you change your manifest file you may see it take effect in your browser (say, during testing), because the browser is not retrieving the new manifest file.

You can add a .htaccess that forces the server to expire the caching on the manifest file after every request.

Mobile

Mobile web pages using HTML - make the appendix an entire chapter. This should probably be the last chapter as it touches on all the things we discuss in the book. Could potentially focus on the iPhone

Ideas:

  • Viewport
  • Size of web page
  • Conditional CSS and CSS Media Queries
  • Custom webkit extensions for iPhone
  • Creating a home screen icon
  • Video and Audio
  • Form design and style
  • etc.
  • Accessing the debug console (? more useful for javascript)
  • Best practices for Mobile Web pages


IE issues

how to make HTML5 work in IE8:

Use the javascript hack (see http://oli.jp/2009/html5-structure4/) or write HTML4.1 and use class names to simulate the new elements you want for an easier transition in the future. Address briefly in the book, but assume users are NOT using IE8 to test pages.


Resources

(This section needs redoing, moved all HTML5 JavaScript API stuff to http://commons.oreilly.com/wiki/index.php/HF_HTML_5)

Mobile Resources


HTML5 Resources

CSS Resources


Articles


Libraries

Personal tools