HTML5 Refresher
2 likes1,387 views
HTML5 is set to be the new standard for web development, introducing new structural tags, attributes, and APIs while aiming to improve accessibility and user experience. Key features include support for audio and video, forms with better input validation, offline data storage, geolocation, and the ability to create dynamic graphics with canvas and SVG. Additionally, HTML5 facilitates modern web functionalities like WebSockets and server-sent events, enhancing real-time data communication capabilities.
![Required
– Method of setting required fields and field types without
requiring JavaScript
Your Name: <input type="text" name="name" required>
Pattern
– Validate form field data to match the specified regular
expression pattern
<input type="text" pattern=“[1-9]+”>
Currently they are supported by few mobile browsers](https://image.slidesharecdn.com/lecture10-120424042015-phpapp02/85/HTML5-Refresher-26-320.jpg)
HTML5 Refresher
- 1. HTML5 Refresher Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta
- 2. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 3. Intro HTML5 is potentially the first true cross-platform cross- app technology
- 4. Intro HTML5 will be the new standard for HTML HTML5 is still a work in progress W3C final recomendation: 2020 Top browsers support many (not all) of the new HTML5 elements http://mobilehtml5.org http://caniuse.com
- 5. What is HTML5? It is an extension of HTML/XHTML 4 • with new more semantically rich elements – <article>, <footer>, <header>, <nav>, <section> • deprecating tags & attributes – <center>, <font>, <frame>, height, width • introducing new attributes – placeholder, form • additional APIs – geolocalization, video, audio
- 6. The HTML5 creation rules • New features should be based on HTML, CSS, and JS • Reduce the need for external plugins (like Flash) • Better error handling – ignore unknown stuff and move on • More markup to replace scripting • Avoid device-specific profiling device- • Make the process open
- 7. The minimal HTML5 page <!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> … </body> </html>
- 8. The HTML5 Doctype It must be the first thing in your HTML5 document, before the <html> tag It is an instruction to the web browser about what version of HTML the page is written in HTML 4 Doctype declarations required a reference to a DTD, because HTML 4 was based on SGML (Standard Generalized Markup Language)
- 10. HTML5 VS XHTML 4 • HTML5 will allow both quick-closing of empty tags but you can use those elements just as well without quick-closing them <input type=“text”> <input type=“text” /> • quotes for attributes are optional <a href=http://www.google.com>
- 11. HTML5 VS XHTML 4 • you can use upper-case letters for your element names <DIV>hello</DIV> • No need to specify the type of script elements if it is Javascript <script src=“test.js”> • No need to specify the type of style elements if it is CSS <link rel="stylesheet" href="style.css“>
- 12. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 13. New Structural Tags Main Goal: separate presentation from content • Poor accessibility • Unnecessary complexity • Larger document size Most of the presentational features from earlier versions of HTML are no longer supported
- 14. New Structural Tags <header> header region of a page or section <footer> footer region of a page or section <nav> navigation region of a page or section <section> logical region of a page <article> a complete piece of content <aside> secondary or related content
- 16. Other Structural Tags <command> a command button that a user can invoke <details> additional details that the user can view or hide <summary> a visible heading for a <details> element <meter> an amount within a range <progress> shows real-time progress towards a goal <figure> self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption> caption of a figure <mark> marked/highlighted text <time> a date/time <wbr>Defines a possible line-break
- 17. Custom Data Attributes Can be used to add metadata about any element within an HTML5 page They are ignored by the validator for HTML5 documents They all start with the data- pattern They can be read by any browser using Javascript via the getAttribute() method
- 18. In-place Editing This feature is provided by defining the contenteditable attribute Any elements with the contenteditable attribute set will have a grey outline as you hover Performed changes can be saved via Javascript <section id="editable“ contenteditable="true"> hello </section> var editable = document.getElementById('editable'); editable.innerHtml
- 19. Sandbox attribute for iframes Method of running external site pages with reduced privileges in iframes <iframe src=“other.htm" sandbox=""></iframe>
- 21. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 22. Forms Main Goal: reduce the Javascript for validation and format management Example:
- 23. Form Input Types <input type="search"> for search boxes <input type="number"> for spinboxes <input type="range"> for sliders <input type="color"> for color pickers <input type="tel"> for telephone numbers <input type="url"> for web addresses <input type="email"> for email addresses <input type="date"> for calendar date pickers <input type="month"> for months <input type="week"> for weeks <input type="time"> for timestamps <input type="datetime"> for precise timestamps <input type="datetime-local"> for local dates and times
- 24. Form Input Types Form input types degrade gracefully Unknown input types are treated as text-type http://bit.ly/I65jai
- 25. Form Field Attributes Autofocus – Support for placing the focus on a specific form element <input type="text“ autofocus> Placeholder – Support for placing placeholder text inside a form field <input type="text“ placeholder=“your name”>
- 26. Required – Method of setting required fields and field types without requiring JavaScript Your Name: <input type="text" name="name" required> Pattern – Validate form field data to match the specified regular expression pattern <input type="text" pattern=“[1-9]+”> Currently they are supported by few mobile browsers
- 27. New form elements <datalist> a list of pre-defined options for input controls <keygen> a key-pair generator field (for forms) When the form is submitted, two keys are generated, one private and one public The private key is stored locally, and the public key is sent to the server <output> the result of a calculation a label that can be filled by a Javascript function
- 28. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 29. Audio <audio> : a standard way to embed an audio file on a web page <audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Not Supported </audio> Multiple sources the browser will use the first recognized format
- 30. Audio Attributes
- 31. Audio Javascript API HTML5 provides a set of Javascript APIs for interacting with an audio element For example: play() pause() load() currentTime ended volume… http://www.w3.org/wiki/HTML/Elements/audio
- 32. Video <video> : a standard way to embed a video file on a web page <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Not Supported </video> Multiple sources the browser will use the first recognized format
- 33. Video Attributes
- 34. Video Javascript API HTML5 provides a set of Javascript APIs for interacting with a video element For example: play() pause() load() currentTime ended volume… http://www.w3.org/wiki/HTML/Elements/video
- 35. A note on YouTube videos <video> works only if you have a direct link to the MP4 file of the YouTube video If you have just a link to the YouTube page of your video, simply embed it in your page <iframe width="560" height="315" src="http://www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>
- 36. A note on YouTube videos These are the PhoneGap options you have to set MediaPlaybackRequiresUserAction: NO AllowInlineMediaPlayback: YES OpenAllWhitelistURLsInWebView: YES ExternalHosts *.youtube.com *.ytimg.com
- 37. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 38. Offline Data LocalStorage stores data in key/value pairs it is tied to a specific domain/app persists across browser sessions SessionStorage stores data in key/value pairs it is tied to a specific domain/app data is erased when a browser session ends
- 39. Offline Data WebSQL Database relational DB support for tables creation, insert, update, … transactional tied to a specific domain/app persists across browser sessions Its evolution is called IndexedDB but it is actually IndexedDB, not supported by most mobile browsers
- 40. Mobile browsers compatibility matrix We will have a dedicated lecture to offline data storage on mobile devices
- 41. Application Cache web applications can be cached, and accessible without an internet connection <!DOCTYPE HTML> <html manifest=“home.appcache“> <body> contents </body> </html>
- 42. Application Cache Every page with the manifest attribute specified will be cached If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file) App cache is supported by all browsers, except IE
- 43. The Manifest File The manifest file has three sections: • CACHE MANIFEST – Files listed under this header will be cached after they are downloaded for the first time • NETWORK – Files listed under this header require a connection to the server, and will never be cached • FALLBACK – Files listed under this header specifies fallback pages if a page is inaccessible
- 44. Manifest File - Example CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: The first URI is the /html5/ /offline.html resource, the second is the fallback. http://bit.ly/I6gmAc
- 45. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 46. Geolocalization Gets Latitude and Longitude from the user’s browser There is also a watchPosition method wich calls a JS function every time the user moves We will have a dedicated lecture to geolocalization on mobile devices
- 47. Example function getLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log(‘no geolocalization’); } } function showPosition(position) { console.log(position.coords.latitude); console.log(position.coords.longitude); }
- 49. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers • Microdata
- 50. WebSockets Bidirectional, full-duplex communication between full- devices and server Specifically suited for chat, videogames, drawings sharing, real-time info Requires a Web Socket Server to handle the protocol We will have a dedicated lecture to WebSockets on mobile devices
- 51. WebSockets - Overview 1. Client notifies websocket server (EventMachine) of an event, giving ids of recipients 2. The server notifies all the active clients (subscribed to that type of event) 3. Clients process event when given recipient Id matches the client’s one http://bit.ly/Ixcupi
- 52. Alternative - Polling via AJAX + Near real-time updates (not purely real-time) + easy to implement + no new technologies needed - they are requested from the client and cause increased network traffic - AJAX requests generally have a small payload and relatively high amount of http headers (wasted bandwith)
- 53. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 54. Server-Sent Events It setups a persistent http connection which has to be setup only once We will have a It is unidirectional: unidirectional: dedicated server client lecture to SSE on mobile devices SSEs are sent over traditional HTTP it can be easily implemented with standard server- side technologies (eg PHP)
- 55. Server-Sent Events Specifically suited for: • financial info • twitters updates • friends' status updates • news If you need to send data to a server, you can still use XMLHttpRequests via Javascript
- 56. SSE- Overview 1. Client sends a request to the server via HTTP 2. The server creates a process, which fetches latest state in the DB and responds back 3. Client gets server response 4. In 3 seconds client automatically sends next request to the server http://bit.ly/Ixcupi
- 57. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 58. Canvas & SVG Canvas & SVG allow you to create graphics inside the browser We will have a dedicated lecture to canvas & SVG on mobile devices http://bit.ly/Ie4HKu
- 59. Canvas & SVG Canvas draws 2D graphics, on the fly you use Javascript to draw on the canvas rendered pixel by pixel SVG describes 2D graphics in XML every element is available within the SVG DOM JavaScript event handlers for an element
- 60. Roadmap • Intro • New Structural Tags and Attributes • Forms • Audio & Video • Offline Data • Geolocalization • Web Sockets • Server-Sent Events • Canvas & SVG • Web Workers
- 61. Web Workers Javascript is a single-threaded language single- If a tasks take a lot of time, users have to wait Web Workers provide background processing capabilities to web applications They typically run on separate threads apps can take advantage of multicore CPUs
- 62. Web Workers Web Workers can be used to: • prefetch data from the Web • perform other ahead-of-time operations to provide ahead-of- a much more lively UI. Web Workers are precious on mobile Web applications because they usually need to load data over a potentially slow network
- 63. Web Workers Any JS file can be launched as a worker Example of Web Worker declaration: var worker = new Worker(“worker.js”); In order to be independent from other workers, each worker script cannot access the DOM
- 64. Web Workers The main JS script can communicate with workers via postMessage() calls: $(‘#button’).click(function(event) { $(‘#output’).html(“starting”); worker.postMessage(“start”); }); worker.onmessage = function(event) { $(‘#output’).html(event.data); }
- 65. Web Workers The web worker script can post back messages to the main script: onmessage = function(event) { if(event.data === “start”) { var result; // do something with result postMessage(result); } }