Html5 overview
Download
1 / 46

HTML5 Overview - PowerPoint PPT Presentation


  • 273 Views
  • Uploaded on

HTML5 Overview. Peter Traeg 1/25/2011. Agenda. What is HTML5? Demos and lots of ‘em Does HTML5 kill Flash or Silverlight?. HTML5 Areas of Focus. Javascript HTML CSS Some are browser-specific features, others are not always fully implemented in some browsers.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML5 Overview' - elewa


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Html5 overview

HTML5 Overview

Peter Traeg

1/25/2011


Agenda
Agenda

  • What is HTML5?

  • Demos and lots of ‘em

  • Does HTML5 kill Flash or Silverlight?


Html5 areas of focus
HTML5 Areas of Focus

  • Javascript

  • HTML

  • CSS

  • Some are browser-specific features, others are not always fully implemented in some browsers.

  • Pretty much all of what is shown here does NOT work in IE6/7/8. Much of it will work in IE9.


Just because people call it html5 does not make it so
Just because people call it HTML5 does not make it so

  • Many demonstrations of “HTML5” are of features not truly in the W3C HTML5 spec.

  • Technologies often called part of HTML5 that aren't (from the Mozilla HTML5 Developer center):

    • WebGL

    • FileReader

    • XMLHttpRequest

    • querySelector(All)

    • Geolocation

    • ECMAScript5

    • CSS3

    • XBL2

    • Web Workers

    • Web Sockets

    • Faster JavaScript

  • Moral: be careful when someone says HTML5 – what exactly are they talking about? For most people it’s just a basket of features – not a spec.


Html5 history status
HTML5 History/Status

  • Started by WHATWYG (Web Hypertext Application Technology Working Group) in 2004. Most of these folks were from Webkit (Safari, Apple).

  • Adopted by W3C as part of a working group in 2007.

  • Hoped that a full W3C recommendation will be reached by late 2010.

  • Lots of frustration amongst the members of the working group in trying to get the spec. approved.


Javascript selection of elements
Javascript – Selection of Elements

  • New methods to get all elements that match on a class name:

    var el = document.getElementById('section1');

    var els = document.getElementsByTagName('div');

    var els = document.getElementsByClassName('section');

  • Or find elements based on CSS selectors

    var els = document.querySelectorAll("ul li:nth-child(odd)");

    var els = document.querySelectorAll("table.test > tr > td");


Javascript local storage
Javascript – Local Storage

  • New localStorage property on the window object lets you save data by key/value pair.

    // use localStorage for persistent storage

    // use sessionStorage for per tab storage

    textarea.addEventListener('keyup', function () {

    window.localStorage['value'] = area.value;

    window.localStorage['timestamp'] = (new Date()).getTime();

    }, false);

    textarea.value = window.localStorage['value'];

  • Surprise - Supported in IE8! 


Javascript web sql database
Javascript – Web SQL Database

var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });

  • Only supported in Chrome and Safari.

  • Demo link


Javascript offline support
Javascript – Offline Support

  • Offline caching of resources

  • Cache manifest file lists resources that the browser should make available even if it’s offline.

  • Fallback sections let you substitute files if the offline app requests a resource that’s not available offline.

  • window.applicationCache fires events to tell you when all the resources in a manifest have successfully downloaded or failed. If one resource fails the whole thing is considered bad.


Javascript web workers
Javascript – Web Workers

  • Ability to create background “threads” for long running processes so they don’t block the UI thread.

  • Workers can’t access the DOM directly.

    main.js:

    var worker = new Worker('extra_work.js');

    worker.onmessage = function(event) { alert(event.data); };

    extra_work.js:

    self.onmessage = function(event) { // Do some work. self.postMessage(some_data);

    }


Javascript web sockets
Javascript – Web Sockets

  • Supports sending messages over a TCP socket.

    var socket = new WebSocket(location);

    socket.onopen = function(event) {

    socket.postMessage(“Hello, WebSocket”);

    }

    socket.onmessage = function(event) { alert(event.data); }

    socket.onclose = function(event) { alert(“closed”); }

  • Not supported on Firefox


Javascript notifications
Javascript - Notifications

  • Webkit specific feature – only in Chrome

  • Pops up notification dialogs

  • Like the notification dialogs that appear from the Windows system tray.

    if (window.webkitNotifications.checkPermission() == 0) {

    // you can pass any url as a parameter

    window.webkitNotifications.createNotification(tweet.picture, tweet.title,

    tweet.text).show();

    } else {

    window.webkitNotifications.requestPermission();

    }


