Transcript
Page 1: What is HTML 5?   By: Susan Reed

What is HTML5?

And why is it so important?

Page 2: What is HTML 5?   By: Susan Reed

Standard IMPROVEMENTS

You don’t get rid of HTML4 standards – you just improve upon them!

Page 3: What is HTML 5?   By: Susan Reed

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">

Page 4: What is HTML 5?   By: Susan Reed

Who will see your cool new HTML 5 features?

Changing the Doctype will not break your existing websitePeople using OLDER browsers that don’t support the new HTML5

features will simply miss out on viewing the website the way others do.

Page 5: What is HTML 5?   By: Susan Reed

HTML5 is a Collection of FeaturesHTML5 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!

www.Html5test.com

www.whatbrowser.org

Page 6: What is HTML 5?   By: Susan Reed

Quick Note about MicroDataMicroData 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 about YOU – It’s about the robot!

Page 7: What is HTML 5?   By: Susan Reed

HTML5Enhancing websites for the people.

Page 8: What is HTML 5?   By: Susan Reed

Detect using a detection libraryModernizr 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).

Page 9: What is HTML 5?   By: Susan Reed

HTML5 Local StorageLocal 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}

Page 10: What is HTML 5?   By: Susan Reed

HTML5 Placeholder TextEnables 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.}

Page 11: What is HTML 5?   By: Susan Reed

HTML5 Form Input TypeNew 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 boxesIf (!Modernizr.inputtypes.date){

// <input type=“date”> not supported}}

Page 12: What is HTML 5?   By: Susan Reed

HTML5 AutofocusAllows 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:

Page 13: What is HTML 5?   By: Susan Reed

HTML 5 VideoEach 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) { // play WebM }

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

Page 14: What is HTML 5?   By: Susan Reed

HTML5 CanvasCanvas 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!}

Page 15: What is HTML 5?   By: Susan Reed

HTML5 CanvasA 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); }

Page 16: What is HTML 5?   By: Susan Reed

HTML5 Canvas

Draw lines.

Canvas supported in IE9+

Draw shapes.Fill shapes with gradients.Draw images.

WHY?Because it’s faster download time.

Page 17: What is HTML 5?   By: Susan Reed

HTML5 Web WorkersWeb Workers 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}

Page 18: What is HTML 5?   By: Susan Reed

HTML5 OfflineOffline 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.}

Page 19: What is HTML 5?   By: Susan Reed

HTML5 GeoLocationGeoLocation 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.

Page 20: What is HTML 5?   By: Susan Reed

HTML5 GeoLocationProvide 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}

Page 21: What is HTML 5?   By: Susan Reed

Detect support for History APIHistory 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.

Page 22: What is HTML 5?   By: Susan Reed

HTML5Enhancing websites for the robots.

Page 23: What is HTML 5?   By: Susan Reed

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!

Page 24: What is HTML 5?   By: Susan Reed

HTML5 MicroDataMicrodata 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”>15 Corporate 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: [email protected]

Page 25: What is HTML 5?   By: Susan Reed

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:

Page 26: What is HTML 5?   By: Susan Reed

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, New York</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

Page 27: What is HTML 5?   By: Susan Reed

HTML5 MicroData

<h1>New Video</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>

Featured Video:

Page 28: What is HTML 5?   By: Susan Reed

Why do Web Developers love HTML 5 ?

Better organization of page content and code.

<header>

<nav>

<main>

<section>

<article>

<aside>

<footer>

Page 29: What is HTML 5?   By: Susan Reed

START using

HTML5 !Presentation created by Susan

Reed


Top Related