KEMBAR78
MS TechDays 2011 - HTML 5 All the Awesome Bits | PDF
SINGAPORE

          DEVELOPMENT, ADVANCED

          Michael Kordahi
          Developer Evangelist, Microsoft Australia



HTML5
the
awesome
bits
WHO AM I?

DELICATEGENIUSBLOG.COM




          @DELIC8GENIUS
MAKER OF INTERNETY
   TYPE THINGS
    @DELIC8GENIUS
http://www.w3.org/html/logo
IS   FUTURE
THE WEB
    HAS       BEEN
   WEB
state of “HTML5”




                                                  Candidate
    First Public                                               Recommendatio
                   Working Draft   Last Call   Recommendatio
   Working Draft                                                    n
                                                     n

                                                                   * as of early 2011
the spec…




   http://www.w3.org/TR/html5/
SYNTAX & SEMANTICS   AUDIO/VIDEO




    GRAPHICS            CSS3
SYNTAX &
SEMANTICS
SYNTAX & SEMANTICS

OBLSOLETE ELEMENTS

 <basefont> <big> <center>
 <font> <s> <strike>
 <frame> <frameset>
 <noframes> <applet> <dir>
 <isindex> <tt> <u>
 <acronym>
SYNTAX & SEMANTICS

DOCTYPE




      <!DOCTYPE HTML>
SYNTAX & SEMANTICS

SYNTAX
 No need to self-close tags:
       <img src="nice.jpg" />
       <img src="nice.jpg">

 No need to wrap attributes in quotations:
       <img src="nice.jpg">
       <img src=nice.jpg>

 Case insensitive:
        <IMG SRC=nice.jpg>
        <img src=nice.jpg>
        <iMg SrC=nice.jpg>
SYNTAX & SEMANTICS

CONTENT TYPES
SYNTAX & SEMANTICS
the semantic web
NEW SEMANTIC ELEMENTS




                  Tim Berners- Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee)
SYNTAX & SEMANTICS

MOST POPULAR CLASS NAMES 2009
   copyright
     header
      style2
        title
    content
        text
  msonormal
      style1
      menu
      footer

                0   50000     100000      150000                    200000
                                              http://devfiles.myopera.com/articles/572/idlist-url.htm
SYNTAX & SEMANTICS

MOST POPULAR ID NAMES 2009
  autonumber1
        layer1
        menu
        table1
         main
     container
         logo
       header
      content
        footer

                 0   50000   100000   150000   200000   250000               300000
                                                        http://devfiles.myopera.com/articles/572/idlist-url.htm
SYNTAX & SEMANTICS

NEW SEMANTIC ELEMENTS
SYNTAX & SEMANTICS

NEW SEMANTIC ELEMENTS
SYNTAX &
AUDIO & VIDEO
 SEMANTICS
GRAPHICS

VIDEO/AUDIO

Fully scriptable and eventable

Pay attention to fallback situations (codecs +
feature support)

Codec situation is not awesome
AUDIO & VIDEO
  GRAPHICS
GRAPHICS

CANVAS

HTML5 element that allows for dynamic,
scriptable rendering of 2D shapes and bitmaps

Immediate mode rendering

Simple API: 45 methods, 21 attributes

Remember <canvas> is dumb
GRAPHICS

THE ENTIRE CANVAS API
•   state                                     •   Shadows                               •      text
     –      void save();                           –      attribute   double shadowOffsetX;     –     attribute DOMString font;
     –      void restore();                        –      attribute   double shadowOffsetY;     –     attribute DOMString textAlign;
                                                   –      attribute   double shadowBlur;        –     attribute DOMString textBaseline;
•   transformations
                                                   –      attribute   DOMString shadowColor;    –     void fillText(…);
     –      void   scale(…);
                                              •   Rects                                         –     void strokeText(…);
     –      void   rotate(…);
                                                   –      void clearRect(…);                    –     TextMetrics measureText(…);
     –      void   translate(…);
     –      void   transform(…);                   –      void fillRect(…);             •      pixel manipulation
                                                   –      void strokeRect(…);                   –     ImageData createImageData(…);
     –      void   setTransform(…);
                                              •   path API                                      –     ImageData createImageData(…);
