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

Html5 intro



An overview of HTML5

An overview of HTML5



Total Views
Views on SlideShare
Embed Views



3 Embeds 375

http://ynonperek.com 346
http://www.ynonperek.com 28
http://ronenkook.co.il 1



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.

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

    Html5 intro Html5 intro Presentation Transcript

    • HTML5 Introduction Ynon PerekWednesday, January 30, 13
    • Agenda HTML History HTML5 Rules New Features Browser Support HTML5 Page StructureWednesday, January 30, 13
    • In The Beginning While working at CERN in the 90s, Berners-Lee develops WWW 1991 The first web site (CERN’s info page) 1994 Berners-Lee founded the W3C http://www.flickr.com/photos/tanaka/3212373419/Wednesday, January 30, 13
    • 1991 HTML1 Described in a document called “HTML Tags” Included 20 elements Influenced by SGMLWednesday, January 30, 13
    • 1995 HTML2 One year after Netscape was founded Forms Tables Image Maps http://www.flickr.com/photos/kalleboo/2214787531/Wednesday, January 30, 13
    • 1997 HTML3.2 Standardizing browser wars Dropping Netscape’s blink and MS marquee On the right: Blue - IE Light green - Netscape http://en.wikipedia.org/wiki/File:Browser_Wars.svgWednesday, January 30, 13
    • 1999 HTML4 Browser war was over. MS won Many new elements, including iframe, label, legend, object Deprecated: applet, center, font, menu, strike http://www.flickr.com/photos/daniello/422213306/Wednesday, January 30, 13
    • After The Browser Wars W3C starts to work on XHTML, MathML, SVG and others XML based technologies HTML is considered “finished”Wednesday, January 30, 13
    • HTML4 Suitable for web sites, not web applicationsWednesday, January 30, 13
    • 2004 WHATWG The Web Hypetertext Application Technology Working Group came to life in 2004 to bring life into HTML It was founded by Apple, Mozilla and Opera Published a proposal for Web Applications 1.0 spec, which has later evolved into HTML5Wednesday, January 30, 13
    • 2009 HTML5 No more XHTML Many new elements Web Application OrientedWednesday, January 30, 13
    • State of HTML5 Still In Draft Candidate Recommendations stage during 2012 W3C Recommendation deadline: 2022 However, many parts of the recommendations are fully functional todayWednesday, January 30, 13
    • Web Tech History 1991 HTML 1999 HTML4 1995 HTML2 2000 XHTML1 1996 CSS1 + 2002 Tableless Web JavaScript Design 1997 HTML3.2 2005 Ajax 1998 CSS2 2009 HTML5Wednesday, January 30, 13
    • HTML5 VisionWednesday, January 30, 13
    • Paving The Cow Path The WHATWG took the time to understand what everyone does, analyzed good practices and standardized them This leads to evolution and not revolutionWednesday, January 30, 13
    • Utility Over Purity HTML5 is overwhelmingly practical, allowing many code that used to be invalid and making developers lives easier Less code, less headaches, more fun.Wednesday, January 30, 13
    • Content & Presentation HTML5 deprecates many old presentational elements in favor of CSS. Enhancements in CSS3 selectors enable better separation between content and presentationWednesday, January 30, 13
    • Plugin Free Paradigm Provide native APIs for everything that used to required a proprietary plugin Flash is no longer mandatoryWednesday, January 30, 13
    • HTML5 Vision Paving The Cow Path Utility over Purity Separation of Content and Presentation Plugin FreeWednesday, January 30, 13
    • Q&A http://www.flickr.com/photos/92163630@N00/95509221/Wednesday, January 30, 13
    • The RulesWednesday, January 30, 13
    • Doctype Remove old clutter from the doctype declaration For an HTML5 page, use: <!DOCTYPE html> MIME Type: text/htmlWednesday, January 30, 13
    • Character Encoding Remove old clutter from encoding definitions Use: <meta charset=”UTF-8”> Note no need to close meta tags Can also use the old syntaxWednesday, January 30, 13
    • Tag Fun No need to close void elements both <br /> and <br> are valid HTML Validator: http://validator.w3.org/Wednesday, January 30, 13
    • HTML5 New Features New Syntactic Elements New Semantic Elements New APIsWednesday, January 30, 13
    • HTML5 Semantics WHATWG analyzed and learned the uses of <div> elements in many web sites They have found a few common usages HTML5 includes specialized elements for these common usages Can still use a <div>Wednesday, January 30, 13
    • Semantic Elements header: header content footer: footer content section: a section of articles article: articles are arranged inside sections aside: related content nav: navigational elementWednesday, January 30, 13
    • New APIs Web Storage Geolocation Web SQL Device Orientation Application Cache Forms Web Workers Audio & Video Web Sockets Canvas Desktop Notifications Web GL Drag & Drop History API File System API And More...Wednesday, January 30, 13
    • HTML Polyfills Replacement library for older browsers Make a smooth switch to HTML5 http://www.flickr.com/photos/tuba/2424237036/Wednesday, January 30, 13
    • HTML5 Tools HTML5 Boilerplate. A base HTML5 template with backward compatibility and feature detection Modernizr. A feature detection js library Polyfills: https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-browser-PolyfillsWednesday, January 30, 13
    • Demo: HTML Boilerplate Page Structure Best practices Feature DetectionWednesday, January 30, 13
    • HTML5 IDEs WebStorm Komodo Edit Eclipse / Visual Studio gVim Aptana StudioWednesday, January 30, 13
    • HTML5 Lab Build a home page for your resume in HTML5 with no styling Describe your job history, hobbies and education Use the boilerplate and semantic elements Bonus: Add some CSS StylingWednesday, January 30, 13