HTML5

About Me…Michael Whyte

• Lead Instructor – Technical Web Designer Program – BCIT• Official BCIT Web Site: http://www.bcit.ca/study/programs/6490cert• Student Web Stie: http://twd.htpwebdesign.ca

• Part Time Instructor – New Media / D3 – BCIT• New Media: http://www.bcit.ca/study/programs/6415smcert• D3: http://www.bcit.ca/study/programs/6405dipma

About Me…Michael Whyte

• On the Web• Twitter: @michaelwhyte• LinkedIn: michaelwhyte• Google+: michaelwhyte01• Flickr: mwhyte• Email: Michael_Whyte@bcit.ca• Web Site (out of date : ( (4+ years old…) ): michaelwhyte.ca

Presentation Files

• You can download this presentation along with all the demo files at the url listed below

http://go.mwhyte.ca/html5

HTML5

• What is HTML5• Semantic Tags• Main Tag• Web Forms• HTML5 JavaScript APIs• Fullscreen API

What is HTML5?

What is HTML5?

HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014, this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C).1

1. http://en.wikipedia.org/wiki/HTML5

What is HTML5?

HTML5 is the latest standard of HTML

What is HTML5?

• New Areas of HTML5 vs HTML 4.01• New Semantic tags• header, footer, section…etc…

• New Form tags• date, range, email…etc…

• New APIs• Canvas, Web Storage, Drag and Drop,

Fullscreen…etc…• Native support of SVG inline

HTML5 Related Technologies Image: http://commons.wikimedia.org/wiki/File:HTML5_APIs_and_related_technologies_taxonomy_and_status.svg

The Semantic Web

header

footer

section

article

nav

main

figure

time

The Semantic Web

HTML5 uses Semantic tags to describe what certain content is Why write and organize your content semantically?• Allow search engine crawlers to easily determine the importance of elements

of your web page ( A form of SEO )• Improves your sites accessibility (possibly allows screen readers to determine

the order of a document)• Allows for proper outlining of your document• Allows your site to be easily repurposed (Repurposing)

Why Use Semantic Tags

I’ll just use div tags…thank you…

Why Use Semantic Tags

Divs have no Semantic Value…

Making a button from a Div

1. Write your markup with divs2. Add CSS to make it look like a button3. Add a tabindex value to allow keyboard users to tab into the div

button4. Add aria role=“button” so screen readers interpret the div button as

a button5. Add JavaScript to allow your div button to be triggered with an

“enter” and “space” key press to make it act like a button

OrJust use

a button tag

<button></button>

Why Use Semantic Tags

• Semantic tags help with proper document outlining• h1 tags can be used on each sectioning element

Why Use Semantic TagsHTML5 Doc with Semantic Tags

(main, section, article, aside)HTML5 Doc Using Just

Div Tags

h1 tags are used on all the headings of this document. Since we use semantic sectioning tags the browsers will parse subsequent h1 headings as sub headings of the main document. No CSS was used on either page.

Why Use Semantic Tags

• Allows for Easier and better re-purposing of content

Tablet image modified fom a tablet image found here: http://commons.wikimedia.org/wiki/File:Devicetemplates_tablet-02.png

The Forgotten <main> tag

• Used to semantically markup the “main” content section of your web page• Must only be one “main” tag per page• The main tag must not be a child of a

sectioning element<main>

</main>

The Forgotten <main> tag

• What about IE9 – 11 Support?• Just add a display: block rule to the “main”

element in your CSS file• For accessibility support in IE9 – 11 add

role=“main”

<main>

main {display:

block;}

<main role='main'></main>

The Forgotten <main> tag

• What about IE8, 7, 6? • To support all the HTML5 semantic tags (including the <main> tag) you

need to include an HTML5 shim which uses JavaScript• If you use the aFarkas html5shiv it includes support for the main tag

• https://github.com/aFarkas/html5shiv

• I can’t use JavaScript for HTML5 support in IE8, 7, 6• Don’t use HTML5 stick with XHTML or HTML 4.01

Why use the <main> tag

• Any tag that helps describe content and is broadly supported should be used• Helps search bots determine the main content of your web site

or web app• It will help in the future with accessibility• Screen reader users and sighted keyboard users can (at least in the

future) use the main tag to skip to the main section of a web site using keyboard short cuts, with out the use of a “skip navigation” link• Add the aria attribute role=“main” to your main content section to help

with this

HTML5 Forms

• HTML5 Forms was originally a separate section under the WHATWG spec called Web Forms 2.01

• Folded into the W3C HTML5 spec• Includes many new form input types and attributes

1. HTML5 For Web Designers by: Jeremy Keith, pg. 41

HTML5 Forms

• Browser support varies• Visit http://www.wufoo.com/html5/ for charts showing browser

support for input types and attributes• All the new input types are technically partially supported in all

browsers in that they will display as a standard text input if the browser comes across an input that it does not support

1. HTML5 For Web Designers by: Jeremy Keith, pg. 41

HTML5 New Input Types

• search• number• range• color• tel• url

• email• date• datetime-local• month• week• time

HTML5 Forms

• Do a simple feature test if you want to provide fallbacks

Above code snippet modified from code found at: http://www.wufoo.com/html5/ and http://diveintohtml5.info/detect.html#input-types

var dateInputSupported = inputTypeSupported('date');

