Transcript slides-html5x

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: [email protected]
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
time
nav
figure
main
article
section
footer
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 divs
2. Add CSS to make it look like a button
3. Add a tabindex value to allow keyboard users to tab into the div
button
4. Add aria role=“button” so screen readers interpret the div button as
a button
5. Add JavaScript to allow your div button to be triggered with an
“enter” and “space” key press to make it act like a button
Or
Just 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 Tags
HTML5 Doc with Semantic Tags
(main, section, article, aside)
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.
HTML5 Doc Using Just
Div Tags
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 {
display: block;
}
<main role='main'>
</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
var dateInputSupported = inputTypeSupported('date');
function inputTypeSupport(attr){
var el = document.createElement('input');
el.setAttribute('type', attr);
return el.type !== 'text'; // returns true || false
}
Above code snippet modified from code found at: http://www.wufoo.com/html5/ and http://diveintohtml5.info/detect.html#input-types
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
<input type="color"
pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
title="#ccc or #cccccc"
required>
• 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
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
Mobile
IE 11
Chrome for Android
Firefox
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/enUS/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
[email protected]
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!