html5- what you need to know and why you should care

HTML5What You Need to Know and

Why You Should Care

Debbie RichardsCreative Interactive [email protected]://twitter.com/cre8iveiihttp://cre8iveii.blogspot.com/

BACKGROUND

HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions.Steve Jobs

HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers

create more than advanced graphics, typography, animations and transitions.Steve Jobs

http://ie.microsoft.com/testdrive/Default.html

http://www.youtube.com/watch?v=ryZP00_KhYE

http://www.youtube.com/watch?v=MLKfLql9euo

Export FLA to HTML5

MAX 2010Sneak Peek

Publish to iPhone from Captivate 5

To deploy a Captivate course on an iPhone you need Adobe eLearning Suite 2, or both Adobe Captivate 5 and Adobe Flash Professional. You also need to install the ‘Packager for iPhone’ from Adobe Labs.1. Get an iPhone developer certificate from Apple2. Get Development Provisioning profile from Apple (A file that lets

you test or distribute an iPhone application. You obtain provisioning profile files from Apple. A provisioning profile is assigned to a specific development certificate, an application ID, and one or more device IDs). More details here.

3. Create a Captivate project for the iPhone form factor – 320 *4804. While publishing the SWF, turn ON this option in the publish

dialog – “Enable SWF for conversion to iPhone application”.

Low Bandwidth Player • Automatically adds HTML feature when/if you add PNGs of slides• Automatically adds embedded audio if you include files• Automatically switches to HTML if no flash is detected (and pngs are

present)• Notifies LMS when course is complete• Slide Index toggles with Articulate outline panel setting• Uses HTML5 and degrades nicely for IE

http://www.frameentered.com/content/low‐bandwidth‐html‐articulate‐player‐waudio‐reports‐lms‐too

Raptivity HTML5 Pack

http://www.raptivity.com/Demo%20Courses/Interactivity%20Builder%20Sample%20Course/Index.html?15

Raptivity HTML5 Pack

HTML STUFF

HTML5 Stack

• HTML5 – the markup language• CSS3 (the latest version of Cascading Style Sheets) – how it looks or is rendered

• JavaScript – the programming language

Areas of Focus

• The "markup" part of HTML5: focused on developing web sites and pages

• The API (application programming interface) part: focused on building web applications (think of Gmail as an example of a web application)

Browser Support

Browser Support

http://html5test.com/

Tablet Reading Experience

http://www.publicintegrity.org/treesaver/tuna/00‐toc.html

Content is displayed in a horizontal, widescreen format devoid of distracting banner ads and links to other content.

Users can pull up a left‐hand navigation bar to navigate between story sections, and click on arrows to tab between individual pages.

The size and amount of text on display adjusts according to the size of the browser.

Document Object Model (DOM)

• Check if a certain property exists on a global object (such as window or navigator)– Example: testing for geolocation support

• Create an element, then check if a certain property exists on that element– Example: testing for canvas support

• Create an element, check if a certain method exists on that element, then call the method and check the value it returns– Example: testing which video formats are supported

• Create an element, set a property to a certain value, then check if the property has retained its value (think about forms)– Example: testing which <input> types are supported

HTML5 – Up and Running: Mark Pilgrim

Features

• New structural and semantic markup – Such as header, footer and nav elements

• The new canvas element– Creating web based bitmap graphics using JavaScript

• New native audio and video elements, and related elements and attributes– Embedding multimedia content that browsers can play without plugins

NAV Element

<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul>

</nav>

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element.

Tags

• <audio> tag defines sound content• <canvas> tag defines graphics• <footer> tag defines a footer for a section or page

• <header> tag defines a header for a section or page

• <nav> tag defines navigation links• <time> tag defines a date/time• <video> tag defines a video

Sketch Example

Works best in Mozilla

http://mrdoob.com/projects/harmony/

Drag and Drop

http://html5demos.com/drag

Cloth Simulation

http://www.andrew‐hoyer.com/experiments/cloth/

http://craftymind.com/factory/html5video/CanvasVideo.html

Offline Web Application

• Enabling resources like HTML, CSS and JavaScript to be cached, so that if a user goes offline, the browser will have kept these resources, and the application can still be used, or even installed locally on a device

• Sending events to a web application when the user goes on and offline

Editable Text

This is a good, simple demonstration of editable text and local Storage; edit text in the box, close the window, and then click the link again.

http://html5demos.com/contenteditable

Geolocation API

• Allows a web site or application to ask the browser where a user is located (including longitude, latitude and altitude, but also potentially the direction they are facing, and their speed)

• Of course, whether the user wishes to share this information is at their discretion)

function get_location() { navigator.geolocation.getCurrentPosition(show_map);}

