Download - HTML5 for dummies
![Page 1: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/1.jpg)
© 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
![Page 2: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/2.jpg)
© 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
![Page 3: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/3.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
What is HTML5
![Page 4: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/4.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.4
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
![Page 5: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/5.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.5
It allowed us to create sophisticated, rich web sites
HTML4 was great, really
![Page 6: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/6.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.6
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!
![Page 7: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/7.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.7
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:
![Page 8: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/8.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.8
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
![Page 9: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/9.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.9
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.
![Page 10: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/10.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
The IE situation
![Page 11: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/11.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.11
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:
![Page 12: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/12.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.12
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.
![Page 13: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/13.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.13
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
![Page 14: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/14.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.14
And there is no problem at all…
Ignore old browsers
![Page 15: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/15.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
HTML5 components: Video & Audio
![Page 16: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/16.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.16
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
![Page 17: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/17.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.17
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.
![Page 18: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/18.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
HTML5 components: Appcache
![Page 19: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/19.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.19
Browser cache – offline data
App cache is a new way to control browser
cache
![Page 20: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/20.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.20
Especially in mobile!
You can control how your application behave
![Page 21: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/21.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
HTML5 components: Web notifications
![Page 22: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/22.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.22
Currently is being used at Gmail
Web notification: alert your users
It is very easy to implement and we can change the graphic design.
![Page 23: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/23.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
HTML5 components: Forms
![Page 24: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/24.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.24
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:
![Page 25: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/25.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.25
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/
![Page 26: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/26.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.26
Form elements in mobile
![Page 27: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/27.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.27
HTML5 allows us native implementation of validation
Custom Error messages in forms
It can be redesigned. But should we do it?
http://www.internet-israel.com/?p=3753
![Page 28: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/28.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.28
New features are being added!
And it is still on development
http://jsfiddle.net/barzik/2HcFG/
![Page 29: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/29.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
HTML5 components: Canvas & SVG
![Page 30: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/30.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.30
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.
![Page 31: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/31.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
HTML5 components: Web applications components
![Page 32: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/32.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.32
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
![Page 33: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/33.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.33
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>
![Page 34: HTML5 for dummies](https://reader033.vdocuments.site/reader033/viewer/2022052623/559c08421a28ab0f528b4613/html5/thumbnails/34.jpg)
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
Thank you