•   compositing
                                                   –      void beginPath();                     –     ImageData getImageData(…);
     –      globalAlpha;
                                                   –      void closePath();                     –     void putImageData(…);
     –      globalCompositeOperation;
                                                   –      void moveTo(…);
•   colors and styles                                                                   •      interface CanvasGradient {
                                                   –      void lineTo(…);
     –      strokeStyle;                           –      void quadraticCurveTo(…);             –     void addColorStop(…); };
     –      fillStyle;                             –      void bezierCurveTo(…);        •      interface CanvasPattern {};
     –      CanvasGradient                         –      void arcTo(…);                •      interface TextMetrics {
            createLinearGradient(…);               –      void rect(…);                         –     readonly attribute double width; };
     –      CanvasGradient                         –      void arc(…);                  •      interface ImageData {
            createRadialGradient(…);               –      void fill();                          –     readonly attribute unsigned long width;
     –      CanvasPattern createPattern(…);        –      void stroke();                        –     readonly attribute unsigned long height;
•   Line caps/joins                                –      void clip();                          –     readonly attribute CanvasPixelArray data; };
     –      attribute   double lineWidth;          –      boolean isPointInPath(…);     •      interface CanvasPixelArray {
     –      attribute   DOMString lineCap;    •   focus management                              –     readonly attribute unsigned long length;
     –      attribute   DOMString lineJoin;        –      boolean drawFocusRing(…);             –     getter octet (…);
     –      attribute   double miterLimit;    •   drawing images                                –     setter void (…); };
                                                   –      void drawImage(…);
GRAPHICS

SVG




  vector images | logos |existing vector formats | complex shapes
GRAPHICS
  CSS
CSS

CSS

CSS3.info

Vendor prefixes
div.coolEffect {
   -ms-box-shadow:
   -moz-box-shadow:
   -webkit-box-shadow:
   -o-box-shadow:}
THIS IS JUST THE BEGINING
SITES TO LIVE BY

RESOURCES



 BEAUTYOFTHEWEB.COM
 HTML5DOCTOR.COM
 W3.ORG/TR/HTML5
 MAKEAWESOMEWEB.COM
THANK YOU

@DELIC8GENIUS




   HTTP    DELICATEGENIUSBLOG.COM

