Explanation on HTML5 for UX, graphic designers and managers.

1. Guide to HTML 5
Ran Bar-Zik
PHPDrupal Developer
19.02.2014
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

2. Who am I?
Ran Bar-Zik,
• PHP developer at HP Software
• Working at hpln.hp.com
• More information at my personal site: internet-israel.com
2
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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

4. Let’s talk about HTML 4
HTML standards are standards
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
4
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

5. HTML4 was great, really
It allowed us to create sophisticated, rich web sites
5
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

6. HTML4 needed a lot of code
And programmers hate 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!
6
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

7. HTML5 to the rescue!
HTML5 allows us to do a lot of things, but with less code
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:
7
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

8. Some mind blowing HTML5 demos
Now I will amaze you!
https://developer.mozilla.org/en-US/demos/detail/zen-photongarden/launch
http://craftymind.com/factory/html5video/CanvasVideo.html [ff]
http://www.clicktorelease.com/code/css3dclouds/
http://hompimpa.googlecode.com/svn/trunk/CSS3-Windows7-StartMenus/index.html
8
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

9. HTML5 is more than way to save code
It allow us to do things that we can’t do previously
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.
9
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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

11. The main problem with HTML5
Internet Explorer and other old browsers does not support it
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:
11
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

12. Polyfills
JavaScript file that fill the gap for old browsers
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.
12
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

13. Fallbacks
Allow alternative solution for browsers that does not have the feature
For example:
Showing Flash videos for browsers that does not support HTML5 videos.
What is the problem?
• Very inefficient
• A lot of code
• Annoying
13
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

14. Ignore old browsers
And there is no problem at all…
14
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

15. HTML5 components: Video &
Audio
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

16. We don’t need no FLASH for that
Video and Audio become native to application
And you can do amazing things with that – natively!
http://www.apple.com/html5/showcase/video/
http://www.internet-israel.com/?p=3835
16
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

17. But why do we need it?
Video was there long before HTML5
Flash video suck
•
•
•
•
•
17
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.
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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

19. App cache is a new way to control browser
Browser cache – offline data
cache
19
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

20. You can control how your application behave
Especially in mobile!
20
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

21. HTML5 components: Web
notifications
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

22. Web notification: alert your users
Currently is being used at Gmail
It is very easy to implement and we can change the graphic design.
22
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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

24. Reminder: HTML4 form elements
Standard form element that being implemented along with the browser
In HTML4 we had mainly four form items:
•
•
Input (including password and text area) :
Select list:
•
Radio buttons:
•
Checkbox:
24
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

25. HTML5 form elements
New and exciting form elements in addition to the old ones
No need to re-invent the wheel – use the native elements!
http://jsfiddle.net/barzik/E426P/
25
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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

27. Custom Error messages in forms
HTML5 allows us native implementation of validation
It can be redesigned. But should we do it?
http://www.internet-israel.com/?p=3753
27
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

28. And it is still on development
New features are being added!
http://jsfiddle.net/barzik/2HcFG/
28
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

29. HTML5 components: Canvas &
SVG
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

30. HTML5 allows us to draw & create animations
Live & Native support on all browsers.
Canvas – classic graphics, no vector
SVG – Vector based graphic
Both have an API very similar to flash.
30
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

31. HTML5 components: Web
applications components
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

32. Full screen API
Lets take control on all of the screen
It is mainly for web application and not web sites (but it is really cool)
http://davidwalsh.name/demo/fullscreen.php
32
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

33. Native web application status
Use native HTML5 indicators for web application
<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>
33
© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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