13. Semantic markup Have become HTML5 elements 14. Input
elements Most data types are entered as plain text: The browser can
provide additional help if it knowsthe actual data type search url
number datetime Etc. 15. Input elements Soft keyboards can auto
adjust http://bit.ly/InputElements 16. CSS 3 Rounded corners .box
{border-radius: 10px;} Drop shadows .box {box-shadow: 10px 5px 5px
grey;} Gradients .box {background: linear-gradient(Yellow, Lime);}
Multi column text article {column-count: 3; } 17. CSS 3 Media
queries @media screen and (max-width: 1024px) {aside { display:
none;}} Transforms .box:hover {transform: scale(1.2);} Transitions
.box {transition: transform 1s ease-in;} 18. Video & Audio
HTML5 includes a and element There is no standard encoding OGV WEBM
MP4 Add multiple elements The browser will use the first it
supports See Wikipedia for browser support 19. Canvas A simple
drawing surface Currently only a 2D context But 3D is in the works
Uses drawing primitives Lines Rectangles Arcs Curves Images Paths
20. Canvas The entire API is JavaScript based There are no drawing
markup elements Very powerful but tedious to work with Tooling
support is limited Adobe Illustrator plugin Leonardo Sketch Used to
create a HTML version of Angry Birds http://chrome.angrybirds.com/
21. Scallable Vector Graphics Use retained mode There is an object
model we can manipulate The Canvas uses imediate mode Browser
support is about the same as with Canvas Tooling support is much
better 22. Scallable Vector Graphics Uses drawing shapes Lines
Rectangle Circles Text Path Etc. Elements can be created using
markup Or JavaScript when needed 23. When to use SVG versus
CanvasCanvas SVGPixel based (Dynamic .png) Shape basedSingle HTML
elementMultiple graphical elements, which become part of the
DOMModified through script only Modified through script and
CSSEvent model/user interaction isEvent model/user interaction
isgranular (x,y) abstracted (rect, path)Performance is better with
smaller Performance is better with smallersurface, a larger number
of objects number of objects (10k), or both surface, or both 24.
Local storage - Web Storage Name Value pair storage Storage is per
site The standard recommends 5Mb storage space per site
sessionStorage Valid for the duration of a browser session
localStorage Valid for longer periods The value stored must be a
string! sessionStorage[data] = JSON.stringify({ value: 1 }); data =
JSON.parse(sessionStorage[data]); 25. Local storage - IndexedDB An
object or NoSQL store in the database Only supported in Chrome en
Firefox See demo There was a Web SQL Database Its deprecated and
replaced by the IndexedDB Still functional in Webkit browsers (iOS)
Apple pushed this standard 26. Drag-Drop Move elements in the
browser Drag files from the Windows Explorer to an HTML element
Events fire for dragstart dragenter dragover drop The argument
contain a dataTransfer object 27. File IO File IO can be done using
a FileReader object File can be read in different ways
readAsArrayBuffer() readAsBinaryString() readAsDataURL()
readAsText() Once the file content have been read the onload event
fires The result property contains the file contents 28. File IO
Some file are to large to read in one action A Blob is a part of a
file Use file.slice() to create a blob A FileReader object can work
with a blob as if it is a file 29. Geolocation Where is the user?
For example to do a location based search Always requires the users
consent Works both on desktop and mobile browsers Accuracy can vary
widely Use the navigator object
navigator.geolocation.getCurrentPosition() The options support
enableHighAccuracy: true 30. Geolocation The resulting Position
contains at least latitude longitude accuracy 31. Web Workers
JavaScript execution time is limited by the browser Using a
Worker() object JavaScript can be executed in the background These
scripts can execute for a long time 32. Web Workers Web Workers are
limited in what they can do No interactions with the DOM They can
do IO XMLHttpRequest FileReader importScripts() The Document can
exchange messages with the worker postMessage() onmessage callback
function is called All data is cloned Never passed by reference 33.
Offline Web Applications A web application can load and execute
without anetwork connection The cache manifest determines what
resources areavailable offline The cached resources are always
loaded from the cache The manifest is used to update the cache This
is done after the page is loaded And only happens if the content of
the cache ischanged 34. Offline Web Applications Manifest contains
sections for: Cache (default) Network Fallback The manifest must be
served with the correct mime type text/cache-manifest Otherwise its
ignored 35. Server Sent Events Push communication from the Server
to the browser Uses standard HTTP techniques to transfer data
Everything is just HTTP traffic A formalization of long polling
techniques Be careful with connection that remain open for to long
(30 seconds to max 2 minutes) 36. Server Sent Events EventSource
object Functions: close() Events onmessage onopen onerror Also used
when the connection is closed 37. WebSockets Full duplex
communication between the browser andthe server No longer HTTP
traffic Starts as an HTTP request The server upgrades to WS by
returning a 101 SwitchingProtocols response Support is still
limited Only Chrome and Firefox 38. WebSockets WebSocket object
Functions: send() to transfer data Can also be binary data! close()
Events onmessage onopen onclose onerror 39. Conclusion HTML 5 has a
big future Its the only platform independent UI technology Even
used for Windows 8 development Different browsers offer support for
features Use feature detection to check what works Use polyfills in
case of missing features No need to wait until its a standard Large
parts are usable today
