0
Guide to HTML 5
Ran Bar-Zik
PHPDrupal Developer
19.02.2014

© Copyright 2012 Hewlett-Packard Development Company, L.P. The...
Who am I?
Ran Bar-Zik,
• PHP developer at HP Software
• Working at hpln.hp.com
• More information at my personal site: int...
What is HTML5

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to c...
Let’s talk about HTML 4
HTML standards are standards
HTML is Instructions for the browsers
•
•

For example: take this str...
HTML4 was great, really
It allowed us to create sophisticated, rich web sites

5

© Copyright 2012 Hewlett-Packard Develop...
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. ...
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 brow...
Some mind blowing HTML5 demos
Now I will amaze you!
https://developer.mozilla.org/en-US/demos/detail/zen-photongarden/laun...
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...
The IE situation

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject t...
The main problem with HTML5
Internet Explorer and other old browsers does not support it
Even new versions of Internet Exp...
Polyfills
JavaScript file that fill the gap for old browsers
Allowing new features on old browsers
For example: allowing H...
Fallbacks
Allow alternative solution for browsers that does not have the feature
For example:
Showing Flash videos for bro...
Ignore old browsers
And there is no problem at all…

14

© Copyright 2012 Hewlett-Packard Development Company, L.P. The in...
HTML5 components: Video &
Audio

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained here...
We don’t need no FLASH for that
Video and Audio become native to application
And you can do amazing things with that – nat...
But why do we need it?
Video was there long before HTML5
Flash video suck
•
•
•
•
•

17

It is slow, unreliable and depend...
HTML5 components:
Appcache

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

19

© Copyright 2012 Hewlett-Packard Develop...
You can control how your application behave
Especially in mobile!

20

© Copyright 2012 Hewlett-Packard Development Compan...
HTML5 components: Web
notifications

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained ...
Web notification: alert your users
Currently is being used at Gmail
It is very easy to implement and we can change the gra...
HTML5 components: Forms

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is su...
Reminder: HTML4 form elements
Standard form element that being implemented along with the browser
In HTML4 we had mainly f...
HTML5 form elements
New and exciting form elements in addition to the old ones
No need to re-invent the wheel – use the na...
Form elements in mobile

26

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein i...
Custom Error messages in forms
HTML5 allows us native implementation of validation
It can be redesigned. But should we do ...
And it is still on development
New features are being added!

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

28

© Copyright 2012 Hewl...
HTML5 components: Canvas &
SVG

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herei...
HTML5 allows us to draw & create animations
Live & Native support on all browsers.
Canvas – classic graphics, no vector
SV...
HTML5 components: Web
applications components

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information ...
Full screen API
Lets take control on all of the screen
It is mainly for web application and not web sites (but it is reall...
Native web application status
Use native HTML5 indicators for web application
<meter min="0" max="100" low="40" high="90" ...
Thank you

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to chang...
Upcoming SlideShare
Loading in...5
×

HTML5 for dummies

1,598

Published on

Explanation on HTML5 for UX, graphic designers and managers.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,598
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 for dummies"

  1. 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. 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. 3. What is HTML5 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  4. 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. 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. 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. 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. 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. 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. 10. The IE situation © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  11. 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. 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. 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. 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. 15. HTML5 components: Video & Audio © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  16. 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. 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. 18. HTML5 components: Appcache © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  19. 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. 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. 21. HTML5 components: Web notifications © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  22. 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. 23. HTML5 components: Forms © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  24. 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. 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. 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. 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. 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. 29. HTML5 components: Canvas & SVG © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  30. 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. 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. 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. 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. 34. Thank you © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×