Development of Internet Applications HTML5 4 Development of Internet Applications HTML5 Ing. Jan Janoušek
What is HTML5? HTML5 is future of web application and development HTML5 is multiplaform HTML5 is not just about marketing HTML5 is not based on XML HTML5 is not enough for everything http://www.w3.org/TR/html5/ http://www.w3.org/Style/CSS/current-work
History of HTML5 1991 – HTML tags 1999 – HTML 4.01 2000 – XHTML 1.0 – future of web 2002 – XHTML 2.0 2004 – WHATWG Web Hypertext Application Technology Work Group Individual developers from Apple, Google, Mozila, Opera 2007 – HTML Design Principles, HTML5 Draft 2009 – W3C ends XHTML 2.0 and focus on HTML5 2012 – W3C Candidate Recommendation 2014 – W3C Recommendation – HTML 5.0 2016 – W3C Recomendation – HTML 5.1
What brings HTML5 HTML5 = HTML + CSS + JS Direct and simple approach to describe the web Openness and also clear interpretation – specification of an output rather than specification of an input New possibilities Interaction with an user Visualisation and multimedia Better usage of hardware resources Semantic web
www.html5rocks.com ie.microsoft.com/testdrive/ www.html5.cz www.msdn.cz/knihy
HTML5 DOCTYPE HTML5 XHTML 1.0 Transitional <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
Script, style and link - attribute type HTML5 <script> // Code here. </script> XHTML 1.0 Transitional <script type="text/javascript"> /* <![CDATA[ */ // Code here. /* ]]> */ </script>
Structural elements
New elements METER PROGRESS DETAILS & SUMMARY TIMEFIGURE DATALIST OUTPUT RUBY ADDRESS SECTION HGROUP MENU
New form elements <input type="date" /> <input type="datetime" /> <input type="email" /> <input type="month" /> <input type="number" /> <input type="range" /> <input type="tel" /> <input type="time" /> <input type="url" /> Including integrate validation and mode of input (for example mobile devices) Multiple files upload http://www.rewferguson.com/files/2011-07-19/
Multimedia <video controls/> <source src=”test.mp4” /> <source src=”test.ogg” /> </video> Native player in a browser There are issues with formats H.264 – IE, Chrome, Safari (licensed) OGG – Firefox, Opera - WebM/VP8 – Google, Mozzila, Adobe Similar syntax and issues for audio element
Canvas & SVG Canvas SVG Element for drawing Raster graphics 2D and 3D context (WebGL) All drawing is performed using JavaScript API. Animation using setTimeout / requestAnimationFrame SVG Vector picture format with description based on XML. Accessible using DOM, everything is directly modifiable.
Microdata and Custom data attributes Successor of microformats, the goal is insert additional semantic to the page Attributes itemscope, itemtype a itemprop Widely recognized dictionary is www.schema.org https://developers.google.com/structured-data/customize/overview Data attributs Custom attributes for usage in JavaScript – prefixed with “data-“ <div data-widget="slider" data-animation-type="bottom-up"> <div data-duration="2s"><img src="a.jpg" /></div> <div data-duration="1.3s"><img src="b.jpg" /></div> <div data-duration="4s"><img src="c.jpg" /></div> </div>
API Allows usage of the browser / system resources within JavaScript. Based on ECMAScript 5. There exists tests at test262.ecmascript.org, cca 11K tests. Support depends on browsers http://caniuse.com/ Asynchronous where it makes a sense.
API Drag and drop – attribute draggable Editable HTML – attribute contenteditable GeoLocation Offline applications – storage, app cache manifest Web Sockets – bidirectional communication based on TCP protocol. Web Workers – similar to thread on background, without access to DOM hierarchy, based on messages Communication between documents – messages Storage – session, local and database (IndexedDB) Working with files Speech Recognition / Synthesis And many others… www.html5test.com
CSS3 It is possible change style on every elements, even video, audio or canvas element At this moment large part is still in development phase, using vendor-prefixes, http://www.w3.org/Style/CSS/current-work Media Queries @media screen and (min-width: 600px) and (max-width: 900px) New selectors and pseudoselectors :nth-child(N), :first-of-type
CSS3 Colors – opacity, rgba, hsl/a, gradients Backgrounds – dimensions, multiple backgrounds. Border – colors of edges, image for edges, rounded corners, shadows Text – text wrapping, shadows, multi column text, custom fonts (otf, eot, ttf, woff), etc. Transformations (also in 3D) – rotation, scale, skew, translation. Transitions and animations
Other features Asynchronous script loading DataURI – base64 encoded document that can be used as a resource.
Sources alistapart.com/articles/get-ready-for-html-5 dev.w3.org/html5/spec/Overview.html diveintohtml5.org html5.org html5demos.com html5doctor.com sencha.com/products/touch w3schools.com/html5 border-radius.com code.google.com/webfonts css3.info css3generator.com css3please.com fontsquirrel.com modernizr.com w3.org/Style/CSS/current-work westciv.com/tools