HTML 5: Introduction - PowerPoint Presentation

Slide1

HTML 5: Introduction

M. Douglas Wray

Macwebguru.comSlide2

M. Douglas Wray

Currently webmaster for

CUAlum.org

P

rivate consultant and trainer

Focus: CSS design and WordPress

Code geek

Loves CheetosSlide3

HTML: A Brief History

1989 – Tim Berners-Lee invents HTML basing it on SGML (good move Tim!)

1992 – NCSA* creates Mosaic browser

1993 – Lynx browser invented

1994 – IETF** sets up HTML work group, HTML 2 spec released, WWW consortium forms

1995 – HTML 3 spec released

1996 – Scripting and standardization added

1997 – HTML 3.2 released and endorsed by W3

*National Center for Supercomputing Applications

** Internet Engineering Task Force

More details here:

http://www.w3.org/People/Raggett/book4/ch02.htmlSlide4

HTML: What’s it for

?

Used to create the basic elements of webpages: text, tables, images, etc.

The ‘

Etc

’ is what’s been growing:

Audio

Video

GraphicsSlide5

Existing Elements

IMG for images

APPLET(for Java)

OBJECT (generic)

A bit limited…

Here’s a list of all of them:

http://www.w3.org/TR/html4/index/

elements.htmlSlide6

What’s Missing?

Audio and Video!

Vector-based graphics

Standardization

Dozens of ways currently

EMBED is non-standard and

awkward

:

<embed alt="

string

" height=" {

number

|

percentage

} " hidden=" { true | false } " 

pluginspage

="

uri

" 

src

="

uri

" type="

MIME type

" width="

number

”>

</embed>Slide7

New HTML5 Markup

Tag

Description

<article>

Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.

<aside>

For content aside from the content it is placed in. The aside content should be related to the surrounding content

<bdi>

For text that should not be bound to the text-direction of its parent elements

<command>

A button, or a

radiobutton

, or a checkbox

<details>

For describing details about a document, or parts of a document

<summary>

A caption, or summary, inside the details element

<figure>

For grouping a section of stand-alone content, could be a video

<figcaption>

The caption of the figure section

<footer>

For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

<header>

For an introduction of a document or section, could include navigation

<hgroup>

For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings

<mark>

For text that should be highlighted

<meter>

For a measurement, used only if the maximum and minimum values are known

<nav>

For a section of navigation

<progress>

The state of a work in progress

<ruby>

For ruby annotation (Chinese notes or characters)

<rt>

For explanation of the ruby annotation

<rp>

What to show browsers that do not support the ruby element

<section>

For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<time>

For defining a time or a date, or both

<

wbr

>

Word break. For defining a line-break opportunity.Slide8

New Media Elements

Tag

Description

<audio>

For multimedia content, sounds, music or other audio streams

<video>

For video content, such as a movie clip or other video streams

<source>

For media resources for media elements, defined inside video or audio elements

<embed>

For embedded content, such as a plug-in

<track>

For text tracks used in

mediaplayersSlide9

The CANVAS Element

This is one of the really exciting parts!

Using the Canvas element, vector based graphics can be rendered online.

Much like Flash but without the need

for proprietary software.

Graphics are created using JavaScript

More later on.Slide10

New Form Elements

Tag

Description

<datalist>

A list of options for input values

<keygen>

Generate keys to authenticate users

<output>

For different types of output, such as output written by a scriptSlide11

New Input Type Attributes

Type

Description

tel

The input value is of type telephone number

search

The input field is a search field

url

The input value is a URL

email

The input value is one or more email addresses

datetime

The input value is a date and/or time

date

The input value is a date

month

The input value is a month

week

The input value is a week

time

The input value is of type time

datetime-local

The input value is a local date/time

number

The input value is a number

range

The input value is a number in a given range

color

The input value is a hexadecimal color, like #FF8800

placeholder

Specifies a short hint that describes the expected value of an input fieldSlide12

NAV and FOOTER

