Introduction to HTML 5 HTML 5 Essentials HTML

Introduction to HTML 5 – HTML 5 Essentials

HTML 5 Examples and Resources � Dive into HTML 5 - Mark Pilgrim (http: //diveintohtml 5. info/) or (http: //fortuito. us/diveintohtml 5/) or (http: //mislav. uniqpath. com/diveintohtml 5/) � Also available for PDF download (www. jesusda. com/docs/. . . /ebook_manual_en_dive -into-html 5. pdf) or (http: //s 3. amazonaws. com/mislav/Dive+into+HTML 5. pdf)

HTML 5 Examples and Resources

HTML 5 Examples and Resources �Learn HTML 5: 10 Must Read Lessons (http: //www. webhostingsecretrevealed. com/ featured-articles/learn-html 5 -10 -must-readlessons/)

HTML 5 Examples and Resources

HTML 5 Examples and Resources �HTML 5 Demos and Examples (http: //html 5 demos. com/)

HTML 5 Examples and Resources

HTML 5 Examples and Resources � WDL - 10 HTML 5 Demos to Make You Forget About Flash (http: //webdesignledger. com/inspiration/10 html 5 -demos-to-make-you-forget-about-flash)

HTML 5 Examples and Resources

Defining HTML 5 The term “HTML 5” covers a family of web technologies currently being specified by the W 3 C and being used in various stages by browser vendors.

Defining HTML 5 What is commonly referred to as “HTML 5” is often a combination of HTML 5 markup/features, CSS 3 style and Java. Script interactivity/ animation.

HTML 5 Family HTML 5 “Core” : New structural and semantic markup CSS 3 : Support for animation and much more) Geolocation Canvas Web Storage (Offline Support) Web Sockets Drag and Drop

Defining HTML 5 addresses current limitations such as multimedia (without browser plugins – for example, Flash, Java, Silverlight), data storage, lack of a native graphical format. These are qualities well suited for web applications.

Defining HTML 5

HTML 5 “Core” New Structural and Semantic markup is designed to reduce reliance on <div> tags and introduce logical, consistent and readable page elements.

HTML 5 “Core” Examples of new tags: Structural elements <header> <footer> <nav> <section> <article> <aside>

HTML 5 “Core”

HTML 5 “Core” <div id="header" > This is my header </div> #header { width: 960 px; height: 100 px; background-color: gray; }

HTML 5 “Core” <header> This is my header </header> header { width: 960 px; height: 100 px; background-color: gray; }

HTML 5 “Core” Many more new semantic tags: <hgroup> Acts a wrapper for one or more related heading elements. It can only contain a group of <h 1>-<h 6> elements(s) <figure> <figurecaption> The <figure> element is intended to be used with the <figurecaption> element to mark up diagrams, illustrations, photos and more

HTML 5 Web Forms New input types <input type = “email”> <input type = “search”> <input type = “url”> <input type = “rel”> Many more: datepickers, auto-complete, datalists…

Multimedia and a drawing API <audio> and <video> Enabling native audio and video playback within the browser, no browser plugins needed. <canvas> Resolution-dependent bitmap canvas, which can be used for rendering visual images (charts, game graphics) on the fly in the browser. Provides native drawing and animation format.

Multimedia and a drawing API <audio> and <video> <video src="catz. mp 4" width="400" height="300"></video> <audio src="high_seas_rip. mp 3" controls preload="auto" autobuffer></audio>

Multimedia and a drawing API http: //camendesign. com/code/video_for_everybody/test. html

Multimedia and a drawing API <canvas> <canvas id="my. Canvas"></canvas> <script> var canvas = document. get. Element. By. Id ("my. Canvas"), context = canvas. get. Context("2 d"); // x = 10, y = 20, width = 200, height = 100 context. fill. Rect(10, 200, 100); </script>

Multimedia and a drawing API The canvas element works as a drawing surface on your page. You can create shapes with colour, gradient, and pattern fills. You can interactively manipulate pixels onscreen, render text, and export these contents to a static image file - such as a. png. You can also add Java. Script or the new CSS 3 animation features to make the objects you create move, fade, scale - and so on.

Multimedia and a drawing API http: //w ww. lucidchart. com Web applications such as the one at Lucid. Chart. com can use the canvas element to interactively draw charts and diagrams.

Related technologies in the HTML 5 “family” CSS 3 : Support for animation and much more) Web Storage (Offline Support) http: //dev. w 3. org/html 5/webstorage/#introduction Geolocation - http: //dev. w 3. org/geo/api/specsource. html#introduction Drag and Drop http: //developers. whatwg. org/dnd. html#dnd Web Workers and Sockets Microdata http: //developers. whatwg. org/links. html#microdata

CSS 3 HTML 5 and CSS 3 work hand in hand. Many “HTML 5 experiences” include CSS 3 features. � CSS 3 animations and transitions � 2 D and 3 D transformations � backgrounds, borders, RGBa colors, gradients, box and text shadows � multi-column layouts � media queries � web fonts

CSS 3 animations � Technologies such as Flash have traditionally been used to animate objects in the browser. � You can now create some of the same functionality using CSS rules and properties. � In the future, the HTML 5 Canvas element and CSS 3 transitions can help designers create interactive and animated elements on the page. � Visit http: //animatable. com/demos/madmanimation/ in a Webkit browser - such as Chrome or Safari - to see CSS animation in action.

CSS 3 http: //animatable. com/demos/madmanimation/

CSS 3 transitions � CSS transitions are closely related to animation, but fundamentally different. � A transition allows property changes in CSS values to occur smoothly over a specified duration. � You can currently perform this type of animation with Java. Script and Flash, but transitions give designers a tool to use without becoming a scripting expert. � Visit http: //daftpunk. themaninblue. com/ to see an example of CSS transitions in action.

CSS 3 http: //daftpunk. themaninblue. com/

CSS 3 CSS 2 D- and 3 D-transformations � The CSS transform property allows you to rotate, scale or skew an element on your page. � You can also animate transforms. � You can also add the perspective property to the transformation effect to simulate an object positioned or animated in 3 D space. � Visit http: //www. webkit. org/blog-files/3 d- transforms/morphing-cubes. html/ to see an example of a 3 D-CSS transformation that is also animated.

CSS 3 http: //www. webkit. org/blog-files/3 d-transforms/morphing-cubes. html

Related technologies in the HTML 5 “family” What is an API? � APIs (Application Programming Interfaces) are a way to create applications using pre-built components and are not unique to web development - or even to scripting languages. � One of the main goals of an API is to standardize how certain mechanics work and to simplify otherwise complicated programming tasks. � APIs are very significant in the world of HTML 5

Web Storage Takes the concept of browser “cookies” to higher levels. HTML 5 provides two ways to store data: local. Storage and session. Storage. � Data saved as local. Storage is available at any point – even after browser closes or system is restarted. � Data saved as session. Storage is lost as soon as that window is closed.

Web Storage http: //developers. whatwg. org/ Web pages request user permission to use offline storage.

Geolocation The Geolocation API Specification allows the web browser’s geographic location to be pinpointed. This information is then used to send you relevant data based on your whereabouts. Version 3. 5 of Firefox was one of the first browser to make use of geolocation.

Geolocation Example of Geolocation: http: //www. flickr. com/map/ � This page displays a map of photographs around the world that users have uploaded with metadata that tags their images with the geographical coordinates of the location. � The term for images with this metadata is geotagged. Click ‘Find My Location’

Geolocation Click ‘Share Location’

Geolocation If there are geotagged images in your immediate area, you will see pink circles representing images on a local map.

Web Workers � Web Workers is a framework that addresses browser performance. � When you access advanced web applications, such as mapping or applications that instantly generate charts and graphs, there are several processor-intensive computations that can slow down the performance of your application. � Web Workers are scripts that run in a separate thread. � This separation means that processes, such as obtaining data from a database, occur independently from user behaviour which creates a more seamless environment for the user

Who is using HTML 5 today? � Mobile devices and smartphones are active platforms for HTML 5 documents and web applications today. � Browsers such as Apple Safari for i. OS have supported features associated with HTML 5 - for example, offline storage and CSS 3 animations - for a few years. � This is because i. OS mobile devices, such as the i. Phone and the i. Pad, have a distinctive hardware profile including screen size and memory capabilities as well as a consistent software profile. The mobile Safari browser on Apple’s i. Phone has been using HTML 5 features such as offline storage since 2009, and has internal preferences to set the storage size.

Who is using HTML 5 today? � Within the landscape of desktop computing, there are far too many variables to support easily, including multiple browsers, old browsers, different monitor resolutions and more. � Users are also demanding content that is optimized for mobile devices, which HTML 5 and its supporting technologies can deliver. � For this reason, HTML 5 support is a high priority for the manufacturers of these devices.

Browser Support Visit the URL for your primary browser, and then explore the HTML 5 features: � Google Chrome (www. chromeexperiments. com) � Apple Safari (www. apple. com/html 5) � Mozilla Firefox (https: //developer. mozilla. org/en/HTML 5) � Microsoft Internet Explorer (www. nevermindthebullets. com)

Defining HTML 5

1 - Using HTML 5 Markup Google Chrome 06_index. html

1 - Using HTML 5 Markup Safari 06_index. html

1 - Using HTML 5 Markup <div id="wrap"> <div id="masthead"> <h 1>The web's #1 resource for smoothie recipes</h 1> <img src="images/smoothieworld_logo. jpg" width="200" height="150" alt="smoothieworld_logo" /> </div>

1 - Using HTML 5 Markup #masthead { background-color: #FFF; } #masthead h 1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2 em; color: #a 50476; font-weight: normal; float: right; margin: 1. 5 em 4 em 0 0; }

1 - Using HTML 5 Markup <div id="wrap"> <header id="masthead"> <h 1>The web's #1 resource for smoothie recipes</h 1> <img src="images/smoothieworld_logo. jpg" width="200" height="150" alt="smoothieworld_logo" /> </header>

1 – Using HTML 5 Markup Google Chrome 06_index. html

1 - Using HTML 5 Markup Firefox 3. 6 06_index. html

Using HTML 5 Markup When Firefox 3. 6 encounters a tag it does not recognise it treats it as an inline element. Add the following code to reset. css: header, section, aside, nav, footer, figure, figcaption{ display: block; }

1 - Using HTML 5 Markup Firefox 3. 6 06_index. html

1 - Using HTML 5 Markup Internet Explorer 8 06_index. html

1 - Using HTML 5 Markup When Internet Explorer 8 or earlier encounters a tag it does not recognise it completely ignores them. Add link to Java. Script library called Modernizr – forces IE to recognise HTML 5 tags: <link rel="stylesheet" media="screen" href="base. css" type="text/css" /> 06_index. html <script src="modernizr-1. 7. js" type="text/javascript"></script>

1 - Using HTML 5 Markup Internet Explorer 8 06_index. html

2 - Creating HTML 5 Forms Google Chrome 07_contactform. html

2 - Creating HTML 5 Forms Edit: 07_contactform. html <label for = "email">Email: <input id = "email“ type = “email” name = “customeremail"></label> <label for = "website">Website: <input id = "website" type = “url” name ="customerwebsite"></label> Only effects mobile browsers. In future. will be used to process form data more efficiently.

Creating HTML 5 Forms Edit: 07_contactform. html <label for ="firstname">First name: <input id="firstname" type="text" name="firstname" placeholder = "Enter your first name"></label>

2 - Creating HTML 5 Forms Google Chrome 07_contactform. html

2 - Creating HTML 5 Forms Edit: 07_contactform. html <label for ="firstname">First name: <input id="firstname" type="text" name="firstname" placeholder = "Enter your first name“ required></label>

2 - Creating HTML 5 Forms Google Chrome 07_contactform. html

2 - Creating HTML 5 Forms Internet Explorer 8 07_contactform. html

2 - Creating HTML 5 Forms Providing fallback for browsers that don’t support HTML 5 features Edit: <script src="modernizr. custom. 03287. js"></script> <script> yepnope({ test: Modernizr. input. placeholder, nope: 'h 5 f. js', callback: function(url, result, key) { H 5 F. setup(document. get. Element. By. Id("contactform")); } }); </script> 07_contactform. html

2 - Creating HTML 5 Forms Internet Explorer 8 07_contactform. html

3 - Introduction to Java. Script and j. Query Google Chrome jquerytoggle. html

3 - Introduction to Java. Script and j. Query Edit: </style> <script type="text/javascript" src="jquery. js"></script> </head> jquerytoggle. html

3 - Introduction to Java. Script and j. Query Edit: <script type="text/javascript" src="jquery. js"></script> <script> $(document). ready(function() { $('#Calorie. Box'). hide(); }); </script> jquerytoggle. html

3 - Introduction to Java. Script and j. Query Google Chrome jquerytoggle. html

3 - Introduction to Java. Script and j. Query Edit: <h 4>Calories per serving</h 4> to <h 4><a id="trigger. Calorie. Box" href="#"> Calories per serving</a> </h 4> jquerytoggle. html

3 - Introduction to Java. Script and j. Query Edit: <script> $(document). ready(function() { $('#Calorie. Box'). hide(); $(‘a#trigger. Calorie. Box’). click(function() { $(‘#Calorie. Box’). show(); e. prevent. Default() }); jquerytoggle. html }); </script>

3 - Introduction to Java. Script and j. Query Google Chrome jquerytoggle. html

3 - Introduction to Java. Script and j. Query Google Chrome jquerytoggle. html

3 - Introduction to Java. Script and j. Query Edit: <script> $(document). ready(function() { $('#Calorie. Box'). hide(); $(‘a#trigger. Calorie. Box’). click(function() { $(‘#Calorie. Box’). toggle(); e. prevent. Default() }); jquerytoggle. html }); </script>

4 - Working with Video and Audio Elements Edit: <body> <video src='videos/Big. Buck. ogg' controls poster='poster 320. jpg' width='320' height='180'></video> index. html

4 - Working with Video and Audio Elements Firefox 3. 6 index. html Not all browsers support the same video formats. ogg supported by Firefox, Google Cfrome

4 - Working with Video and Audio Elements Safari 4. 0 index. html Not all browsers support the same video formats. ogg supported by Firefox, Google Cfrome

4 - Working with Video and Audio Elements Edit: <video controls poster='poster 320. jpg' width='320' height='180'> <source src='videos/Big. Buck. ogg' type='video/ogg; codecs="theora, vorbis"'> <source src='videos/Big. Buck. mp 4' type='video/mp 4; codecs="avc 1. 42 E 01 E, mp 4 a. 40. 2"'> <h 1><a href="videos/Big. Buck. mp 4">Download the video</a></h 1> </video> index. html

4 - Working with Video and Audio Elements Edit: <h 1><a href="videos/Big. Buck. mp 4">Download the video</a></h 1> <object width="320" height="180" type="application/xshockwave-flash" data="player/flowplayer-3. 2. 5. swf"> <param name="movie" value="player/flowplayer 3. 2. 5. swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "videos/Big. Buck. mp 4", "auto. Play": false, "auto. Buffering": true}}' /> <h 1><a href="videos/Big. Buck. mp 4">Download the video</a></h 1> </object> </video> index. html

5 - Working with Canvas <canvas id="lesson. Canvas" width="300" height="300"style="margin: 100 px; "> </canvas> cnavastemplate. html

5 - Working with Canvas <script type="text/javascript"> function setup() { var canvas = document. get. Element. By. Id('lesson. Canvas'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); <!--drawing instructions here --> } } canvastemplate. html

5 - Working with Canvas <script type="text/javascript"> function setup() { var canvas = document. get. Element. By. Id('lesson. Canvas'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); ctx. stroke. Rect(0, 0, 300); } } canvastemplate. html

5 - Working with Canvas Google Chrome canvastemplate. html

5 - Working with Canvas <script type="text/javascript"> function setup() { var canvas = document. get. Element. By. Id('lesson. Canvas'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); ctx. stroke. Rect(0, 0, 300); ctx. stroke. Style = ‘rgb(255, 0, 0)’; ctx. stroke. Rect(0. 5, 100, 100); } } canvastemplate. html

5 - Working with Canvas Google Chrome canvastemplate. html

5 - Working with Canvas function setup() { var canvas = document. get. Element. By. Id('lesson. Canvas'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); ctx. stroke. Rect(0, 0, 300); ctx. stroke. Style = ‘rgb(255, 0, 0)’; ctx. stroke. Rect(0. 5, 100, 100); ctx. fill. Rect(20, 100, 100); ctx. fill. Style = ‘rgb(0, 255, 0)’; ctx. fill. Rect(50, 100, 100); } } canvastemplate. html

5 - Working with Canvas Google Chrome canvastemplate. html

5 - Working with Canvas function setup() { var canvas = document. get. Element. By. Id('lesson. Canvas'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); ctx. stroke. Rect(0, 0, 300); ctx. stroke. Style = ‘rgb(255, 0, 0)’; ctx. stroke. Rect(0. 5, 100, 100); ctx. fill. Rect(20, 100, 100); ctx. fill. Style = ‘rgb(0, 255, 0)’; ctx. fill. Rect(50, 100, 100); ctx. clear. Rect(80, 30, 30); } canvastemplate. html }

5 - Working with Canvas Google Chrome canvastemplate. html

6 – Styling with CSS 3 Google Chrome colorsstylesand gradients_completed. html

6 – Styling with CSS 3 Firefox 3. 6 colorsstylesand gradients_completed. html

6 – Styling with CSS 3 Google Chrome usingtransforms_completed. html

6 – Styling with CSS 3 Google Chrome drawingloop_completed. html

7 - Offline Storage notepad_example. html

7 – Offline Storage Google Chrome notepad_example. html

7 – Offline Storage Google Chrome notepad_example. html

7 – Offline Storage Google Chrome notepad_example. html

7 – Offline Storage Internet Explorer 8 notepad_example. html

7 – Offline Storage Firefox 3. 6 notepad_example. html

7 – Offline Storage Firefox 3. 6 notepad_example. html

7 – Offline Storage Firefox 3. 6 only use offline storage when on the Web. notepad_example. html

7 – Offline Storage Edit (line 30): mystorage = window. local. Storage || (window. global. Storage ? global. Storage[location. hostname] : null); to mystorage = window. session. Storage || (window. global. Storage ? global. Storage[location. hostname] : null); notepad_example. html

7 – Offline Storage Google Chrome

7 – Offline Storage Google Chrome notepad_example. html

7 – Offline Storage Google Chrome notepad_example. html

7 – Offline Storage Google Chrome notepad_example. html

9 - HTML 5 Drag and Drop Mozilla Firefox shopping_completed. html

9 - HTML 5 Drag and Drop Mozilla Firefox checkers_completed. html