MS TechDays 2011 - HTML 5 All the Awesome Bits

  • 1.
    SINGAPORE DEVELOPMENT, ADVANCED Michael Kordahi Developer Evangelist, Microsoft Australia HTML5 the awesome bits
  • 2.
  • 4.
    MAKER OF INTERNETY TYPE THINGS @DELIC8GENIUS
  • 6.
  • 8.
    IS FUTURE THE WEB HAS BEEN WEB
  • 9.
    state of “HTML5” Candidate First Public Recommendatio Working Draft Last Call Recommendatio Working Draft n n * as of early 2011
  • 10.
    the spec… http://www.w3.org/TR/html5/
  • 11.
    SYNTAX & SEMANTICS AUDIO/VIDEO GRAPHICS CSS3
  • 12.
  • 13.
    SYNTAX & SEMANTICS OBLSOLETEELEMENTS <basefont> <big> <center> <font> <s> <strike> <frame> <frameset> <noframes> <applet> <dir> <isindex> <tt> <u> <acronym>
  • 14.
  • 15.
    SYNTAX & SEMANTICS SYNTAX No need to self-close tags: <img src="nice.jpg" /> <img src="nice.jpg"> No need to wrap attributes in quotations: <img src="nice.jpg"> <img src=nice.jpg> Case insensitive: <IMG SRC=nice.jpg> <img src=nice.jpg> <iMg SrC=nice.jpg>
  • 16.
  • 17.
    SYNTAX & SEMANTICS thesemantic web NEW SEMANTIC ELEMENTS Tim Berners- Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee)
  • 18.
    SYNTAX & SEMANTICS MOSTPOPULAR CLASS NAMES 2009 copyright header style2 title content text msonormal style1 menu footer 0 50000 100000 150000 200000 http://devfiles.myopera.com/articles/572/idlist-url.htm
  • 19.
    SYNTAX & SEMANTICS MOSTPOPULAR ID NAMES 2009 autonumber1 layer1 menu table1 main container logo header content footer 0 50000 100000 150000 200000 250000 300000 http://devfiles.myopera.com/articles/572/idlist-url.htm
  • 20.
    SYNTAX & SEMANTICS NEWSEMANTIC ELEMENTS
  • 21.
    SYNTAX & SEMANTICS NEWSEMANTIC ELEMENTS
  • 23.
    SYNTAX & AUDIO &VIDEO SEMANTICS
  • 24.
    GRAPHICS VIDEO/AUDIO Fully scriptable andeventable Pay attention to fallback situations (codecs + feature support) Codec situation is not awesome
  • 25.
  • 26.
    GRAPHICS CANVAS HTML5 element thatallows for dynamic, scriptable rendering of 2D shapes and bitmaps Immediate mode rendering Simple API: 45 methods, 21 attributes Remember <canvas> is dumb
  • 27.
    GRAPHICS THE ENTIRE CANVASAPI • state • Shadows • text – void save(); – attribute double shadowOffsetX; – attribute DOMString font; – void restore(); – attribute double shadowOffsetY; – attribute DOMString textAlign; – attribute double shadowBlur; – attribute DOMString textBaseline; • transformations – attribute DOMString shadowColor; – void fillText(…); – void scale(…); • Rects – void strokeText(…); – void rotate(…); – void clearRect(…); – TextMetrics measureText(…); – void translate(…); – void transform(…); – void fillRect(…); • pixel manipulation – void strokeRect(…); – ImageData createImageData(…); – void setTransform(…); • path API – ImageData createImageData(…); • compositing – void beginPath(); – ImageData getImageData(…); – globalAlpha; – void closePath(); – void putImageData(…); – globalCompositeOperation; – void moveTo(…); • colors and styles • interface CanvasGradient { – void lineTo(…); – strokeStyle; – void quadraticCurveTo(…); – void addColorStop(…); }; – fillStyle; – void bezierCurveTo(…); • interface CanvasPattern {}; – CanvasGradient – void arcTo(…); • interface TextMetrics { createLinearGradient(…); – void rect(…); – readonly attribute double width; }; – CanvasGradient – void arc(…); • interface ImageData { createRadialGradient(…); – void fill(); – readonly attribute unsigned long width; – CanvasPattern createPattern(…); – void stroke(); – readonly attribute unsigned long height; • Line caps/joins – void clip(); – readonly attribute CanvasPixelArray data; }; – attribute double lineWidth; – boolean isPointInPath(…); • interface CanvasPixelArray { – attribute DOMString lineCap; • focus management – readonly attribute unsigned long length; – attribute DOMString lineJoin; – boolean drawFocusRing(…); – getter octet (…); – attribute double miterLimit; • drawing images – setter void (…); }; – void drawImage(…);
  • 28.
    GRAPHICS SVG vectorimages | logos |existing vector formats | complex shapes
  • 29.
  • 30.
    CSS CSS CSS3.info Vendor prefixes div.coolEffect { -ms-box-shadow: -moz-box-shadow: -webkit-box-shadow: -o-box-shadow:}
  • 31.
    THIS IS JUSTTHE BEGINING
  • 32.
    SITES TO LIVEBY RESOURCES BEAUTYOFTHEWEB.COM HTML5DOCTOR.COM W3.ORG/TR/HTML5 MAKEAWESOMEWEB.COM
  • 33.
    THANK YOU @DELIC8GENIUS HTTP DELICATEGENIUSBLOG.COM