KEMBAR78
DV10 HTML5: The Future of Web Development | PPTX
The HTML 5 doctype is way
                                    <!DOCTYPE html>
easier than any other doctype.
Ever!                               <html>
                                    vs.
                                    <html xmlns="http://www.w3.org/1999/xhtml">
Just type the parts you remember,
and you’ll probably be right.
Provides new semantic vocabulary
for parts of a page previously
served by DIVs with ID and Class
attributes.
Allows for associating captions
with embedded content, including
videos, audio, pullquotes, or
images.
<video src="test.ogg" autoplay="autoplay"
                                   controls="controls">
Allows for associating captions    Your browser does not support the video
                                   element. This could also include object and
with embedded content, including   embed codes for legacy browsers.
videos, audio, or images.          </video>
<time datetime=“17:00”>starting at 5 pm</span>
Xfn
hcard
<span data-conference-time=“1700”>
starting at 5 pm</span>

<li data-original-id=“” =“1700”>5 pm</li>
METER    Contained content is a measurement, like length.
PROGRESS Contains current process toward a goal, like a percentage.
COMMAND Represents something a command a user may execute.
DATAGRID Represents data. Non-tabular or otherwise.
OUTPUT   Displays the output of a program or process.
RUBY     Allows input of rubi/ruby annotations for Asian languages.
DATETIME         Allows input of a date and a time.
DATETIME-LOCAL   Allows input of a date and a time, in local time.
NUMBER           Allows input of a number.
RANGE            Input is verified to be within a range.
EMAIL            Confirms the input to be a valid email.
URL              Ensures input is a valid URL.
COLOR            Provides a mechanism for the user to input an RGB color.
Allows objects (images and links,
by default) to be dragged and
then
dropped onto a target.
The target is enabled by canceling
the ‘dragover’ or ‘dragenter’ (for
IE) events for
the drop target. Then listen for a
‘drop’ event which contains a
‘dataTransfer’ object with info.
The sessionStorage DOM attribute
stores session data for a single
window, like cookies on crack.
                                    <input
The localStorage DOM attribute      type="checkbox"
allows each site to store           onchange="
                                    localStorage.insurance=checked
megabytes of data across sessions   "
to improve performance.             />


Both methods store only strings.
<canvas id="canvas" width="150"
                                   height="150">
                                          fallback content
                                   </canvas>
Provides an API for drawing
directly in the browser window,    function draw() {
using instructions that define             var canvas =
                                   document.getElementById("canvas");
vector-based shapes and lines.             if (canvas.getContext) {
                                           var ctx = canvas.getContext("2d");
This allows SVG-like graphics to           ctx.fillStyle = "rgb(200,0,0)";
be created on the fly in the               ctx.fillRect (10, 10, 55, 50);
                                           ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
browser, with fallback content             Ctx.fillRect (30, 30, 55, 50);
(like Flash?) provided to legacy           }
browsers.                          }
Adjusts the opacity of the selected
element’s presentation on screen.

Takes values between 0.0 (fully
transparent) and 1.0 (fully
opaque)
Like RGB color definitions, but
allows a fourth field, defining the   div { color: rgb(0,255,0); }
alpha value of the color being
applied.
Like opacity, the alpha value is
between 0.0 (fully transparent)
and 1.0 (fully opaque).               div { color: rgba(0,255,0,0.5); }
Border-radius
Box-shadow
Rotates the selected element at
the defined angle, defined in
degrees.

The rotation doesn’t affect layout,   transform: rotate(30deg);
and elements that are
transformed are treated similarly
to position:relative.
Scales the element in question
based on the specified unit-less
numbers given for the X and Y        transform: scale(0.5,2.0);

axes. If only one number is
given, it is applied to both axes.
PERSPECTIVE   The distance, in pixels, of the z=0 plane from the viewer.
MATRIX3D      Allows creation of a 3d transformation matrix.
ROTATE3D      Rotate the matched element in three dimensions.
SCALE3D       Performs a three-dimensional scale operation
TRANSLATE3D   Allows the matched element to be moved along three axes.
HTML 5 Doctor     http://html5doctor.com/
HTML 5 Spec       http://dev.w3.org/html5/spec/Overview.html
ALA Article       http://www.alistapart.com/articles/previewofhtml5
IE9 Experience    http://beautyoftheweb.com/
Polyfills         https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-browser-Polyfills
Rate this session by sending an SMS to:
4123 (Etisalat and Du subscribers)
+971 55 142 5789 (Other subscribers)

                Rating   Message (case insensitive)
             Excellent   poll dv105
                 Good    poll dv104
            Acceptable   poll dv103
                  Poor   poll dv102
             Very poor   poll dv101




                                                      44

