HTML5 Tutorial

2,185 views

Published on

1. What is HTML5?
2. Brief History of HTML5
3. Tools for Development
4. New HTML5 Content Tags
5. HTML5 Shiv, Modernizr, and Polyfills with Graceful
Degradation
6. Web Forms 2.0
7. Audio and Video
8. CSS3, SVG, and Canvas

Published in: Software, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,185
On SlideShare
0
From Embeds
0
Number of Embeds
1,319
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Tutorial

  1. 1. An Intertech Course HTML5 Tutorial Davin Mickelson, davin@intertech.com Intertech Inc.
  2. 2. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 2 Intertech Instructors Who Consult, Consultants Who Teach Training • Training through hands-on, real world business examples. • Our site, your site, or live online – globally. • Agile/Scrum, Citrix, VMware, Oracle, IBM, Microsoft, Java/Open Source, and web and mobile technologies. Consulting  Design and develop software that powers businesses and governments of all sizes.  On-site consulting, outsourcing, and mentoring.  Agile, .NET, Java, SQL Server, mobile development including iPhone and Android platforms and more…. Our Company  Over 35 awards for growth, innovation and workplace best practices.  99.7% satisfaction score from our consulting and training customers.  Yearly “Best Places to Work” winner in Minnesota.
  3. 3. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 3 About Me…  Developed web applications since 1998 with:  FrontPage and Visual InterDev, FPSEs, ASP, and COM  Perl, ColdFusion <cftag>, ASP.NET: C#, VB.NET, F#  Intertech consultant/instructor since 2005  My Intertech Courses:  Complete ASP.NET 3.5/4.0  HTML5 and CSS3 for HTML4 Developers  For developers of all languages and tools  I teach .NET, SQL Server BI, TFS, jQuery, MVC, HTML5  I love reading books!  My web site and blog: http://www.mndeveloper.com  Intertech blog: http://www.intertech.com/blog New fishing hat doesn’t work!
  4. 4. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 4 Agenda 1. What is HTML5? 2. Brief History of HTML5 3. Tools for Development 4. New HTML5 Content Tags 5. HTML5 Shiv, Modernizr, and Polyfills with Graceful Degradation 6. Web Forms 2.0 7. Audio and Video 8. CSS3, SVG, and Canvas
  5. 5. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 5 1. What is HTML5?  HTML5 is the latest suggested set of standards (version 5.0) controlled by the World Wide Web Consortium (W3C) for the Hypertext Markup Language.  It is not officially recommended yet but rather is a “working draft” specification for supporting and displaying documents.  HTML5 is also the collection of new APIs that web browsers are expected to support.
  6. 6. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 6 More About HTML5  HTML5 is reverse-compatible with HTML 4.01.  HTML5 includes 30 new tags.  HTML5 includes new APIs.  We will go into greater detail shortly.  In some ways, it feels like all new web technologies were tossed into the HTML5 bucket.  Most HTML5 specifications are defined independent from each other.  Learning a little about the history of HTML5 can make it easier to understand where it is today and why.
  7. 7. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 7 2. Brief History of HTML  The HTML standards for v1, v2, and v3 were all recommended in the same year – 1995.  These early editions did not use Cascading Style Sheets (CSS) to modify the appearance of the pages.  Instead, they included tags to signify styles, such as <center>, <font>, and <b>.  HTML4 was released in 1997 with the recognition that CSS could also be used to set the “style” of a Web page.
  8. 8. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 8 Brief History of HTML  HTML 3.2 was released in January, 1997 and then HTML4.0 was released in December, 1997.  HTML 4.01 was recommended in December, 1999, fixing bugs found in the HTML 4.0 specification.  XHTML1.0, which treats HTML documents as well-formed XML documents, was released in 2002.  It relies on the HTML 4.01 specification for most of its coding requirements.  The W3C assumed that HTML would soon be pushed to the sidelines and be superseded by XHTML by the web browser developers.  The W3C continued to push for newer versions of the standard, including XHTML 1.1 and the unfinished XHTML 2.0.
  9. 9. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 9 XHTML2 Sucks  Even though XML was all the rage in the late ‘90s, the W3C was wrong about XHTML.  In 2004, the W3C had a meeting which included the plans to break compatibility with the current HTML 4.01 standards to instead pursue the XHTML 2.0 standards.  A few days later, a group of developers from several different companies who felt disheartened from the meeting felt that the W3C was leaving web browser companies behind.
  10. 10. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 10 Introducing Web Forms 2.0  They formed their own group with folks from Opera, Mozilla, and Apple and called it the Web Hypertext Application Technology Working Group (WHATWG, http://www.whatwg.org).  Led by Ian Hickson from Opera, Its purpose was to create its own set of standards for the web browsers without breaking compatibility with HTML 4.01.  Initially they created Web Form 2.0, which was folded into the HTML5 standards.
  11. 11. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 11 Paving the Cowpaths  As the W3C continued work with the XHTML 2.0 standards, the WHATWG continued with their HTML5 standards.  Recognizing that the browser developers had no interest in adding any support for the new XHTML 2.0 tags, the W3C stopped all XHTML2.0 development.  They grabbed the latest standards from the WHATWG’s site and called it HTML5.  The W3C refers to the practice of recognizing and accepting the standard practices followed by the latest browsers as “paving the cowpaths”.
  12. 12. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 12 WHATWG Lives!  Somewhat bitter about losing the control of the HTML5 standards to the W3C, the WHATWG removed the version number from their HTML standards.  They instead prefer to think of their standards as part of a “living document”, an HTML playground of sorts, that changes along with the standards.  Today, everyone is welcome to participate in helping mold the future of HTML.
  13. 13. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 13 XHTML5 is Cool, Though!  Although XHTML2 has officially been dropped by the W3C, there is a new XHTML5.  HTML5 is still case-insensitive, doesn’t require closing tags, and doesn’t require quotation marks around attribute values.  XHTML5 is a way of writing HTML5 by treating the page as a well-formed XML document.  Developers have the choice of following either standard, knowing that XHTML5 is more of a programming mindset that is not enforced by any web browser.
  14. 14. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 14 XHTML5 is Cool, Though!  The XHTML5 schema is not actually enforced by a DTD reference.  Instead, it is a set of rules followed religiously by the web developer or team of developers.  Most HTML5 development tools also support XHTML5 development.
  15. 15. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 15 HTML5’s New Tags  HTML5 includes the following 30 new tags (elements): <article> <datalist> <header> <output> <source> <aside> <details> <hgroup> <progress> <summary> <audio> <embed> <keygen> <rp> <time> <bdi> <figcaption> <mark> <rt> <track> <canvas> <figure> <meter> <ruby> <video> <command> <footer> <nav> <section> <wbr>
  16. 16. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 16 HTML5’s (New?) APIs  HTML5 includes the following APIs:  WebSockets  Web Workers  File API  Web Storage  Offline Applications  History API  Drag and Drop  Geolocation  XMLHttpRequest
  17. 17. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 17 HTML5’s New Media Tags  Graphics and media are support by the new media elements.  The <audio>, <video, and <canvas> tags are new with HTML5 and offer the ability to include media and graphics programming.  Scalable Vector Graphics (SVG) is not new with HTML5 but is another graphics engine that has been supported for some time by the more popular web browsers.
  18. 18. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 18 <canvas>  The <canvas> tag is also supported by all the latest web browsers today.  Its specification is so large that it gets its own set of documents on the W3C web site.  It supports both 2D and 3D graphics using WebGL.  It threatens to eventually end the life of Adobe Flash and Microsoft Silverlight!
  19. 19. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 19 <input type=“hmm…”>  There are also new <input> types added to web forms.  These simplify data entry within the browser on the desktop as well as on certain devices and display the data in a richer fashion.  Some client-side validation has been added,
  20. 20. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 20 What about CSS3?  CSS3 is also something that often gets mentioned with HTML5.  Although it is a completely separate and smaller specification, it is something that will also soon be supported by all the web browsers.  CSS3 had to be upgraded with HTML5.  For example, it had to be able to stylize the new HTML5 tags.  It also had to be able to set styles deeply nested in the new HTML5 outlining architecture.
  21. 21. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 21 What Supports HTML5?  HTML5 is not fully supported by today’s user agents (web browsers).  Heck – it’s barely supported at all by some!  So, we wait and develop around these browsers’ shortcomings using either polyfills or graceful degradation  These changes sometimes seem to occur almost weekly.  Why, as you were just reading this, additional support was just added to one of the user agents for the desktop, tablet, or smartphone.   REMEMBER: It is much easier (and quicker) to upgrade a simple web site with new HTML5 and CSS3 features than it is to take an existing HTML5 site and fix it to work with older browsers.
  22. 22. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 22 HTML5 Support  Please be respectful of the many reasons that a lot of Web users cannot upgrade their browsers or cannot use different browsers.  Corporate policies may prevent users from surfing with anything other than a certain brand of browser (for example, Internet Explorer) or a certain version of a web browser (IE6).  Operating systems may prevent a browser from being upgraded.  For example, Windows XP will not allow users to upgrade to IE9 or newer and some smartphones may not support upgraded browsers.
  23. 23. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 23 Most Popular Browsers  You can find out which web browsers (desktop and mobile) are the most popular ones being used today by checking out the latest updated statistics on Net Market Share’s site (http://marketshare.hitslink.com).
  24. 24. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 24 Which browsers Support HTML5?  There are several different web sites available that show what HTML5 and CSS3 features are supported by today’s web browsers.  Because HTML5 support seems to change weekly, be sure that the content has been kept up to date.  The HTML5Test web site accurately reports the HTML5 support by the browser you use to view it.
  25. 25. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 25 HTML5 Browser Support  http://www.html5test.com
  26. 26. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 26 3. Tools for Development  HTML5 and CSS3 are, of course, stored in text files.  You can use whichever text editor you prefer – even Notepad in a pinch!  Some editors give automatic support for HTML5, XHTML5, and CSS3 while other may require custom plug-ins.  Some editors are free while others are going to cost you (or your boss) some greenback$.  Thankfully, there is quite a selection of editors to choose from!
  27. 27. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 27 Online WYSIWYG Editors  You may consider a WYSIWYG web-based editor, which is primarily designed to works with page-based editing or supporting a CMS editing page.  IMPORTANT: These editors require you to use a browser that already supports most of the latest HTML5 features.  Here are some free online HTML5 web editors:  http://maqetta.org/  http://jejacks0n.github.com/mercury/  http://aloha-editor.org/  http://rendera.heroku.com/  http://www.bluegriffon.org/ (also downloadable!)
  28. 28. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 28 HTML5 Editors with Windows  For Windows, you can download any free text editor but an editor that supports HTML5 and CSS3 will be better.  CoffeeCup offers a free HTML editor that works nicely. http://www.coffeecup.com/free-editor/  Aptana Studio is a free yet awesome HTML5 editor as well. http://www.aptana.com/  Eclipse, a favorite editor used by Java developers, offers support for HTML5.  HTML5 support was added starting with the Helios editions of Eclipse (Java EE Developers or JavaScript Web Developers)  As a nice alternative, you can also use the free Eclipse plug-in from Aptana (above) for HTML5 support.
  29. 29. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 29 HTML5 Editors with Windows  ASP.NET Developers (Forms and MVC3) can use the free Visual Web Developer 2010 Express  You can install it online here: http://www.asp.net/vwd  The ASP.NET MVC 3 add-on includes support for HTML5  Visual Studio 2010 SP1 adds most of the new HTML5 tags for markup validation (HTML5 & XHTML5)  CSS3 Extension is available in the Visual Studio Gallery  Offers vender prefix IntelliSense! (-moz-, -ms-, -o-, etc.)
  30. 30. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 30 Developing on Windows Server  Special Note: Be sure the operating system you use as the host for your developer tools supports rendering and viewing all media types.  For example, some .NET developers may prefer to install Windows Server 2008 or newer instead of Windows 7 or newer to run other server-based software.  Unfortunately, Windows Server (all versions) does not include the codecs required to view certain media types within the web browser, such as MP3 and MP4 files.  You can’t develop for <audio> and <video> tags!
  31. 31. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 31 HTML5 Editors with Mac  Mac users may want to consider buy MacFlux for a nominal fee. http://www.macwareinc.com/products/MacFlux/overview.html  It’s available at other online stores as well, such as Amazon.com  Windows and Mac users may also want to just consider purchasing Adobe Dreamweaver CS5.5.  It isn’t cheap it but offers great support for implementing HTML5, CSS3, media files, and jQuery integration support. http://www.adobe.com/products/dreamweaver.html  It is priced as an upgrade, full product, or a subscription.
  32. 32. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 32 4. New HTML5 Content Tags  Most developers are initially surprised how HTML5 actually simplifies the required boilerplate markup needed for a Web page.  Fewer markups are needed by many of the tags and some attributes have been dropped for simplicity’s sake.  Great HTML5 Starting Points:  http://html5boilerplate.com/  Offers an HTML5 starting document  http://www.initializr.com/  Lets you dynamically create a custom HTML5 document with what you need it to support, then you download it.
  33. 33. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 33 Consider this XHTML Document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>This is the title of the document</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" href="bodystyle.css" type="text/css"/> </head> <body> <div id=”header1” class=”header”> <p>This is the main header content.</p> </div> <div id=”nav1” class=”nav”> <a href=”default.htm”>Home</a><br/> <a href=”products.htm”>Products</a><br/> <a href=”support.htm”>Support</a><br/> <a href=”about.htm”>About Us</a> </div> <div id=”main” class=”main”> <p>This is the body of the document.</p> <div id=”article1” class=”article”> <p>This is the first article of the document.</p> <div id=”section1” class=”section”> <p>This is the first section of the document.</p> </div> </div> </div> <div id=”footer1” class=”footer”> <p>This is the main footer content.</p> </div> </body> </html>
  34. 34. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 34 <div> Tags Everywhere!  The problem with the preceding example is that all of the content is inside of nondescript <div> tags, which outputs its contents in block format.  The developer is in charge of tracking, understanding, and remembering the purpose of each chunk of the page.  Developers often track them by giving each one a descriptive ID and/or assigning descriptive CSS class names.  The <div> chunks are then positioned (absolute positioning) using CSS rules defined in CSS style sheets.
  35. 35. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 35 <div> is Not a Description  The web browser itself, of course, does not know one <div> from another.  It just renders them all out according to the HTML, JavaScript, and CSS that has been applied to them.  Worst yet, search engine spiders hoping to optimize their results either have to try to figure out the content types from class names or IDs or just use all the content.  Even more troublesome, folks using screen reader software (such as JAWS) have a hard time navigating through a typical web site because it is up to the app to discern navigation links from content.
  36. 36. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 36 MAMA!  Opera used their MAMA engine (Metadata Analysis and Mining Application) to perform a survey of over two million web sites (URLs) and identified the most common class and ID names used with CSS style sheets.  They wanted to identify these names as potential candidates for new tags in HTML5.  If a class name had been identified to been used at least 500 times, it made the list.
  37. 37. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 37 HTML5 Version <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is the title of the document</title> <script src="jquery.js"></script> <LINK REL=stylesheet href=bodystyle.css> </head> <body> <header id="header1" class="header"> <p>This is the main header content.</p> </header> <NAV id="nav1" class="nav"> <a href="default.htm">Home</a><br/> <a href="products.htm">Products</a><br/> <a href="support.htm">Support</a><br/> <a href="about.htm">About Us</a> </NAV> <SECTION id="main" class="main"> <p>This is the body of the document.</p> <article id="article1" class="article"> <p>This is the first article of the document.</p> <section id="section1" class="section"> <p>This is the first section of the document.</p> </section> </article> </Section> <footer id="footer1" class="footer"> <p>This is the main footer content.</p> </footer> </body> </html>
  38. 38. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 38 New HTML5 Section Tags  HTML5 includes the following new Section tags: HTML5 Section Tags Official W3C Definition <article> The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. <aside> The aside element represents content that is tangentially related to the content that forms the main textual flow of a document. <footer> The footer element represents the footer for the section it applies to. <hgroup> The hgroup element represents a group of headings. <header> The header element represents the header of a section. <nav> The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links. <section> The section element represents a section of a document, typically with a title or heading.
  39. 39. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 39 Section Tag Rules – None!  The new HTML5 Section elements describe the content contained within the page.  Any of the new tags can be nested inside of each other any number of times as deemed necessary.  The key is to be consistent with the use of these tags throughout the pages on the site.
  40. 40. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 40 Consistency is the Rule!  Your primary content will probably be inside of <article> and <section> tags.  You may have an <article> broken up by <section> tags or have a few <article> tags nested within a <section>.  You might have an <article> inside of am <aside> tag or <nav> placed inside of an <aside> with nested <section> tags.  Anything is possible but as a best practice, you should do it simply and consistently as possible - get the point?  Another important reason to use Section tags is they help define a document outline.
  41. 41. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 41 Other New HTML5 Tags HTML5 Section Tags Official W3C Definition <bdi> The bdi element represents a span of text that is isolated from its surroundings for the purposes of bidirectional text formatting. <command> The command element is a multipurpose element for representing commands. <datalist> The datalist element represents a set of option elements that represent predefined options for other controls. <details> The details element represents a control from which the user can obtain additional information or controls on-demand. <keygen> The keygen element represents a control for generating a public-private key pair and for submitting the public key from that key pair. <mark> The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. <meter> The meter element represents a scalar gauge providing a measurement within a known range, or a fractional value. <output> The output element represents the result of a calculation.
  42. 42. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 42 Other New HTML5 Tags HTML5 Section Tags Official W3C Definition <progress> The progress element represents the completion progress of a task. <rp> The rp element can be used to provide parentheses around a ruby text component of a ruby annotation, to be shown by UAs that don’t support ruby annotations. <rt> The rt element marks the ruby text component of a ruby annotation. <ruby> The ruby element allows spans of phrasing content to be marked with ruby annotations. <summary> The summary element represents a summary, caption, or legend for a details element. <time> The time element represents a date and/or time. <wbr> The wbr element represents a line-break opportunity.
  43. 43. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 43 5. HTML5 Shiv, Modernizr, Polyfills and Graceful Degradation  We know that today’s browsers do not fully support HTML5 and CSS3.  The good news is that most web browsers will happily accept HTML containing any tag (made-up or HTML5) that it doesn’t recognize.  For example, Firefox doesn’t have a problem with a web page if it includes an <intertech> tag.  Most browsers will treat the unknown tag as any other tag and add it to the DOM as is, allowing it even be stylized with CSS.
  44. 44. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 44 Dog Gone IE!  The bad news is that Internet Explorer 8 and older will not accept unknown tags, including HTML5 tags, that are not part of the original HTML4 DOM.  As well, IE will not let you stylize the new HTML5 tags with CSS either, unless they have been officially created programmatically using JavaScript.  One way to use HTML5 tags and stylize them in IE 6-8 is to create the elements in the head section, like so…  The example below is using Microsoft’s proprietary optional script that only works in Internet Explorer.
  45. 45. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 45 Our Job to Fix Older IEs  The example below is using Microsoft’s proprietary (optional) script that only works in Internet Explorer. <!DOCTYPE html> <html> <head> <title>This is the title of the document</title> <!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('footer'); document.createElement('nav'); document.createElement('article'); document.createElement('section'); ... </script> <![endif]-->
  46. 46. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 46 The Famous HTML5 Shiv!  Thankfully, John Resig, creator of jQuery, created a JavaScript file called the HTML5 Shiv that we just need to reference from the top of our page.  This script automatically creates all the new elements into the DOM so they are readily available.  These new elements are not functional, but at least IE knows they exist. <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->  A shiv is a prison knife; this is really a shim!  Both can be used to shank IE! 
  47. 47. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 47 What’s a Polyfills?  A polyfill is a script or plug-in that provides an API that the developer expects the browser to provide natively.  There are many polyfills available and you can pick and choose to use whichever ones you like.  Most (if not all) polyfills are free and open source.
  48. 48. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 48 Polyfills Are Your Friends!  Polyfills are excellent at filling in where a browser is lacking a feature.  However, there will be a performance cost associated with each use of a polyfill.  You can easily bring a well performing page to its knees, depending on the size of a polyfill or how many times you use or abuse it.  Remember - polyfills will never provide any functionality that performs as fast as if it was already compiled into a supporting web browser.
  49. 49. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 49 A Classic Canvas Polyfill  Although IE9+ supports the <canvas> tag, a famous polyfill that brings basic canvas functionality to older versions of IE is Explorercanvas.  http://code.google.com/p/explorercanvas/
  50. 50. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 50 Another Canvas Polyfill  FlashCanvas is another polyfill that is supposed to perform even better. http://flashcanvas.net/  It exposes Canvas functions but uses an Adobe Flash object in the background to draw and perform just like the Canvas object.
  51. 51. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 51 CSS3 Polyfill  There are some free CSS3 polyfills to fill in the shortcomings of IE 6-9.  The PIE polyfill allows CSS3 behavior in older versions of Internet Explorer: http://css3pie.com/
  52. 52. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 52 Yepnope!  A conditional resource loader script can be used to check the browser for support for a technology and only load the polyfill if necessary.  Yepnope is one of the most popular resource loader scripts. http://yepnopejs.com/  Based on a condition that you define, it can load and cache JavaScript and CSS files asynchronously into the browser memory.  When they are done being downloaded, it can automatically call into the script(s) via a callback function.
  53. 53. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 53 Modernizr!  The most popular HTML5 script would easily be Modernizr. http://modernizr.com/
  54. 54. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 54 Modernizr Includes the Shiv!  Modernizr allows developers to test the current web browser for the support of HTML5 and CSS3 features.  If a feature isn’t supported, a polyfill can be loaded and used instead.  Modernizr actually has the HTML5 Shiv rolled into it!  Just by including Modernizr, you automatically have all the HTML5 tags added for IE 6-8 web browsers.
  55. 55. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 55 Modernizr Includes Yepnope!  Modernizr also has an unmodified version of the Yepnope script included with it.  The developers realized how much Yepnope significantly shortened the code needed to use Modernizr.  Again, no need to also include the resource loader.  Yepnope is wrapped by the Modernizr.load( ) method.
  56. 56. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 56 Modernizr Example!  Here is a simple example that checks if the current browser supports the HTML5 Geolocation feature.  If it does, it loads the geo.js script that uses the built-in functionality.  If it doesn’t, it loads the geo-polyfill.js script to supplant the Geolocation functionality and use it: Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
  57. 57. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 57 “Get Your Polyfills…”  An amazing list of polyfills are listed on the Modernizr GitHub site here:  https://github.com/Modernizr/Modernizr/wiki/HTML5- Cross-browser-Polyfills
  58. 58. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 58 6. Web Forms 2.0  Web Forms 2.0 was the original creation of HTML5 by the Opera team.  This is why most of these features are only supported by the Opera web browser today!  It was created by the WHATWG group in spite of W3C’s intention to move forward with the XML-based Xforms markup.
  59. 59. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 59 <output>  The <output> element is designed to be a target for displaying updated data to the user.  It could be used to display the result of a calculation performed with JavaScript. <output id="oresult"></output>
  60. 60. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 60 <datalist>  The <datalist> element can be combined with the <list> attribute of an <input> element. <datalist id=“colorlist"> <option value=“red”> <option value=“green”> <option value=“blue”> </datalist>
  61. 61. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 61 Progress and Meter  These two tags are often confused with each other.  The progress is meant to show a percentage of how far a task has completed.  The meter is intended to display a value between a starting and ending number. <progress id=“Count” value=“0” max=“100”/> <meter id=“Count” value=“0” max=“50”/>
  62. 62. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 62 7. Audio and Video  Unfortunately, no web browser supports all media formats yet  Even worse, it’s because of the politics of the underlying technologies as to why we have to suffer.  Apple and Microsoft are members of the MPEG group who manages the standards for MP3s (audio) and MP4s (audio and video).  They receive money when their technologies are used.  The remaining browser venders (Google, Opera, Firefox) are not interested in supporting them and their preferred codecs for this very reason.
  63. 63. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 63 Audio and Video  Here are the supported media types and the browsers that support them. Browsers WebM MP3/MP4 OGG/OGV Opera X X Firefox X X Chrome X X IE9 X Safari X
  64. 64. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 64 Audio and Video <audio controls autoplay> <source src=“../media/myaudio.mp3” type=“audio/mpeg”> <source src=“../media/myaudio.ogg” type=“audio/ogg”> <p>Your browser doesn’t support the HTML 5 audio tag</p> </audio> <video autoplay controls width=“640” height=“480”> <source src=“../media/myvideo.mp4” type=“video/mp4”> <source src=“../media/myvideo.ogg” type=“video/ogg”> <p>Your browser doesn’t support the HTML 5 video tag</p> </video>
  65. 65. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 65 Audio and Video  In order to support all the browsers, we need to include multiple <audio> and <video> media types so everyone can enjoy.  Even if their browser doesn’t support the audio/video codecs you offer, there is a script that can let the user fall back to a Flash video.  It is called “Video for Everybody” and it was created by Kroc Camen  http://camendesign.com/code/video_for_everybody
  66. 66. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 66 8. CSS3, SVG, and Canvas  Currently, there are four versions of CSS.  The CSS 1.0 recommendation was introduced in December, 1996.  The CSS 2.0 standard included features that were overlooked in CSS 1.0 and was recommended in May, 1998.  CSS 2.1 removed poorly-supported features and added existing Web browser extensions. It was recommended in July, 2007.  CSS 3.0 has not been officially recommended yet.  However, all browsers (Firefox, Opera, Safari, IE 8+) have already been adding support for CSS 3.0.
  67. 67. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 67 CSS3 Vendor Prefixes  As the browser vendors add new CSS3 functionality to their browsers, they set up vender prefix requirements unique to each of them.  They do this because the CSS3 standards have not yet been finalized and their implements might require bug fixes or rewriting if the standards change.  The idea is that these vendor prefixes will be removed when the CSS3 standards are finalized and the kinks are worked out of the browsers.  Thus, in order to take advantage of the latest cool CSS3 features, web developers must use them.
  68. 68. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 68 CSS3 Vendor Prefixes  There are a couple of problems with vendor prefixes.  It requires web developers to redefine a particular style several times within the CSS style sheet for each of the vendor prefixes.  Some browser venders have actually considered adding support for the “-webkit-” prefix when their particular browser starts supporting a CSS3 feature.
  69. 69. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 69 CSS3 Vendor Prefixes  The most prevalent vendor prefixes that are used with CSS3 are:  -webkit- for Google Chrome and Apple Safari  -moz- for Mozilla Firefox  -ms- for Microsoft Internet Explorer  -o- for Opera  See more here: http://wiki.csswg.org/spec/vendor- prefixes
  70. 70. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 70 CSS3 Features  CSS3 introduces several new features including:  Multi-column and grid layout  Rounded corners  Border images  Text and Box Shadows  Animations  Gradients
  71. 71. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 71 CSS3 Gradient Example  Here is the web page: <!DOCTYPE html> <html> <head> <title></title> <link href="StyleSheet.css" rel="stylesheet" /> </head> <body> <article></article> <br> <div></div> </body> </html>
  72. 72. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 72 CSS3 Gradient Example  Here is the style sheet: article { width: 300px; height:300px; background-image: -moz-linear-gradient(#f00 20%, #00f 100%); } div { width: 200px; height :200px; background-image: -moz-linear-gradient(270deg, #f00 0%, #070 100%); }
  73. 73. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 73 CSS3 Gradient Example  Here is the result:
  74. 74. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 74 SVG  SVG has been around for awhile, although IE8 and older required a plug-in to view SVG files.  It is primarily based on creating graphics from data stored in XML format.  You can use Adobe Illustrator to create SVG files.  Learn more here: http://www.w3schools.com/svg/svg_examples.asp Here is a small example: <html><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg> </body></html>
  75. 75. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 75 Canvas  The Canvas object can be used to drawing 2d and 3d images.  All the latest browsers now support the canvas object in 2d mode.  Few support the WebGL 3D mode. Try your favorite browser at http://playground.HTML5rocks.com  The Canvas object is primarily drawn on with JavaScript.  The object has no memory of where it drew on it previously.  That all must be tracked by the developer (collision detection, etc.)
  76. 76. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 76 Canvas  The primary markup to use the canvas object is this: <canvas id=“myCanvas” width=“300” height=“300”> Your browser doesn’t support the canvas object. </canvas>
  77. 77. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 77 Canvas  The JavaScript needed to use the Canvas object must first create the object before drawing on it. function drawPic() { var canvas = document.getElementById(“myCanvas”) if(canvas.getContext(“2d”) { context = canvas.getContext(“2d”); context.beginPath(); context.moveTo(100,100); context.lineTo(200,200); context.lineTo(100,200); context.closePath(); context.stroke(); } }
  78. 78. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 78 Resource List  Come to my HTML5 Class here at Intertech!  Attend in person or virtually!  The class covers much more detail.  You learn by doing in the exercises and labs.  Classes scheduled: May 24&25, July 23&24  Good books:  HTML5 Mobile Application Development in 24 Hours  HTML5 and CSS3 for the Real World  HTML5 Canvas, Great Start for Game Development  Introducing HTML5 - 2nd Edition, Warped humor and very informative! (My favorite!)  O’Reilly Canvas Pocket Reference  Visual QuickStart Guide CSS3
  79. 79. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 79 HTML5 Links  http://html5test.com  https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills  http://www.w3.org/TR/2012/WD-html-markup-20120329/  http://www.html5rocks.com/en/  http://html5labs.interoperabilitybridges.com/  http://playground.html5rocks.com/  http://www.browserscope.org/  http://css3test.com/  Many more…
  80. 80. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 80 Associated Courses and Resources Free Chapter From Intertech’s HTML5 Course • Complete HTML5 Mobile Training • Intertech Article on HTML5
  81. 81. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 81 Intertech Training  Intertech offers training in these areas:  JavaEE, open source technologies  .NET, SQL Server, SharePoint  XML, Ajax  Process/Design/Agile  jQuery and HTML5/CSS3  Delivery formats include:  Instructor-led public and onsite  Instructor-led virtual  Mentored Learning  For advanced purchase customers, Intertech offers Elite Rewards™—call 651-994-8558 +23
  82. 82. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 82 Intertech Consulting  In addition to training, Intertech delivers consulting  Consulting is part of our brand: Instructors Who Consult | Consultants Who Teach  Give your project success with our consulting services  To learn more, contact us at 651-994-8558 +11
  83. 83. Intertech Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 83 Intertech Resources http://LinkedIn.Intertech.com http://Facebook.Intertech.com http://Twitter.Intertech.com http://YouTube.Intertech.com http://www.intertech.com/FreeEvents/FreeEvents.aspx
  84. 84. An Intertech Course Q & A

×