IP491F15A

From CourseWiki

(Redirected from IP491)
Jump to: navigation, search


HTML5 2: The Semantic Web

Course Description

HTML is no longer just for the Web.  With the advent of HTML5 its influence will pervade every major mobile platform — and Windows 8.   HTML5 skills with along with JavaScript and jQuery, are becoming indispensable to developing in almost any vendor environment and on every device form factor.

In this course you will learn to identify the key features of HTML5 that distinguish it from previous versions of HTML, and build HTML5 compliant web pages that employ the most immediately relevant features in common use today.  This is also laying the groundwork for developing for other platforms.

This is a workshop oriented course in which the focus will be on building web pages. Learn strategies and tools to support cross-browser compatibility and use online tools to validate your markup. In addition to using the new semantic and multimedia elements you will learn how Canvas, Form elements, and Web Storage can contribute to rich user experiences.  You will be able to view your web pages live on the web.

Course Duration: 12 Hours (4 evenings)

Prerequisites:
HTML5 1 Fundamentals of Web Authoring

Register for this course: HTML5 2: The Semantic Web

Theoretical Objectives

At the end of the course you will be able to discuss or answer:
  • What is HTML 5?
  • Where does HTML5 fit in with other technologies?
  • What's new in HTML 5?
  • What level of support is there for HTML5 in Browsers?
    • Workarounds and Tools that support HTML5
  • 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
  • Hot Ideas

    • 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.
    Specifically, you will be able to use these new elements

    • Heading
    • Article
    • Section
    • Footer
    • Cite, Details, Mark
    • Audio
    • Video

    Prerequisites

    Fundamentals of HTML Authoring (IN320)

    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.

    Computer Equipment

    The sessions are conducted in a computer lab, and you will have a computer provided for your use. You are welcome to bring your own computer to the lab sessions if you prefer to use that. Wireless access is available in the lab.

    Please note that at times you will be doing a fair bit of typing and you will want to have a large enough screen and separate physical keyboard so that you can view content and type at the same time.

    If it appears that you are having challenges with your own device, we will ask you to use the computer provided for you in the lab.

    Storage

    Please plan to use your own cloud based storage SkyDrive, DropBox, iCloud (or similar) or a USB storage key.

    Instructional Methods

    • Hands-on labs
    • Discussion
    • Online collaboration
    • Homework assignments submitted online
    • Lecture

    Course Materials

    • Web site
    • Course notes
    • Printed copies of on-screen lecture notes available on request during lectures

    No Recording or Pictures in the Lab

    Please note: Taking pictures or video during the course sessions is not permitted. All the course materials and lecture notes are available in physical form and on the web.


    Requirements for Completion
    • Attend all sessions
    • Participate in class workshops with others (pairs and small group work)
    • Complete assignments: Typically this involves:
    • Entry in the course blog every week
    • Questions and Answers in PeerWise:
      • Create questions online: minimum 1 per week - due by midnight Mondays
      • Answer all unanswered questions online: minimum 5 per week - due by 5:00 pm Tuesdays
    • Creating web pages that use concepts introduced each week.

    See tabs for each week.

    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

    Samples and Demos

    Demo site

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

    Blog for this session Join the conversation.

    • PeerWise
    • PeerWise Course ID: 11984
    • Course Identifier IP491F15A

    http://html5test.com/

    Samples on OneDrive


    HTML5 Canadian logo

    Things to do right away
    • Set up Development Platform
    • Discuss


    • WebMatrix on Microsoft Azure FTP Settings

    Server: ftp://waws-prod-bay-001.ftp.azurewebsites.windows.net/

    Site Path: site/wwwroot

    UserName: ip491\ip491

    Password: Supplied in the lab

    Destination URL http://ip491.azurewebsites.net

    In the lab: publish profile (lab only)



    Course Evaluation Form


    Session One

    At the end of this session (and after completion of the session one assignment) you should be able to
    • Identity the three main technologies that comprise the modern web
    • Define HTML5
    • Distinguish between the W3C and WHATWG
    • List the HTML5 Design Principles
    • Describe how you might use html5shiv, reset css, modernizr
    • Create a standards compliant HTML5 web page (no content required, just the elements to meet standards)
    • Use a JavaScript library within your HTML5 web page
    • Use an online tool to validate your HTML5 web pages
    • Log into PeerWise to create and answer questions.
    • Log into the UBC FTP site to create and update web pages

    Journal

    • What do you know about HTML5?
    • In what ways to know or expect it to be different from previous versions of HTML?
    • Have you written any HTML5 web pages? What questions did you have about the process?

    To prepare for this session we will

    Hands On
    • Make a change to your 01.html page and make sure that the changes display when you view the page on the website.


    Windows

    You can use WebMatrix ⇐ follow link for detailed instructions.

    Mac

    See FTP Notes

    Reading

    Preparation for next session: Sections and Outlines of an HTML5 Document

    • Note that the first section is about HTML4 setting the scene for contrast and to high light the improvements in HTML5

    Looking back and filling in the blanks:





    If you have questions about HTML5 or this assignment - please post them in the course blog (Session One Notes). If you spot a question from someone else and you can answer it - please do.

    • Login in to PeerWise :IP491F15A
    • Create at least one new question.
    • Answer at least five questions.
      • Correct your answers if necessary.
        • Confirm your answers as you go along.
      • Help where you can to improve explanations.
      • Add comments in the questions.
      • Rate the questions.

    Detailed Instructions

    Reflect in the course blog


    Please click the picture above and answer the following questions in the course blog.

    Highlights / Metacognition
    • What did you think was the most valuable thing that happened for you tonight?
    • What did you learn from that?
    • What will you do with that knowledge?
    Questions?
    • Now that we've had our session together, what do you want to know?
    • What could we have done better?

    Course Blog Tutorial (video)

    External links / resources

    A little video

    Approximate time: 60 minutes.

    Course Overview / Introduction

    HTML is no longer just for the Web. With the advent of HTML5, its influence will pervade every major mobile platform. HTML5 skills, along with JavaScript and jQuery, are becoming indispensable to developing in almost any vendor environment and on every device form factor. In this course learn to identify the key features of HTML5 that distinguish it from previous versions, and build HTML5 compliant web pages that employ the most immediately relevant features in common use today. This is a workshop-oriented course focusing on building web pages. Learn strategies and tools to support cross-browser compatibility, and use online tools to validate your markup. In addition to using the new semantic and multimedia elements, you will learn how Canvas, Form Elements and Web Storage can contribute to rich user experiences. You will be able to view your web pages live on the web.

    Prerequisites: HTML5 1: Fundamentals of Web Authoring (IN320) or a solid foundation in HTML is recommended. 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

    Plan

    View Course Overview MindMap in the lab

    Expert Mind?

    Follow Expert and Novice

    Expert and Novice At the end of this session you should be able to:
    1. Describe how an expert in a particular field approaches a problem.
    2. Describe how a novice in a particular field would approach the same problem.
    3. Identify key differences in the way that an expert and a novice think about problems.
    4. Set a goal for what you would like to be able to do with respect to [whatever brought you here].
    5. Write down how you will know when you have reached the goal.

    HTML5

    World Wide Web Consortium — October 2014 HTML5 is now a W3C Recommendation
    This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
    HTML5
    What does that mean? Here are some insights.
    Mozilla Developer Network
    HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:
    • It is a new version of the language HTML, with new elements, attributes, and behaviors,
    • and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.
      HTML5 — Mozilla Developer Network
    What is HTML? Web Hypertext Application Technology Working Group (WHATWG)
    HTML is one of the standards being worked on by the WHATWG community. It 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 are extremely important for browser vendors to support existing Web content and for authors to be able to build Web applications.
    What is HTML5?
    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 <a rel="nofollow" class="external text"
    Is this HTML5? in the specification.
    What is HTML WHATWG
    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

    WHATWG (What, no Microsoft?)
    "As an aside, I was asked personally to join the WHAT WG over a year ago. I had a back-and-forth discussion in email with several of the members of the WHAT-WG. I said something to the effect of “I agree with your goals, all except standardizing error-correction*”. However, I also said “you have no patent policy, and that makes it impossible for me to join.” The response was something along the lines of “yeah, we should get one of those.” There is still no patent policy for the WHAT-WG that I’m aware of – and more importantly, no commitment from those making contributions that they are contributing any relevant IP to those implementing the WHAT-WG specifications, and in my personal opinion that makes the WHAT-WG irresponsible in ensuring that their specifications are actually “free”, even based on the contributions from their own members (inasmuch as anyone is a member). That also makes me REALLY concerned about just rubber-stamping the WHAT-WG design for HTML5. Unfortunately, the more open a design process is, the more possible it is to be affected by IPR (because there are more people giving input). "
    — Chris Wilson, Platform Architect of the Internet Explorer Platform team at Microsoft (and ex-Group Program Manager). January 2007
    Source: http://blogs.msdn.com/b/cwilso/archive/2007/01/10/you-me-and-the-w3c-aka-reinventing-html.aspx
    Reading the Specifications - non-normative
    • Normative = prescriptive = how to comply
    • Non-Normative = Informative = descriptive = help with conceptual understanding
    Typically, normative is contrasted with informative (referring to the standard's descriptive, explanatory or positive content). Informative data is supplemental information such as additional guidance, supplemental recommendations, tutorials, commentary as well as background, history, development, and relationship with other elements. Informative data is not a requirement and doesn’t compel compliance.

    Standards Documents

    Turn on developer-view styles

    View this page: HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014

    I broke down this paragraph so we could discuss the three audiences for these documents.

    This specification is intended for
    1. authors of documents and scripts that use the features defined in this specification,
    2. implementors of tools that operate on pages that use the features defined in this specification, and
    3. individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification.

    You can view the information filtered for you as a developer when you turn on developer-view styles. This simplifies things by hiding information that is not intended for you.


    In the Year 2022

    A historical perspective

    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: WHATWG and the W3C HTML WG

    History of HTML5

    HTML5 Design Principles

    We don't have to discuss these in detail, but do you recognize any concepts that appear in the your work?

    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/


    Build a page

    Exercise: Build a webpage with WebMatrix.


    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">

    This is 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

    HTML page in need of structure

    Before

    Source code

    see it live


    Key things to notice:

    • head, title, body, header, h1, h2, h3, section, article, p, a
    • view in different browsers

    After

    Source Code see it live



    Adding Styles to the Structure with CSS

    The previous version relied on the default styles used by the browser, but we can change that by using our own CSS Cascading Style Sheet.

    • header, h1, h2, section, article, p, footer
    • although unusual you will see text denoting the sectioning elements header section article footer

    Styled

    Style Sheet see it live

    Adding Behaviours and Functionality with JavaScript

    Now we can add some behaviours and functionality with JavaScript

    • The image is now clickable.
    • The text in the section and the articles is editable.

    Web page with JavaScript

    JavaScript Source Code

    Structure, Style, Behaviours

    Click to see this running live.


    HTML Code Examples

    Backup resource for files

    1. A file that needs some structure
    2. The same file with some structure applied
    3. Inline styles before we apply the styles
    4. Inline styles after we have applied them
    5. Page styles - before
    6. Page styles - after
    7. External Style Sheet (not functional but this is a backup for the source code)
    8. Using the External Style Sheet (not functional but this is a backup for the source code)
    9. Using the Sectioning Elements header, footer, section, article, aside
    10. Form Example and backup




    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">

    This is 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.




    PeerWise Setup

    Log into PeerWise

    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

    Environment / Setup

    Lab / Home setup
    1. Create local directory C:\My Documents\html5
    2. Setting up WebMatrix File editor and file transfer (Windows environment)
    3. FTP setup File editor (Scite) and FTP (non Windows environment)
      • Download SciTE - Free for Windows or Linux - or ANY text editor of your choice.
    4. Check out Downloads

    In the lab only

    1. HomePage Maker
    2. Create Student Template (download it from course ftp site)
    3. Download Styles.css
    4. Create footer.js and call it as a library for the footer(docName) function.

    JavaScript Library

    1. Create a footer for the student template.
      • Objective - hands-on example of using a .js file

    Here is an example: IP491 footer.js

    Assignment for Session One

    Assignment 1


    Assignment

    Assignment 1

    Session Two

    At the end of this session (and after completion of the session two assignment) you should be able to
    • Use the HTML5 workarounds and tools we discussed in the last session, in your web pages.
    • Identify opportunities to use CSS, JavaScript, other frameworks like jQuery
    • Discuss the role of HTML5 Frameworks in web development
    • Know where to get more information about the future of Flash and Silverlight
    • Build web pages that use the new structural elements in HTML5 (header, footer, nav, aside, article, section, main) and outlines.

    Journal

    • How do you use the <div> tag? Does that convey any meaning?
    • Where can I find a definition of HTML5? http://www.w3.org/TR/html5/
      • (Notice the button to Add developer-view styles].
      • Notice the editors.

    To prepare for this session we will

    1. Review PeerWise questions and answers.
    2. Review assignments - did you get connected to the UBC FTP Site OK?
    3. Live lab: Create your_namefooter.js
    4. A better footer.js footer.js Now that we have this - we can take some things out of the template
      just above <footer> remove links to home page and validator
      • Objective - onclick navigation to validation and outlining tools
      • If you don't already have a FirstName_LastName30.html see IP491 Student Page Template Version 2 (add this to your 00 page.
        • Copy / Paste this into your project as FirstName_LastName30.html

    Complete the lab work

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

    The outline should have three major headings. Each one should have this kind of content.

    Image:IP491OutliningExample.png

    Add more Semantic Elements

    Add any of these elements if you haven't already used them not in this order

    • <article>
    • <section>
    • <main>
    • <h1>, <h2>, <h3>

    If you want, you can try these too.

    • <aside>
    • <footer>
    • <header>
    • <nav>


    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.

    Strongly recommended

    Make sure that you have a <footer> element - even if it is empty

    <footer>
    Typical footer information like contact and copyright.
    </footer>

    Add this to the <head> section of your document to so you will have links to the validators for HTML, Outline, CSS

    <script src="http://dotnet.tech.ubc.ca/onlinework/html5/footer.js"></script>


    Optional - Stylesheet

    Add this to the <head> section of your document to try the style sheet you saw in class

    <link href="http://dotnet.tech.ubc.ca/onlinework/html5/zSectioning.css" rel="stylesheet">
    Reading

    The Importance Of HTML5 Sectioning Elements

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

    Detecting HTML5 Features

    If you have questions about HTML5 or this assignment - please post them in the course blog (Session Two Notes). If you spot a question from someone else and you can answer it - please do.

    • Login in to PeerWise :IP491F15A
    • Create at least one new question.
    • Answer at least five questions.
      • Correct your answers if necessary.
        • Confirm your answers as you go along.
      • Help where you can to improve explanations.
      • Add comments in the questions.
      • Rate the questions.

    Detailed Instructions

    Reflect in the course blog


    Please click the picture above and answer the following questions in the course blog.

    Highlights / Metacognition
    • What did you think was the most valuable thing that happened for you tonight?
    • What did you learn from that?
    • What will you do with that knowledge?
    Questions?
    • Now that we've had our session together, what do you want to know?
    • What could we have done better?

    Course Blog Tutorial (video)

    External links / resources

    From the Prepare tab:


    Approximate time: 60 minutes.

    HTML5 Design Principles

    pave the cow paths
    pave the cow paths
    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/


    HTML5 Kinds of Content

    link=http://dev.w3.org/html5/spec-LC/content-models.html#kinds-of-content
    Kinds of Content

    Metadata content
    is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
    ⇒ base, command, link, meta, noscript, script, style, title
    Flow content
    Most elements that are used in the body of documents and applications are categorized as flow content.
    ⇒a, abbr, address, area (if it is a descendant of a map element), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (if the scoped attribute is present), sub, sup, svg, table, textarea, time, u, ul, var, video, wbr, Text
    Sectioning content
    Sectioning content is content that defines the scope of headings and footers.
    ⇒ article, aside, nav, section
    Each sectioning content element potentially has a heading and an outline.
    Heading content
    Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).
    ⇒ h1, h2, h3, h4, h5, h6, hgroup
    Phrasing content
    Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
    ⇒ a (if it contains only phrasing content), abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (if it contains only phrasing content), dfn, em, embed, i, iframe, img, input, ins (if it contains only phrasing content), kbd, keygen, label, map (if it contains only phrasing content), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, Text
    Embedded content
    Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
    ⇒ audio, canvas, embed, iframe, img, math, object, svg, video
    Interactive content
    Interactive content is content that is specifically intended for user interaction.
    ⇒ a audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the Hidden state), keygen, label, menu (if the type attribute is in the toolbar state), object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)


    Kinds of Content

    Show W3C excerpt

    HTML5 and Other Technologies

    Workarounds and Tools - Applied

    We discussed these last week. This week we will add them to your HTML5 Template.

    Workarounds

    HTML5 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

    HTML5 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

    HTML5 Elements

    Review and discuss
    HTML5 Element Index from HTML5 Doctor

    Outlining

    Semantic Elements

    Structural Semantic Elements

    article

    The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

    When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

    Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

    section

    The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

    Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

    Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

    The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

    nav

    The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
    Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

    aside

    The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

    The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

    Note: It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

    hgroup

    hgroup is no longer part of the html5.

    The hgroup element represents the heading of a section, which consists of all the h1–h6 element children of the hgroup element. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

    Other elements of heading content in the hgroup element indicate subheadings or subtitles.

    The rank of an hgroup element is the rank of the highest-ranked h1–h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank).

    The section on headings and sections defines how hgroup elements are assigned to individual sections.

    The paragraphs above are inside the <s> element. The <s> element represents contents that are no longer accurate or no longer relevant. s-element w3c

    header

    The header element represents a group of introductory or navigational aids.

    Note:

    A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.


    footer

    The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

    When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content. Note: Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer. Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.

    Footers don't necessarily have to appear at the end of a section, though they usually do.

    When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

    address

    The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

    main

    The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

    Note: The main element is not sectioning content and has no effect on the document outline

    The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

    Note: User agents that support keyboard navigation of content are strongly encouraged to provide a method to navigate to the main element and once navigated to, ensure the next element in the focus order is the first focusable element within the main element. This will provide a simple method for keyboard users to bypass blocks of content such as navigation links.

    Authors must not include more than one main element in a document.

    Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

    Note: The main element is not suitable for use to identify the main content areas of sub sections of a document or application. The simplest solution is to not mark up the main content of a sub section at all, and just leave it as implicit, but an author could use a grouping content or sectioning content element as appropriate.

    Note: Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.


    reading

    Not quite HTML5

    content

    from Wikipedia, clockwise from the top Shaggy, Fred, Scooby-Doo, Velma, Daphne Scooby-doo content element (or why is there no <content> element. You always know that the person behind the ghost mask will be the sinister janitor of the disused theme park, simply because he’s the only person in the episode who isn’t Fred, Daphne, Velma, Shaggy, or Scooby. (Like most Scooby fans, I’m pretending Scrappy never existed.)

    References and follow up reading:

    menu

    The HTML <menu> element represents an unordered list of menu choices, or commands.

    There is no limitation to the depth and nesting of lists defined with the <menu>, <ol> and <ul> elements. Usage note: The <menu> and <ul> both represent an unordered list of items. They differ in the way that the <ul> element only contains items to display while the <menu> element contains interactive items, to act on. Note: This element was deprecated in HTML4, but reintroduced in HTML5.

    <menu type="toolbar">
      <li>
        <menu label="File">
          <button type="button" onclick="new()">New...</button>
          <button type="button" onclick="save()">Save...</button>
        </menu>
      </li>
      <li>
        <menu label="Edit">
          <button type="button" onclick="cut()">Cut...</button>
          <button type="button" onclick="copy()">Copy...</button>
          <button type="button" onclick="paste()">Paste...</button>
        </menu>
      </li>
    </menu>

  • Reality check caniuse.com


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


    html5 outlining lab session

    Assignment

    To be completed before March 29, 2015

    Complete the lab work

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

    The outline should have three major headings. Each one should have this kind of content.

    Image:IP491OutliningExample.png

    Add more Semantic Elements

    Add any of these elements if you haven't already used them not in this order

    • <article>
    • <section>
    • <main>
    • <h1>, <h2>, <h3>

    If you want, you can try these too.

    • <aside>
    • <footer>
    • <header>
    • <nav>


    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.

    Strongly recommended

    Make sure that you have a <footer> element - even if it is empty

    <footer>
    Typical footer information like contact and copyright.
    </footer>

    Add this to the <head> section of your document to so you will have links to the validators for HTML, Outline, CSS

    <script src="http://dotnet.tech.ubc.ca/onlinework/html5/footer.js"></script>


    Optional - Stylesheet

    Add this to the <head> section of your document to try the style sheet you saw in class

    <link href="http://dotnet.tech.ubc.ca/onlinework/html5/zSectioning.css" rel="stylesheet">
    Reading

    The Importance Of HTML5 Sectioning Elements

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

    Detecting HTML5 Features




    Session Three

    At the end of this session (and after completion of the session three assignment) you should be able to:

    • Read and optionally write web pages that use Modernizr to detect if HTML5 features are supported in a browser.
    • Explain and optionally use HTML5 polyfills.
    • Use several different websites to determine how specific HTML5 features are supported.
    • Describe Responsive Web Design
    • Use the HTML5 Logo / Badge Builder
    • Use Text Level Semantic Elements in addition to Sectioning Elements in the previous section
      • cite, blockquote, q, details, mark, figure, time
    • Use Semantic data:
      • Microdata, Microformats, RDFa

    Journal

    • Are you ready to see Modernizr in action?
    • What's a polyfill?
    • What do you know about Responsive Web Design?
    • Have you encountered or used any of these new HTML elements: cite, details, mark, figure, time?
    • Have you wished for a way to include structured data within your web pages: Microdata, Microformats, RDFa

    To prepare for this session we will Review PeerWise and some of your pages with outlines to test our understanding of the sectioning elements

    We will

    Big concepts in Video

    Complete your assignment page from last week and add content so that it has at least
    1. ONLY one <main> element
    2. two articles (content can be stubs)
    3. two sections (content can be stubs)
    4. three of the new elements we used this week
    5. resolve issues with the outliner (e.g. Untitled Section messages)
    Complete all previous assignments (in particular, the web page with an outline using HTML5 sectioning elements)
    Write HTML5 pages

    This week please review these objectives and write as many examples as you feel are necessary for you to meet the following.

    Outcomes for this Session

    At the end of this session (and after completion of the session three assignment) you should be able to:

    • Write a brief description of Responsive Web Design in one of your web pages. Here is an article that should help. Responsive Web Design - You don't have to implement Responsive Web Design in a page - that's a completely separate course.
    • Use the HTML5 Logo / Badge Builder to create a logo that shows that you are using HTML5 semantics in your web page.
    • Use Text Level Semantic Elements in addition to Sectioning Elements in the previous section
      • cite, blockquote, q, details, mark, figure, time
      • in one of your web pages write a brief note about how the <time> element is different from the others.
    • Use Semantic data:
      • Microdata, Microformats, RDFa (pick one and use it to embed data in a page)

    If you have questions about HTML5 or this assignment - please post them in the course blog (Session Three Notes).

    • Optional: Use Modernizr to detect if an HTML feature is supported in the client's browser.
    • Optional: Use Modernizr.load() to detect if an HTML feature is supported in the client's browser and use a polyfill to add missing functionality. See: modernizr documentation for details. *Note: this is well outside the scope of this course and requires some serious background in JavaScript.

    • Login in to PeerWise :IP491F15A
    • Create at least one new question.
    • Answer at least five questions.
      • Correct your answers if necessary.
        • Confirm your answers as you go along.
      • Help where you can to improve explanations.
      • Add comments in the questions.
      • Rate the questions.

    Detailed Instructions

    Reflect in the course blog


    Please click the picture above and answer the following questions in the course blog.

    Highlights / Metacognition
    • What did you think was the most valuable thing that happened for you tonight?
    • What did you learn from that?
    • What will you do with that knowledge?
    Questions?
    • Now that we've had our session together, what do you want to know?
    • What could we have done better?

    Course Blog Tutorial (video)

    External links / resources

    Reading:

    Big concepts in Video


    HTML5 Feature Support in Browsers

    We need to talk about feature support in browsers. Start here:

    Modernizr Examples

    CSS Columns

    HTML


    CSS for Columns


    Using Modernizr with JavaScript

    Modernizr and CSS3 Columns See it in jsbin

    Geolocation

    HTML


    CSS for Geolocation example (not required but it looks nice)


    Using Modernizr with JavaScript

    Modernizr Demo: Geolocation See it in jsbin


    Modernizr.load() loading Polyfill for Details

    HTML


    No special CSS required for this example.
    Using Modernizr.load()

    Modernizr.load() example with details.js See it in jsbin


    An example of an HTML Template

    This week we will look at

    HTML5 Element Index from HTML5 Doctor

    Responsive Web Design

    It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.
    Core Concepts
    Three key technical features are the heart of responsive Web design:
    • Media queries and media query listeners
    • A flexible grid-based layout that uses relative sizing
    • Flexible images and media, through dynamic resizing or CSS
    Truly responsive Web design requires all three features to be implemented.
    keep reading...


    Try this on your mobile device.

    Image:IP491jsbinViewport.png

    Note: For demo use Lumia Beamer

    See also: Responsive Web Design course at UBC


    see the desktop version of the page

    One More Time with Meaning

    Semantic Elements

    Structural Semantic Elements

    Review HTML5 Structural Semantic Elements

    Structural Semantic Elements on the demo site

    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

    And the debate rages on.

    Text Level Semantic Elements

    Let's look at these on the HTML5 Demo page

    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

    Details Element

    The details element represents a disclosure widget from which the user can obtain additional information or controls.
    The Details Element W3C HTML 5.1

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

    Note: There is an example of simulating the <details> element using jQuery at the end of Details Element.

    jQuery Workaround for Details

    Load jQuery in the head section

    <!-- load jquery from google -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>


    Load this script in the head section

    <script>
    $(document).ready(function() {
        $(".toggle_container").hide();
        $("h5.trigger").click(function(){       
            if ($(this).next().is(":visible")) {
                $(this).html("show");
            }else{
                $(this).html("hide");
            }       
            $(this).toggleClass("active").next().slideToggle("slow");       
        });
    });
     
    </script>

    Put this into the body where you want to have text to show or hide.

    <h5 class="trigger">details</h5>
    <div class="toggle_container">
     <div class="block">
         This will be my text that I can show or hide. You will replace this with your text.
     
     </div>
    </div>
    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


    Time Element
    <time datetime=2012-12-21>Anything you want for the human readable part</time>

    datetime format

    • yyyy-mm-dd
    • yyyy-mm
    • mm-dd


    More examples
    <time>2009-11-13</time>
     <!-- without @datetime content must be a valid date, time, or precise datetime -->
    <time datetime="2009-11-13">13<sup>th</sup> November</time>
     <!-- when using @datetime the content can be anything relevant -->
    <time datetime="20:00">starting at 8pm</time>
     <!-- time example -->
    <time datetime="2009-11-13T20:00+00:00">8pm on my birthday</time>
     <!-- datetime with time-zone example -->
    <time datetime="2009-11-13T20:00Z">8pm on my birthday</time>
     <!-- datetime with time-zone “Z” -->

    Source — html5doctor.com/the-time-element


    Related Article It was the best of times


    More Semantic Data

    1. W3C HTML Data Guide: Introduction

    HTML pages naturally contain a lot of semantic information: the title of the page in the <title> element, addresses in <address> elements, the source of a quotation in the @cite attribute, arbitrary metadata about the page in <meta> elements and so on. These mechanisms primarily provide metadata about the HTML page itself, but it is also useful to embed data about other things within HTML pages.

    The first formal methods of embedding data about things other than the HTML page itself within HTML pages were those pioneered by the microformats community. These sought to regularise the existing use of semantic classes and link relations within HTML markup for common subject areas such as people, organisations and events.

    Since then, the practice of embedding HTML data within web pages has gradually grown, particularly bolstered by search engines using embedded data to supplement the appearance of entries within their result pages and by the open linked data community seeking to bridge the gap between documents and data on the web. HTML data is used in a variety of ways, as evinced by the use cases collected during the design of microdata. Consumers of HTML data include:

    • scripting libraries
    • browsers and browser extensions
    • general-purpose search engines
    • vertical or domain-specific search engines
    • data reusers known and unknown to the publisher of the data

    There are currently three main syntaxes for embedding data within HTML pages:

    microformats
    microformats use @class, @rel and other attributes to encode data using standard HTML markup, and can be used with other markup languages that have @class attributes. Traditionally, different microformat vocabularies have followed different parsing rules, but microformats-2 provides a standard parsing algorithm.
    RDFa
    RDFa reuses existing HTML attributes such as @href and @rel and adds a few of its own to enable data to be extracted from HTML pages as RDF. RDFa was originally designed for XHTML 1.1; its latest version (RDFa 1.1) is also usable with HTML5 and other markup languages such as SVG.
    microdata
    Microdata adds attributes to HTML5 to provide machine-readable descriptions of items within the page in terms of properties and values for those properties. It is designed to be used alongside detailed specifications of how these descriptions should be processed by consumers.

    The three syntaxes are similar in goals but differ in approach. This document provides guidance about how to choose between them and use them together as well as some good practices for publishing, consuming and designing vocabularies for HTML data. However, it is not intended to be a general-purpose introduction to any of these syntaxes. As well as the specifications themselves, examples and explanations can be found within:


    Source:W3C HTML Data Guide


    Microdata

    Microformats

    RDFa

    • RDFa (Resource Description Framework – in – attributes)


    References:

    Tools:

    Assignment

    To be completed before Monday October 19

    Complete your assignment page from last week and add content so that it has at least
    1. ONLY one <main> element
    2. two articles (content can be stubs)
    3. two sections (content can be stubs)
    4. three of the new elements we used this week
    5. resolve issues with the outliner (e.g. Untitled Section messages)
    Complete all previous assignments (in particular, the web page with an outline using HTML5 sectioning elements)
    Write HTML5 pages

    This week please review these objectives and write as many examples as you feel are necessary for you to meet the following.

    Outcomes for this Session

    At the end of this session (and after completion of the session three assignment) you should be able to:

    • Write a brief description of Responsive Web Design in one of your web pages. Here is an article that should help. Responsive Web Design - You don't have to implement Responsive Web Design in a page - that's a completely separate course.
    • Use the HTML5 Logo / Badge Builder to create a logo that shows that you are using HTML5 semantics in your web page.
    • Use Text Level Semantic Elements in addition to Sectioning Elements in the previous section
      • cite, blockquote, q, details, mark, figure, time
      • in one of your web pages write a brief note about how the <time> element is different from the others.
    • Use Semantic data:
      • Microdata, Microformats, RDFa (pick one and use it to embed data in a page)

    If you have questions about HTML5 or this assignment - please post them in the course blog (Session Three Notes).

    • Optional: Use Modernizr to detect if an HTML feature is supported in the client's browser.
    • Optional: Use Modernizr.load() to detect if an HTML feature is supported in the client's browser and use a polyfill to add missing functionality. See: modernizr documentation for details. *Note: this is well outside the scope of this course and requires some serious background in JavaScript.


    Session Four

    Next logical steps

    At the end of this session (and after completion of the session four assignment) you should be able to:

    • Identify some of the new features in CSS3 that can be used with HTML5
      • Media Queries
      • Fonts
      • Transformations
      • Selectors
    • Use the HTML5 Media elements to embed Audio and Video in your HTML5 web pages
    • Discuss Graphics and Effects available in HTML5
      • SVG & Canvas
    • Use HTML5 Form elements and understand the extent to which these are supported in modern browsers
    • Understand the new functionality available through:
      • Drag & Drop
      • Content Editable
    • Discuss these features of HTML5 that are new but require JavaScript
      • Web Storage, Device Access

    Journal

    • Do you think about sustainability when considering your web sites?
    • How have you used CSS3 (Cascading Style Sheets)?
      • What have you heard about or used in CSS3 that is new or related to HTML5?
    • How have you embedded audio and video into your web pages?

    To prepare for this session we will Review PeerWise and some of your pages with outlines to test our understanding of the Text Level Semantic Elements

    We will

    • Discuss briefly: sustainability
    • Use discuss CSS3 and use fonts on the web
      • Explore resources on the web where you can experiment in real-time with CSS3
    • Use the Media elements: Audio and Video
    • Discuss SVG and Canvas
    • Work with HTML5 Form elements
    • Discuss: Drag and Drop, Editable, Web Storage, Application Caching, Device Access (Geolocation),

    • PeerWise complete the requirement to have created four questions by next Monday and answered at least 20 by next Wednesday
    • Metacognition: Make sure that you have an entry for each week (four). At the very least, make note of at least one major concept each week.
    • Pick at least two from the list below.
      • Form
      • CSS (Fonts or Media Queries)
      • Graphics (SVG or Canvas)
      • Media (Audio or Video)
      • Semantic Data
    Form
    • Create a form with
      • several of the new form elements
      • try out one or two of the validations (use http://caniuse.com so that when you are testing, you know whether or not something should work in the browser you are using.
    CSS
    • WOFF Fonts
      • Create a page that uses Web Fonts using @font-face (fonts that we have not used in our lab session)

    --== OR ==--

    • Media Queries
      • Create a page that uses Media Queries to display content differently depending on some aspect of the client that is used to view the page.
    Graphics (optional)
    • Create a page with a graphic element that YOU created. This can be SVG or Canvas. It can be very simple, but you must have created it.
    Media
    • Create a page in which you can play audio or view video using the new HTML5 Audio or Video elements.
    Semantic Data

    If you have not done this in a previous assignment...

    • Create a page that embeds semantic data (Microdata, Microformats, RDFa)


    Create/Edit/Upload your files
    • Create/Edit your files using WebMatrix (preferred) or use a text editor and ftp
    • Update your 00.html page so that there are descriptions beside all the pages that you created

    If you absolutely, positively can't get things to work with uploading your files, use jsbin or one of the other online tools for creating pages and send links to your work by email .



    • Login in to PeerWise :IP491F15A
    • Create at least one new question.
    • Answer at least five questions.
      • Correct your answers if necessary.
        • Confirm your answers as you go along.
      • Help where you can to improve explanations.
      • Add comments in the questions.
      • Rate the questions.

    Detailed Instructions

    Reflect in the course blog


    Please click the picture above and answer the following questions in the course blog.

    Highlights / Metacognition
    • What did you think was the most valuable thing that happened for you tonight?
    • What did you learn from that?
    • What will you do with that knowledge?
    Questions?
    • Now that we've had our session together, what do you want to know?
    • What could we have done better?

    Course Blog Tutorial (video)

    External links / resources

    References

    See links in the course material below Tools:

    {{{extend}}}

    Sustainable Web Design

    It’s easy to think that sustainability is only a concern in the material world. Here’s an interesting perspective.

    Sustainable Web Design

    Sustainable Web Design

    by James Christie September 24, 2013 Published in Application Development, State of the Web

    A growing number of industries are trying to reduce or at least curtail carbon footprints and energy use. Emissions standards have been set for the automotive, construction, and even telecommunications industries. Yet the internet’s carbon footprint is growing out of control: a whopping 830 million tons of CO2 annually, which is bigger than that of the entire aviation industry. That amount is set to double by 2020.

    It is time for web designers to join the cause.

    Read the rest: Sustainable Web Design

    Follow-up Items

    The Course Blog Meta Cognition

    CSS3

    HTML5 Powered with CSS3 / Styling
    CSS3:

    CSS3 is extremely important in the development of modern HTML5 web pages. A detailed discussion is outside the scope of this course, but we should discuss it briefly.
    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.

    CSS Selectors Introduction

    We will start of with the three most common selectors that all us to find elements within the Document Object Model.

    CSS Selectors demo using JavaScript see it in jsbin

    CSS Selectors demo using jQuery see it in jsbin

    Type Selectors
    • refers to specific elements
    • examples: h1 p table
    Class Selectors
    • refers to elements with a specific class
    • examples: <table class="stripes" >
    ID Selectors
    • refers to a unique element with the specified ID
    • example: <article id="instructions" >
    Descendent Combinators
    • example: section h1
      refers to h1 inside a section

    W3C Selectors

    CSS Prefix Free

    Whedon Ipsum

    She is the slayer. Men watch the action movie, they eat of the beef, and enjoy to look at the scenery. A vampire in love with a Slayer. It's rather poetic, in a maudlin sort of way. I recognize the council has made a decision, but given that it's a silly decision, I've elected to ignore it. Well, a gathering is brie, mellow song stylings; shindig, dip, less mellow song stylings, perhaps a large amount of malt beverage; and hootenanny, well, it's chock full of hoot, just a little bit of nanny. Men, with your sales. Say Skywalker, and I smack ya. I dislike that Anya. She's newly human and strangely literal. The gentlemen are coming by.

    So, I'm wondering, do the other cookie animals feel sorta ripped? What, you think this isn't real just because of all the vampires, and demons, and ex-vengeance demons, and the sister that used to be a big ball of universe-destroying energy? Somebody put her tiny little thinking cap on! Planet's coming up a mite fast. Actually, I was fired from a fry-cook opportunity.

    I would appreciate it if one person on this boat would not assume I'm an evil, lecherous hump. One of my personalities happens to be a multiple personality, but that doesn't make me a multiple personality. Buffy's having fun with Spike. From beneath you, it devours. You're the Slayer, and we're, like, the Slayerettes! All the protein, vitamins and carbs of your grandma's best turkey dinner, plus fifteen percent alcohol.


    Consider using Prefix Free to simplify your CSS with support for multiple browsers.

    CSS for Columns using Prefix Free


    CSS for Columns without Prefix Free

    See example in jsbin

    CSS Media Queries

    caniuse media queries | standalone example

    | cssdesk version

    CSS Media Queries

    HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

    A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.


    Media Queries
    see the CSS stylesheet

    #mediaNav {
      float:left;
      width:200px;  
      border-style:solid; 
      color:white;  
      background-color:green;
      border-radius: 10px;
      padding:10px;
      margin:15px;  
    }
    #mediaNav a:link {color:yellow;} 
     
     
    #mediaRightCol {
      min-width:325px;  
      max-width:800px;
    }
    @media (max-width:800px) {
        #mediaNav{
          color:green;
          background-color:yellow;
        }
        #mediaNav a:link {color:black;} 
     }
     
    @media (max-width:700px) {
        #mediaNav {
          color:white;
          background-color:red;
        }
        #mediaNav a:link {color:blue;}
     
        #CSSMedia { display: none; }
     }
     
    @media (max-width:500px) {
        #mediaNav  {
        display: none;
        }
     }
     
    @media print {
      #mediaNav {
        color:black;
        background-color:white;
      }
    }
    @font-face {
     font-family: "KaushanScript-Regular";
     src: url("http://dotnet.tech.ubc.ca/html5/fonts/KaushanScript-Regular.otf");
      font-weight: normal;
      font-style: normal;
    }
    #CSSMedia {
      font-family:KaushanScript-Regular;
      font-size:4.0em;
      color:purple;
      font-weight:bold;
      margin-left:auto;
      margin-right:auto;
      max-width:725px;
      background-color:pink;
      border-radius: 10px;
      padding:10px;
      margin:15px;  
      text-align:center;
    }

    CSS Selectors

    Fonts on the Web

    Fonts on the Web


    CSS Tools
    • CSSDESK
    • dabblet –dabblet is an interactive playground for quickly testing snippets of CSS and HTML code.
    • prefixfree –prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
    • jsbin.com
    Colour Tools


    This section styled by colorzilla generated gradient.

    Read more about it at:

    colorzilla

    Transformations

    CSS3 Hands on tutorials at Microsoft

    2D Transformations

    Try copy/pasting these examples into CodePen.io or jsbin (hint: right click, open in new window). For example: something I did in CodePen, and the same thing in jsbin

    <section style="
    transform-origin: 50% 100%;transform: translate(300px, 40px) rotate(10deg) scale(1);
    background-color: yellow;
    border-width: 0px;
    box-shadow: 0px 0px 7px 5px rgba(241,245,0,0.71), 0px 0px 30px 3px rgb(255,13,5);
    width:120px;
    height:80px;
    font-family: Verdana,sans-serif;
    ">
    This is an example of a  <br />
    <a href="http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_2d-transforms.htm">2D Transformation</a>
    </section>

    Hands On: 2D Transforms

    This is an example of a
    2D Transformation

    3D transformation generator

    3D Transformations
    <section 
    style="
    backface-visibility: visible;
    transform-origin: 50% 50%  translate(100px, -300px);
    transform: perspective(90px) rotateY(-10deg);
    background-color: blue;
    color:white;
    border-width: 0px;
    box-shadow: 0px 0px 7px 5px rgba(241,245,0,0.71), 0px 0px 60px 3px rgb(55,255,255);
    width:200px;
    height:100px;
    margin-left:400px;
    font-family: Verdana,sans-serif ;">
    Long long ago in a time before the internet few could have imagined the power of world-wide collaborations.
     
    </section>

    Long long ago in a time before the internet few could have imagined the power of world-wide collaborations.




    Resources

    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

    Try copy/pasting these examples into jsbin.com (hint: right click, open in new window).

     <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:


    Supported video formats

    Source: http://en.wikipedia.org/w/index.php?title=HTML5_video

    The current HTML5 draft specification does not specify which video formats browsers should support. User agents are free to support any video formats they feel are appropriate, but content authors cannot assume that any video will be accessible by all complying user agents, since user agents have no minimal set of video formats to support.

    The HTML5 Working Group considers it desirable to specify at least one video format which all user agents (browsers) should support. The ideal format in this regard would:

    • Have good compression, good image quality, and low decode processor use.
    • Be royalty-free.
    • In addition to software decoders, a hardware video decoder should exist for the format, as many embedded processors do not have the performance to decode video.

    Initially, Ogg Theora was the recommended standard video format in HTML5, because it was not affected by any known patents. But on December 10, 2007, the HTML5 specification was updated,[1] replacing the reference to concrete formats:

    User agents should support Theora video and Vorbis audio, as well as the Ogg container format."

    with a placeholder:

    It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.[1]}}

    The result has been the polarisation of HTML5 video between industry standard, ISO defined but patented formats, and free, open formats.

    Graphics and 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

    Graphics & Effects:

    Canvas is another tool for bringing graphics to your web pages with HTML5. SVG, Canvas, WebGL, and CSS3 3D features, allow you to present stunning visuals natively rendered in the browser.

    Introduction and key ideas.

    Please see Canvas - Full Discussion and Demos


    Source:



    Canvas Example
    HTML5 Canvas Boxes Example

    Canvas Rectangles in jsbin


    Canvas Basic Shapes tutorial in jsbin

    Sorry - your browser does not appear to support Canvas
    Sorry - your browser does not appear to support Canvas
    Sorry - your browser does not appear to support Canvas

    Drawing Bubbles example in jsbin


    Canvas Drawing Shapes tutorial in jsbin


    Your browser does not support canvas. Your browser does not support canvas but 
   this is a picture of what you would see if it did.


    In the head section

    <script>
        window.onload = function () {
            // Get a reference to the element.
            var elem = document.getElementById("myCanvas");
            //Check for properties and methods, to make sure your code doesn't break 
            // in other browsers.
            if (elem && elem.getContext) {
                // Get the 2d context.
                var context = elem.getContext("2d");
                if (context) {
                    // put things you want to execute onload here
                    drawBoxes(context);
     
                }
            }
        };
     
        function drawBoxes(context) {
     
            // Draw black rect
            context.fillStyle = "black";
            context.fillRect(50, 20, 145, 145);
     
            // Draw blue rect
            context.fillStyle = "rgb(0, 162, 232)";
            context.fillRect(135, 85, 125, 125);
     
            // Set line width
            context.lineWidth = 5;
     
            // Draw black rect outline
            context.strokeStyle = "rgb(0, 0, 0)";
            context.strokeRect(50, 335, 145, 145);
     
            // Draw blue rect outline
            context.strokeStyle = "rgb(0, 162, 232)";
            context.strokeRect(135, 275, 125, 125);
     
            // Draw semi-transparent yellow rect
            context.fillStyle = "rgba(255, 255, 0, 0.75)";
            context.fillRect(210, 180, 125, 125);
        }
     
    </script>

    In the body section
    .
    .
    .

    <canvas id="myCanvas" width="400" height="500" 
    style="margin-top:20px;margin-left:20px">
    <!-- fallback text and image for older browsers -->
    Your browser does not support canvas.
    <img alt="Your browser does not support canvas but 
       this is a picture of what you would see if it did." 
       src="http://dotnet.tech.ubc.ca/CourseWiki/images/0/0d/PictureOfMyCanvas.png">
    </canvas>

    Bold text

    Canvas References and Resources

    Reference: Canvas Cheat Sheet

    Tutorials and Resources:


    Comparisons

    Canvas vs SVG vs Flash

    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

    Please see Form with a Fieldset and HTML5 Form Elements example

    Form with a Fieldset and HTML5 Form Elements

    Right click link below and open in a new window.

    HTML5 Form Elements



    New attributes for <form>:

    • autocomplete (entire form)
    The autocomplete attribute specifies whether a form or input field should have autocomplete on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before. Source
    • novalidate
    The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted. Source
    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

    Drag and Drop

    Drag and Drop is natively supported in HTML5.

    see


    Editable

    a quick look at making content editable online

    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 an 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 IP491F15A

    Sample Files

    HTML5 Very Simple Page

    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Example document</title>
      </head>
      <body>
        <p>Example paragraph</p>
      </body>
    </html>

    footer.js

    /* footer.js */
    // last update: June 18 2013
    // added navigation links
    // added validation links
    // note that css styling of <nav>'s is so we don't have to 
    //      update the stylesheets to have two columns in the footer.  
     
    function coursePage()
    { return "Course Home Page".link("http://dotnet.tech.ubc.ca/ip491");
    }
     
    function samplesPage()
    { return "Samples Home Page".link("http://dotnet.tech.ubc.ca/html5/");
    }
     
    function validateLink() 
    {
    	return  "Validate this document".link("http://validator.w3.org/check?verbose=1&uri="+document.location.href);  
     
    }  // end function 
     
    function outlineLink()
    {
    return "Outline this document".link("http://gsnedders.html5.org/outliner/process.py?url="+document.location.href);
    }
     
    function semanticData()
    {
    var theURL="http://services.w3.org/xslt?xmlfile=http%3A%2F%2Fservices.w3.org%2Ftidy%2Ftidy%3FdocAddr%3D";
    theURL+=document.location.href;
    theURL+= "%26passThroughXHTML%3D1&xslfile=http%3A%2F%2Fwww.w3.org%2F2002%2F08%2Fextract-semantic.xsl";
    return "Semantic data".link(theURL);
    }
     
    function validateCSS()
    {
    var theURL="http://jigsaw.w3.org/css-validator/validator?uri=";
    theURL+=document.location.href;
    theURL+="&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en";
    return "Validate CSS in this document".link(theURL);
    }
    function modernIE(){
    var theURL="http://www.modern.ie/en-us/report#";
    theURL+=encodeURIComponent(document.location.href) 
    return "Test with Modern.IE".link(theURL);   
    }
     
    /* footer.js 
    footer(docName) - generates some text for the footer
    docName is optional
    */
    function footer(docName) {
      var copydate=new Date();
      var copyyear=copydate.getFullYear();
      docName = docName || window.location.href;
      document.write(" Last updated on " + document.lastModified);
      document.write(" " + document.title);
      document.write(" Document  "+ docName.bold() );
      document.write(" Copyright &copy; "+ copyyear );
      document.write(" All Rights Reserved ");
      document.write("<hr>");
     
      document.write("<div style=\"width:400px;margin-left:auto;margin-right:auto;\">" );
      document.write("  <nav style=\"float:left;width:200px;margin-left:auto;\">" );
     
      document.write("<h1>Navigation</h1>");
      document.write("	<ul>");
      document.write("		<li>" +strHomeLink+   "</li>");
      document.write("		<li>" +coursePage()+  "</li>");
      document.write("		<li>" +samplesPage()+ "</li>");
      document.write("	</ul>"); 
      document.write("</nav>");
      document.write("<nav style=\"float:left;width:200px;margin-right:auto;\">");
      document.write("<h1>Validation</h1>");
      document.write("    <ul>");
      document.write("		<li>" +validateLink()+ "</li>");
      document.write("		<li>" +outlineLink()+  "</li>");
      document.write("		<li>" +semanticData()+ "</li>");
      document.write("		<li>" +validateCSS()+ "</li>");
      document.write("		<li>" +modernIE()+ "</li>");
     
      document.write("	</ul>");
      document.write("</nav>");
    }  // end function 
     
     
    function footer2(docName) {
    // alternative to footer() above
    // use elem.innerHTML instead of document.write()
    // usage <body onload="footer2('Footer Demonstration')>
      var copydate=new Date();
      var copyyear=copydate.getFullYear();
      docName = docName || window.location.href;
      var msg="" 
      var TagNames=document.getElementsByTagName("footer");
      var theFooter = TagNames[0];	
      msg+=" Last updated on " + document.lastModified;
      msg+=" " + document.title;
      msg+=" Document  "+ docName.bold() ;
      msg+=" Copyright &copy; "+ copyyear ;
      msg+=" All Rights Reserved " ;
      msg+="<hr>" ;
     
      msg+="div style=\"width:400px;margin-left:auto;margin-right:auto;\">";
      msg+="  <nav style=\"float:left;width:200px;margin-left:auto;\">" ;
      msg+="<h1>Navigation</h1>" ;
      msg+="	<ul>" ;
      msg+="		<li>" +strHomeLink+   "</li>" ;
      msg+="		<li>" +coursePage()+  "</li>" ;
      msg+="		<li>" +samplesPage()+ "</li>" ;
      msg+="	</ul>"  ;
      msg+="</nav>" ;
      msg+="<nav style=\"float:left;width:200px;margin-left:10px\">" ;
      msg+="<h1>Validation</h1>" ;
      msg+="    <ul>" ;
      msg+="		<li>" +validateLink()+ "</li>" ;
      msg+="		<li>" +outlineLink()+  "</li>" ;
      msg+="		<li>" +semanticData()+ "</li>" ;
      msg+="		<li>" +validateCSS()+ "</li>" ;
      msg+="	</ul>" ;
      msg+="</nav>" ;
      msg+="</div>" ;
     
      theFooter.innerHTML=msg;
    }  // end function


    Optional Reading

    Assignments

    Assignment 1

    To be completed before Monday October 5, 2015

    Hands On
    • Make a change to your 01.html page and make sure that the changes display when you view the page on the website.


    Windows

    You can use WebMatrix ⇐ follow link for detailed instructions.

    Mac

    See FTP Notes

    Reading

    Preparation for next session: Sections and Outlines of an HTML5 Document

    • Note that the first section is about HTML4 setting the scene for contrast and to high light the improvements in HTML5

    Looking back and filling in the blanks:





    Assignment 2

    To be completed before Monday October 12, 2015

    Complete the lab work

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

    The outline should have three major headings. Each one should have this kind of content.

    Image:IP491OutliningExample.png

    Add more Semantic Elements

    Add any of these elements if you haven't already used them not in this order

    • <article>
    • <section>
    • <main>
    • <h1>, <h2>, <h3>

    If you want, you can try these too.

    • <aside>
    • <footer>
    • <header>
    • <nav>


    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.

    Strongly recommended

    Make sure that you have a <footer> element - even if it is empty

    <footer>
    Typical footer information like contact and copyright.
    </footer>

    Add this to the <head> section of your document to so you will have links to the validators for HTML, Outline, CSS

    <script src="http://dotnet.tech.ubc.ca/onlinework/html5/footer.js"></script>


    Optional - Stylesheet

    Add this to the <head> section of your document to try the style sheet you saw in class

    <link href="http://dotnet.tech.ubc.ca/onlinework/html5/zSectioning.css" rel="stylesheet">
    Reading

    The Importance Of HTML5 Sectioning Elements

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

    Detecting HTML5 Features


    Assignment 3 Sessions 3

    To be completed before Monday October 19, 2015

    Complete your assignment page from last week and add content so that it has at least
    1. ONLY one <main> element
    2. two articles (content can be stubs)
    3. two sections (content can be stubs)
    4. three of the new elements we used this week
    5. resolve issues with the outliner (e.g. Untitled Section messages)
    Complete all previous assignments (in particular, the web page with an outline using HTML5 sectioning elements)
    Write HTML5 pages

    This week please review these objectives and write as many examples as you feel are necessary for you to meet the following.

    Outcomes for this Session

    At the end of this session (and after completion of the session three assignment) you should be able to:

    • Write a brief description of Responsive Web Design in one of your web pages. Here is an article that should help. Responsive Web Design - You don't have to implement Responsive Web Design in a page - that's a completely separate course.
    • Use the HTML5 Logo / Badge Builder to create a logo that shows that you are using HTML5 semantics in your web page.
    • Use Text Level Semantic Elements in addition to Sectioning Elements in the previous section
      • cite, blockquote, q, details, mark, figure, time
      • in one of your web pages write a brief note about how the <time> element is different from the others.
    • Use Semantic data:
      • Microdata, Microformats, RDFa (pick one and use it to embed data in a page)

    If you have questions about HTML5 or this assignment - please post them in the course blog (Session Three Notes).

    • Optional: Use Modernizr to detect if an HTML feature is supported in the client's browser.
    • Optional: Use Modernizr.load() to detect if an HTML feature is supported in the client's browser and use a polyfill to add missing functionality. See: modernizr documentation for details. *Note: this is well outside the scope of this course and requires some serious background in JavaScript.


    Assignment 4

    To be completed before Wednesday October 21, 2015


    • PeerWise complete the requirement to have created four questions by next Monday and answered at least 20 by next Wednesday
    • Metacognition: Make sure that you have an entry for each week (four). At the very least, make note of at least one major concept each week.
    • Pick at least two from the list below.
      • Form
      • CSS (Fonts or Media Queries)
      • Graphics (SVG or Canvas)
      • Media (Audio or Video)
      • Semantic Data
    Form
    • Create a form with
      • several of the new form elements
      • try out one or two of the validations (use http://caniuse.com so that when you are testing, you know whether or not something should work in the browser you are using.
    CSS
    • WOFF Fonts
      • Create a page that uses Web Fonts using @font-face (fonts that we have not used in our lab session)

    --== OR ==--

    • Media Queries
      • Create a page that uses Media Queries to display content differently depending on some aspect of the client that is used to view the page.
    Graphics (optional)
    • Create a page with a graphic element that YOU created. This can be SVG or Canvas. It can be very simple, but you must have created it.
    Media
    • Create a page in which you can play audio or view video using the new HTML5 Audio or Video elements.
    Semantic Data

    If you have not done this in a previous assignment...

    • Create a page that embeds semantic data (Microdata, Microformats, RDFa)


    Create/Edit/Upload your files
    • Create/Edit your files using WebMatrix (preferred) or use a text editor and ftp
    • Update your 00.html page so that there are descriptions beside all the pages that you created

    If you absolutely, positively can't get things to work with uploading your files, use jsbin or one of the other online tools for creating pages and send links to your work by email .




    Related Downloads

    Online Resources

    Reading

    Dive into HTML5

    Building Apps with HTML5: What you need to know

    HTML5 Semantic Markup and Page Layout

    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:IP491F15A]]


    Personal tools