• Save
Everything you need to know about HTML5 in 15 min
Upcoming SlideShare
Loading in...5

Everything you need to know about HTML5 in 15 min



In this small presentation you will find the most relevant information about HTML5, it was part of the SG Conference and Expo 2012 in Mexico City

In this small presentation you will find the most relevant information about HTML5, it was part of the SG Conference and Expo 2012 in Mexico City



Total Views
Views on SlideShare
Embed Views



6 Embeds 89

https://twitter.com 58
http://sg.com.mx 23
http://us-w1.rockmelt.com 3
https://si0.twimg.com 2
http://archive.sg.com.mx 2
http://www.twylah.com 1



Upload Details

Uploaded via as Apple Keynote

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.


13 of 3 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Everything you need to know about HTML5 in 15 min Everything you need to know about HTML5 in 15 min Presentation Transcript

  • Everything you need to know about HTML5 in 10 min @edgarparada
  • 5 Things you should know about HTML51. It’s not one big thing2. You don’t need to throw anything away3. It’s easy to get started4. It already works5. It’s here to stay
  • Timeline of HTML from 1997 to 2004 First draft ofW3C published XHTML XHTML Extended HTML 4.0 Modularization forms 1997 1999 2001 1998 2000 2003 W3C XHTML 1.0 HTML Working reformulated published as a Group published HTML into XML W3C the first version of (XHTML 1.0) recomendation XForms 1.0
  • Timeline of HTML from 2004 and beyond... Workshop on W3C adopts HTML5 specs to Web Apps and WHATWG’s reach candidateCompound Docs work (HTML5) status (projected) 2004 2007 2012 2005 2009 2022 Web Applications Last call issued for HTML5 to reach 1.0 Working Draft the HTML5 recommendation published Working Draft status (projected) Public Interest in HTML5 increases
  • We are on 2012, so is HTML5 ready yet?
  • WHAT Working Group?The Web Hypertext Applications TechnologyWorking Group is a loose, unofficial, and opencollaboration of Web browser manufacturers andinterested parties.
  • VideoHTML5 defines a new element called <video> for embedding video in your web pages.Embedding video used to be impossible without third-party plugins such as AppleQuickTime or Adobe Flash.The <video> element is designed to be usable without any detection scripts. You canspecify multiple video files, and browsers that support HTML5 video will choose one basedon what video formats they support.
  • Flash & HTML5 FallbackFLV fallback is used to provide a regular FLV video for those Flash clients that do notsupport support HTML5 video. MP4 support was added to Flash in version 9.115 andlower versions can only play FLV files.You should note that the FLV format is not a bad format. It provides a small file sizewith relatively good quality. the FLV format can be optimized with a technology called "on2"
  • Local StorageHTML5 storage provides a way forweb sites to store information on yourcomputer and retrieve it later.The concept is similar to cookies, but it’sdesigned for larger quantities ofinformation. Cookies are limited in size,and your browser sends them back tothe web server every time it requests anew page (which takes extra time andprecious bandwidth).HTML5 storage stays on yourcomputer, and web sites can access itwith JavaScript after the page is loaded.
  • Web WorkersWeb Workers provide a standard way for browsers to run JavaScript in the background.With web workers, you can spawn multiple “threads” that all run at the same time, moreor less. (Think of how your computer can run multiple applications at the same time, andyou’re most of the way there.)These “background threads” can do complex mathematical calculations, make networkrequests, or access local storage while the main web page responds to the user scrolling,clicking, or typing.
  • GeolocationGeolocation is the art of figuring outwhere you are in the world and(optionally) sharing that informationwith people you trust.There is more than one way to figureout where you are — your IP address,your wireless network connection, which celltower your phone is talking to, or dedicatedGPS hardware that calculates latitude andlongitude from information sent bysatellites in the sky.
  • Modernizr, an HTML5 detection libraryModernizr is an open source, MIT-licensed JavaScript library that detectssupport for many HTML5 & CSS3 features. At the time of writing, the latestversion is 1.5.You should always use the latest version. To use it, include thefollowing <script> element at the top of your page.<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Dive Into HTML5</title> <script src="modernizr.min.js"></script></head><body> ...</body></html>
  • Input TypesYou know all about web forms, right? Make a<form>, add a few <input type="text">elements and maybe an <inputtype="password">, and finish it off with an<input type="submit"> button.You don’t know the half of it. HTML5 definesover a dozen new input types that you can usein your forms.search, number, range, color, tel, url, email, date,month, week, time datetime, datetime-local
  • New Semantic Elements
  • CanvasHTML5 defines the <canvas> elementas “a resolution-dependent bitmap canvas thatcan be used for rendering graphs, gamegraphics, or other visual images on the fly.”A canvas is a rectangle in your page whereyou can use JavaScript to draw anythingyou want. HTML5 defines a set offunctions (“the canvas API”) for drawingshapes, defining paths, creating gradients,and applying transformations.
  • Canvas what’s good for?Analysis, planning & prototypesProduct strategy, user-centered workflowdesign, concept demos and UI prototypesBrand, visual & infographicsBrand and identity, visual and icon systemdesign, data visualization and infographicst:Website and application UIdesignWebsite and application informationarchitecture, system modeling, anddetailed user interface design
  • CSS3 TodayCSS3 is actually a series of modules that aredesigned to be implemented separately andindependently from each other.This segmented approach has enabled portions ofthe spec to move faster (or slower) than others,and has encouraged browser vendors toimplement the pieces that are further along beforethe entirety of CSS3 is considered finished.The benefit here for us web designers is that alongwith experimentation and faster release cyclecomes the ability to use many CSS3properties before waiting until they becomeCandidate Recommendations.
  • Extra tips...
  • Everything you need to know about HTML5 in 15 min @edgarparada