Geolocation

http://html5demos.com/geo

HANDS‐ON

Canvas Example

http://cii‐ftp.com/byol/redbox.html

Source Code

<html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></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>

Head

<html><head>

</head>

</html>

Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

Body

<html><head>

</head> <body>

</body> </html>

The body element defines the document's body.

The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Canvas

<html><head> </head> <body><canvas id="myCanvas" width="200" height="100" </canvas></body> </html>

The HTML5 canvas element uses JavaScript to draw graphics on a web page.

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

Specify the id, width, and height of the element

Draw with Javascript

<script type="text/javascript">Var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

The canvas element has no drawing abilities of its own.

All drawing must be done inside a JavaScript.


JavaScript uses the id to find the canvas element.



Create a context object –The getContext("2d") object is a built‐in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.



Draw a red rectangle.

The fillStyle method makes it red.

The fillRect method specifies the shape, position, and size.



The fillRect method above had the parameters (0,0,150,75).This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).

The canvas' X and Y coordinates are used to position drawings on the canvas.


SVG Example

http://cii‐ftp.com/byol/red_svg.html

SVG stands for Scalable Vector Graphics

Canvas vs. SVG• Think of the difference between canvas and svg as the

difference betwee Photoshop and Illustrator (One deals with bitmaps and the other vector art.

• With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line.

• With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects.

SVG

• SVG stands for Scalable Vector Graphics• SVG is used to define vector‐based graphics for the Web

• SVG defines the graphics in XML format• SVG graphics do NOT lose any quality if they are zoomed or resized

• Every element and every attribute in SVG files can be animated

SVG Advantages• SVG files can be read and modified by a large range of tools

(e.g. notepad)• SVG files are smaller and more compressible than JPEG and

GIF images• SVG images are scalable• SVG images can be printed with high quality at any resolution• SVG images are zoomable (and the image can be zoomed

without degradation)• Text in SVG is selectable and searchable (excellent for making

maps)• SVG works with Java technology• SVG is an open standard• SVG files are pure XML

Source Code

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"stroke‐width="2" fill="red"/></svg>

Video

http://cii‐ftp.com/byol/video_html5.html

File vs. Video Formats

• One of the biggest sources of confusion about video is not realizing that the file format is completely different from the video format. So you're always dealing with two formats, not one.

• Examples of file formats are .mp4, .flv, f4v, .ogv, or .avi. File formats are often called container formats because they're containers for the actual video.

• The video format is the flavor of compression that's used on the video. This is often called a codec.

MP4

The movie.MP4 file is a container that can hold video encoded as either MPEG‐4 or H.264.

Flash

Amovie.FLV (Flash) file could also hold H.264video, or it could hold video encoded with vp6 or Sorenson Spark. But it can't hold MPEG‐4 video.

OGV

Amovie.OGV file is primarily for Theora and other even more obscure formats.

It can't hold MPEG‐4 or H.264, at least not easily.

To convert videos to the .ogg/.ogv format, install the Firefogg extension into your Firefox browser.

Codec

A codec encodes a data stream or signal for transmission, storage or encryption, or decodesit for playback or editing.

The process of decoding what’s inside the video container file varies. To know how to decode a movie, the player (which is your web browser in the case of HTML5 video) has to know which codec the movie was encoded with.

Video File Formats

Each format holds at minimum one video track and, most likely, one audio track.

When you watch a movie online, your video player decodes both the audio and video and sends the information to your screen and speakers.

Three Parts to Video

• The file format that holds the video, like .mp4, .flv, .f4v, .ogv, or .avi

• The video format (aka codec), like H.264, MPEG‐4, or Theora

• The player that makes it available to your site visitors, such as the Adobe Flash Plugin, or the new <video></video> tag.

Video Compability

Source Code<video controls="controls">

<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />

<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />

<video>

DW CS5 HTML5 Support

EXTRAS

Support

• http://cii‐ftp.com/byol/html5_links.pdf• http://cii‐ftp.com/byol/Cheat_Sheet.pdf• http://www.infoworld.com/d/developer‐world/html5‐how‐infoworlds‐expert‐guide‐639

• http://cii‐ftp.com/byol/html5_flash.pdf• http://blogs.adobe.com/captivate/2010/09/publish‐to‐iphone‐from‐captivate‐5‐and‐elearning‐suite‐2.html

Training

• http://courses.sitepoint.com/html5‐live ‐ $10!• http://blog.templatemonster.com/2010/10/07/html5‐canvas‐tutorials‐2010/

• http://blog.templatemonster.com/2010/06/16/25‐html5‐tutorials‐techniques/

html5- what you need to know and why you should care

Technology