HTML5

HTML 5 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it

Table of Contents Introduction to HTML 5 Changed Old Tags New Tags Audio and Video Tags New Structural Tags ( <header> , <footer> , …) New Form Elements and Validation New Attributes Canvas vs. SVG Local Storage

Introduction to HTML 5 What the … is HTML 5?

What is HTML 5? HTML5 – the next major revision of the HTML Currently under development Far away from final version Developed under the HTML 5 working group of the World Wide Web Consortium (W3C) in 2007 First Public Working Draft of the specification January 22, 2008 Parts of HTML5 are being implemented in browsers before the whole specification is ready

HTML – Past, Present, Future 1991 – HTML first mentioned – Tim Berners-Lee – HTML tags 1993 – HTML (first public version, published at IETF) 1993 – HTML 2 draft 1995 – HTML 2 – W3C 1995 – HTML 3 draft 1997 – HTML 3.2 – “Wilbur” 1997 – HTML 4 – ”Cougar” – CSS 1999 – HTML 4.01 (final) 2000 – XHTML draft 2001 – XHTML (final) 2008 – HTML5 / XHTML5 draft 2011 – feature complete HTML5 2022 – HTML5 – final specification

HTML 5 Goals Latest version is HTML5 Aimed to have all of the power of native applications Run on any platform (Windows, Linux, iPhone, Android, etc.) New features should be based on HTML, CSS, DOM and JavaScript Reduce the need for external plugins Better error handling More markup to replace scripting

Designer Outlook What a Designer Should Know?

Changed Old Tags Doctype tag: HTML tag: Meta tag: Link tag: <!DOCTYPE html> <html lang="en" xml:lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="style-original.css">

New Layout Sctucture Better layout structure: new structural elements <section> <header> <nav> <article> <aside> <footer> <header> <footer> <nav> <aside> <section> <header> <article> <footer>

New Layout Sctucture (2) Elements like header and footer are not meant to be only at the top and bottom of the page Header and footer of each document section Not very different from <DIV > tag but are more semantically well defined in the document structure

New Layout Sctucture – Example <body> <header> <hgroup> <h1>HTML 5 Presentation</h1> <h2>New Layout Structure</h2> </hgroup> </header> <nav> <ul> Lecture </ul> <ul> Demos </ul> <ul> Trainers </ul> </nav>

New Layout Sctucture – Example (2) <section> <article> <header> <h1>First Paragraph</h1> </header> <section> Some text </section> </article> </section> <aside> <a href="http://academy.telerik.com"> more info</a> </aside> <footer> Done by Doncho Minkov, (c) 2011, Telerik Academy </footer> </body>

New Layout Structure Tags Live Demo

New Tags <article> For external content, like text from a news-article, blog, forum, or any other external source <aside> For content aside from (but related to) the content it is placed in <details> For describing details about a document, or parts of a document <summary> A caption, or summary, inside the details element

New Tags (2) <mark> For text that should be highlighted <nav> For a section of navigation <section> For a section in a document (e.g. chapters, headers, footers) <wbr> Word break. For defining an appropriate place to break a long word or sentence Other tags <command> , <datalist> , <details> , <progress > , etc.

New Media Tags Media Tags <audio> Attributes: autoplay , controls , loop , src <video> Attributes: autoplay , controls , loop , height , width , src <audio width="360" height="240" controls= "controls" > <source src="someSong.mp3" type="audio/mp3"> </source> Audio tag is not supported </audio>

Embed Tag – New Syntax <embed> Defines embedded content, such as a plug-in Attributes src="url" , type="type" <embed src="helloworld.swf" />

New Attributes New attributes Attribute Description Autocomplete ON / OFF . In case of “ on ”, the browser stores the value, auto fill when the user visits the same form next time Autofocus Autofocus . Input field is focused on page load Required Required . Mandates input field value for the form submit action Draggable True / false indicates if the element is draggable or not

New <input> Types New <input> type(s) Attribute Description Number/Range Restricts users to enter only numbers. Additional attributes min , max and step and value can convert the input to a slider control or a spin box date, month, week, time, date + time, and date + time - time zone Providers a date picker interface. Email Input type for Email Addresses URL Input field for URL address Telephone Input type for Telephone number

New Form Tags: <input type="range"> Live Demo

Built-In Forms Validation Live Demo

Canvas Allows dynamic, scriptable rendering of 2D shapes and bitmap images Low level, procedural model Updates a bitmap Does not have a built-in scene graph Consists of a drawable region defined in HTML Has height and width attributes Accessible by JavaScript Code Used for building graphs, animations, games, and image composition

Canvas Example In HTML: <canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not supported. </canvas> Access with JavaScript: var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

SVG SVG stands for S calable V ector G raphics A language for describing 2D-graphics Graphical applications Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG Internet Explorer users may have to install the Adobe SVG Viewer HTML5 allows embedding SVG Directly using <svg> ... </svg> https://developer.mozilla.org/en/SVG

SVG Example <!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> </svg> </body> </html>

SVG Gradient Example <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" /> </svg>

Local Storage More persistent than temporary internet files and cookies Most useful for (mobile) devices that are not connected to the Internet all the time, or when bandwidth is scarce More storage space available - 5MB limit per domain (recommended by W3C), compared to 4KB per cookie

Local Storage Demo HTML <form> <fieldset> <label for="value">enter key name:</label> <input type="text" id="key" /> <label for="value">enter key value:</label> <input type="text" id="value" /> </fieldset> <fieldset> <button type="button" onclick="setValue()"> store the key value</button> <button type="button" onclick="getValue()"> retrieve the key value</button> <button type="button" onclick="getCount()"> retrieve the number of keys</button> <button type="button" onclick="clearAll()"> clear all key values</button> </fieldset> </form>

Local Storage Demo Script var $ = function (id) { return document.getElementById(id); } function setValue() { window.localStorage.setItem($("key").value, $("value").value); } function getValue() { alert(window.localStorage.getItem($("key").value)); } function getCount() {alert(window.localStorage.length);} function clearAll() {window.localStorage.clear();}

End User Outlook What is the Advantage to the End User?

HTML 5 – End User Outlook Provides a very rich user experience without Plug-ins RIA replacement? Better Performance Leverages GPU for better graphical experience

How to Detect HTML5? HTML5 is not a thing someone can detect It consists of many elements that can be detected <canvas> , <video> , etc. The HTML5 specification defines how tags interact with JavaScript Through the D ocument O bject M odel ( DOM ) HTML5 doesn’t just define a <video> tag There is also a corresponding DOM API for video objects in the DOM You can use this API to detect support for different video formats, etc.

HTML 5 – Showcases and Resources HTML 5 Rocks – Examples, Demos, Tutorials http://www.html5rocks.com/ HTML 5 Demos http ://html5demos.com / Internet Explorer 9 Test Drive for HTML 5 http ://ie.microsoft.com/testdrive/ Apple Safari HTML 5 Showcases http://www.apple.com/html5 / Dive into HTML 5 http://diveintohtml5.org/

Homework Make the following Web Page. Note that there should be validators for emails and url (email and url are required fields) Using the previously made Web Page, add functionality to check if the text in "email" and "repeat email" fields is equal. If not show warning message and reload the page

Using Canvas draw the following figures Try doing the same using SVG Hint: Use JavaScript Homework (2)

Homework (3) Build the following Web Page using HTML5 and CSS 2.1 Use "Lorem Ipsum" to fill with some sample Content Try to make the page look OK when the window is resized

HTML5

More Related Content

What's hot (19)

Viewers also liked (12)

Similar to HTML5 (20)

More from Doncho Minkov (20)

Recently uploaded (20)

HTML5