SlideShare una empresa de Scribd logo
1 de 34
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.
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.
What is HTML5

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
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.
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.
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.
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.
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.
The IE situation

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
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.
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.
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.
HTML5 components: Video &
Audio

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
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.
HTML5 components:
Appcache

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
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.
HTML5 components: Web
notifications

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
HTML5 components: Forms

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
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.
Form elements in mobile

26

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
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.
HTML5 components: Canvas &
SVG

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
HTML5 components: Web
applications components

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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.
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.
Thank you

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

Más contenido relacionado

La actualidad más candente

Midwest PHP 2017 DevOps For Small team
Midwest PHP 2017 DevOps For Small teamMidwest PHP 2017 DevOps For Small team
Midwest PHP 2017 DevOps For Small teamJoe Ferguson
 
Comparing Agile QA Approaches to End-to-End Testing
Comparing Agile QA Approaches to End-to-End TestingComparing Agile QA Approaches to End-to-End Testing
Comparing Agile QA Approaches to End-to-End TestingKatie Chin
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Codemotion
 
Continuous delivery - tools and techniques
Continuous delivery - tools and techniquesContinuous delivery - tools and techniques
Continuous delivery - tools and techniquesMike McGarr
 
Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Peter Gfader
 
What I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersWhat I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersEtiene Dalcol
 
How to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparevHow to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparevOleksii Bogush
 
Drupalcamp Simpletest
Drupalcamp SimpletestDrupalcamp Simpletest
Drupalcamp Simpletestlyricnz
 
React native first impression
React native first impressionReact native first impression
React native first impressionAlvaro Viebrantz
 
Testing as a container
Testing as a containerTesting as a container
Testing as a containerIrfan Ahmad
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Adrian Philipp
 
Use groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsUse groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsFátima Casaú Pérez
 
Continuous delivery of your legacy application
Continuous delivery of your legacy applicationContinuous delivery of your legacy application
Continuous delivery of your legacy applicationColdFusionConference
 
JavaScript All The Things
JavaScript All The ThingsJavaScript All The Things
JavaScript All The ThingsJordan Yaker
 
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?Iván López Martín
 
Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"Fwdays
 
Drone Continuous Integration
Drone Continuous IntegrationDrone Continuous Integration
Drone Continuous IntegrationDaniel Cerecedo
 
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...Ortus Solutions, Corp
 

La actualidad más candente (20)

Midwest PHP 2017 DevOps For Small team
Midwest PHP 2017 DevOps For Small teamMidwest PHP 2017 DevOps For Small team
Midwest PHP 2017 DevOps For Small team
 
Drone CI
Drone CIDrone CI
Drone CI
 
Comparing Agile QA Approaches to End-to-End Testing
Comparing Agile QA Approaches to End-to-End TestingComparing Agile QA Approaches to End-to-End Testing
Comparing Agile QA Approaches to End-to-End Testing
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
 
Continuous delivery - tools and techniques
Continuous delivery - tools and techniquesContinuous delivery - tools and techniques
Continuous delivery - tools and techniques
 
Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...
 
What I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersWhat I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginners
 
CI
CICI
CI
 
How to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparevHow to outsource the pain of drupal translation to smartling from loparev
How to outsource the pain of drupal translation to smartling from loparev
 
Drupalcamp Simpletest
Drupalcamp SimpletestDrupalcamp Simpletest
Drupalcamp Simpletest
 
React native first impression
React native first impressionReact native first impression
React native first impression
 
Testing as a container
Testing as a containerTesting as a container
Testing as a container
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016
 
Use groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsUse groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projects
 
Continuous delivery of your legacy application
Continuous delivery of your legacy applicationContinuous delivery of your legacy application
Continuous delivery of your legacy application
 
JavaScript All The Things
JavaScript All The ThingsJavaScript All The Things
JavaScript All The Things
 
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
 
Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"Alexey Kupriyanenko "Release Early, Often, Stable"
Alexey Kupriyanenko "Release Early, Often, Stable"
 
Drone Continuous Integration
Drone Continuous IntegrationDrone Continuous Integration
Drone Continuous Integration
 
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
 

Similar a HTML5 for dummies

Basic web dveleopers terms for UX and graphic designers
Basic web dveleopers terms for UX and graphic designersBasic web dveleopers terms for UX and graphic designers
Basic web dveleopers terms for UX and graphic designersRan Bar-Zik
 
Introducing AppPulse
Introducing AppPulse Introducing AppPulse
Introducing AppPulse Globe Testing
 
HPLN Web Performance Optimization - Liran tal
HPLN Web Performance Optimization - Liran talHPLN Web Performance Optimization - Liran tal
HPLN Web Performance Optimization - Liran talLiran Tal
 
HTML5: An Introduction
HTML5: An IntroductionHTML5: An Introduction
HTML5: An IntroductionClearPivot
 
Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5KaneJordy1
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7Hisham Mat Hussin
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5reshmy12
 
Flex360 Milan 2008 - Flex & Webservices
Flex360 Milan 2008 - Flex & WebservicesFlex360 Milan 2008 - Flex & Webservices
Flex360 Milan 2008 - Flex & Webservicesivascucristian
 
Why Embrace "Html5"?
Why Embrace "Html5"?Why Embrace "Html5"?
Why Embrace "Html5"?FossilDesigns
 
Html5 today
Html5 todayHtml5 today
Html5 todayRoy Yu
 
Joomla @ Barcamp4(Feb 08 Pune)
Joomla @ Barcamp4(Feb 08 Pune)Joomla @ Barcamp4(Feb 08 Pune)
Joomla @ Barcamp4(Feb 08 Pune)Amit Kumar Singh
 
