Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5. About Me…Michael Whyte Lead Instructor – Technical Web Designer Program – BCIT Official BCIT Web Site:

Similar presentations


Presentation on theme: "HTML5. About Me…Michael Whyte Lead Instructor – Technical Web Designer Program – BCIT Official BCIT Web Site:"— Presentation transcript:

1 HTML5

2 About Me…Michael Whyte Lead Instructor – Technical Web Designer Program – BCIT Official BCIT Web Site: http://www.bcit.ca/study/programs/6490certhttp://www.bcit.ca/study/programs/6490cert Student Web Stie: http://twd.htpwebdesign.cahttp://twd.htpwebdesign.ca Part Time Instructor – New Media / D3 – BCIT New Media: http://www.bcit.ca/study/programs/6415smcerthttp://www.bcit.ca/study/programs/6415smcert D3: http://www.bcit.ca/study/programs/6405dipmahttp://www.bcit.ca/study/programs/6405dipma

3 About Me…Michael Whyte On the Web Twitter: @michaelwhyte LinkedIn: michaelwhyte Google+: michaelwhyte01 Flickr: mwhyte Email: Michael_Whyte@bcit.caMichael_Whyte@bcit.ca Web Site (out of date : ( (4+ years old…) ): michaelwhyte.camichaelwhyte.ca

4 Presentation Files You can download this presentation along with all the demo files at the url listed below http://go.mwhyte.ca/html5

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

6 What is HTML5?

7 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/HTML5http://en.wikipedia.org/wiki/HTML5

8 What is HTML5? HTML5 is the latest standard of HTML

9 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.svghttp://commons.wikimedia.org/wiki/File:HTML5_APIs_and_related_technologies_taxonomy_and_status.svg

10 The Semantic Web header footer section article nav main figure time

11 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)

12 Why Use Semantic Tags I’ll just use div tags…thank you…

13 Why Use Semantic Tags Divs have no Semantic Value…

14 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

15 Or Just use a button tag

16 Why Use Semantic Tags Semantic tags help with proper document outlining h1 tags can be used on each sectioning element

17 Why Use Semantic Tags HTML5 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.

18 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.pnghttp://commons.wikimedia.org/wiki/File:Devicetemplates_tablet-02.png

19 The Forgotten 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

20 The Forgotten 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; }

21 The Forgotten tag What about IE8, 7, 6? To support all the HTML5 semantic tags (including the 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

22 Why use the 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

23 HTML5 Forms HTML5 Forms was originally a separate section under the WHATWG spec called Web Forms 2.0 1 Folded into the W3C HTML5 spec Includes many new form input types and attributes 1. HTML5 For Web Designers by: Jeremy Keith, pg. 41

24 HTML5 Forms Browser support varies Visit http://www.wufoo.com/html5/ for charts showing browser support for input types and attributeshttp://www.wufoo.com/html5/ 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

25 HTML5 New Input Types search number range color tel url email date datetime-local month week time

26 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-typeshttp://www.wufoo.com/html5/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 }

27 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)

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

29 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

30 Pattern Attribute Resource html5pattern.com

31 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

32 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

33 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

34 Fullscreen API – Use Cases Slide shows Photos or presentations Games

35 Fullscreen API – Browser Support Desktop IE 11 Firefox Chrome for Android Mobile Chrome, Opera, Safari

36 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… }

37 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;

38 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;

39 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;

40 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;

41 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/

42 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

43 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

44 Cross Browser Differences – Fullscreen API ChromeIEFirefox

45 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…

46 Fullscreen API Resources https://developer.mozilla.org/en- US/docs/Web/Guide/API/DOM/Using_full_screen_mode 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/

47 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

48 BCIT – Technical Web Designer Program To get involved contact me at the email below Michael_Whyte@bcit.ca

49 Presentation Files You can download this presentation along with all the demo files at the url listed below http://go.mwhyte.ca/html5

50 Thank You!


Download ppt "HTML5. About Me…Michael Whyte Lead Instructor – Technical Web Designer Program – BCIT Official BCIT Web Site:"

Similar presentations


Ads by Google