• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

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

on

  • 1,990 views

BYOL presentation 11/12/10

BYOL presentation 11/12/10

Statistics

Views

Total Views
1,990
Views on SlideShare
1,987
Embed Views
3

Actions

Likes
0
Downloads
37
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5- what you need to know and why you should care Html5- what you need to know and why you should care Presentation Transcript

    • HTML5 What You Need to Know and  Why You Should Care Debbie Richards Creative Interactive Ideas debbie@cre8iveii.com http://twitter.com/cre8iveii http://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
    • Export FLA to HTML5 MAX 2010 Sneak Peek http://www.youtube.com/watch?v=ryZP00_KhYE http://www.youtube.com/watch?v=MLKfLql9euo
    • 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 Apple 2. 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 *480 4. 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
    • Raptivity HTML5 Pack http://www.raptivity.com/Demo%20Courses/Interactivity%20Builder%20Sa mple%20Course/Index.html?15
    • 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 function get_location()  { navigator.geolocation.getCurrentPosition(show_map);} • 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)
    • 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 Elements inside <head> can include  <html> scripts, instruct the browser where  <head>  to find style sheets, provide meta  information, and more. </head>  The following tags can be added to  the head section: <title>, <base>,  <link>, <meta>, <script>, and  </html>  <style>.
    • Body The body element defines the  <html> document's body. <head>  The body element contains all the  contents of an HTML document,  </head>  such as text, hyperlinks, images,  tables, lists, etc. <body> </body>  </html> 
    • Canvas <html> The HTML5 canvas element uses  JavaScript to draw graphics on a  <head>  web page. </head>  A canvas is a rectangular area, and  <body> you control every pixel of it. <canvas id="myCanvas"  The canvas element has several  width="200"  methods for drawing paths, boxes,  circles, characters, and adding  height="100" </canvas> images. </body>  </html>  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.
    • 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> JavaScript uses the id to find the canvas 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> 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 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> Draw a red rectangle. The fillStyle method makes it red. The fillRect method specifies the shape, position, and size.
    • 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 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 A movie.FLV (Flash) file  could also hold H.264 video, or it could hold  video encoded with vp6  or Sorenson Spark. But it  can't hold MPEG‐4 video.
    • OGV A movie.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 decodes it 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/p ublish‐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/