Currently users are doing this:

<div id=“

nav

”> (user’s

nav

code) </div>

In HTML5 it’s simpler:

<

nav

>

(user’s

nav

code) <

/

nav

>

Same for FooterSlide13

Typical NAV

<nav>

  <a href="/html/">HTML</a> |

  <a href="/html5/">HTML5</a> |

  <a href="/css/">CSS</a> |

  <a href="/css3/">CSS3</a> |

  <a href="/js/">JavaScript</a>

</

nav>Slide14

Video Before HTML5

No standard method

Required (different) plugin(s)

Various types of video:

Ogg

/MPEG 4 and

WebM

Currently-used EMBED methods

not valid HTML and

crankySlide15

Video Embed Before HMTL5

Different method for embedding each of these:

Windows

Media (WMV, WMA)

Flash

(SWF)

Flash

(FLV)

QuickTime

(MOV)

Real

(RM) Slide16

Video After HTML5

<video width="320" height="240" controls="controls">

  <source

src

="movie.mp4" type="video/mp4" />

  <source

src

="

movie.ogg

" type="video/

ogg

" />

  Your browser does not support the video tag.

</video>

There’s also a TRACK tag for media players.

That’s IT

.Slide17

Audio in HTML5

<audio controls="controls">

  <source

src

="

song.ogg

" type="audio/

ogg

" />

  <source

src

="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio> Slide18

The CANVAS Element

<!DOCTYPE html>

<html>

<body

>

<

canvas id="

myCanvas

" width="200" height="100" style="border:1px solid #c3c3c3;">

Your

browser does not support the canvas element.

<

/canvas

>

<

script type="text/

javascript

”>

var

c=

document.getElementById

("

myCanvas

");

var

cxt

=

c.getContext

("2d");

cxt.fillStyle

="#FF0000";

cxt.fillRect

(0,0,150,75)

;

</

script

>

</body>

</html

>

http

://www.w3schools.com/html5/tryit.asp?filename=

tryhtml5_canvas_firstSlide19

The CANVAS Element

<!DOCTYPE html>

<html>

<body

>

<

canvas id="

myCanvas

" width="300" height="300" style="border:1px solid #c3c3c3;">

Your

browser does not support the canvas element.

<

/canvas

>

<

script type="text/

javascript

”>

var

c=

document.getElementById

("

myCanvas

");

var

cxt

=

c.getContext

("2d");

cxt.moveTo

(150,150);

cxt.lineTo

(150,50);

cxt.lineTo

(10,50);

cxt.stroke

()

;

<

/script

>

</body>

</html>

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_lineSlide20

The CANVAS Element

There’s an add-on for Adobe Illustrator so you can save directly into HTML5.

http://labs.adobe.com/downloads/illustrator_html5.

html

(you can also get it for CS4)Slide21

A Few CANVAS Examples

My personal logo (

link

)

Rendered type (

link

)

Interactive gradients (

link

)

classList

manipulation (

link

)

HTML5 Form (

link

)Slide22

More CANVAS examples

Adjustable bar chart (

link

)

Entire HTML5 course/examples (

link

)

Incredible

interactives

(

link

)

Bar charts (

link

)

Particle System Generator (

link

)Slide23

Resources

The video element (

link

)

iPhone website (

link

)

HTML5 Visual

Cheatsheet

(

link

)

HTML5 Canvas

Cheatsheet

(

link

)

HTML5 & CSS3 Techniques (

link

)

Hype

™

HTML5 Animation Editor (

link

)Slide24

More Resources

Audio Element Maker (

link

)

Video Element Maker (

link

)

SVG to HTML5 Canvas (

link

)

Purple – HTML5 Canvas Animation (

link

)

Cut/Paste Examples (

link

)Slide25

Even More Resources

Video examples and browser

compatibility (

link

)

Build an HTML5 video player (

link

)

Audio and Video Processing (

link

)

Using Audio with HTML5 (

link

)Slide26

Q & A