New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation
Introduction to HTML 5 Changed Old Tags New Tags Audio and Video Tags New Structural Tags (,, …) New Form Elements Forms Validation New Attributes 2
New CSS Styles New JavaScript APIs Working with SVG and Canvas 3
What the … 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 5
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 6
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 7
What a Designer Should Know?
Doctype tag: HTML tag: Meta tag: Link tag:
Better layout structure: new structural elements <header> <footer> <nav><aside><section> <header> <article> <footer>
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 tag but are more semantically well defined in the document structure
<body> HTML 5 Presentation HTML 5 Presentation New Layout Structure New Layout Structure </header> <ul> Lecture Lecture </ul> Demos </ul> Trainers Trainers </ul> </nav>
First Paragraph First Paragraph </header> Some text Some text <aside> more info more info </aside> <footer> Done by Doncho Minkov, (c) 2011, Telerik Academy Done by Doncho Minkov, (c) 2011, Telerik Academy </footer></body>
Live Demo
For external content, like text from a news-article, blog, forum, or any other external source For content aside from (but related to) the content it is placed in For describing details about a document, or parts of a document A caption, or summary, inside the details element
For text that should be highlighted For a section of navigation For a section in a document (e.g. chapters, headers, footers) Word break. For defining an appropriate place to break a long word or sentence Other tags ,,,, etc.
Media Tags Attributes: autoplay, controls, loop, src Attributes: autoplay, controls, loop, height, width, src Audio tag is not supported Audio tag is not supported</audio>
Live Demo
Defines embedded content, such as a plug-in Attributes src="url", type="type"
New attributes AttributeDescriptionAutocomplete 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 Dragabble True / false indicates if the element is dragabble or not
New type(s) AttributeDescriptionNumber/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. Input type for Addresses URL Input field for URL address Telephone Input type for Telephone number
Live Demo
What a programmer must know?
UI APIs Canvas Drag and Drop Offline Applications Local Storage Extension to HTMLDocument
Canvas Dynamic, Scriptable rendering of 2D images Uses JavaScript to draw Resolution-dependent bitmap Can draw text as well This text is displayed if your browser does not support This text is displayed if your browser does not support HTML5 Canvas. HTML5 Canvas.</canvas> var example = document.getElementById('ExampleCanvas'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);
fillStyle Sets the drawing color Default fillStyle is solid black but you can set it to whatever you like fillRect(x, y, width, height) Draws a rectangle Filled with the current fillStyle
strokeStyle Sets the stroke color strokeRect(x, y, width, height) Draws an rectangle with the current strokeStyle strokeRect doesn’t fill in the middle It just draws the edges clearRect(x, y, width, height) clears the pixels in the specified rectangle
What is a Path? Something that is about to be drawn It is not drawn yet context.beginPath(); context.moveTo(0, 40); context.lineTo(240, 40); context.moveTo(260, 40); context.lineTo(500, 40); context.moveTo(495, 35); context.lineTo(500, 40); context.lineTo(495, 45);
Live Demo
Drag and Drop attribute draggable="true" Events: dragstart, dragstop
Offline Applications Cache manifest file Every page of your web application needs a manifest attribute Points to the cache manifest for the entire application Manifest file should contain Content-Type header ( text/cache-manifest ) Forcible cache update applicationCache.updated()
Local Storage Store data locally Similar to cookies, but can store much larger amount of data Same Origin Restrictions localStorage.setItem(key, value) localStorage.getItem(key) SQL Storage Easier access to SQL Storage
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, 'Local document storage', 5*1024*1024, function (db) {db.changeVersion('', '1.0', function (db) {db.changeVersion('', '1.0', function (t) { function (t) { t.executeSql('CREATE TABLE docIds (id, name)'); t.executeSql('CREATE TABLE docIds (id, name)'); }, }, error); error); }); }); function saveState(text){ localStorage["localStorageDemo"] = text; localStorage["localStorageDemo"] = text;} function restoreState(){ return localStorage["localStorageDemo"]; return localStorage["localStorageDemo"];} Local Storage SQL Web
HTML DOM Extensions: getElementsByClassName() innerHTML hasFocus getSelection()
36
New selectors (usable in JavaScript also) Web Fonts Text wrapping/overflow Columns Opacity, Gradients, Rounded Corners, Shadows Transitions, Transforms, Animations
What is the Advantage to the End User?
Provides a very rich user experience without Plug-ins RIA replacement? Better Performance Leverages GPU for better graphical experience
HTML5 is not a thing someone can detect It consists of many elements that can be detected ,, etc. The HTML5 specification defines how tags interact with JavaScript Through the Document Object Model (DOM) HTML5 doesn’t just define a 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. 40
HTML 5 Rocks – Examples, Demos, Tutorials HTML 5 Demos Internet Explorer 9 Test Drive for HTML 5 Apple Safari HTML 5 Showcases
Questions?