Coming Up to Speed with XML Authoring in Adobe FrameMaker
Coming Up to Speed with XML Authoring in Adobe FrameMakerComing Up to Speed with XML Authoring in Adobe FrameMaker
Coming Up to Speed with XML Authoring in Adobe FrameMakerdclsocialmedia
 
Top 10 major benefits of html 5
Top 10 major benefits of html 5Top 10 major benefits of html 5
Top 10 major benefits of html 5Parul Rani Sagar
 

Similar a HTML5 for dummies (20)

Basic web dveleopers terms for UX and graphic designers
Basic web dveleopers terms for UX and graphic designersBasic web dveleopers terms for UX and graphic designers
Basic web dveleopers terms for UX and graphic designers
 
Introducing AppPulse
Introducing AppPulse Introducing AppPulse
Introducing AppPulse
 
HPLN Web Performance Optimization - Liran tal
HPLN Web Performance Optimization - Liran talHPLN Web Performance Optimization - Liran tal
HPLN Web Performance Optimization - Liran tal
 
Html5
Html5Html5
Html5
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
HTML5: An Introduction
HTML5: An IntroductionHTML5: An Introduction
HTML5: An Introduction
 
Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5
 
HTML5
HTML5HTML5
HTML5
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5
 
HTML5 101
HTML5 101HTML5 101
HTML5 101
 
Html5
Html5Html5
Html5
 
Flex360 Milan 2008 - Flex & Webservices
Flex360 Milan 2008 - Flex & WebservicesFlex360 Milan 2008 - Flex & Webservices
Flex360 Milan 2008 - Flex & Webservices
 
Why Embrace "Html5"?
Why Embrace "Html5"?Why Embrace "Html5"?
Why Embrace "Html5"?
 
Html5 today
Html5 todayHtml5 today
Html5 today
 
HTML5_3.ppt
HTML5_3.pptHTML5_3.ppt
HTML5_3.ppt
 
Joomla @ Barcamp4(Feb 08 Pune)
Joomla @ Barcamp4(Feb 08 Pune)Joomla @ Barcamp4(Feb 08 Pune)
Joomla @ Barcamp4(Feb 08 Pune)
 
Here comes html5
Here comes html5Here comes html5
Here comes html5
 
Coming Up to Speed with XML Authoring in Adobe FrameMaker
Coming Up to Speed with XML Authoring in Adobe FrameMakerComing Up to Speed with XML Authoring in Adobe FrameMaker
Coming Up to Speed with XML Authoring in Adobe FrameMaker
 
Top 10 major benefits of html 5
Top 10 major benefits of html 5Top 10 major benefits of html 5
Top 10 major benefits of html 5
 

Más de Ran Bar-Zik

How to track users
How to track usersHow to track users
How to track usersRan Bar-Zik
 
7 deadly front end sins
7 deadly front end sins7 deadly front end sins
7 deadly front end sinsRan Bar-Zik
 
Javascript static code analysis
Javascript static code analysisJavascript static code analysis
Javascript static code analysisRan Bar-Zik
 
Quality code in wordpress
Quality code in wordpressQuality code in wordpress
Quality code in wordpressRan Bar-Zik
 
How to get your first job at the Israeli high tech industry
How to get your first job at the Israeli high tech industryHow to get your first job at the Israeli high tech industry
How to get your first job at the Israeli high tech industryRan Bar-Zik
 
WordPress Security 101 for developers
WordPress Security 101 for developersWordPress Security 101 for developers
WordPress Security 101 for developersRan Bar-Zik
 
Javascript Security - Three main methods of defending your MEAN stack
Javascript Security - Three main methods of defending your MEAN stackJavascript Security - Three main methods of defending your MEAN stack
Javascript Security - Three main methods of defending your MEAN stackRan Bar-Zik
 
WordPress automation and CI
WordPress automation and CIWordPress automation and CI
WordPress automation and CIRan Bar-Zik
 
Presentation skills - course example
Presentation skills - course examplePresentation skills - course example
Presentation skills - course exampleRan Bar-Zik
 
HTML55 media api
HTML55 media apiHTML55 media api
HTML55 media apiRan Bar-Zik
 
Features in Drupal 7/6
Features in Drupal 7/6Features in Drupal 7/6
Features in Drupal 7/6Ran Bar-Zik
 

Más de Ran Bar-Zik (12)

How to track users
How to track usersHow to track users
How to track users
 
7 deadly front end sins
7 deadly front end sins7 deadly front end sins
7 deadly front end sins
 
Javascript static code analysis
Javascript static code analysisJavascript static code analysis
Javascript static code analysis
 
Quality code in wordpress
Quality code in wordpressQuality code in wordpress
Quality code in wordpress
 
How to get your first job at the Israeli high tech industry
How to get your first job at the Israeli high tech industryHow to get your first job at the Israeli high tech industry
How to get your first job at the Israeli high tech industry
 
WordPress Security 101 for developers
WordPress Security 101 for developersWordPress Security 101 for developers
WordPress Security 101 for developers
 
Javascript Security - Three main methods of defending your MEAN stack
Javascript Security - Three main methods of defending your MEAN stackJavascript Security - Three main methods of defending your MEAN stack
Javascript Security - Three main methods of defending your MEAN stack
 
WordPress automation and CI
WordPress automation and CIWordPress automation and CI
WordPress automation and CI
 
Drupal Security
Drupal SecurityDrupal Security
Drupal Security
 
Presentation skills - course example
Presentation skills - course examplePresentation skills - course example
Presentation skills - course example
 
HTML55 media api
HTML55 media apiHTML55 media api
HTML55 media api
 
Features in Drupal 7/6
Features in Drupal 7/6Features in Drupal 7/6
Features in Drupal 7/6
 

Último

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 

Último (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 

HTML5 for dummies

  • 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.