Javascript drag drop
Javascript – Drag/Drop

  • New “dragStart” event on elements

  • Data you want to drag is placed into a dataTransfer object

  • The drag target must listen to these events: dragEnter, dragOver, and drop

    • DragEnter decides if the user can drop the item on this target

    • DragOver shows the appropriate UI feedback to illustrate that a drop is possible.

    • Drop fires when the user actually drops the item on the target.


Javascript drag drop1
Javascript – Drag/Drop

document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy';

}, false);

  • Demo link


Javascript geolocation
Javascript - Geolocation

  • Lets you obtain latitude/longitude based on the user’s location.

  • User must “OK” the request.

    if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(position) {

    var lat = position.coords.latitude;

    var lng = position.coords.longitude;

    var options = { position: new google.maps.LatLng(lat, lng) }

    var marker = new google.maps.Marker(options);

    marker.setMap(map);

    });

    }


Javascript file api
Javascript – File API

  • HTML <input type=“file”> can supply a reference to a file object

  • A DIV can act as a drop target to allow a user to drag/drop files on it. This can be used for uploading multiple files.

  • The File object lets you read the file contents as a binary string, a data URL, or as text.

  • Once you have the file contents you can POST them to a server via XmlHttp request.

  • Demo - http://html5demos.com/file-api

  • https://developer.mozilla.org/en/Using_files_from_web_applications


Html features
HTML Features

  • Mostly changes around new HTML elements designed to create more semantic markup.

  • Also new attributes on existing elements to create more types of <input> elements.

  • Older browsers (IE6/7/8) just ignore elements they don’t understand.


Html doctype
HTML Doctype

  • The doctype for xhtml:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • The doctype for HTML5:

    <!DOCTYPE html>


Html new semantic elements
HTML – New Semantic Elements

  • <header>

    • <hgroup> : groups a set of h1-h6 elements when the heading has multiple levels

  • <nav>

  • <section>

    • <article>

      • <header>

  • <aside>

  • <footer>

  • <time>

  • <mark>


Html semantic elements
HTML – Semantic Elements

  • Elements don’t have a specific style. They are designed to group content semantically. You use CSS to apply the style you want.

  • Even IE6 can recognize these new elements via a Javascript trick. See - http://diveintohtml5.org/semantics.html


Html new input types
HTML – New 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, absolute date+time stamps

  • <input type="datetime-local"> for local dates and times

    Demo:http://www.ilovecolors.com.ar/wp-content/uploads/html5-new-input-types.html


Html more input attributes
HTML – More Input Attributes

  • Autocomplete

  • Readonly

  • Multiple

  • Placeholder – ghosted text prompt

  • Pattern – regex validation

  • Required (opera only)

  • Datalist (opera only)

  • For number types: min, max, step

  • CSS attributes for visual display when the control contains invalid data. :invalid pseudo-class


Html audio video
HTML – Audio / Video

  • New <audio> and <video> elements

  • Safari plays H.264 video

  • Chrome plays H.264 and WebM (VP8)

  • Firefox plays Ogg Theora (VP3) and WebM (Firefox4)

  • IE9 – H.264 video and AAC audio

  • Attributes to show/hide video controls, loop playback, autoplay, etc.


Html audio video tags
HTML – Audio/Video Tags

<audio src="sound.mp3" controls></audio>

document.getElementById("audio").muted = false;

<video src="movie.mp4" autoplay controls></video>

document.getElementById("video").play();


Html canvas element
HTML – Canvas Element

  • Bitmap drawing construct

  • This is not vector based. If you want to rescale you really need to redraw.

  • Once an object is drawn you can’t manipulate it. You have to draw it again.

  • Performance is quite good

  • Fairly wide browser support – since Safari 3, Firefox 3, and Chrome 3.

  • Third party explorercanvas library for IE.


Html canvas example
HTML – Canvas Example

<canvas id="canvas" width="838" height="220"></canvas>

<script>

var canvasContext = document.getElementById("canvas").getContext("2d");

canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();

canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);

canvasContext.lineWidth = 15;

canvasContext.lineCap = 'round';

canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';

canvasContext.stroke();

</script>


Html canvas drawing
HTML – Canvas Drawing

  • Rectangles – filled, stroked (borders)

  • Arcs – use to draw a circle

  • Paths – moveTo(), lineTo(), stroke()

  • Gradients – linear, and radial

  • Text – fonts, horizontal text alignment, baselines

  • Images – scaling, drawing a portion of an image.


Html canvas 3d
HTML – Canvas 3D

  • Largely experimental, browser specific

  • No defined spec from the W3C or WHATWG as of yet.


