1. WRA 210 10/16/13 HTML VALIDATION & HTML5

2. TODAY’S AGENDA Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the Web Evolution of Web Standards Intro to HTML5 Activities along the way

3. OVERVIEW OF HTML OBJECTS lists o what are they used for? o what kinds of children do they have? o how do we create nested lists? tables o what are they used for? o how have they been (incorrectly) used in the past? o how does the tag work, what children?

4. OVERVIEW: METADATA tags o what are they good for? o what kinds of metadata can we include? o what of this metadata is still useful? why / why not? HTML Comments o what are they? o why do people use them? o how do they work? (syntax)

5. REMINDER: SAVING EXERCISES No modules for a few weeks Ungraded exercises Create a new AFs folder - exercises Create a new HTML file o name file exercise2.html or something else relevant o paste code from Thimble into it o save to AFS in exercises folder o Create new list item for "Exercises" on course page o Add sublist, create link to today's exercise

6. DISCUSS Zeldman frequently discusses the need to remove “presentation from structure.” Discuss what this means, particularly in the relationship between HTML and CSS.

7. BEFORE WEB STANDARDS Transition from print to digital technologies o New: users choose how to interact with a text o New: how do texts age as technologies evolve? Browser Wars o Browser developers made their own rules o No way to trust that a design would render the same in different browsers o Maintaining multiple versions of the same website for different browsers

8. BEFORE WEB STANDARDS The Culprits - Netscape and Microsoft

9. WHERE DO STANDARDS COME FROM The World Wide Web Consortium Started in 1994 Didn't really have teeth until 2004 Mozilla and Firefox led, others followed W3C consists of members with a vested interest in the web o Microsoft, Google, Apple, Mozilla, Adobe, etc o Group deliberates on how standards evolve

10. BENEFITS OF STANDARDS Reliable display across browsers [almost] Improved backwards compatibility Structure - Presentation - Behavior Universal support of CSS o Separation of content from presentation [almost] o Texts that transform for different audiences and tech Universal support of JavaScript o Interactive texts, advanced web services

11. BEING STANDARDS-COMPLIANT Markup must follow syntax rules All required attributes No objects with children they can't have All rules of tags followed o lowercase letters o all attributes in quotation marks o all tags closed properly (especially ) Your markup will be tested for compliance

12. VALIDATING YOUR MARKUP W3C Validator - free, easy to use W3C Validator Upload files or paste markup into it This is how you will be evaluated Test your favorite website course page See if google.com is valid o What kind of errors do we get back?

13. ACTIVITY Check your course pages for compliance Report - what kind of errors (if any)? (do this in thimble) Fix your markup (if necessary) Remember: o your markup will be graded for proper syntax o validate early, validate often

14. READ THESE THINGS https://www.apple.com/hotnews/thoughts-on-flash/ https://blogs.adobe.com/conversations/2011/11/flash- focus.html https://blogs.adobe.com/conversations/2011/11/flash- focus.html http://www.buuteeq.com/blog/html5-and-the-death-of- flash/ http://www.buuteeq.com/blog/html5-and-the-death-of- flash/ Question: o think of HTML5 and Flash in terms of standards o what are the primary advantages of HTML5 over Flash? (do this in timble)

15. WHAT HTML5 IS ABOUT Not brand new - evolutionary, not revolutionary Almost all of HTML4 survives (some things obsolete) Usable now; browser support varies Adds native support for audio, video, drawing (canvas) Simplifies a lot of complicated markup Adds new forms of semantic markup

16. LOTS OF HTML5 TO PLAY WITH Choose One o https://www.apple.com/html5/ https://www.apple.com/html5/ o http://html5demos.com/ http://html5demos.com/ o http://beta.theexpressiveweb.com/ http://beta.theexpressiveweb.com/ o http://www.chromeexperiments.com/ http://www.chromeexperiments.com/ o https://developer.mozilla.org/en-US/demos/ https://developer.mozilla.org/en-US/demos/ Play - take demos for a spin Think - these are done without Flash Significance of these being in the browser? (thimble)

17. YOU AND HTML5 Your course page template was written in HTML5 Week after next: using HTML5 semantic features to create your portfolio layouts Learn: HTML5 for Web DesignersHTML5 for Web Designers Learn: http://5stepstohtml5.comhttp://5stepstohtml5.com

18. FOR NEXT TIME Explore further - play! Read/Watch: o What is the DOM? What is the DOM? o What is CSS? What is CSS? o Lynda.com CSS Introduction Lynda.com CSS Introduction