DV10 HTML5: The Future of Web Development

  • 6.
    The HTML 5doctype is way <!DOCTYPE html> easier than any other doctype. Ever! <html> vs. <html xmlns="http://www.w3.org/1999/xhtml"> Just type the parts you remember, and you’ll probably be right.
  • 9.
    Provides new semanticvocabulary for parts of a page previously served by DIVs with ID and Class attributes.
  • 10.
    Allows for associatingcaptions with embedded content, including videos, audio, pullquotes, or images.
  • 11.
    <video src="test.ogg" autoplay="autoplay" controls="controls"> Allows for associating captions Your browser does not support the video element. This could also include object and with embedded content, including embed codes for legacy browsers. videos, audio, or images. </video>
  • 12.
  • 13.
    <span data-conference-time=“1700”> starting at5 pm</span> <li data-original-id=“” =“1700”>5 pm</li>
  • 14.
    METER Contained content is a measurement, like length. PROGRESS Contains current process toward a goal, like a percentage. COMMAND Represents something a command a user may execute. DATAGRID Represents data. Non-tabular or otherwise. OUTPUT Displays the output of a program or process. RUBY Allows input of rubi/ruby annotations for Asian languages.
  • 16.
    DATETIME Allows input of a date and a time. DATETIME-LOCAL Allows input of a date and a time, in local time. NUMBER Allows input of a number. RANGE Input is verified to be within a range. EMAIL Confirms the input to be a valid email. URL Ensures input is a valid URL. COLOR Provides a mechanism for the user to input an RGB color.
  • 17.
    Allows objects (imagesand links, by default) to be dragged and then dropped onto a target. The target is enabled by canceling the ‘dragover’ or ‘dragenter’ (for IE) events for the drop target. Then listen for a ‘drop’ event which contains a ‘dataTransfer’ object with info.
  • 18.
    The sessionStorage DOMattribute stores session data for a single window, like cookies on crack. <input The localStorage DOM attribute type="checkbox" allows each site to store onchange=" localStorage.insurance=checked megabytes of data across sessions " to improve performance. /> Both methods store only strings.
  • 19.
    <canvas id="canvas" width="150" height="150"> fallback content </canvas> Provides an API for drawing directly in the browser window, function draw() { using instructions that define var canvas = document.getElementById("canvas"); vector-based shapes and lines. if (canvas.getContext) { var ctx = canvas.getContext("2d"); This allows SVG-like graphics to ctx.fillStyle = "rgb(200,0,0)"; be created on the fly in the ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; browser, with fallback content Ctx.fillRect (30, 30, 55, 50); (like Flash?) provided to legacy } browsers. }
  • 22.
    Adjusts the opacityof the selected element’s presentation on screen. Takes values between 0.0 (fully transparent) and 1.0 (fully opaque)
  • 23.
    Like RGB colordefinitions, but allows a fourth field, defining the div { color: rgb(0,255,0); } alpha value of the color being applied. Like opacity, the alpha value is between 0.0 (fully transparent) and 1.0 (fully opaque). div { color: rgba(0,255,0,0.5); }
  • 24.
  • 26.
    Rotates the selectedelement at the defined angle, defined in degrees. The rotation doesn’t affect layout, transform: rotate(30deg); and elements that are transformed are treated similarly to position:relative.
  • 27.
    Scales the elementin question based on the specified unit-less numbers given for the X and Y transform: scale(0.5,2.0); axes. If only one number is given, it is applied to both axes.
  • 28.
    PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer. MATRIX3D Allows creation of a 3d transformation matrix. ROTATE3D Rotate the matched element in three dimensions. SCALE3D Performs a three-dimensional scale operation TRANSLATE3D Allows the matched element to be moved along three axes.
  • 31.
    HTML 5 Doctor http://html5doctor.com/ HTML 5 Spec http://dev.w3.org/html5/spec/Overview.html ALA Article http://www.alistapart.com/articles/previewofhtml5 IE9 Experience http://beautyoftheweb.com/ Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5- Cross-browser-Polyfills
  • 33.
    Rate this sessionby sending an SMS to: 4123 (Etisalat and Du subscribers) +971 55 142 5789 (Other subscribers) Rating Message (case insensitive) Excellent poll dv105 Good poll dv104 Acceptable poll dv103 Poor poll dv102 Very poor poll dv101 44

Editor's Notes

  • #9 http://html5demos.com/drag
  • #20 http://robertnyman.com/html5/forms/input-types.htmlhttp://ie.microsoft.com/testdrive/HTML5/Forms/default.html
  • #22 http://people.w3.org/mike/localstorage.html
  • #33 http://www.cssportal.com/css3-rounded-corner/
  • #40 http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm