IP490S12A

From CourseWiki

(Redirected from IP490)
Jump to: navigation, search

HTML 5 Quick Start

Course Description

Leverage your understanding of HTML 4.01 and build on it with the new capabilities in HTML 5 with support for multimedia, new forms controls, local offline storage, and geolocation. This course is a fast paced, conceptual overview for decision makers, team leaders, and people who need to know how HTML5 is relevant now, and what aspects will be relevant later. This is an exploration of the new HTML5 elements and capabilities, compatibility issues and concerns about where HTML is going and how HTML5 will shape the future. For an in-depth, workshop oriented course please see: HTML5 Part I
Prerequisites: Fundamentals of HTML (4). Prior exposure to JavaScript and Cascading Style Sheets would be very helpful but is not required for this course.
Technical Prerequisites: Access to the Internet

Duration: 12 hours (4 evening sessions)

Register for this course

Theoretical Objectives

Discuss / Answer:
  • What is HTML 5?
  • Where it fits in with other technologies
  • What's new in HTML 5
  • Support in Browsers
    • Workarounds and Tools
  • Support in development tools
  • What can I use today?
  • The Semantic Web?
  • Using the new elements
    • Heading
    • Article
    • Section
    • Footer
    • Cite, Details, Mark

 

More new Elements
  • Media elements
  • Audio
  • Video
  • Canvas
  • Form elements
  • Web Storage
  • Application Caching
  • Geolocation
    • CSS Layouts
    • Where JavaScript fits in
  • Impacts on Search Engine Optimization
  • Practical Objectives

    You will learn about creating standards compliant web sites and recognize the application of the concepts shown in the Theoretical Objectives.

    Prerequisites

    Prior experience authoring in HTML 4 is required, CSS or visual design is an asset but is not required.

    Knowledge of the following will be very helpful:

    • Cascading Style Sheets (CSS) for styling page elements
    • CSS for page layout
    • JavaScript

    Access to the internet is required to complete assignments.

    Coming Soon
    Courses coming

    Follow JimUBC on Twitter for latest course updates
    Follow JimUBC on Twitter for latest course updates


    HTML 5

    Coming Soon
    Courses coming

    Follow JimUBC on Twitter for latest course updates
    Follow JimUBC on Twitter for latest course updates

    Course Evaluation Form

    Contents

    Leverage your understanding of HTML 4.01 and build on it with the new capabilities in HTML 5 with support for multimedia, new forms controls, local offline storage, and geolocation. This course is a fast paced, conceptual overview for decision makers, team leaders, and people who need to know how HTML5 is relevant now, and what aspects will be relevant later. This is an exploration of the new HTML5 elements and capabilities, compatibility issues and concerns about where HTML is going and how HTML5 will shape the future. For an in-depth, workshop oriented course please see: HTML5 Part I (link coming)

    Prerequisites
    • Fundamentals of HTML (4). Prior exposure to JavaScript and Cascading Style Sheets would be very helpful but is not required for this course.
    • Technical Prerequisites: Access to the Internet

    Duration 12 Hours (four evenings)

    Register for this course

    Note the session content schedule is subject to change.
    The main topics and general order will remain, but what is covered in each session may vary from what is shown here.

    Samples and Demos

    Demo site

    http://dotnet.tech.ubc.ca/OnlineWork/html5/first_last00.htm (first_last00.htm would be the name of your home page)

    http://html5test.com/

    Samples on SkyDrive



    Session One

    Course Overview / Introduction

    Leverage your understanding of HTML 4.01 and build on it with the new capabilities in HTML 5 with support for multimedia, new forms controls, local offline storage, and geolocation. This course is a fast paced, conceptual overview for decision makers, team leaders, and people who need to know how HTML5 is relevant now, and what aspects will be relevant later. This is an exploration of the new HTML5 elements and capabilities, compatibility issues and concerns about where HTML is going and how HTML5 will shape the future. For an in-depth, workshop oriented course please see: HTML5 Part I (link coming)

    Prerequisites: Fundamentals of HTML (4). Prior exposure to JavaScript and Cascading Style Sheets would be very helpful but is not required for this course. Technical Prerequisites: Access to the Internet Duration 12 Hours (four evenings)

    Plan

    Media:HTML5.mmap

    HTML5

    A very quick introduction to how we got here.

    The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.
    The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

    Source: http://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATWG.3F

    What is HTML5?

    HTML is the main focus of the WHATWG community. HTML5 is a snapshot of HTML, which is being worked on by the WHATWG community and also the W3C HTML Working Group.
    HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications. Besides defining a markup language that can be written in both HTML and XML (XHTML) it also defines many APIs that form the basis of the Web architecture. Some of these APIs were known as "DOM Level 0" and were never documented before. Yet they are extremely important for browser vendors to support existing Web content and for authors to be able to build Web applications.
    Going forward, the WHATWG is just working on "HTML", without worrying about version numbers. When people talk about HTML5 in the context of the WHATWG, they usually mean just "the latest work on HTML", not necessarily a specific version. For more details, see the section called "Is this HTML5?" in the specification.

    Source: http://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATWG.3F

    In the Year 2022

    What's this I hear about 2022?
    Before the WHATWG transitioned to an unversioned model for HTML, when we were still working on HTML5 and still thought in terms of snapshot drafts reaching milestones as a whole rather than on a per-section basis, the editor estimated that we'd reach Last Call in October 2009, Candidate Recommendation in the year 2012, and Recommendation in the year 2022 or later. This would be approximately 18-20 years of development, since beginning in mid-2004, which is on par with the amount of work that other specs of similar size and similar maturity receive to get to the same level of quality. For instance, it's in line with the timeline of CSS2/2.1. Compared to HTML4's timetable it may seem long, but consider: work on HTML4 started in the mid 90s, and HTML4 still, more than ten years later, hasn't reached the level that we want to reach with HTML5. There is no real test suite, there are many parts of the spec that are lacking real implementations, there are big parts that aren't interoperable, and the spec has hundreds if not thousands of known errors that haven't been fixed. When HTML4 came out, REC meant something much less exciting than it does now. For a spec to become a REC today, it requires two 100% complete and fully interoperable implementations, which is proven by each successfully passing literally thousands of test cases (20,000 tests for the whole spec would probably be a conservative estimate). When you consider how long it takes to write that many test cases and how long it takes to implement each feature, you’ll begin to understand why the time frame seems so long.
    Now that we've moved to a more incremental model without macro-level milestones, the 2022 date is no longer relevant.

    Source: http://wiki.whatwg.org/wiki/FAQ#What.27s_this_I_hear_about_2022.3F

    WHATWG and W3C HTML Working Group

    Are there plans to merge the groups?
    No. There are people who for a number of reasons are unable to join the W3C group, and there are others who are unable to join the WHATWG group. The editor is in both groups and takes all input into account — and there are far more places where input on HTML5 is sent than just these two mailing lists (e.g. blogs, www-html@w3.org, forums, direct mail, meetings, etc).
    Which group has authority in the event of a dispute?
    The editor takes feedback from everyone into account and does not look at the source of those arguments for technical arguments.
    The W3C HTML Working Group has an escalation process that in some cases results in a decision being made that differs from the editor's original decision on a topic. So far, in most cases where this has happened, the WHATWG has gone along with the W3C's request. The remaining cases are all minor editorial issues; the exact list of differences is noted at the top of the WHATWG HTML standard in the section "How do the WHATWG and W3C specifications differ?". In general the WHATWG will ensure that the normative content of the specifications (the requirements on authors and implementors) remains the same so long as the W3C group doesn't demonstrate any serious lapses in judgement.


    Source: http://wiki.whatwg.org/wiki/FAQ#WHATWG_and_the_W3C_HTML_WG

    HTML5 Design Principles

    1. 1Introduction
    2. 2 Compatibility
    3. 3 Utility
    4. 4 Interoperability
    5. 5 Universal Access
    6. Acknowledgments

    — Source: http://dev.w3.org/html5/html-design-principles/


    Environment / Setup

    Lab / Home setup
    1. Create local directory C:\My Documents\html5
    2. FTP setup
    3. Check out Downloads
    4. Download SciTE (use ftp)
    5. HomePage Maker
    6. Create Student Template (download it from course ftp site)
    7. Download Styles.css
    8. Create footer.js and call it as a library for the footer(docName) function.

    doctype

    <!DOCTYPE html>

    The HTML syntax of HTML5 requires a DOCTYPE to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode.

    The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

    Reference: DOCTYPE

    charset

    <meta charset="UTF-8">


    Using a meta element with a charset attribute that specifies the encoding within the first 1024 bytes of the document. E.g.

    <meta charset="UTF-8">

    could be used to specify the UTF-8 encoding. This replaces the need for

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    although that syntax is still allowed.

    Reference: Character Encoding

    Workarounds and Tools

    Workarounds

    Modernizr

    Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

    Modernizr Example

    In the head section of your html page (assuming that you have modernizr.js in the same folder)

    In the body section of your page.

    More: modernizr

    html5shiv (htmlshim)

    Shim Make an unstable platform stable
    Note: This is not required if you use Modernizr because it is INCLUDED in Modernizr

    HTML5Shiv is a JavaScript workaround to enable HTML5 elements in versions of Internet Explorer before version 9 that do not support elements that are not recognized, thus allowing them to be styled by CSS.

    See: John Resig's original blog post about html5-shiv


    Source Code listing

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    HTML5 innerShiv

    Note: innershiv is now included in html5shiv (above) Used when you want to dynamically add HTML5 to the page via JavaScript.

    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    Reference article: HTML5 innershiv]


    Eric Meyer reset css

    A reset stylesheet makes sure every browser starts from the same set of display defaults. "...the styles should list all the actual elements to be reset and exactly how they should be reset" - Eric Meyer.


    Styling HTML5 elements as display:block

    Even if you don't want to reset all of the default styles using reset.css, you might want to include this in your style sheet so that these new HTML5 elements are treated as block elements.

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }

    HTML5 Canvas for Internet Explorer

    Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.




    Tools

    Sample file to validate:

    http://dotnet.tech.ubc.ca/onlinework/html5/zStudent_Template.html

    1. HTML5 Validator (whatwg.org) Note - two validators available there.
    2. HTML5 Validator (validator.nu)
    3. HTML5 Validator (w3.org)
    4. HTML5 Outliner


    Assignment 1


    Session Two

    1. Review assignments - Group Discussion
    2. Create a footer for the student template.
      • Objective - hands-on example of using a .js file
    3. A better footer.js footer.js
      • Objective - onclick navigation to validation and outlining tools

    HTML5 Elements

    Review and discuss
    HTML5 Element Index from HTML5 Doctor

    Outlining

    Discussion - Please see this sample page and then return here for the lab session.

    html5 outlining lab session

    Assignment

    To be completed before Monday July 16, 2012

    Complete the lab work

    Finish the page with outline that you started in the lab session.

    Create a page with an outline

    Create and upload a page with an outline using all of the following tags not in this order

    • <article>
    • <aside>
    • <footer>
    • <header>
    • <h1>, <h2>, <h3>
    • <nav>
    • <section>

    The content can be very brief.

    Test the page using an online html5 outline tool like: html5 outliner Note: If you are using our standard footer.js you already have a link to the outliner in the footer of your document.

    Reading

    The Importance Of HTML5 Sectioning Elements

    HTML5 Outlines (This can help if you are seeing empty headings).

    Detecting HTML5 Features

    Create and Answer Questions

    Log into PeerWise
    • Peerwise
    • Peerwise Course ID: 7565
    • Course Identifier IP490S12A
    1. By Monday night
      1. Correct any incorrect answers from questions you have answered so far
        1. Add comments where applicable and ratings for all questions.
      2. Create a question based on something new you have learned about HMTL this week.
    2. By Tuesday night
      1. Answer all unanswered questions

    Session Three

    This week we will look at

    HTML5 Element Index from HTML5 Doctor

    One More Time with Meaning

    Check out the HTML5 Logo / Badge Builder


    Semantics

    HTML5 Powered with Semantics
    Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.

    HTML5 Semantic Elements and Search Engine Optimization

    Proper use of HTML5 elements - Semantic Structure Read and discuss in pairs.

    When web developers moved from table-based to non-table-based layouts, the syntax change was relatively simple: use a <div> element instead of <table>, <tr>, or <td>. The hard part was learning how to use position, float, and clear in your css to make it all look right.
    With the transition to HTML5 the problem seems to be reversed. HTML5 doesn’t make any changes to the process of laying out a site — we still use position, float, and clear to align elements. However, there 30+ new elements in HTML5. Some are used for media (such as <audio> and <video>) and others for forms, but most of them are used for document structure. The mistake most developers seem to be making, myself included, is seeing these new elements as either extensions or replacements of the <div> elements. Both of those views are wrong.

    — Source: Proper use of HTML5 elements - Semantic Structure

    Cite Element

    The cite element represents the cited title of a work; for example, the title of a book mentioned within the main text flow of a document.

    Although previous versions of HTML implied that the cite element can be used to mark up the name of a person, that usage is no longer considered conforming. The cite element now solely represents the cited title of a work; for example, the title of a book, paper, essay, poem, score, song, script, film, TV show, game, sculpture, painting, theater production, play, opera, musical, exhibition, legal case report, or other such work.

    Example: Cite Element

    Mark Element

    The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

    Example: Mark Element

    Details Element

    The details element represents a disclosure widget from which the user can obtain additional information or controls.

    Example: Details Element (open in Google Chrome to get the full effect).

    Graphics and Effects

    HTML5 Powered with Graphics, 3D & Effects
    Graphics & Effects:

    Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.

    SVG

    SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. Scalable Vector Graphics W3C

    Can I use SVG

    Scalable Vector Graphics (click image above to see JavaScript in action).

    SVG Basics

    The coordinate system

    The default coordinate system in SVG is much the same as in HTML. It works as a two-dimensional x-y plane. The origin (where x=0 and y=0) is the upper left-hand corner. As we move right from there, x increases. As we move downward, y increases. Generally, units are measured in pixels. That is, if our browser window has a rectangle of 343 pixels high by 501 pixels wide then the lower right corner of that window will be the point (501,343).

    Image:SVGCoordinates.png

    Raster to SVG conversion:

    http://image.online-convert.com/convert-to-svg

    http://vectormagic.com


    — Source: SVG Basics

    (please follow the link above for a nice tutorial about SVG Graphics from w3.org

    — Source: w3c.org SVG

    SVG Example

    Add this to the body of one of your pages.


    <svg  xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="300" height="300">
    <g  id="svgCircles" transform="scale(1)" onclick="scaleup(10,1,'svgCircles');">
        <circle r="50" cx="50" cy="50" fill="red"/>
        <circle r="40" cx="50" cy="50" fill="green"/>
        <circle r="30" cx="50" cy="50" fill="blue"/>
        <circle r="20" cx="50" cy="50" fill="yellow"/>
    </g>
     
    <script><![CDATA[
        var scaled = false;   // toggle to determine if already scaled
        function scaleup(scalefactor, scalenormal, elem) {
            if (scaled) { scalefactor = scalenormal; }
            var x = document.getElementById(elem);
            x.setAttribute("transform", "scale(" + scalefactor + ")");
            scaled = !scaled;
        }
    ]]></script>
    </svg>
    The SVG Logo

    Scalable Vector Graphics

    <svg width="540" height="200" viewBox="0 0 540 200" style="margin:-2em 0em -3em 0em">
                   <defs>
                     <radialGradient id="radial" cx="50%" cy="50%" fx="25%" fy="25%">
                       <stop offset="0%" stop-color="#60bafc"></stop>
                       <stop offset="50%" stop-color="#409adc"></stop>
                       <stop offset="100%" stop-color="#005a9c"></stop>
                     </radialGradient>
     
                     <path id="curve" d="M18,60 C100,10 180,110 264,60" fill="none"></path>
                   </defs>
    <g id="svglogo" transform="scale(1.0)" onclick="scaleup(3.0,1.0,'svglogo');">
                   <circle cx="138" cy="50" r="38" fill="url(#radial)" stroke="#005a9c"></circle>
     
                   <text font-family="Verdana" font-size="20" fill="#ff9900"><textPath xlink:href="#curve" method="stretch" style="visibility: visible;">Scalable <tspan fill="white">Vector</tspan> Graphics</textPath></text>
    </g>    
    <script><![CDATA[
        var scaled = false;   // toggle to determine if already scaled
        function scaleup(scalefactor, scalenormal, elem) {
            if (scaled) { scalefactor = scalenormal; }
            var x = document.getElementById(elem);
            x.setAttribute("transform", "scale(" + scalefactor + ")");
            scaled = !scaled;
        }
    ]]></script>        
    </svg>

    The text is on a Cubic Bezier Curve;

    Drawing cubic Bezier curves is done using the C and c commands. Cubic Bezier curves are like quadratic Bezier curves except they have two control points instead of one. Like with lines, the uppercase command (C) uses absolute coordinates for its endpoint, where the lowercase command (c) uses relative coordinates (relative to the start point).

    source

    SVG Animation

    This doesn't work in all browsers yet. Try a few different browsers in the lab.

    <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
     
        <rect x="10" y="10" height="110" width="110"
             style="stroke:#ff0000; fill: #0000ff">
     
            <animateTransform
                attributeName="transform"
                begin="0s"
                dur="20s"
                type="rotate"
                from="0 60 60"  
                to="360 60 60"
                repeatCount="indefinite" 
            />
        </rect>
     
    </svg>

    Pseudo code (not functional because of the /* comments */ )


    <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
     
        <rect x="10" y="10" height="110" width="110"
             style="stroke:#ff0000; fill: #0000ff">
     
            <animateTransform
                attributeName="transform"
                begin="0s"
                dur="20s"
                type="rotate"
                /* rotate from 0-360&deg; around the middle of the rectangle (60,60) */
                from="0 60 60" /* beginning degrees, x-centre point for rotation, y-centre point for rotation */ 
                to="360 60 60" /* beginning degrees, x-centre point for rotation, y-centre point for rotation */
                repeatCount="indefinite" 
            />
        </rect>
     
    </svg>

    — Source: jenkov.com svg animation tutorial

    SVG Animation with JavaScript

    Click to start the animation.


    See it live: SVG Animation with JavaScript

    Elliptical Arcs

    Image:FourEllipticalArcs.png

    Four elliptical arcs sharing endpoints

    This example may be seen at http://srufaculty.sru.edu/david.dailey/svg/newstuff/arcs.svg

    <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M100 100 A 30,50 0 0,0 200,150 z"
    fill="#080" stroke="#8f8" stroke-width="5" opacity="0.5"/>
     
     <path d="M100 100 A 30,50 0 0,1 200,150 z"
    fill="#088" stroke="cyan" stroke-width="5" opacity="0.5"/>
     
     <path d="M100 100 A300,30 0 0,0 200,150 "
    fill="#880" stroke="yellow" stroke-width="5" opacity="0.5" />
     
     <path d="M100 100 A300,30 0 0,1 200,150 "
    id="red" fill="#800" stroke-width="5" opacity="0.5"/>
     
    </svg>


    — Source: Elliptical Arcs

    SVG - Traversing the DOM

    Please see: http://vector-graphics.appspot.com/t002.html

    SVG References

    What Everybody Ought to Know About SVG Right Now

    W3C SVG Primer

    SVG Authoring Guidelines

    Scriptdraw SVG Script Editor - demo tool

    SVG in HTML5 - examples

    SVG Edit:SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.

    Outcomes

    At the end of this section you should be able to

    • Recognize SVG images (Document Object Model Objects) in HTML source code
    • (optional) Write JavaScript to interact with the SVG image object by manipulating the SVG DOM object
    • After doing the section on HTML Canvas, you should be able to distinguish between the two technologies.

    Canvas

    HTML5 Powered with Graphics, 3D & Effects
    Graphics & Effects:

    Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.

    Introduction and key ideas.

    Please see Canvas - Full Discussion and Demos


    Source:



    CSS 3

    HTML5 Powered with CSS3 / Styling
    CSS3:

    CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
    Colour Tools


    This section styled by colorzilla generated gradient.

    Read more about it at:

    colorzilla


    Media

    HTML5 Powered with Multimedia
    Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!

    Audio

     <audio controls="controls" preload="auto" autobuffer >
       <source src="http://dotnet.tech.ubc.ca/html5/media/Kalimba.ogg" type="audio/ogg" />
       <source src="http://dotnet.tech.ubc.ca/html5/media/Kalimba.mp3" type="audio/mp3" />
       <source src="http://dotnet.tech.ubc.ca/html5/media/Kalimba.wav" type="audio/wav" />
       Your browser does not support the audio tag.
     </audio>

    This table details the codecs supported by today's browsers:


    Desktop browser audio codec support
    Desktop Browser Version Codec Support
    Internet Explorer 9.0+ MP3, AAC
    Chrome 6.0+ Ogg Vorbis, MP3, WAV†
    Firefox 3.6+ Ogg Vorbis, WAV
    Safari 5.0+ MP3, AAC, WAV
    Opera 10.0+ Ogg Vorbis, WAV

    Source: http://html5doctor.com/native-audio-in-the-browser/



    Try Audacity to convert audio files to different formats. Open a file and save as...


    Currently, the HTML5 spec defines five attributes for the <audio> element:

    1. src — a valid <abbr>URL</abbr> specifying the content source
    2. autoplay — a boolean specifying whether the file should play as soon as it can
    3. loop — a boolean specifying whether the file should be repeatedly played.
    4. controls — a boolean specifying whether the browser should display its default media controls
    5. preload — none / metadata / auto — where 'metadata' means preload just the metadata and 'auto' leaves the browser to decide whether to preload the whole file.

    Note preload supercedes autobuffer in the latest HTML5 spec. Previously autobuffer took a boolean value specifying whether the file is to be buffered in advance. Currently, browsers are making the transition from autobuffer to preload so we suggest that you use both attributes for the time being.

    These are the same attributes defined for the <video> element.

    See also:



    Video

     
     
    <video width="320" height="240" controls="controls">
        <source src="http://dotnet.tech.ubc.ca/onlinework/html5/downloads/MadMen2011Emmys.mp4" type="video/mp4" />
        <source src="http://dotnet.tech.ubc.ca/onlinework/html5/downloads/MadMen2011Emmys.webm" type="video/webm" />
        <source src="http://dotnet.tech.ubc.ca/onlinework/html5/downloads/MadMen2011Emmys.ogv" type="video/ogv" />
    </video>



    Reference: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#video

    See also:

    Resources:


    Assignment

    Assignment 3

    Session Four

    Forms

    Form Examples on demo site


    New Input Types

    These are the new input types in HTML5. Note: If you use one of the new input types if it’s not supported in the web browser, it will default back to a regular <input type=”text”> element: no errors, no multiple code versions to handle.

    • color
    Gives the end user a native color picker to choose a color.
    • date
    Offers a datepicker.
    • datetime
    An element to choose both date and time.
    • datetime-local
    An element to choose both date and time, with local settings support.
    • email
    A field for entering e-mail address(es) with validation
    • month
    Choose a full month. (year / month)
    • number
    Picking a number. (uses a spinner)
    • range
    Enter a value/position using a slider.
    • search
    A field for search queries.
    • tel
    Choosing a telephone number.
    • time
    Input a certain time.
    • url
    Entering a URL.
    • week
    Picking a specific week. (year / week)


    New Attributes

    Form Attributes

    New attributes for <form>:

    • autocomplete (entire form)
    • novalidate
    Input Attributes
    • autocomplete (individual input)
    • autofocus
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • height and width
    • list
    • min and max
    • multiple
    • pattern (regexp)
    • placeholder
    • required
    • step
    More Form Tips

    Validation

    Perhaps the easiest validation to add is "required"

    <input type="text" id="LastName" name="LastName" required>
     
    or 
     
    <input type="text" id="LastName" name="LastName" required="required">

    Tied in with the new input types is field level validation for email, url, number, tel, date, etc.


    Resources

    Web Storage

    Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.

    This is basically a client-side database where values are stored in name=value pairs, as strings. This data is not transmitted across the web unless you specifically write your programs to force this to happen. Normally the data resides on the user's local machine.


    Limitations: 5 megabytes (per origin) If you exceed 5 megabytes and error is thrown "QUOTA_EXCEEDED_ERR"

    Demo Site examples


    Note: If you retrieve data from storage, remember that it comes back as a string and you may need to convert that string to use it in your programs.

    Example One: Numbers

    // setting a sessionStorage item called "pageCounter" to 0
    sessionStorage.setItem('pageCounter',0)
     
    // creating a variable and retrieving the pageCounter value
    // note that we have to convert the sessionStorage item to a number 
    var pageCount = parseInt(sessionStorage.pageCounter);

    Example Two: Boolean

    // setting a sessionStorage item called "isMember" to true
    sessionStorage.setItem('isMember',true)
     
    // creating a variable and retrieving the pageCounter value
    // the expression "parseInt(sessionStorage.isMember=="true")" 
    //    returns boolean true or false 
    var isMember = parseInt(sessionStorage.isMember=="true");


    sessionStorage

    Short attention span - basically until the user closes the browser window.

    localStorage

    Persistent and so much better than cookies. The data persists until you remove it.

    Security

    Local Storage (a.k.a. Offline Storage, Web Storage)
    • Underlying storage mechanism may vary from one user agent to the next. In other words, any authentication your application requires can be bypassed by a user with local privileges to the machine on which the data is stored. Therefore, it's recommended not to store any sensitive information in local storage.
    • Use the object sessionStorage instead of localStorage if persistent storage is not needed. sessionStorage object is available only to that window/tab until the window is closed.
    • A single Cross-site_Scripting_(XSS)|Cross Site Scripting can be used to steal all the data in these objects, so again it's recommended not to store sensitive information in local storage.
    • A single Cross-site_Scripting_(XSS)|Cross Site Scripting can be used to load malicious data into these objects too, so don't consider objects in these to be trusted.
    • Pay extra attention to “localStorage.getItem” and “setItem” calls implemented in HTML5 page. It helps in detecting when developers build solutions that put sensitive information in local storage, which is a bad practice.

    Source: Open Web Application Security Project

    References

    Application Caching

    Quoting W3C

    The mechanism for ensuring Web applications are available even when the user is not connected to their network is the manifest attribute on the html element.The attribute takes a URI to a manifest, which specifies which files are to be cached. The manifest has a text/cache-manifest MIME type. A typical file looks like this:
    CACHE MANIFEST
    index.html
    help.html
    style/default.css
    images/logo.png
    images/backgound.png


     
    NETWORK:
    server.cgi

    This file specifies several files to cache, and then specifies that server.cgi should never be cached, so that any attempt to access that file will bypass the cache.The manifest can then be linked to by declaring it in the (HTML) application, like this:

    <!DOCTYPE HTML>
    <html manifest="cache-manifest">
    ...

    The server.cgi file would be white-listed (put in the NETWORK: section) so that it can be contacted to get updates from the server, as in:

    <event-source src="server.cgi">


    (The event-source element is a new feature in HTML 5 that allows servers to continuously stream updates to a Web page.)The application cache mechanism also supports a way to opportunistically cache (from the server) a group of files matching a common prefix, with the ability to have a fallback page for rendering those pages when offline. It also provides a way for scripts to add and remove entries from the cache dynamically, and a way for applications to atomically update their cache to new files, optionally presenting custom UI during the update.

    Source — http://www.w3.org/TR/offline-webapps/#offline


    Application Caching demo

    References

    Device Access

    Device Access:

    Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.

    Geolocation

    The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.

    The API is designed to enable both "one-shot" position requests and repeated position updates, as well as the ability to explicitly query the cached positions. Location information is represented by latitude and longitude coordinates.

    Source: W3C Geolocation API Specification Introduction

    Geolocation demo

    More reading

    Location Aware Browsing FAQs — Mozilla.org

    Assignment

    Assignment 4


    Questions & Answers

    Questions & Answers from IP490S12A

    Sample Files

    Optional Reading

    Assignments

    Assignment 1

    To be completed before Monday July 9, 2012 Download your 00.htm page and update the descriptions for the files we created. Then upload that page back to the server and view it at http://dotnet.tech.ubc.ca/onlinework/html5/

    See FTP Notes for details.


    Read the WHATWG FAQ - skimming it is fine. We are going for light understanding at this point.


    Assignment 2

    To be completed before Monday July 16, 2012

    Complete the lab work

    Finish the page with outline that you started in the lab session.

    Create a page with an outline

    Create and upload a page with an outline using all of the following tags not in this order

    • <article>
    • <aside>
    • <footer>
    • <header>
    • <h1>, <h2>, <h3>
    • <nav>
    • <section>

    The content can be very brief.

    Test the page using an online html5 outline tool like: html5 outliner Note: If you are using our standard footer.js you already have a link to the outliner in the footer of your document.

    Reading

    The Importance Of HTML5 Sectioning Elements

    HTML5 Outlines (This can help if you are seeing empty headings).

    Detecting HTML5 Features

    Create and Answer Questions

    Log into PeerWise
    • Peerwise
    • Peerwise Course ID: 7565
    • Course Identifier IP490S12A
    1. By Monday night
      1. Correct any incorrect answers from questions you have answered so far
        1. Add comments where applicable and ratings for all questions.
      2. Create a question based on something new you have learned about HMTL this week.
    2. By Tuesday night
      1. Answer all unanswered questions


    Assignment 3

    To be completed before Monday July 23, 2012

    Create two pages and upload them to the UBC ftp site.

    1. A page that includes has at least:
      1. two articles (content can be stubs)
      2. two sections (content can be stubs)
      3. three of the new elements we used this week
        • cite
        • mark
        • figure / figcaption
        • audio
        • video
    2. A page that uses an svg image
      • use an svg image you find on the web or create your own
    3. Within the page above, use canvas
      • draw a shape
      • do some research and figure out how to do a circle or an arc

    Related Downloads

    Online Resources

    Reading

    Dive into HTML5

    Building Apps with HTML5: What you need to know

    Using HTML5's New Semantic Tags Today

    W3C HTML5 Reference

    HTML5 Semantics

    HTML5Please Exploring what is supported in different browsers (what works).

    The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) - 2003 but still relevant

    Activating Browser Modes with Doctype

    HTML5 the Hype and the Reality Behind

    Hone Your Web Client Skills (with HTML5 and JavaScript)

    W3.org

    HTML5 Design Principles

    HTML5 differences from HTML4


    Tools

    Sample file to validate:

    http://dotnet.tech.ubc.ca/onlinework/html5/zStudent_Template.html

    1. HTML5 Validator (whatwg.org) Note - two validators available there.
    2. HTML5 Validator (validator.nu)
    3. HTML5 Validator (w3.org)
    4. HTML5 Outliner



    [[Category:IP490S12A]]

    : HTML5 QuickStart IP490W13A at UBC Robson Square
    Leverage your understanding of HTML 4.01 and build on it with the new capabilities in HTML 5 with support for multimedia, new forms controls, local offline storage, and geolocation. This course is a fast paced, conceptual overview for decision makers, team leaders, and people who need to know how HTML5 is relevant now, and what aspects will be relevant later. This is an exploration of the new HTML5 elements and capabilities, compatibility issues and concerns about where HTML is going and how HTML5 will shape the future. For an in-depth, workshop oriented course please see: HTML5 Part I
    Prerequisites: Fundamentals of HTML (4). Prior exposure to JavaScript and Cascading Style Sheets would be very helpful but is not required for this course.
    Technical Prerequisites: Access to the Internet
    Duration: 12 hours (4 evening sessions)
    Categories: UBC, HTML5, Robson Square