html5 for dummies

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Guide to HTML 5Ran Bar-Zik

PHP\Drupal Developer

19.02.2014

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.2

Ran Bar-Zik,

Who am I?

• PHP developer at HP Software

• Working at hpln.hp.com

• More information at my personal site: internet-israel.com


What is HTML5


HTML standards are standards

Let’s talk about HTML 4

HTML is Instructions for the browsers

• For example: take this string: <h1>HEADER</h1> and show it in large font.

• For example, take this string: <input type=“text” value=“hello” /> and show it like this:

• For example: allow CSS to change the basic design of the elements (HTML 3)

• The HTML standards are being defined by the W3C


It allowed us to create sophisticated, rich web sites

HTML4 was great, really


And programmers hate a lot of code

HTML4 needed a lot of code

A lot of code means headache:

1. We need to maintain it.

2. We need to keep it updated with every version of browser. Yes IE – I am looking at

you!

3. We need to QA it

4. We are lazy!


HTML5 allows us to do a lot of things, but with less code

HTML5 to the rescue!

HTML5 is a new standard that tells the browsers to do a lot more

For example, use this string

in order to create a placeholer:

In order to do it in HTML 4 we need to write a lot of JavaScript:


Now I will amaze you!

Some mind blowing HTML5 demos

https://developer.mozilla.org/en-US/demos/detail/zen-photon-

garden/launch

http://craftymind.com/factory/html5video/CanvasVideo.html [ff]

http://www.clicktorelease.com/code/css3dclouds/

http://hompimpa.googlecode.com/svn/trunk/CSS3-Windows7-Start-

Menus/index.html

https://developer.mozilla.org/en-US/demos/detail/zen-photon-garden/launch








http://craftymind.com/factory/html5video/CanvasVideo.html

http://craftymind.com/factory/html5video/CanvasVideo.html



http://hompimpa.googlecode.com/svn/trunk/CSS3-Windows7-Start-Menus/index.html









It allow us to do things that we can’t do previously

HTML5 is more than way to save code

For example:

1. Cache control (no way to deal with it previously) and offline behavior.

2. Geo location (very hard and unreliable in the past).

3. A lot of nerdy things for programmers to drool about like promises in JS, web workers

etc. it allows us to create faster, reliable and efficient code.


The IE situation


Internet Explorer and other old browsers does not support it

The main problem with HTML5

Even new versions of Internet Explorer sometimes does not support part

of HTML5

Why?

Because IE suck. That’s why.

We have 3 ways to deal with it:


JavaScript file that fill the gap for old browsers

Polyfills

Allowing new features on old browsers

For example: allowing HTML5 form control on Internet Explorer 8 that does not support

this feature.

What is the problem?

• Performance

• Reliability

• Sometimes there is no polyfill.


Allow alternative solution for browsers that does not have the feature

Fallbacks

For example:

Showing Flash videos for browsers that does not support HTML5 videos.

What is the problem?

• Very inefficient

• A lot of code

• Annoying


And there is no problem at all…

Ignore old browsers


HTML5 components: Video & Audio


Video and Audio become native to application

We don’t need no FLASH for that

And you can do amazing things with that – natively!

http://www.apple.com/html5/showcase/video/

http://www.internet-israel.com/?p=3835








Video was there long before HTML5

But why do we need it?

Flash video suck

• It is slow, unreliable and dependent on flash plug in.

• It is not part of the page and it is very hard to control.

• Very hard to play with.

• Subtitles

• Not supported on mobile.


HTML5 components: Appcache


Browser cache – offline data

App cache is a new way to control browser

cache


Especially in mobile!

You can control how your application behave


HTML5 components: Web notifications


Currently is being used at Gmail

Web notification: alert your users

It is very easy to implement and we can change the graphic design.


HTML5 components: Forms


Standard form element that being implemented along with the browser

Reminder: HTML4 form elements

In HTML4 we had mainly four form items:

• Input (including password and text area) :

• Select list:

• Radio buttons:

• Checkbox:


New and exciting form elements in addition to the old ones

HTML5 form elements

No need to re-invent the wheel – use the native elements!

http://jsfiddle.net/barzik/E426P/




Form elements in mobile


HTML5 allows us native implementation of validation

Custom Error messages in forms

It can be redesigned. But should we do it?







New features are being added!

And it is still on development

http://jsfiddle.net/barzik/2HcFG/







HTML5 components: Canvas & SVG


Live & Native support on all browsers.

HTML5 allows us to draw & create animations

Canvas – classic graphics, no vector

SVG – Vector based graphic

Both have an API very similar to flash.


HTML5 components: Web applications components


Lets take control on all of the screen

Full screen API

It is mainly for web application and not web sites (but it is really cool)

http://davidwalsh.name/demo/fullscreen.php




Use native HTML5 indicators for web application

Native web application status

<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>

<progress>working...</progress>

<progress value="75" max="100">3/4 complete</progress>


Thank you

html5 for dummies

Technology