• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Refresher
 

HTML5 Refresher

on

  • 1,650 views

Mobile applications Development - Lecture 10 ...

Mobile applications Development - Lecture 10

HTML5 Refresher

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Statistics

Views

Total Views
1,650
Views on SlideShare
1,649
Embed Views
1

Actions

Likes
2
Downloads
82
Comments
0

1 Embed 1

http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Refresher HTML5 Refresher Presentation Transcript

    • HTML5 Refresher Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • IntroHTML5 is potentially the first true cross-platform cross- app technology
    • IntroHTML5 will be the new standard for HTMLHTML5 is still a work in progress W3C final recomendation: 2020Top browsers support many (not all) of the new HTML5 elementshttp://mobilehtml5.orghttp://caniuse.com
    • 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
    • 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
    • The minimal HTML5 page<!DOCTYPE html><html> <head> <title>Title</title> </head> <body> … </body></html>
    • The HTML5 DoctypeIt must be the first thing in your HTML5 document, before the <html> tagIt is an instruction to the web browser about what version of HTML the page is written inHTML 4 Doctype declarations required a reference to a DTD, because HTML 4 was based on SGML (Standard Generalized Markup Language)
    • 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>
    • 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“>
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • New Structural TagsMain Goal: separate presentation from content• Poor accessibility• Unnecessary complexity• Larger document sizeMost of the presentational features from earlier versions of HTML are no longer supported
    • 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
    • New Structural Tagshttp://bit.ly/JCnuQJ
    • 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
    • Custom Data AttributesCan be used to add metadata about any element within an HTML5 pageThey are ignored by the validator for HTML5 documentsThey all start with the data- patternThey can be read by any browser using Javascript via the getAttribute() method
    • In-place EditingThis feature is provided by defining the contenteditable attributeAny elements with the contenteditable attribute set will have a grey outline as you hoverPerformed changes can be saved via Javascript <section id="editable“ contenteditable="true"> hello </section> var editable = document.getElementById(editable); editable.innerHtml
    • Sandbox attribute for iframesMethod of running external site pages with reduced privileges in iframes<iframe src=“other.htm" sandbox=""></iframe>
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • FormsMain Goal: reduce the Javascript for validation and format managementExample:
    • 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
    • Form Input Types Form input types degrade gracefully Unknown input types are treated as text-typehttp://bit.ly/I65jai
    • Form Field AttributesAutofocus – 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”>
    • Required – Method of setting required fields and field types without requiring JavaScriptYour 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
    • 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
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • 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
    • Audio Attributes
    • Audio Javascript APIHTML5 provides a set of Javascript APIs for interacting with an audio elementFor example: play() pause() load() currentTime ended volume… http://www.w3.org/wiki/HTML/Elements/audio
    • 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
    • Video Attributes
    • Video Javascript APIHTML5 provides a set of Javascript APIs for interacting with a video elementFor example: play() pause() load() currentTime ended volume… http://www.w3.org/wiki/HTML/Elements/video
    • A note on YouTube videos<video> works only if you have a direct link to the MP4 file of the YouTube videoIf 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>
    • A note on YouTube videosThese are the PhoneGap options you have to set MediaPlaybackRequiresUserAction: NO AllowInlineMediaPlayback: YES OpenAllWhitelistURLsInWebView: YES ExternalHosts *.youtube.com *.ytimg.com
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • Offline DataLocalStorage stores data in key/value pairs it is tied to a specific domain/app persists across browser sessionsSessionStorage stores data in key/value pairs it is tied to a specific domain/app data is erased when a browser session ends
    • Offline DataWebSQL Database relational DB support for tables creation, insert, update, … transactional tied to a specific domain/app persists across browser sessionsIts evolution is called IndexedDB but it is actually IndexedDB, not supported by most mobile browsers
    • Mobile browsers compatibility matrix We will have a dedicated lecture to offline data storage on mobile devices
    • Application Cacheweb applications can be cached, and accessible without an internet connection<!DOCTYPE HTML> <html manifest=“home.appcache“> <body> contents </body></html>
    • Application CacheEvery page with the manifest attribute specified will be cachedIf 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
    • The Manifest FileThe 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
    • 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
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • GeolocalizationGets Latitude and Longitude from the user’s browserThere 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
    • Examplefunction 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);}
    • getCurrentPosition()
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers• Microdata
    • WebSocketsBidirectional, full-duplex communication between full- devices and serverSpecifically suited for chat, videogames, drawings sharing, real-time infoRequires a Web Socket Server to handle the protocol We will have a dedicated lecture to WebSockets on mobile devices
    • 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 onehttp://bit.ly/Ixcupi
    • 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)
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • Server-Sent EventsIt setups a persistent http connectionwhich has to be setup only once We will have aIt is unidirectional: unidirectional: dedicatedserver client lecture to SSE on mobile devicesSSEs are sent over traditional HTTP it can be easily implemented with standard server- side technologies (eg PHP)
    • Server-Sent EventsSpecifically suited for:• financial info• twitters updates• friends status updates• newsIf you need to send data to a server, you can still use XMLHttpRequests via Javascript
    • 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 serverhttp://bit.ly/Ixcupi
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • Canvas & SVG Canvas & SVG allow you to create graphics inside the browser We will have a dedicated lecture to canvas & SVG on mobile deviceshttp://bit.ly/Ie4HKu
    • Canvas & SVGCanvas draws 2D graphics, on the fly you use Javascript to draw on the canvas rendered pixel by pixelSVG describes 2D graphics in XML every element is available within the SVG DOM JavaScript event handlers for an element
    • Roadmap• Intro• New Structural Tags and Attributes• Forms• Audio & Video• Offline Data• Geolocalization• Web Sockets• Server-Sent Events• Canvas & SVG• Web Workers
    • Web WorkersJavascript is a single-threaded language single- If a tasks take a lot of time, users have to waitWeb Workers provide background processing capabilities to web applicationsThey typically run on separate threads apps can take advantage of multicore CPUs
    • Web WorkersWeb 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
    • Web WorkersAny JS file can be launched as a workerExample 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
    • Web WorkersThe 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); }
    • Web WorkersThe 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); } }
    • Referenceshttp://www.w3schools.com/