Basic html5 and javascript

HTML5

Mark GutierrezWeb & Mobile DeveloperTowers Watson Inc.

Expectations?

2

3

Agenda

What is HTML5 Features Adoption Is HTML5 ready Now? Changes from previous HTMLs

What’s addedWhat’s deprecated

Exercise

What is HTML5?

HTML5 is is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997[1]) and as of August 2011[update] is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

4

Adoption

The biggest names in the Industry Disney Research In Motion Google Apple Microsoft

5

Is HTML5 ready now?Yes and No.

HTML5 is now ready for use by developers provided they use fallbacks since the specification for HTML5 is not yet finalized. According to the W3C, HTML5 is still in Draft. So expect changes to happen anytime. The expected completion is 2022 or later. Although many parts of the specifications are already stable and may be implemented.

6

What’s New Markup

FormsMultimediaGraphics

New APIsGraphicsMedia PlaybackGeoLocationWeb SocketsWeb Workers

Error Handling

7

Deprecated TagsLike any other evolving technologies. HTML5 also deprecates some outdated tags such as:basefontbigcenterfontsstrikettUframeframesetnoframes

8

Attributes:

• align• link, vlink, alink, and text attributes on the body tag• bgcolor• height and width• scrolling on the iframe element• valign• hspace and vspace• cellpadding, cellspacing, and border on table

New Structural Tags

<header> - Defines a header region of a page or section.

<footer> - Defines a footer region of a page or section.

<nav> - Defines a navigation region of a page or section.

<section> - Defines a logical region of a page or a grouping of content.

<article> - Defines an article or complete piece of content.

<aside> - Defines secondary or related content.

9

Form TagsNew Input Tags

<input type=“range”>

<input type=“number”>

<input type=“date”>

<input type=“email”>

<input type=“url”>

<input type=“color”>

<input type=“Search”>

10

Range Input

<input type="range" min="0" max="10"

name="priority" value="0" id="priority" >

11

Number Input

<input type="number" name="estimated_hours"

min="0" max="1000“ id="estimated_hours" >

12

Date Input

<input type="date" name="start_date" id="start_date"

value="2010-12-01" >

13

Email Input

<input type="email" name="email" id="email">

14

URL Input

<input type="url" name="url" id="url">

15

Color Input

<input type="color" name="project_color" id="project_color">

16

Search Input

<input type=“search” name=“textsearch” id=“searchfield” >

17

Tel Input

<input type="range" min="0" max="10"

name="priority" value="0" id="priority" >

18

Multimedia Support

Multimedia has become an integral part of our internet usage thus, HTML5 added support for both Video and Audio <Video> <Audio>

19

Audio SupportSupport for MP3, AAC, OGG

<audio id="drums" controls>

<source src="sounds/ogg/drums.ogg" type="audio/ogg">

<source src="sounds/mp3/drums.mp3" type="audio/mpeg">

<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>

</audio>

20

Video SupportSupport for MP4, OGV, WebM format

<video controls> <source src="video/h264/01_blur.mp4"> <source src="video/theora/01_blur.ogv"> <source src="video/webm/01_blur.webm"> <p>Your browser does not support the video tag.</p></video> 21

GraphicsSupports creation of vector based graphics through the use of javascript

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

22

Questions?

23

HTML5 AND JAVASCRIPT

Agenda

New DOM Selectors Audio and Video Using the Canvas Knowing your Location Web Sockets

Essence of JS on HTML5? No minimum system requirements Easier to code Faster execution/response Extends the ability The completeness of HTML5

Select What?

getElementById() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll()

Wait, there’s no light and there’s no flash! How’s our party?

Audio and Video

Media FunctionsPlay()Pause()Load()

Audio and Video cont. Media Properties

VolumeDurationMutedPausedLoop

Audio and Video cont. Events

PlayPauseAbortEndedProgress

Ready your brushes… Drawing in the canvas

Preparing your workspaceCreating a simple path

○ beginPath();○ lineTo();○ moveTo();○ Stroke();

Ready your brushes… cont. Drawing simples shapes

Circle○ Arc();

Square○ fillRect();

Faster script, faster!

Web workersseparate JS processes() running in separate

threads,executes concurrently,doesn’t block the UI,allow you to extract up to the last drop of

juice from a multicore CPU,can be dedicated (single tab) or shared

among tabs/windows,

Working for one purpose

MainProc.js

Workers1.js

Workers2.js

Workers3.js

Web workers cont…

Put it to worknew Worker();onmessage();postmessage();

Where am I?

Using GeolocationRemember: Always ask for permission!I have no GPS!

○ IPAddress○ WiFi○ Cellphone

Location pls.

Hey! Mr. Navigator…coords.latitudecoords.longitudegetCurrentPosition()

Web Sockets

Communicate in a whole new wayTCP over the Web2-way communication for the Internet

○ Use a client browser that implements the WebSocket protocol.

○ Write code in a webpage that creates a client websocket.

○ Write code on a web server that responds to a client request through a websocket

Web Sockets

Tuning inURLwebsocket()open(), onopenclose(), oncloseonmessage()postmessage()

Remember…

Consider older browsersDetect BrowserDetect Feature availability

Thank you