SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
What is
HTML5?
And why is it so important?
Standard IMPROVEMENTS
You don’t get rid of HTML4 standards – you just improve upon them!
It’s easy for web developers to upgrade their
websites to HTML 5
Step 1: change the doctype at the top of the page.
NEW:
<!DOCTYPE html>
OLD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Who will see your cool new HTML 5 features?
Changing the Doctype will not break your existing website
People using OLDER browsers that don’t support the new HTML5
features will simply miss out on viewing the website the way others do.
HTML5 is a Collection of Features
HTML5 is not an “all or nothing” capability.
The HTML5 features available to end users depend on what browser and
what version of that browser they are using.
Users: How well does your browser support html5?
Keep your browser updated so that as they add new feature
support you will have access to these new features!
Quick Note about MicroData
MicroData is code a web developer adds to a web page that provides a
mechanism for easily allowing machines to consume the data on the page,
while not affecting the experience for the user.
Browsers are applications used by humans to
view web pages.
Robots are machines (used by search engines)
to read the code of the web page.
Web Developers add microdata to a web page to help search engine
robots better understand the content on the page.
If your browser doesn’t support microdata – don’t worry about it!
It’s not aboutYOU – It’s about the robot!
HTML5
Enhancing websites for the people.
Detect using a detection library
Modernizr is an open source, JavaScript library that detects support for many
HTML5 & CSS3 features.
Simply include a link to the script in the <head> tag
of your master template file
<script src=“modernizr.min.js”></script>
Modernizr will run automatically and create a global object called Modernizr.
This object contains a set of Boolean properties for each feature it can
detect. (Booleans are variables that hold a true or false value).
HTML5 Local Storage
Local storage provides a way for websites to store information on
your computer to retrieve it later. (similar to cookies)
Cookies require a trip to the server on each page download (which
requires extra bandwidth).
Local storage is accessed by JavaScript (that runs in the “client” = less
bandwidth).
If (Modernizr.localstorage){
// find out where the user is located }
Else {
// user misses out on features
}
HTML5 PlaceholderText
Enables websites the ability to place temporary text in an input field.
This gives the user a visual clue as to what type of text is expected.
The placeholder text disappears once the user clicks on the field to
begin typing.
If (Modernizr.input.placeholder){
// user can see placeholder text}
Else {
// user can’t see the text.
}
HTML5 Form InputType
New form input types assist users with input.
• <input type=“range”> - for sliders
• <input type=“color”> - for color pickers
• <input type=“tel”> - for telephone numbers
• <input type=“url”> - for web addresses
• <input type=“email”> - for email addresses
• <input type=“date”> for calendar date pickers
• <input type=“month”> - for a list of months
• <input type=“week”> - for weeks
• <input type=“time”> - timestamps
• <input type=“datetime”> -for precise, absolute date+time stamps
• <input type=“datetime-local”> for local dates and times
• <input type=“number”> - for spinboxes
• <input type=“search”> - for search boxes
If (!Modernizr.inputtypes.date){
// <input type=“date”> not supported}
}
HTML5 Autofocus
Allows the cursor to automatically be placed in a specific field on a
form without the user having to manually click inside the field.
If (Modernizr.input.autofocus){
// help the user get started}
Else {
// user is on their own.
}
EXAMPLE:
HTML 5Video
Each HTML5 browser support 2 different video formats.
Make the video available in several different formats.
(.mp4 .ogg .webm)
The video played depends on the format that
browser supports.
If (Modernizr.video){
if (Modernizr.video.webm) { // playWebM }
else if (Modernizr.video.ogg) { // play Ogg }
else if (Modernizr.video.h264) { // play mp4 - h.264 video with AAC audio }
Else { // user misses out on features – check out the alternative options at “video for everyone”}
}
Also see: “Video for Everyone” –
www.camendesign.com/code/video_for_everybody
HTML5 Canvas
Canvas is a rectangle in your page where you can use JavaScript to
draw anything you want.
The canvas API is used for drawing shapes, defining paths, creating
gradients, and applying transformations.
The canvas text API is for drawing text.
If (Modernizr.canvas){
// draw something in the box }
Else {
// user is blind!
}
Those using a browser without HTML5 support just miss out on viewing the canvas!
If (Modernizr.canvastext){
// draw some text in the box }
Else {
// user is blind!
}
HTML5 Canvas
A canvas area is created with HTML5 code.
<canvas id=“myCanvas1” width=“300” height=“225”></canvas>
Canvas supported in IE9+
You can then access the canvas by referencing its ID.
function drawBoxInsideCanvas( )
{
var canvasArea = document.getElementById(“myCanvas1” );
var canvasContext = canvasArea.getContext(“2d”);
canvasContext.fillRect(50,25,150,100);
}
HTML5 Canvas
Draw lines.
Canvas supported in IE9+
Draw shapes.
Fill shapes with gradients.
Draw images.
WHY?
Because it’s faster
download time.
HTML5 WebWorkers
WebWorkers provide a way for browsers to run JavaScript in the
background (speeding up processing).
If (Modernizr.webworkers){
// you can do 2 or more things at once! }
Else {
// you can only do 1 thing at a time
}
HTML5 Offline
Offline web applications start out as online web applications.
User starts by viewing the online web application.
The files are downloaded to the user’s computer for viewing.
User later views these files with no internet connection.
When the user gets back online, any changes made will be uploaded
to the web server.
If (Modernizr.applicationcache){
// window.applicationCache is available }
Else {
// user can’t view website offline.
}
HTML5 GeoLocation
GeoLocation is the art of figuring out where you are in the world and
(optionally) sharing that information with people you trust.
Your location can be determines by:
• your IP address
• your wireless network connection
• which cell tower your phone is talking to
• a dedicated GPS hardware that calculates latitude and longitude from
information sent by satellites in the sky.
HTML5 GeoLocation
Provide different content on your web pages based on
the location of the user.
User has to agree to provide their location in order for this to work.
Applications can be programmed to return data based on location
where longitude and latitude are defined.
If (Modernizr.geolocation){
navigator.geolocation.getCurrentPosition(show_map); }
Else {
// provide static generic information
}
Detect support for History API
History API is a way to manipulate the browser history via script.
If (Modernizr.history){
// history mgmt. works}
Else {
// try using history.js
}
Applications can be written to replicate going to a new page – yet the
web page never refreshes nor does it actually go to a new page.
HTML5
Enhancing websites for the robots.
HTML5 MicroData
“On-page markup enables search engines to understand the
information on web pages and provide richer search results in order
to make it easier for users to find relevant information on the web.”
- schema.org.
“Google uses on-page markup to create rich snipes in search
results.” – google.com
Marking up your page with microdata is good for SEO!
HTML5 MicroData
Microdata is a way to label content to describe a specific type of information.
Web Developers use schema.org to learn how to mark up data.
<div itemscope itemtype=“http://schema.org/LocalBusiness”>
<h1><span itemprop=“name”>Overhead Door Company of Albany</span></h1>
<span itemprop=“description”>company motto here</span>
<div itemprop=“address” itemscope itemtype=“http://schema.org/PostalAddress”>
<span itemprop=“streetAddress”>15Corporate Drive</span>
<span itemprop=“addressLocality”>Clifton Park</span>,
<span itemprop=“addressRegion”>NY</span> 12065
</div>
Phone: <span itemprop=“telephone”>518-348-0444</span>
Website: <a href=“http://www.albanyohd.com” itemprop=“url”>www.albanyohd.com</a>
Email: info@albanyohd.com
HTML5 MicroData
Aluminum Garage Door
<div itemscope itemtype=http://schema.org/Product>
<span itemprop=“name”>Aluminum Garage Door</span><span itemprop=“model”>Model 521</span>
<img src=“http://www.overheaddoor.com/images/521.jpg” itemprop=“contentURL” />
Product Description: <span itemprop=“description”> 2car garage door formed from durable corrosion-
resistant aluminum and light-filtering glass.</span>
</div>
Products:
HTML5 MicroData
<div itemscope itemtype=http://schema.org/ImageObject>
<img src=http://www.overheaddoor.com/images/ohdalban.com itemprop=“contentURL” />
Provided by: <span itemprop=“author”>Overhead Door Company of Albany”</span>
Photographed in: <span itemprop=“contentLocation”>Albany, NewYork</span>
Description: <span itemprop=“description”>Photograph taken in front of our business location
capturing the Overhead Door red ribbon logo on our signage, a truck and a van.</span>
</div>
Business Information
HTML5 MicroData
<h1>NewVideo</h1>
<div itemprop=“video” itemscope itemtype=http://schema.org/VideoObject>
<meta itemprop=“thumbnail” content=“garagedoormaterial.jpg” />
<h2 itemprop=“name”>Garage Door Materials</h2>
Created by: <span itemprop=“author”>Wayne Dalton</span>
<span itemprop=“description”>In this video we discuss the many options you
have for material when selecting a garage door.</span>
</div>
FeaturedVideo:
Why doWeb Developers love HTML 5 ?
Better organization of page content and code.
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
START
using
HTML5 !
Presentation created by Susan Reed

Weitere ähnliche Inhalte

Was ist angesagt?

How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for youSimon Willison
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video PlayerJim Jeffers
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsChris Love
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGapAlex S
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so goodChris Love
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015Chang W. Doh
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...David Kaneda
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 

Was ist angesagt? (20)

How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
HTML5
HTML5HTML5
HTML5
 
Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 

Andere mochten auch

Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Html 5 Revolution
Html 5 RevolutionHtml 5 Revolution
Html 5 RevolutionAlex Ivy
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizrbrooky-yen
 
Illustrator vs Photoshop
Illustrator vs PhotoshopIllustrator vs Photoshop
Illustrator vs PhotoshopAnnie Maldonado
 
Design Issue(Reuse) in Software Engineering SE14
Design Issue(Reuse) in Software Engineering SE14Design Issue(Reuse) in Software Engineering SE14
Design Issue(Reuse) in Software Engineering SE14koolkampus
 
Real Time Software Design in Software Engineering SE13
Real Time Software Design in Software Engineering SE13Real Time Software Design in Software Engineering SE13
Real Time Software Design in Software Engineering SE13koolkampus
 
Top 10 Differences between illustrator & Photoshop - illustrator vs Photoshop
Top 10 Differences between illustrator & Photoshop - illustrator vs PhotoshopTop 10 Differences between illustrator & Photoshop - illustrator vs Photoshop
Top 10 Differences between illustrator & Photoshop - illustrator vs PhotoshopCPZ Media
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
Adobe illustrator getting started
Adobe illustrator getting startedAdobe illustrator getting started
Adobe illustrator getting startedDanielle Oser, APR
 
An overview of software requirements engineering
An overview of software requirements engineeringAn overview of software requirements engineering
An overview of software requirements engineeringIan Sommerville
 
Requirements Engineering Processes in Software Engineering SE6
Requirements Engineering Processes in Software Engineering SE6Requirements Engineering Processes in Software Engineering SE6
Requirements Engineering Processes in Software Engineering SE6koolkampus
 
Handling Non Functional Requirements on an Agile Project
Handling Non Functional Requirements on an Agile ProjectHandling Non Functional Requirements on an Agile Project
Handling Non Functional Requirements on an Agile ProjectKen Howard
 
DID Unit 5 - Illustrator Basics
DID Unit 5 - Illustrator BasicsDID Unit 5 - Illustrator Basics
DID Unit 5 - Illustrator BasicsMrLawler
 

Andere mochten auch (20)

HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 Overview
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
Html 5 Revolution
Html 5 RevolutionHtml 5 Revolution
Html 5 Revolution
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizr
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML 5
HTML 5HTML 5
HTML 5
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
Illustrator vs Photoshop
Illustrator vs PhotoshopIllustrator vs Photoshop
Illustrator vs Photoshop
 
Design Issue(Reuse) in Software Engineering SE14
Design Issue(Reuse) in Software Engineering SE14Design Issue(Reuse) in Software Engineering SE14
Design Issue(Reuse) in Software Engineering SE14
 
Real Time Software Design in Software Engineering SE13
Real Time Software Design in Software Engineering SE13Real Time Software Design in Software Engineering SE13
Real Time Software Design in Software Engineering SE13
 
Top 10 Differences between illustrator & Photoshop - illustrator vs Photoshop
Top 10 Differences between illustrator & Photoshop - illustrator vs PhotoshopTop 10 Differences between illustrator & Photoshop - illustrator vs Photoshop
Top 10 Differences between illustrator & Photoshop - illustrator vs Photoshop
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Adobe illustrator getting started
Adobe illustrator getting startedAdobe illustrator getting started
Adobe illustrator getting started
 
An overview of software requirements engineering
An overview of software requirements engineeringAn overview of software requirements engineering
An overview of software requirements engineering
 
Requirements Engineering Processes in Software Engineering SE6
Requirements Engineering Processes in Software Engineering SE6Requirements Engineering Processes in Software Engineering SE6
Requirements Engineering Processes in Software Engineering SE6
 
Handling Non Functional Requirements on an Agile Project
Handling Non Functional Requirements on an Agile ProjectHandling Non Functional Requirements on an Agile Project
Handling Non Functional Requirements on an Agile Project
 
DID Unit 5 - Illustrator Basics
DID Unit 5 - Illustrator BasicsDID Unit 5 - Illustrator Basics
DID Unit 5 - Illustrator Basics
 
Digitizing a logo
Digitizing a logoDigitizing a logo
Digitizing a logo
 

Ähnlich wie What is HTML 5?

HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
Web development today
Web development todayWeb development today
Web development todayJaydev Gajera
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-airbrucelawson
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5Ravi Raj
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web ApplicationSachin Walvekar
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programminghchen1
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareRomin Irani
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEdgar Parada
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 

Ähnlich wie What is HTML 5? (20)

Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Web development today
Web development todayWeb development today
Web development today
 
HTML 5
HTML 5HTML 5
HTML 5
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Qnx html5 hmi
Qnx html5 hmiQnx html5 hmi
Qnx html5 hmi
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
Html5 Future of WEB
Html5 Future of WEBHtml5 Future of WEB
Html5 Future of WEB
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Mobile Web
Mobile WebMobile Web
Mobile Web
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programming
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm Software
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 

Kürzlich hochgeladen

Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesDIPIKA83
 
Phase noise transfer functions.pptx
Phase noise transfer      functions.pptxPhase noise transfer      functions.pptx
Phase noise transfer functions.pptxSaiGouthamSunkara
 
Landsman converter for power factor improvement
Landsman converter for power factor improvementLandsman converter for power factor improvement
Landsman converter for power factor improvementVijayMuni2
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfNaveenVerma126
 
Dev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingDev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingMarian Marinov
 
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...soginsider
 
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Sean Meyn
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptxMUKULKUMAR210
 
Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...sahb78428
 
EPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxEPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxJoseeMusabyimana
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Projectreemakb03
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Apollo Techno Industries Pvt Ltd
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsYusuf Yıldız
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxKISHAN KUMAR
 
solar wireless electric vechicle charging system
solar wireless electric vechicle charging systemsolar wireless electric vechicle charging system
solar wireless electric vechicle charging systemgokuldongala
 
Guardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSecGuardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSecTrupti Shiralkar, CISSP
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Bahzad5
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Amil baba
 

Kürzlich hochgeladen (20)

Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display Devices
 
Phase noise transfer functions.pptx
Phase noise transfer      functions.pptxPhase noise transfer      functions.pptx
Phase noise transfer functions.pptx
 
Landsman converter for power factor improvement
Landsman converter for power factor improvementLandsman converter for power factor improvement
Landsman converter for power factor improvement
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
 
Dev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingDev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & Logging
 
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
 
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptx
 
Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...
 
Présentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdfPrésentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdf
 
EPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxEPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptx
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Project
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovations
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptx
 
solar wireless electric vechicle charging system
solar wireless electric vechicle charging systemsolar wireless electric vechicle charging system
solar wireless electric vechicle charging system
 
Lecture 4 .pdf
Lecture 4                              .pdfLecture 4                              .pdf
Lecture 4 .pdf
 
Guardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSecGuardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSec
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
 

What is HTML 5?

  • 1. What is HTML5? And why is it so important?
  • 2. Standard IMPROVEMENTS You don’t get rid of HTML4 standards – you just improve upon them!
  • 3. It’s easy for web developers to upgrade their websites to HTML 5 Step 1: change the doctype at the top of the page. NEW: <!DOCTYPE html> OLD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 4. Who will see your cool new HTML 5 features? Changing the Doctype will not break your existing website People using OLDER browsers that don’t support the new HTML5 features will simply miss out on viewing the website the way others do.
  • 5. HTML5 is a Collection of Features HTML5 is not an “all or nothing” capability. The HTML5 features available to end users depend on what browser and what version of that browser they are using. Users: How well does your browser support html5? Keep your browser updated so that as they add new feature support you will have access to these new features!
  • 6. Quick Note about MicroData MicroData is code a web developer adds to a web page that provides a mechanism for easily allowing machines to consume the data on the page, while not affecting the experience for the user. Browsers are applications used by humans to view web pages. Robots are machines (used by search engines) to read the code of the web page. Web Developers add microdata to a web page to help search engine robots better understand the content on the page. If your browser doesn’t support microdata – don’t worry about it! It’s not aboutYOU – It’s about the robot!
  • 8. Detect using a detection library Modernizr is an open source, JavaScript library that detects support for many HTML5 & CSS3 features. Simply include a link to the script in the <head> tag of your master template file <script src=“modernizr.min.js”></script> Modernizr will run automatically and create a global object called Modernizr. This object contains a set of Boolean properties for each feature it can detect. (Booleans are variables that hold a true or false value).
  • 9. HTML5 Local Storage Local storage provides a way for websites to store information on your computer to retrieve it later. (similar to cookies) Cookies require a trip to the server on each page download (which requires extra bandwidth). Local storage is accessed by JavaScript (that runs in the “client” = less bandwidth). If (Modernizr.localstorage){ // find out where the user is located } Else { // user misses out on features }
  • 10. HTML5 PlaceholderText Enables websites the ability to place temporary text in an input field. This gives the user a visual clue as to what type of text is expected. The placeholder text disappears once the user clicks on the field to begin typing. If (Modernizr.input.placeholder){ // user can see placeholder text} Else { // user can’t see the text. }
  • 11. HTML5 Form InputType New form input types assist users with input. • <input type=“range”> - for sliders • <input type=“color”> - for color pickers • <input type=“tel”> - for telephone numbers • <input type=“url”> - for web addresses • <input type=“email”> - for email addresses • <input type=“date”> for calendar date pickers • <input type=“month”> - for a list of months • <input type=“week”> - for weeks • <input type=“time”> - timestamps • <input type=“datetime”> -for precise, absolute date+time stamps • <input type=“datetime-local”> for local dates and times • <input type=“number”> - for spinboxes • <input type=“search”> - for search boxes If (!Modernizr.inputtypes.date){ // <input type=“date”> not supported} }
  • 12. HTML5 Autofocus Allows the cursor to automatically be placed in a specific field on a form without the user having to manually click inside the field. If (Modernizr.input.autofocus){ // help the user get started} Else { // user is on their own. } EXAMPLE:
  • 13. HTML 5Video Each HTML5 browser support 2 different video formats. Make the video available in several different formats. (.mp4 .ogg .webm) The video played depends on the format that browser supports. If (Modernizr.video){ if (Modernizr.video.webm) { // playWebM } else if (Modernizr.video.ogg) { // play Ogg } else if (Modernizr.video.h264) { // play mp4 - h.264 video with AAC audio } Else { // user misses out on features – check out the alternative options at “video for everyone”} } Also see: “Video for Everyone” – www.camendesign.com/code/video_for_everybody
  • 14. HTML5 Canvas Canvas is a rectangle in your page where you can use JavaScript to draw anything you want. The canvas API is used for drawing shapes, defining paths, creating gradients, and applying transformations. The canvas text API is for drawing text. If (Modernizr.canvas){ // draw something in the box } Else { // user is blind! } Those using a browser without HTML5 support just miss out on viewing the canvas! If (Modernizr.canvastext){ // draw some text in the box } Else { // user is blind! }
  • 15. HTML5 Canvas A canvas area is created with HTML5 code. <canvas id=“myCanvas1” width=“300” height=“225”></canvas> Canvas supported in IE9+ You can then access the canvas by referencing its ID. function drawBoxInsideCanvas( ) { var canvasArea = document.getElementById(“myCanvas1” ); var canvasContext = canvasArea.getContext(“2d”); canvasContext.fillRect(50,25,150,100); }
  • 16. HTML5 Canvas Draw lines. Canvas supported in IE9+ Draw shapes. Fill shapes with gradients. Draw images. WHY? Because it’s faster download time.
  • 17. HTML5 WebWorkers WebWorkers provide a way for browsers to run JavaScript in the background (speeding up processing). If (Modernizr.webworkers){ // you can do 2 or more things at once! } Else { // you can only do 1 thing at a time }
  • 18. HTML5 Offline Offline web applications start out as online web applications. User starts by viewing the online web application. The files are downloaded to the user’s computer for viewing. User later views these files with no internet connection. When the user gets back online, any changes made will be uploaded to the web server. If (Modernizr.applicationcache){ // window.applicationCache is available } Else { // user can’t view website offline. }
  • 19. HTML5 GeoLocation GeoLocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. Your location can be determines by: • your IP address • your wireless network connection • which cell tower your phone is talking to • a dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.
  • 20. HTML5 GeoLocation Provide different content on your web pages based on the location of the user. User has to agree to provide their location in order for this to work. Applications can be programmed to return data based on location where longitude and latitude are defined. If (Modernizr.geolocation){ navigator.geolocation.getCurrentPosition(show_map); } Else { // provide static generic information }
  • 21. Detect support for History API History API is a way to manipulate the browser history via script. If (Modernizr.history){ // history mgmt. works} Else { // try using history.js } Applications can be written to replicate going to a new page – yet the web page never refreshes nor does it actually go to a new page.
  • 23. HTML5 MicroData “On-page markup enables search engines to understand the information on web pages and provide richer search results in order to make it easier for users to find relevant information on the web.” - schema.org. “Google uses on-page markup to create rich snipes in search results.” – google.com Marking up your page with microdata is good for SEO!
  • 24. HTML5 MicroData Microdata is a way to label content to describe a specific type of information. Web Developers use schema.org to learn how to mark up data. <div itemscope itemtype=“http://schema.org/LocalBusiness”> <h1><span itemprop=“name”>Overhead Door Company of Albany</span></h1> <span itemprop=“description”>company motto here</span> <div itemprop=“address” itemscope itemtype=“http://schema.org/PostalAddress”> <span itemprop=“streetAddress”>15Corporate Drive</span> <span itemprop=“addressLocality”>Clifton Park</span>, <span itemprop=“addressRegion”>NY</span> 12065 </div> Phone: <span itemprop=“telephone”>518-348-0444</span> Website: <a href=“http://www.albanyohd.com” itemprop=“url”>www.albanyohd.com</a> Email: info@albanyohd.com
  • 25. HTML5 MicroData Aluminum Garage Door <div itemscope itemtype=http://schema.org/Product> <span itemprop=“name”>Aluminum Garage Door</span><span itemprop=“model”>Model 521</span> <img src=“http://www.overheaddoor.com/images/521.jpg” itemprop=“contentURL” /> Product Description: <span itemprop=“description”> 2car garage door formed from durable corrosion- resistant aluminum and light-filtering glass.</span> </div> Products:
  • 26. HTML5 MicroData <div itemscope itemtype=http://schema.org/ImageObject> <img src=http://www.overheaddoor.com/images/ohdalban.com itemprop=“contentURL” /> Provided by: <span itemprop=“author”>Overhead Door Company of Albany”</span> Photographed in: <span itemprop=“contentLocation”>Albany, NewYork</span> Description: <span itemprop=“description”>Photograph taken in front of our business location capturing the Overhead Door red ribbon logo on our signage, a truck and a van.</span> </div> Business Information
  • 27. HTML5 MicroData <h1>NewVideo</h1> <div itemprop=“video” itemscope itemtype=http://schema.org/VideoObject> <meta itemprop=“thumbnail” content=“garagedoormaterial.jpg” /> <h2 itemprop=“name”>Garage Door Materials</h2> Created by: <span itemprop=“author”>Wayne Dalton</span> <span itemprop=“description”>In this video we discuss the many options you have for material when selecting a garage door.</span> </div> FeaturedVideo:
  • 28. Why doWeb Developers love HTML 5 ? Better organization of page content and code. <header> <nav> <main> <section> <article> <aside> <footer>