function inputTypeSupport(attr){var el = document.createElement('input');el.setAttribute('type', attr);

return el.type !== 'text'; // returns true || false}

Using the Pattern Attribute for Basic Fallback Support• HTML5 forms include support for the pattern attribute witch provides

for a simple way to match an input value entered by a user against a RegEx like pattern• You can use the pattern attribute as a basic fallback for browsers that

do not support some of the newer input types but do support HTML5 (Except Safari and Android)

Using the Pattern Attribute for Basic Fallback Support• Below is a pattern attribute set to test for hex colours

<input type="color" pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" title="#ccc or #cccccc" required>

Using the Pattern Attribute for Basic Fallback Support

• Notice the title attribute.• The browser appends the text in the title attribute to its warning

message when the pattern attribute is present• Use the title attribute to help the user determine what format the

text should be entered in

<input type="color" pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" title="#ccc or #cccccc" required>

Pattern Attribute Resource

html5pattern.com

HTML5 JavaScript APIs

• HTML5 started life as Web Apps 1.0 as part of the WHATWG• HTML5 is the first version of HTML to include documentation on

JavaScript APIs in the spec• Large sections of the HTML5 spec are dedicated to these APIs• It is because of these APIs that people often refer to HTML5 apps or

an app made with HTML5• What they really mean is a web app written in HTML5 that uses JavaScript

HTML5 JavaScript APIs

• Some of the new HTML5 JavaScript APIs include:

• Canvas• Geolocation• Web storage• Offline Apps• Fullscreen• Media Capture• File API

• Web messaging• Web sockets• Web workers• Indexed db• Vibration• Battery Status

Fullscreen API

• Gives the ability to either put an element or the entire page into fullscreen mode (with no browser ui…)• Similar to how a user can enter fullscreen mode on a PC by pressing

F11• With the added ability to only put a single element into fullscreen mode

• A developer can not force the user to use fullscreen mode. Fullscreen mode must be enabled by the user. • For example: by a click or touch of a button

Fullscreen API – Use Cases

• Slide shows• Photos or presentations

• Games

Fullscreen API – Browser Support

Desktop

IE 11

FirefoxChrome for Android

Mobile

Chrome,Opera,Safari

Fullscreen Support Test

• Test if fullscreen is available• Vender prefixes required • W3C standard unprefixed

version shown• Test does not work on some

Samsung stock browsers• Listen for the fullscreen change

event (more details on upcoming slides)

if(document.fullscreenEnabled){ // fullscreen possible}else{ // fullscreen not possible // fallback code…}

Fullscreen Element Property

• Used to determine which element is in fullscreen mode• Returns "null" if no element is in fullscreen mode• Vender prefixes required and capital "S" on screen for Mozilla

document.fullscreenElement;

Entering Fullscreen Mode

• To enter fullscreen mode you call the "requestFullscreen" method• Similar to other

HTML5 APIs each browser uses a prefixed version of the method

el.requestFullscreen;

el.msRequestFullscreen;

el.mozRequestFullScreen;

el.webkitRequestFullscreen;

Fullscreen API Vender Prefixes

• ms, webkit just use their browser prefix + fullscreen method + "fullscreen"• Watchout for the capital "S"

in the call for fullscreen methods for Mozilla• moz + fullscreen method +

"fullScreen"

mozRequestFullScreen;

Exiting Fullscreen

• The user can always exit fullscreen mode by pressing a key (usually the "Esc" key) or by performing a "swipe" gesture (Chrome Browser for Android)• You can also add your own way of letting the user exit fullscreen

mode by calling the "exitFullscreen" method (code below requires vendor prefixes)

document.exitFullscreen;

Fullscreen Events

• fullscreenchange• Fired when moving to and from fullscreen mode

• Fullscreenerror• Fired if entering into fullscreen mode fails

• Once again these events require vender prefixes• Unfortunately they differ slightly from the fullscreen methods vender prefixes• Read this article for proper cross-browser event handling syntax

• http://www.sitepoint.com/use-html5-full-screen-api/

Fullscreen CSS Pseudo Selectors

• You can target elements in fullscreen mode by using the ":fullscreen" pseudo selector• Vender prefixes required

:fullscreen

:-ms-fullscreen

:-moz-full-screen

:-webkit-full-screen

FullScreen Gotchas

• Firefox behaves differently than the other browsers when styling the an element entered into fullscreen mode• Firefox stretches the element so that it fills the screen• Chrome centres the element• IE centres the element with a little bit of help from CSS

• Fix• Wrap the element in a div and put the parent element into fullscreen mode

then centre the child element on the page

Cross Browser Differences – Fullscreen API

Chrome IE Firefox

FullScreen Gotchas

• Samsung Devices• Samsung's stock browsers use older versions of the Chrome browser which

include all the bugs of those older versions• Note 3

• Says it supports fullscreen mode but then does enter fullscreen mode• Note 4

• Supports fullscreen mode and enters fullscreen mode but user scrolling is disabled…

Fullscreen API Resources

• https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode• http://davidwalsh.name/fullscreen• http://www.sitepoint.com/use-html5-full-screen-api/

BCIT – Technical Web Designer Program• Help shape the future of the program• Become a program advisor• Participate in Mock interviews with students• Agency tours• Present to the students as an Industry expert• Have an idea for a course

BCIT – Technical Web Designer Program• To get involved contact me at the email below

Michael_Whyte@bcit.ca

Presentation Files

• You can download this presentation along with all the demo files at the url listed below

http://go.mwhyte.ca/html5

Thank You!