HTML5 - An introduction


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 - An introduction

  1. 1. HTML 5 Eleonora Ciceri
  2. 2. Web Applications An introduction
  3. 3. Web Application architecture Client Executes the requests; receive the responses Web Server Delivers Web content that can be accessed through the Internet Application Server Executes efficiently procedures (programs, routines, scripts) for supporting its applied applications Database Organized collection of data, organized to model relevant aspects of reality
  4. 4. Web Application Standards: HTTP !  HTTP stands for HyperText Transfer Protocol !  “Application-level networking protocol for the exchange of multimedia documents” !  HTTP is a request-response protocol in the client-server computing model !  HTTP defines the format of !  Resources identification (URL) !  Requests !  Responses
  5. 5. Web Application Standards: HTML (1) !  HTML stands for HyperText Markup Language !  “A markup language used to describe the content and the structure of an hypertext” !  First publicly available document: 1991, Tim Berners Lee !  Key components !  Elements and attributes !  Data types (character-based) !  Character references and entity references
  6. 6. Web Application Standards: HTML (2) <html>! <head>! !<title>The document title</title>! </head>! <body>! !<h1>Main heading</h1>! !<p>A paragraph</p>! !<ul>! <li>A list item.</li>! <li>Another list item.</li>! !</ul>! !<a href="">A link</a>! </body>! </html>
  7. 7. Web Browser !  A web browser is an application able to: !  Access Internet (using the HTTP protocol) !  Request resources (identified by an URL) to Web servers !  Interpret resources and send them back to the user !  Receive input from the user, and send it to the server
  8. 8. HTML5 Introduction
  9. 9. Motivations !  HTML in common use is a mixture of features introduced by: !  Various specifications !  Software products (e.g., web browsers) !  Common practice !  Syntax errors in existing web documents
  10. 10. What is HTML5? (1) !  HTML5 is a markup language for structuring and presenting content for the Web !  Fifth revision of the HTML standard !  Aim: improve the language with support for the latest multimedia, while keeping it: !  Easily readable by humans !  Consistently understood by computers and devices !  Objectives !  Introduce markup and APIs for complex web applications !  Create cross-platform mobile applications
  11. 11. What is HTML5? (2) !  HTML5 is more a movement than a unique, identifiable technology !  Standardization effort !  New features Semantics New tags Power Browser as a programming platform (new JavaScript APIs)
  12. 12. Advantages of HTML5 !  HTML5 tags have implicit semantics !  Search engines know where to look !  Advantages !  Increased expressiveness !  Machine readability !  Increased cross-browser compatibility !  More advanced features delegated to the browser !  More power to the client !  More engaging user experience
  13. 13. HTML5 Page structure
  14. 14. New semantics / Structural elements DocType Root element Character encoding Link relations New Semantic Elements in HTML5 <!DOCTYPE html>! <html lang="en">! <head>! <meta charset="utf-8"/>! <title>My HTML 5 Page</title>! <link rel="stylesheet" type="text/css" href="style.css"/>! <link rel="alternate" type="..." />! </head> ! <body>! <header>...</header> ! <article>...</article>! ...! </body>! </html>
  15. 15. DocType !  There are several doctypes (>70 pages!) that instruct browsers about the right rendering mode that has to be activated !  Quirks mode: technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers !  Standards mode: technique used by some web browsers for which they are strictly compliant with W3C and standards HTML4 HTML5 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 String//EN” xhtml1/DTD/xhtml1-strict.dtd >! <!DOCTYPE html>!
  16. 16. Root element !  The root of an HTML page is always <html>! HTML4 HTML5 <html xmlns:” xhtml” lang=“en” xml:lang=“en”>! <html lang=“en”>! •  No need for namespaces (all the elements are always in the HTML5 namespace) •  The lang attribute suffices to define the language of the HTML5 page
  17. 17. Character encoding !  Every piece of text in a computer is stored using a given character encoding !  The character encoding provides a mapping between what the computer manages and what you see HTML5 <meta charset=“utf-8”/>!
  18. 18. Link relations (1) !  Link relations explain why a page points to another resource !  Typically specified by browsers and for browsers, blogging platforms, search engines etc. !  Types of link !  Link to a file containing CSS rules for the page !  <link rel=“stylesheet” href=“file.css” type=“text/css”/>! !  Link to the same content available in other formats !  <link rel=“alternate” href=“/feed/” type=“application/atom +xml” title=“My Weblog feed”/>!
  19. 19. Link relations (2) Link Meaning rel = “author”! Link information about the author of the page; it can be a mailto: address rel = “icon”! Link to associate a small icon with the page rel = “license”! License term for the page’s content rel = “nofollow”! The link is not endorsed by the original author or publisher of the page rel = “pingback”! Link to specify the address of a pingback server; this is useful for authors to understand who is linking to (or referring) their articles rel = “search”! The referenced document provides an interface for searching the document and its related resources
  20. 20. New semantic elements in HTML5 (1) !  Goal: enrich HTML with semantics !  Advantages !  Ease automatic analysis !  Factorize best practices into a standard HTML4 HTML5 <div id=“header”/>! <div id=“footer”/>! <div id=“navigation”/>! One element for each semantic structure in the page
  21. 21. New semantic elements in HTML5 (2)
  22. 22. Headers !  A header is a semantic element that defines !  The header of a content: <header> !  A wrapper for two or more related heading elements: <hgroup> <header>! <hgroup>! <h1><a href=“#”>home</a></h1>! <h2><a href=“#”>blog</a></h1>! </hgroup>! </header>!
  23. 23. Nav !  The nav is a section of a page that links to other pages or to parts within the page !  Important for people with disabilities (accessible websites) <nav>! !<ul>! <li><a href=“#”>home</li>! <li><a href=“#”>blog</li>! <li><a href=“#”>gallery</li>! </ul>! </nav>!
  24. 24. Article !  The article is a self-contained composition in a document, page or application, independently distributable or reusable <article>! !<header>! <p class=“post-date”>October,22</p>! <h1><href=“#” rel=“bookmark” title=“link to the post”>Travel day</a></h1>! </header>! Blah blah blah! </article>!
  25. 25. Section !  The section element represents a generic document or the application section !  Examples A blob of content that you could store as an individual record in the database, a thematic grouping of content (chapters / sections in a page) !  Typically used to group similar information
  26. 26. Aside !  The aside tag is used for the content that is tangentially related to the page content and that is surrounding it !  Examples related reading links, glossaries, etc !  It can be used also to hold secondary content (when not nested within an article element) <aside>! !<h1>Glossary</h1>! !...! </aside>!
  27. 27. Footer !  The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element !  It contains information about the section !  When footer elements contains sections, they represent appendixes, license agreements etc. !  It may also contain navigation elements <footer>! !<nav>! <h1>Navigation>! <ul>...</ul>! </nav>! <section>! ...! </section>! </footer>!
  28. 28. HTML5 New elements
  29. 29. Schematic structure of a blog post <article> Article text
  30. 30. Transcription in HTML5 <article>! <header>! <h2>Memoirs of a Parisian lion-tamer</h2>! <time datetime=2010-01-24>January 24th, 2010</ time>! </header>! <p>Claude Bottom’s poignant autobiography is this summer’s must-read.</p>! <footer>! Posted in <a href=“/?cat=3”>Books category</a>.! <a href=“/?p=34#respond”>No comments</a>! </footer>! </article>!
  31. 31. The <time> element !  The time element is used for unambiguously encoding dates and times for machines, while still displaying them in a human-readable way !  This element represents either a time on a 24-hour clock, or a precise date in the Gregorian calendar, optionally with a time and a time-zone offset !  Parts !  A machine-readable timestamp !  Human-readable text content !  An optional pubdate attribute !  If the time element is an article: timestamp of the article !  Otherwise: timestamp of the entire document
  32. 32. The <address> element !  The address element is for contact details of the author !  This is not a generic element for postal addresses !  You can have multiple addresses in a document, one inside each <article>! !  Each blog post has its address !  Each comment to that post has its address Code <address>! <img src="QRcode.png">! <a href="#">Eleonora Ciceri</a>! </address>
  33. 33. The <figure> element !  The figure element wraps: !  An image (or a video, or block of code, or a supporting quotation) !  Its caption Code <figure>! <img src="Welcome.jpg" width="100px">! <figcaption>Welcome</figcaption>! </figure>
  34. 34. The <details> element !  The details element introduces native support for a common behavior: an expanding/collapsing area !  It removes the need for custom JavaScript Code <details>! <summary>Photograph details</summary>! <p>Photograph taken on! <time datetime=2012-12-25>Xmas day 12</time>! </p>! <p><small>Copyright Eleonora Ciceri, ! <address></address>! </small></p>! </details>
  35. 35. The <mark> element !  The mark element allows you to do the markup equivalent of using a highlighter pen to bring out some words on a printed page !  This is not the same as emphasis (for this, you use <em>) Code This is a <mark>marked</mark> text.
  36. 36. The <progress> element !  The progress element is used to represent a progress meter, to indicate the completion of a task !  The meter element works in the same way Code <progress value="5" max="20"></progress>
  37. 37. Redefined element (1) !  <cite>: user for mark up a work or the name of a speaker !  <dl>: an association list consisting of zero or more name- value groups; name-value groups may be terms and definitions, metadata topics and values, or any other !  <em>: it marks up emphasis of the kind that subtly changes the meaning of a sentence !  <i>: it represents a span of text in an alternate voice or mood
  38. 38. Redefined element (2) !  <small>: it represents “small print” rather than “a generic text with smaller font”; this characterizes disclaimers, legal restrictions, copyrights !  <strong>: it represents strong importance for its contents, but, unlike <em>, it does not change the meaning of the sentence
  39. 39. Removed elements !  Completely obsolete elements: !  <applet>! !  <big>! !  <blink>! !  <center>! !  <font>! !  <marquee>!
  40. 40. HTML5 Forms
  41. 41. New input types (1) !  The new form fields were the genesis of the spec that became HTML5 !  New values to the type attribute of the input element are added !  New browsers understand them and render them in a proper way !  Old browsers degrade these new types in the default type: !  <input type=“text”>! !  New types: email, url, time, datetime (i.e., date + time), search, tel (i.e., telephone number)
  42. 42. New input types (2) !  Other fancy types range color date
  43. 43. !  The list attribute creates a list in the input box !  Note: inserting a <select> tag is required for guaranteeing compatibility with older browsers; HTML5 does not require it New attributes: list! Code <datalist id="sources">! <select name="source” ! ! !<option value="Value1">Value1</option>! !<option value="Value2">Value2</option>! </select>! If other, specify:! </datalist>! <input id="source" name="source" list="sources">
  44. 44. !  This attribute provides a declarative way to focus a form control when a page is loaded !  Previously written in JavaScript by web developers (at hand) !  There should be only one autofocused input box in a page New attributes: autofocus! Code <input id=”input" name=”default" autofocus>
  45. 45. !  This attribute places text in an input field as a hint for the user: !  Removing the text when the user focuses on the field !  Restoring it when focus leaves the field !  Previously written in JavaScript by web developers (at hand) New attributes: placeholder! Code <input name="q" placeholder="Search Bookmarks"/>
  46. 46. Other attributes (1) !  required: on textarea and most input fields; it reports an error if the user does not compile it !  multiple: user when the type is equal to file; it allows to user to upload multiple files !  pattern: allows you to specify a custom regular expression that the input must match !  autocomplete: controls the autocomplete behavior that some browsers apply to the input text
  47. 47. Other attributes (2) !  min and max: applied to a number field, it gives the range of values that can be entered in an input !  step: controls the level of granularity of input; e.g., if the step is 5, the spinner increments in steps of 5 spinner
  48. 48. Usefulness of new types (1) !  HTML5 does not mandate any specific UI for new input types, but for instance: !  Advantages: automatic input validation
  49. 49. Usefulness of new types (1) !  HTML5 does not mandate any specific UI for new input types, but for instance: !  Advantages: automatic input validation
  50. 50. Usefulness of new types (2) !  The automatic input validation was usually performed !  Server-side !  Client-side with JavaScript !  Disadvantages !  Cost of additional scripts !  JavaScript may be disabled in the user browser !  HTML5 offloads the functionality for standard types to the browser !  Advantage: no additional scripts
  51. 51. HTML5 Canvas
  52. 52. The <canvas> element !  The canvas is a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics or other visual images on the fly !  Empty rectangle in a page in which one can use JavaScript to draw everything !  It has no content and no border of its own <canvas id=“myCanvas” width=“300” height=“225”/><canvas>! !  The canvas can accessed by JavaScript: var myCanvas = document.getElementById(“myCanvas”);!
  53. 53. Draw shapes !  How to draw a shape !  Get a reference to the element !  Get a reference to the canvas drawing context (2D or 3D) !  Draw Code var myCanvas = document.getElementById(“myCanvas”);! var myCanvasContext = myCanvas.getContext(“2d”);! myCanvasContext.<DRAWING_PRIMITIVE>;
  54. 54. Canvas coordinates !  The canvas is a two-dimensional grid, with origin (0,0) in the upper-left corner
  55. 55. Drawing script (1) function drawOnCanvas() {! !var c = document.getElementById("myCanvas");! !var context = c.getContext("2d");! ! ! ! !! !drawGrid(context);! !drawArrows(context);! !drawLabels(context);! }; Retrieve the canvas and its 2D context
  56. 56. Drawing script (2) function drawGrid(context) {! try {! for (var x=0.5; x<500;x+=10) {! context.moveTo(x, 0);! context.lineTo(x, 375);! }! for (var y=0.5; y < 375; y+=10) {! context.moveTo(0, y);! context.lineTo(500, y);! }! context.strokeStyle = "#eee";! context.stroke();! }! catch (err) {}! } Draw the required lines on the canvas Starting point Ending point
  57. 57. Drawing script (3) function drawLabels(context) {! try {! context.font = "bold 12px sans-serif";! context.fillText("x", 248, 43);! context.fillText("y", 58, 165);! }! catch (err) {}! ! ! ! !! try {! context.textBaseline = "top";! context.fillText("(0,0)",8,5);! }! catch (err) {}! ! ! ! !! try {! context.textAlign = "right";! context.textBaseline = "bottom";! context.fillText("(500,375)", 492, 370);! }! catch (err) {}! } Write a text on the canvas at the specified position Vertical alignment (wrt the position specified in fillText) Horizontal alignment (wrt the position specified in fillText)
  58. 58. Drawing script (4) function drawArrows(context) {! try {! 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);! ! ! ! ! !! context.moveTo(60, 0); context.lineTo(60,150);! context.moveTo(60, 170); context.lineTo(60, 370);! context.moveTo(55, 365); context.lineTo(60, 370);! context.lineTo(65, 365);! ! ! ! ! !! context.strokeStyle = "#000";! context.stroke();! }! catch (err) {}! } Draw an arrow Start drawing a line
  59. 59. Other features !  A gradient is a smooth transition between two or more colors !  createLinearGradient paints along a line !  createRadialGradient paints along a cone between two circles !  The canvas drawing context allows the drawing of an image in the canvas !  drawImage takes an image, clips it to the specified rectangle, scales it to the specified dimensions and draws it at specified coordinates
  60. 60. HTML5 Video embedding
  61. 61. The <video> element <video width=“320” height=“240” controls autoplay preload poster=“star.png”> <source src=“v1.mp4” type=‘video/mp4; codecs=“mp4a.40.2”’> </video> Video size Show video control commands Play the video as the page loads Start downloading as the page loads Image to be shown while video loading Define video source Codec/Container IE FF Safari Chrome Opera iPhone Android Theora/Vorbis/ Ogg 3.5+ (extra plugin) 5.0 10.5+ H264+AAC+MP4 3.0+ 5.0 (to drop) 3.0+ 2.0+ WebM (extra plugin) 6.0 10.6+
  62. 62. Video and HTML/JavaScript !  The video is not treated as an embedded foreign object !  Focus is on the player !  Native JavaScript interaction !  Interaction with other HTML5 primitives !  Interactions with JavaScript !  Event binding: video.addEventListener! !  Control through API: onclick play, onclick load, onclick pause, onclick
  63. 63. Video and CSS !  The <video> tag can be styled using traditional CSS !  Border !  Opacity !  … !  Other properties are from the newer CSS3: reflections, masks, gradients, transforms, transitions, animations
  64. 64. Video and canvas !  <video> and <canvas> were designed to work together !  <canvas> has a drawImage method which lets you import images from three different sources !  Image elements !  Another canvas element !  A video element: every time the method is invoked, the current frame in the video is imported and rendered into the canvas !  A nice example !!
  65. 65. HTML5 APIs
  66. 66. What is an API? !  An Application Programming Interface is a collection of programming instructions and standards for accessing a software application !  The HTML5 movement wants to standardize several functionalities that have been introduced over the years !  Interaction with local device !  Multi-threading !  Storage !  Media interaction
  67. 67. Geo-location API !  Geo-location: finding the geographical location of a user. This is done by analyzing: !  IP address !  GPS coordinates !  Wi-Fi hotspot coordinates !  Why geo-location? !  Customized services !  Social networks !  Advertising
  68. 68. Geo-location API: Features (1) !  Geo-location option has two methods !  getCurrentPosition: returns the current position of the user !  watchPosition: called every time the user’s location changes !  There is no need to actively poll the devices’ position !  The device will determine the optimal polling interval and it will call the callback function whenever it determines that the user’s position has changed
  69. 69. Geo-location API: Features (2) !  The position object provides the position of the device, which is defined by latitude and longitude !  The timestamp is retrieved too !  Altitude, accuracy and altitude accuracy may be retrieved too, although they are optional !  The heading and the speed may be retrieved, since they can be computed by the device
  70. 70. Geo-location API: Features (3) !  Quality constraints can be defined for the position !  enableHighAccuracy specifies if the location has to be precise, i.e., collected by the GPS !  timeout specifies the number of ms the application will wait in order to get the postion !  maximumAge allows the device to answer immediately with a cached position
  71. 71. Geo-location API: Privacy concerns !  Problem: Privacy concerns !  User agents must not send location information to Web sites without the express permission of the user !  Sharing your location must be optional
  72. 72. HTML5 storage: Previous solutions (1) !  Desktop applications are able to manage and persist their state locally !  Where? Registry, INI files, plist files, XML files, database… !  The only storage system available for Web clients were cookies !  Included in every HTTP session !  Problems: security, performance !  Limited to 4Kb of data !  Possibly unavailable if cookies are disabled
  73. 73. HTML5 storage: Previous solutions (2) !  Internet explorer !  User data: 64KB per domain in a XML-based structure !  Flash !  Local Shared Objects: 100Kb of data per domain (but it allows users to increase storage size) !  Google Gears plugin !  Local Relations storage based on SQLlite: unlimited data, SQL statement
  74. 74. HTML5 storage !  A standard way for Web pages to store key/value pairs window.localStorage! !  Data persists page navigation, user sessions and browser session !  Limit of 5Mb for each origin !  No additional space
  75. 75. HTML5 storage: Usage !  Data are stored as associative arrays based on named key !  Keys: strings !  Data: any data type that is supported by JavaScript (strings, booleans, integers, floats), but they are stored as strings !  Retrieving values require parsing to restore their original type !  Objects are stored serializing them to JSON
  76. 76. HTML5 storage: Additional events !  With HTML5 storage one can track changes to the data storage !  storage is triggered when something changes !  The StorageEvent object will contain the following properties !  key: string; the named key that was added, removed or modified !  oldValue: any; the previous value, now overwritten, or null if a new item was added !  url: string; the page which called a method that triggered this change
  77. 77. Offline Web Applications: Motivations !  Why do we need an offline Web application? !  Nomadic usage !  Network usage !  Network cost !  What do we need when offline? !  HTML pages, CSS, JavaScripts !  Images / videos !  Local data
  78. 78. Offline Web Applications: Principles !  Offline is enabled by !  Caching resources !  Switching from cache to “live” resources (and viceversa) when needed !  How does it work? !  A flag in the DOM tells the application whether you are online or offline !  A dedicated event fires when the status changes !  The browser switches between online and offline when the status is changed
  79. 79. Offline Web Applications in HTML5 (1) !  HTML4 !  Browsers typically implement an HTTP cache, which caches HTTP responses based on HTTP methods and metadata !  For an application to run offline, all needed resources must be reliably cached !  HTML5 !  It works in the same way as the traditional browser caching policy !  It adds some additional explicit policies
  80. 80. Offline Web Applications in HTML5 (2) !  The home page of the offline Web application points to the manifest file for the resources to cache !  There is only one manifest file !  All application pages must point to it !  An HTML5 compliant browser will: !  Read the manifest file !  Download the resources !  Cache them locally !  Automatically update changes
  81. 81. Offline Web Applications in HTML5 (2) !  A manifest is divided in !  Cache: resources which are explicitly downloaded, cached locally and used when online !  Fallback: substitution for online resources that will not be cached !  Network: an online list of resources that are never cached and are not available offline !  If the manifest has no header, all the resources are implicitly in the cache section
  82. 82. Offline Web Applications in HTML5 (3) !  If the manifest file is new, a downloading event is fired and the browser starts downloading resource !  The browser periodically notifies about the download progress !  When all the resources are downloaded, the browser sends an event of type cached! !  If the manifest file changed from a previous version, a new downloading event is fired and the browser starts downloading resource !  When the download is finished, the browser triggers an updateready event !  The new cached resources won’t be used unless the user refreshes the page
  83. 83. WebSocket: Motivations !  HTTP is a request-response protocol !  Problem: many applications need bi-directional communication !  Chat !  Multiplayer online games !  Realtime updating of social streams !  Solution: COMET is an hack that provides server push using standard browser functionality !  Inefficient
  84. 84. WebSocket (1) !  “WebSocket is a new proposal to provide full-duplex, bi- directional client-server interaction over a single TCP connection” !  Special socket connections between a Web browser and the server are established !  An open connection between the client and the server can start sending data at any time !  Messages can be sent to a server so as to receive event- driven responses without having to poll the server for a reply
  85. 85. WebSocket (2) !  Goals !  Enabling near real-time push communications !  Increasing web server connection scalability !  Simplifying the coding task !  Protocol: ws:// and wss:// !  Its own protocol, handshake and headers !  Support for several browsers (Firefox 6+, Chrome 14+, Opera 11+, Safari 5+, IE 10+) !  Problem: security issues
  86. 86. References
  87. 87. References (1) ! !  Introducing HTML 5, Second edition, Bruce Lawson, Remy Sharp !  W3C HTML5 Introduction: !  HTML 5 Up and Running – Mark Pilgrim, O’Reilly Google Press – or !  HTML5 boilerplate - - “collection of some tricks to get your project off the ground quickly and right- footed” !  HTML5 Demos -
  88. 88. References (2) !  HTML5 Rocks - ! !  HTML5 Video - to-know-about-html5-video-and-audio/ !  HTML5 Foundamentals - blogs/social-media-marketing/entry/html5_fundamentals? lang=en !  HTML5 Tag Reference - html5_reference.asp