Html svg element
HTML – SVG Element

  • <svg> element

  • Part of HTML5 spec

  • Firefox 4 supports a new SVG inline option.

  • Unlike <canvas> this is true vector based drawing.

  • Excellent JS library - http://raphaeljs.com/

  • Supported on most browsers, including the iPhone

  • Not supported in Android 


CSS

  • New selectors

  • Fonts

  • Text Handling

  • Columns

  • Transitions

  • Animations


Css selectors
CSS – Selectors

  • CSS3

  • Can select every nth-child – useful for zebra striped displays (like an old green-bar report)

  • First-child


Css font support
CSS Font Support

  • Can dynamically load fonts into the browser!

  • Supported in canvas as well (not sure about SVG)

    @font-face {

    font-family: 'LeagueGothic';

    src: url(LeagueGothic.otf);

    }


Css font support1
CSS – Font Support

  • Different Browsers support different font types: OTF, TTF, SVG, WOFF, EOT.

  • Even IE5+ supports @font-face but with a proprietary format – EOT

  • Supported in Firefox 3.5+, Chrome 4+, Safari 3+

  • iOS supports SVG fonts, Android 2,2 supports OTF/TTF formats

  • http://www.html5rocks.com/tutorials/webfonts/quick/


Css text overflow
CSS – Text Overflow

  • Three ways to deal with text overflow

    • text-overflow: hidden

    • text-overflow: no-wrap

    • text-overflow: elipsis


Css multi column support
CSS – Multi column support

  • Allows you to take a series of paragraphs and flow the content along multiple columns.

  • CSS attributes on a DIV:

    • column-Count:

    • column-rule:

    • column-gap:


Additional attributes
Additional Attributes

  • Text Stroke (outline) size and color

  • Ability to set the opacity of the foreground and background colors independently

  • HSLA Color spec: Hue, Saturation, Luminance, Alpha


Css rounded corners
CSS – Rounded Corners

  • -webkit-border-radius, -moz-border-radius, border-radius attribute

  • Progressive enhancement - going forward this is how we will add rounded corners to boxes rather than the current nested DIV approach we currently use. IE 6/7/8 users will see square corners.


Css gradients
CSS Gradients

  • Both linear and radial gradients

  • Supported in FF 3.6+

  • -webkit-linear-gradient, -moz-linear-gradient, -webkit-radial-gradient, -moz-radial-gradient


Css shadows reflections
CSS Shadows/Reflections

  • Can now add drop shadows to text and box elements

  • text-shadow and box-shadow attributes

  • -webkit-box-reflect – build your own coverflow display with CSS!

  • I believe -moz-box-reflect is in FF4.


Css backgrounds
CSS Backgrounds

  • Can now control background size to always cover or contain the background in an element

  • Multiple backgrounds – can layer multiple background images on one another


Css flexible box layout
CSS Flexible Box Layout

  • A way to proportionally size boxes in relation to another.

  • A great way to center content vertically and horizontally.

  • Supported in Firefox 3+, Chrome, Safari, Mobile Safari (iOS), Android. Not in IE9!!

  • http://www.html5rocks.com/tutorials/flexbox/quick/

  • http://www.ie7nomore.com/fun/flexiblenav/


Css transitions
CSS Transitions

  • Lets you apply an animated transition when changing the value of a CSS property.

  • Mostly webkit, but coming in Firefox 4

  • Works on iOS but not Android

  • GPU accelerated in iOS

  • Cool transition demo at - http://www.apple.com/html5/showcase/transitions/


Css transforms
CSS Transforms

  • Scale

  • Rotate

  • Perspective

  • Firefox 3.5+

  • https://developer.mozilla.org/En/CSS/-moz-transform


Css animations
CSS - Animations

  • Allows you specify from / to property values in CSS.

  • Duration, repetition, etc. all controlled via CSS.

  • Already in webkit, in FF 3.7+


What about flash
What about Flash?

  • Lots of stuff that HTML5 leaves out for us:

  • Font metrics

  • Bitmap manipulation

  • Audio manipulation

  • More flexible security model (cross-domain). However new browsers support some of this in XmlHttpRequest

  • 3D support – hardware acceleration

  • Actionscript language

  • Desktop client support (AIR)

  • Totally cross-browser/cross-platform. With HTML5


Where to learn more
Where to learn more

  • HTML5Rocks

  • Apple HTML5 Demo

  • Dive Into HTML5

  • HTML5 Peeks, Pokes, and Pointers

  • HTML5Demos

  • Can I Use? HTML5 Compatibility Tables

  • Mozilla Developer Center HTML5

  • W3C Working Draft

  • WHATWG Working Draft


ad