mos.bayomi@gmail.comHTML 5The New Standard For HTML
mos.bayomi@gmail.com
mos.bayomi@gmail.comHTML[New] TagsJavaScriptAPIsHTML5
mos.bayomi@gmail.com
mos.bayomi@gmail.com
mos.bayomi@gmail.com
mos.bayomi@gmail.com
mos.bayomi@gmail.com<!DOCTYPE><!DOCTYPE><!DOCTYPE><!DOCTYPE>SGML(StandardGeneralized Markup Language)
mos.bayomi@gmail.com<!DOCTYPE>(cont’d)
mos.bayomi@gmail.com
mos.bayomi@gmail.com<article> <aside> <bdi> <command> <details> <summary><figure> <figcaption> <footer> <header> <hgroup><...
mos.bayomi@gmail.com.
mos.bayomi@gmail.com<div>
mos.bayomi@gmail.com<div>
mos.bayomi@gmail.com<div id= "header"><ul id="nav"> </ul></div><div id="content"><div id="blogpost"><h1>This is my Blogpos...
mos.bayomi@gmail.com<header><nav></nav></header><div id="content"><article id="blogpost"><section><h1>This is my Blogpost<...
mos.bayomi@gmail.com<div>ID
mos.bayomi@gmail.com
mos.bayomi@gmail.comwindownavigator
mos.bayomi@gmail.com<script src="modernizr.min.js"></script>modernizr_init()
mos.bayomi@gmail.comModernizr.video truefalseif (Modernizr.video) {// lets play some video!}else{// no native video suppor...
mos.bayomi@gmail.com<header><footer><nav><nav>
mos.bayomi@gmail.comHEADER:<header><h1>Heading Text</h1><p> Text or images can be included here</p><p> Logos are frequentl...
mos.bayomi@gmail.comFOOTER:The <footer> element contains information about a page, article, or section, such asthe author ...
mos.bayomi@gmail.com<menu><nav><article><section><section>
mos.bayomi@gmail.com<menu><button type="button" >Clio</button><button type="button" >Thalia</button><button type="button">...
mos.bayomi@gmail.comThe <section> tag—and the <article> tag, as well—can contain headers, footers, orany other components ...
mos.bayomi@gmail.com<aside><figure><figure> <figcaption><figure><figure><img src="koala.jpg" width="304" height="228"><fig...
mos.bayomi@gmail.com<aside>Think of this tag as holding supplementary content that is not part of the flow of thearticle i...
mos.bayomi@gmail.comA Form of Madness
mos.bayomi@gmail.com<form>
mos.bayomi@gmail.com• Input type= datetime global date-and-time input control• input type = datetime-local local date-and-...
mos.bayomi@gmail.comDojo jQuery UI YUI.date, month, week, time, date + time, anddate+time–timezone.• See Demos
mos.bayomi@gmail.comHow to solve the problem for browsers that doesn’t support new input typesEx<form><input type="date" i...
mos.bayomi@gmail.comInput type Browserstype="date"type="month"type="week"type="time"type="datetime"type="datetime-local"
mos.bayomi@gmail.com<input type="number" min="0" max="10" step="2" value="6"/> type min max step value
mos.bayomi@gmail.com• Input.stepUp(n)• input.stepDown(n)• input.valueAsNumberinput.value
mos.bayomi@gmail.comif (!Modernizr.inputtypes.number) {// no native support for type="number" fields// maybe try Dojo or s...
mos.bayomi@gmail.com<input type="range" min="0" max="10" step="2" value="6"/>
mos.bayomi@gmail.comThe latest versions of Safari, Chrome, and Opera all do this.(Sadly, the iPhone renders it as a simple...
mos.bayomi@gmail.com• <input type="email">setCustomValidity().• object.setCustomValidity("WRONG!!");
mos.bayomi@gmail.comThe email INPUT tag gives you a way to request email addresses in your web form.In most web browsers, ...
mos.bayomi@gmail.com• <input type="url">
mos.bayomi@gmail.com• <input type="search">• <input type="tel">
mos.bayomi@gmail.com• <input type="color">
mos.bayomi@gmail.comNew form attributes and functions
mos.bayomi@gmail.complaceholdertext,search, url, tel, email password<input placeholder="First and last name" required/>
mos.bayomi@gmail.comautocomplete<input type="text" name="creditcard" autocomplete="off">
mos.bayomi@gmail.comonoffunspecified
mos.bayomi@gmail.comautofocusautofocus<input type="search" name="criteria" autofocus>boolean
mos.bayomi@gmail.comlist datalist<datalist id="contactList"><option value="x@example.com" label="Racer X"><option value="p...
mos.bayomi@gmail.comTo use this combination:1. Create a datalistelement in your document with its id set to a unique value...
mos.bayomi@gmail.comrequired<input type="text" required>
mos.bayomi@gmail.comThe valueMissing ConstraintPurpose: Ensure that some value is set on this form controlUsage: Set the r...
mos.bayomi@gmail.com<input type="text" pattern="[0-9]{16}">
mos.bayomi@gmail.commos.bayomi@gmail.com
mos.bayomi@gmail.com• <canvas><canvas>
mos.bayomi@gmail.commos.bayomi@gmail.comWhat Is a Canvas?When you use a canvas element in your web page, it creates a rect...
mos.bayomi@gmail.com<canvas>
mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100"></canvas>
mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100">Your Browser Doesn’t Support Canvas</canvas>
mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
mos.bayomi@gmail.comif (canvas.getContext){...}else{ // put code for browsers that dont support canvas here}ORif (Moderniz...
mos.bayomi@gmail.com<head><!--[if IE]><script src="excanvas.js"></script><![endif]--></head>
mos.bayomi@gmail.com• <script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");...
mos.bayomi@gmail.commos.bayomi@gmail.comTo programmatically use a canvas, you have to first get itscontext.You can then pe...
mos.bayomi@gmail.comgetContext("2d")
mos.bayomi@gmail.comfillStylefillRect(x,y,width,height)strokeStyle fillStyle —• strokeRect(x,y,width,height)
mos.bayomi@gmail.commos.bayomi@gmail.comEXAMPLE:<script type="text/javascript">function drawSquare () {var canvas = docume...
mos.bayomi@gmail.commos.bayomi@gmail.comThe first thing this script does is find the element with theid draw-square:var ca...
mos.bayomi@gmail.commos.bayomi@gmail.comThe context is the rendering context that is used to manipulatecontent that is dis...
mos.bayomi@gmail.com• fillRect(x,y,width,height):strokeRect(x,y,width,height):clearRect(x,y,width,height):
mos.bayomi@gmail.comfillRect()
mos.bayomi@gmail.commos.bayomi@gmail.comLike other 2d platforms, it uses a flat Cartesian coordinatesystem with the origin...
mos.bayomi@gmail.com• moveTo(x,y)• lineTo(x,y)stroke().• closePath():• lineWidth = 4:• context.lineJoin=round‘ :
mos.bayomi@gmail.com• quadraticCurveTo(x1,y1, x2,y2):
mos.bayomi@gmail.comX2,Y2X1,Y1
mos.bayomi@gmail.com• drawImage(image, dx, dy)(dx, dy)(0,0)• drawImage(image, dx, dy, dw, dh)dw dh(dx, dy).
mos.bayomi@gmail.com• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)(sx, sy, sw, sh),(dw, dh), (dx,dy).<img> Image
mos.bayomi@gmail.com• createLinearGradient(x0,y0,x1,y1)(x0,y0) (x1,y1).
mos.bayomi@gmail.com• createRadialGradient(x0,y0,r0,x1,y1,r1)(x0,y0) r0.(x1,y1) r1.
mos.bayomi@gmail.comaddColorStop
mos.bayomi@gmail.com<canvas id="d" width="300" height="225"></canvas><script>var d_canvas = document.getElementById("d");v...
mos.bayomi@gmail.comvar bg= new Image();bg= "gravel.jpg";bg.onload = function (){.....context.strokeStyle=context.createPa...
mos.bayomi@gmail.commos.bayomi@gmail.comAs you can see, we are still calling stroke() for our path.However, this time we h...
mos.bayomi@gmail.com
mos.bayomi@gmail.comscale(x,y)
mos.bayomi@gmail.comcontext.rotate(angle)context.save();// rotation angle is specified in radianscontext.rotate(1.57);cont...
mos.bayomi@gmail.com• fillText (text, x, y, maxwidth)• strokeText (text, x, y, maxwidth)
mos.bayomi@gmail.commos.bayomi@gmail.comBoth functions take the text as well as the location at which itshould be drawn.Op...
mos.bayomi@gmail.com• font• textAligntext-alignstart, end, left, right, center.• textBaselinetop, hanging, middle, alphabe...
mos.bayomi@gmail.com• textBaseline
mos.bayomi@gmail.commos.bayomi@gmail.comThe top of the em square is roughly at the top of the glyphs in afont, the hanging...
mos.bayomi@gmail.comcontext• shadowColor• shadowOffsetX:• shadowOffsetY:• shadowBlur
mos.bayomi@gmail.comrequestAnimFrame
mos.bayomi@gmail.comwindow.requestAnimFrame = (function(callback) {return window.requestAnimationFrame ||window.webkitRequ...
mos.bayomi@gmail.comfunction animate() {// get canvas and its context.....// clear canvas contextcontext.clearRect(0, 0, c...
mos.bayomi@gmail.comSVGVector-based graphics for the Web
mos.bayomi@gmail.com
mos.bayomi@gmail.com<svg viewBox="0 0 320 240“ style=“border: 1px solid #999;width: 320px; height:240px;"></svg>
mos.bayomi@gmail.com<svg id="mysvg" viewBox="0 0 320 240" style="border: 1pxsolid #999; width: 320px; height:240px;"><rect...
mos.bayomi@gmail.com<polygon points="265,50 315,150 215,150"style="stroke: rgb(51,51,51); fill: rgb(204,204,204);stroke-wi...
mos.bayomi@gmail.com<polyline>
mos.bayomi@gmail.com<rect x="50" y="50" width="100" height="100"fill="rgb(255,0,0)"></rect><line x1="50" y1="50" x2="150" ...
mos.bayomi@gmail.comrect {fill: rgb(255,0,0);}line {stroke: rgb(0,127,127);stroke-width: 5;}
mos.bayomi@gmail.com<image x="10" y="10"width="236" height="260"xlink:href="example.png"></image>xlink:href
mos.bayomi@gmail.com<text x="10" y="20">Hi everybody , everything is OK!</text>
mos.bayomi@gmail.com
mos.bayomi@gmail.comNo Plugin?? -- Yes -- no plugin
mos.bayomi@gmail.com<audio>– The <audio> tag identifies sound content, such as music or any other audiostreams.– The <audi...
mos.bayomi@gmail.com<source><source>– The <video> and <audio> tags can contain the <source> tag, whichdefines multimedia r...
mos.bayomi@gmail.comBrowser MP3 Wav OggInternet Explorer 9 YES NO NOFirefox 4.0 NO YES YESGoogle Chrome 6 YES YES YESApple...
mos.bayomi@gmail.com
mos.bayomi@gmail.com1. load():2. play():3. pause():4. canPlayType(type):
mos.bayomi@gmail.com1. Duration :2. Paused:3. ended4. startTime5. error6. currentSrc :
mos.bayomi@gmail.com1. autoplay :2. loop3. currentTime4. controls5. volume6. muted
mos.bayomi@gmail.comProblems, Problems, and Solutions
mos.bayomi@gmail.com
mos.bayomi@gmail.com<embed><embed><embed src="intro.swf" height="200" width="200">• Problems:
mos.bayomi@gmail.com<object><object><object data="intro.swf" height="200" width="200">• Problems:
mos.bayomi@gmail.com<video><video>– allows you to broadcast video clips or streaming visual media.– It has all the attribu...
mos.bayomi@gmail.com<video><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="...
mos.bayomi@gmail.com1. poster :2. width, height3. videoWidth, videoHeight
mos.bayomi@gmail.comYou Are Here (And So Is Everybody Else)
mos.bayomi@gmail.com
mos.bayomi@gmail.com
mos.bayomi@gmail.comnavigatornavigator.geolocationfunction get_location() {navigator.geolocation.getCurrentPosition(show_m...
mos.bayomi@gmail.comgetCurrentPosition()
mos.bayomi@gmail.comshow_map()getCurrentPosition()getCurrentPosition(callback function)
mos.bayomi@gmail.comfunction show_map(position) {var latitude = position.coords.latitude;var longitude = position.coords.l...
mos.bayomi@gmail.com(Since this is all happening asynchronously, you can’t reallyknow when that will happen in advance.It ...
mos.bayomi@gmail.composition.coordsposition.coordsProperty Type Notescoords.latitude double Decimal degreescoords.longitud...
mos.bayomi@gmail.comOnly three of the properties are guaranteed to be there (coords.latitude,coords.longitude, and coords....
mos.bayomi@gmail.comgetCurrentPosition()navigator.geolocation.getCurrentPosition(show_map, handle_error).PositionErrorcode...
mos.bayomi@gmail.comcode
mos.bayomi@gmail.comfunction handle_error(err) {if (err.code== 1) {// user said no!}}
mos.bayomi@gmail.comgetCurrentPosition()PositionOptionsPositionOptions• enableHighAccuracy• timeout• maximumAge
mos.bayomi@gmail.comEx:navigator.geolocation.getCurrentPosition(success_callback, error_callback, {maximumAge: 75000});Wha...
mos.bayomi@gmail.comwatchPosition()getCurrentPosition().
mos.bayomi@gmail.comwatchPosition()clearWatch(t)setInterval() clearInterval()
mos.bayomi@gmail.comgeolocation<scriptsrc=" http://maps.google.com/maps/api/js?sensor=false"></script>var map = newgoogle....
mos.bayomi@gmail.comvar myOptions = {zoom: 8, //the zoom level 0 to 21center: new google.maps.LatLng(latitude, longitude),...
mos.bayomi@gmail.com
mos.bayomi@gmail.com
mos.bayomi@gmail.com– sessionStorage localStoragewindow
mos.bayomi@gmail.comwindow.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);myFirstValue myFirstKey
mos.bayomi@gmail.comgetItemalert(window.sessionStorage.getItem(‘myFirstKey’));window.sessionStorage.myFirstKey = ‘myFirstV...
mos.bayomi@gmail.comlocalStorage
mos.bayomi@gmail.comsessionStorage localStorageValues persist only as long asthe window or tab in whichthey were storedVal...
mos.bayomi@gmail.comlengthkey(index)• getItem(key)null
mos.bayomi@gmail.com• setItem(key, value)QUOTA_EXCEEDED_ERR
mos.bayomi@gmail.com• removeItem(key) :
mos.bayomi@gmail.comThreads in JS
mos.bayomi@gmail.com
mos.bayomi@gmail.comworker = new Worker("myWorker.js");
mos.bayomi@gmail.compostMessagepostMessage().worker.postMessage("a message from parent page");
mos.bayomi@gmail.compostMessage()onmessageevent.dataonmessage = function myFunction(event){event.data;……postMessage(a mess...
mos.bayomi@gmail.comErrorEventWorker.onerror = function(e){…………}
mos.bayomi@gmail.com
mos.bayomi@gmail.com
mos.bayomi@gmail.com
Upcoming SlideShare
Loading in …5
×

Learn html5

1,153 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,153
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
95
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Learn html5

  1. 1. mos.bayomi@gmail.comHTML 5The New Standard For HTML
  2. 2. mos.bayomi@gmail.com
  3. 3. mos.bayomi@gmail.comHTML[New] TagsJavaScriptAPIsHTML5
  4. 4. mos.bayomi@gmail.com
  5. 5. mos.bayomi@gmail.com
  6. 6. mos.bayomi@gmail.com
  7. 7. mos.bayomi@gmail.com
  8. 8. mos.bayomi@gmail.com<!DOCTYPE><!DOCTYPE><!DOCTYPE><!DOCTYPE>SGML(StandardGeneralized Markup Language)
  9. 9. mos.bayomi@gmail.com<!DOCTYPE>(cont’d)
  10. 10. mos.bayomi@gmail.com
  11. 11. mos.bayomi@gmail.com<article> <aside> <bdi> <command> <details> <summary><figure> <figcaption> <footer> <header> <hgroup><mark> <meter> <nav> <progress> <ruby> <rt> <rp><section> <time> <wbr><audio> <video> <source> <embed> <track><datalist> <keygen> <output>
  12. 12. mos.bayomi@gmail.com.
  13. 13. mos.bayomi@gmail.com<div>
  14. 14. mos.bayomi@gmail.com<div>
  15. 15. mos.bayomi@gmail.com<div id= "header"><ul id="nav"> </ul></div><div id="content"><div id="blogpost"><h1>This is my Blogpost</h1><p>This is my first paragraph.</p></div></div><div id="sidebar" ><div id="blogroll"><p>My blogroll Content.</p></div></div><div id="footer"><p>My Footer Content.</p></div>
  16. 16. mos.bayomi@gmail.com<header><nav></nav></header><div id="content"><article id="blogpost"><section><h1>This is my Blogpost</h1><p>This is my first paragraph.</p></section></article></div><div id="sidebar"><aside id="blogroll"><p>My blogroll Content.</p></aside></div><footer><p>My Footer Content.</p></footer>
  17. 17. mos.bayomi@gmail.com<div>ID
  18. 18. mos.bayomi@gmail.com
  19. 19. mos.bayomi@gmail.comwindownavigator
  20. 20. mos.bayomi@gmail.com<script src="modernizr.min.js"></script>modernizr_init()
  21. 21. mos.bayomi@gmail.comModernizr.video truefalseif (Modernizr.video) {// lets play some video!}else{// no native video support available :(}
  22. 22. mos.bayomi@gmail.com<header><footer><nav><nav>
  23. 23. mos.bayomi@gmail.comHEADER:<header><h1>Heading Text</h1><p> Text or images can be included here</p><p> Logos are frequently placed here too</p></header>The <header> tag can also contain an <hgroup> tag, as shown. The <hgroup> taggroups headings together, using the <h1> to <h6> heading levelsshown here with a main heading and a sub-heading.<header><hgroup><h1>Main Heading</h1><h2>Sub-heading </h2></hgroup><p> Text or images can be included here</p></header>
  24. 24. mos.bayomi@gmail.comFOOTER:The <footer> element contains information about a page, article, or section, such asthe author or date of the article.As a page footer, it may contain copyright or other important legal information.<footer><p>Copyright 2011 Acme United. All rights reserved.</p></footer>The HTML5 specification says: ―A footer typically contains information about itssection such aswho wrote it, links to related documents, copyright data, and the like.‖------------------------------------------------------------------------------------------------------------------The Navigation area<nav><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Our Products</a></li><li><a href="#">Contact Us</a></li></ul>
  25. 25. mos.bayomi@gmail.com<menu><nav><article><section><section>
  26. 26. mos.bayomi@gmail.com<menu><button type="button" >Clio</button><button type="button" >Thalia</button><button type="button">Urania</button><button type="button">Calliope</button></menu>------------------------------------------------------------------------------------------------------------------<section>The <section> element is commonly misused. Most people would think of using thesection tag as a container block level element to contain a portion of the site. This isincorrect.The true way to use the section element is to think of it in terms of grouping specificportions of content. Inside a section you may have multiple headings to further narrowthe focus of the section and there may be multiple sections inside a particular piece ofcontent.
  27. 27. mos.bayomi@gmail.comThe <section> tag—and the <article> tag, as well—can contain headers, footers, orany other components required to complete the section. The <section> tag is forgrouping content. The content for both the <section> tag and the <article> tag usuallystarts with a <header> and ends with a <footer>, with the content for the tag inbetween.The <section> tag can also contain <article> tags, just as the <article> tag can containthe <section> tag------------------------------------------------------------------------------------------------------------------<article><section> Content </section><section> Content </section></article>------------------------------------------------------------------------------------------------------------------<section><article> Content </article><article> Content </article></section>
  28. 28. mos.bayomi@gmail.com<aside><figure><figure> <figcaption><figure><figure><img src="koala.jpg" width="304" height="228"><figcaption>Caption for the figure</figcaption></figure>
  29. 29. mos.bayomi@gmail.com<aside>Think of this tag as holding supplementary content that is not part of the flow of thearticle it supplements. In magazines, asides are frequently used to highlight a pointthat was made in the article itself. The <aside> tag contains content that can beremoved without affecting the information conveyed by the article, section, or pagethat contains it.<p>My family and I visited Euro Disney last year.</p><aside><h4>Disney in France</h4><p>Besides Euro Disney, there is a Disneyland in California.</p></aside>
  30. 30. mos.bayomi@gmail.comA Form of Madness
  31. 31. mos.bayomi@gmail.com<form>
  32. 32. mos.bayomi@gmail.com• Input type= datetime global date-and-time input control• input type = datetime-local local date-and-time input control• input type = date date input control• input type = month year-and-month input control• input type = time time input control• input type = week year-and-week input control• input type = number number input control• input type = range imprecise number-input control• input type = email e-mail address input control• input type = url URL input control• input type = search search field• input type = tel telephone-number-input field• input type = color color-well control•
  33. 33. mos.bayomi@gmail.comDojo jQuery UI YUI.date, month, week, time, date + time, anddate+time–timezone.• See Demos
  34. 34. mos.bayomi@gmail.comHow to solve the problem for browsers that doesn’t support new input typesEx<form><input type="date" id="idate"></form>...<script>var idate = document.getElementById("idate");if (idate.type != "date"){$("#idate").datepicker(); // using jQuery UI}</script>
  35. 35. mos.bayomi@gmail.comInput type Browserstype="date"type="month"type="week"type="time"type="datetime"type="datetime-local"
  36. 36. mos.bayomi@gmail.com<input type="number" min="0" max="10" step="2" value="6"/> type min max step value
  37. 37. mos.bayomi@gmail.com• Input.stepUp(n)• input.stepDown(n)• input.valueAsNumberinput.value
  38. 38. mos.bayomi@gmail.comif (!Modernizr.inputtypes.number) {// no native support for type="number" fields// maybe try Dojo or some other JavaScript framework}
  39. 39. mos.bayomi@gmail.com<input type="range" min="0" max="10" step="2" value="6"/>
  40. 40. mos.bayomi@gmail.comThe latest versions of Safari, Chrome, and Opera all do this.(Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize itsonscreen keyboard for numeric input.)All other browsers simply treat the field as type="text"
  41. 41. mos.bayomi@gmail.com• <input type="email">setCustomValidity().• object.setCustomValidity("WRONG!!");
  42. 42. mos.bayomi@gmail.comThe email INPUT tag gives you a way to request email addresses in your web form.In most web browsers, this wont look any different than a standard .Where this field becomes important is on mobile devices that change their interfacefor email address fields, such as the iPhone, iPad, and iPod.On those devices, email form fields are given a different keyboard with things likereadily available @-key, period, and minimized spacebar.
  43. 43. mos.bayomi@gmail.com• <input type="url">
  44. 44. mos.bayomi@gmail.com• <input type="search">• <input type="tel">
  45. 45. mos.bayomi@gmail.com• <input type="color">
  46. 46. mos.bayomi@gmail.comNew form attributes and functions
  47. 47. mos.bayomi@gmail.complaceholdertext,search, url, tel, email password<input placeholder="First and last name" required/>
  48. 48. mos.bayomi@gmail.comautocomplete<input type="text" name="creditcard" autocomplete="off">
  49. 49. mos.bayomi@gmail.comonoffunspecified
  50. 50. mos.bayomi@gmail.comautofocusautofocus<input type="search" name="criteria" autofocus>boolean
  51. 51. mos.bayomi@gmail.comlist datalist<datalist id="contactList"><option value="x@example.com" label="Racer X"><option value="peter@example.com" label="Peter"></datalist><input type="email" list="contactList">
  52. 52. mos.bayomi@gmail.comTo use this combination:1. Create a datalistelement in your document with its id set to a unique value.The datalist can be located anywhere in the document.2. Populate the datalist with as many option elements as needed to representthe full set of suggestions for values of a control.For example, a datalist representing e-mail contacts should contain all of the contacte-mail addresses as individual option children.<datalist id="contactList"><option value="x@example.com" label="Racer X"><option value="peter@example.com" label="Peter"></datalist>3. Link the input element to the datalistby setting the listattribute to a valuewhich is the idof the associated datalist.<input type="email" id="contacts" list="contactList">
  53. 53. mos.bayomi@gmail.comrequired<input type="text" required>
  54. 54. mos.bayomi@gmail.comThe valueMissing ConstraintPurpose: Ensure that some value is set on this form controlUsage: Set the requiredattribute on the form control to trueUsage example: <input type="text" name="myText" required>Details: If the required attribute is set on a form control, the control will be in aninvalid state unless the user or a programmatic call sets some value to the field.For example, a blank text field will fail a required check, but will pass as soon as anytext is entered. When blank, the valueMissing will return true.
  55. 55. mos.bayomi@gmail.com<input type="text" pattern="[0-9]{16}">
  56. 56. mos.bayomi@gmail.commos.bayomi@gmail.com
  57. 57. mos.bayomi@gmail.com• <canvas><canvas>
  58. 58. mos.bayomi@gmail.commos.bayomi@gmail.comWhat Is a Canvas?When you use a canvas element in your web page, it creates a rectangulararea on the page.By default, this rectangular area is 300 pixels wide and 150 pixels high, butyou can specify the exact size and set other attributes for your canvaselement.
  59. 59. mos.bayomi@gmail.com<canvas>
  60. 60. mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100"></canvas>
  61. 61. mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100">Your Browser Doesn’t Support Canvas</canvas>
  62. 62. mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
  63. 63. mos.bayomi@gmail.comif (canvas.getContext){...}else{ // put code for browsers that dont support canvas here}ORif (Modernizr.canvas) {. . .}else{// put code for browsers that dont support canvas here}
  64. 64. mos.bayomi@gmail.com<head><!--[if IE]><script src="excanvas.js"></script><![endif]--></head>
  65. 65. mos.bayomi@gmail.com• <script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
  66. 66. mos.bayomi@gmail.commos.bayomi@gmail.comTo programmatically use a canvas, you have to first get itscontext.You can then perform actions on the context and finally applythose actions to the context.You can think of making canvas modifications as similar todatabase transactions: you start a transaction, perform certainactions, and then commit the transaction.
  67. 67. mos.bayomi@gmail.comgetContext("2d")
  68. 68. mos.bayomi@gmail.comfillStylefillRect(x,y,width,height)strokeStyle fillStyle —• strokeRect(x,y,width,height)
  69. 69. mos.bayomi@gmail.commos.bayomi@gmail.comEXAMPLE:<script type="text/javascript">function drawSquare () {var canvas = document.getElementById(draw-square);if (canvas.getContext) {var context = canvas.getContext(2d);context.fillStyle = "rgb(150,29,28)";context.fillRect (2,2,96,96);} else {// put code for browsers that dont support canvas here}} </script>
  70. 70. mos.bayomi@gmail.commos.bayomi@gmail.comThe first thing this script does is find the element with theid draw-square:var canvas = document.getElementById(draw-square);Then it checks to see if the browser supports the contextmethod on this element.This is an easy way to make sure that your canvas will onlydisplay on browsers that support the tag.if (canvas.getContext) { ... }
  71. 71. mos.bayomi@gmail.commos.bayomi@gmail.comThe context is the rendering context that is used to manipulatecontent that is displayed.You should use a 2-dimensional (2d) rendering context. But inthe future, 3-dimensional context may be supported.Once I have the context, I need to build my square with the twolines:context.fillStyle = "rgb(150,29,28)";context.fillRect (2,2,96,96);I created a square that is red (rgb(150,29,28)) and is positioned2 pixels down and 2 pixels over and 96 pixels wide and high(fillRect (2,2,96,96)).Then, in the else section of my script, I can put any JavaScript Iwant to display if the canvas element isn’t supported.
  72. 72. mos.bayomi@gmail.com• fillRect(x,y,width,height):strokeRect(x,y,width,height):clearRect(x,y,width,height):
  73. 73. mos.bayomi@gmail.comfillRect()
  74. 74. mos.bayomi@gmail.commos.bayomi@gmail.comLike other 2d platforms, it uses a flat Cartesian coordinatesystem with the origin (0, 0) at the top left.Moving to the right will increase the x value, and movingdownwards will increase the y value.Understanding how the coordinate system works is integral ifyou want to have things draw in the right place.A single unit in the coordinate system is usually equivalent to 1pixel on the screen, so the position (24, 30) would be 24 pixelsright and 30 pixels down.
  75. 75. mos.bayomi@gmail.com• moveTo(x,y)• lineTo(x,y)stroke().• closePath():• lineWidth = 4:• context.lineJoin=round‘ :
  76. 76. mos.bayomi@gmail.com• quadraticCurveTo(x1,y1, x2,y2):
  77. 77. mos.bayomi@gmail.comX2,Y2X1,Y1
  78. 78. mos.bayomi@gmail.com• drawImage(image, dx, dy)(dx, dy)(0,0)• drawImage(image, dx, dy, dw, dh)dw dh(dx, dy).
  79. 79. mos.bayomi@gmail.com• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)(sx, sy, sw, sh),(dw, dh), (dx,dy).<img> Image
  80. 80. mos.bayomi@gmail.com• createLinearGradient(x0,y0,x1,y1)(x0,y0) (x1,y1).
  81. 81. mos.bayomi@gmail.com• createRadialGradient(x0,y0,r0,x1,y1,r1)(x0,y0) r0.(x1,y1) r1.
  82. 82. mos.bayomi@gmail.comaddColorStop
  83. 83. mos.bayomi@gmail.com<canvas id="d" width="300" height="225"></canvas><script>var d_canvas = document.getElementById("d");var context = d_canvas.getContext("2d");var my_gradient = context.createLinearGradient(0,0,300,0);my_gradient.addColorStop(0, "black");my_gradient.addColorStop(1, "white");context.fillStyle = my_gradient;context.fillRect(0, 0, 300, 225);</script>
  84. 84. mos.bayomi@gmail.comvar bg= new Image();bg= "gravel.jpg";bg.onload = function (){.....context.strokeStyle=context.createPattern(bg,repeat).....}
  85. 85. mos.bayomi@gmail.commos.bayomi@gmail.comAs you can see, we are still calling stroke() for our path.However, this time we have set a strokeStyle property on thecontext first, passing in the result of a call tocontext.createPattern. and once again the image needsto be previously loaded in order for the canvas to perform theoperation.The second argument is a repetition pattern that can be one ofthe choices :repeat (Default) The image is repeated in both directionsrepeat-x The image is repeated only in the X dimensionrepeat-y The image is repeated only in the Y dimensionno-repeat The image is displayed once and not repeated
  86. 86. mos.bayomi@gmail.com
  87. 87. mos.bayomi@gmail.comscale(x,y)
  88. 88. mos.bayomi@gmail.comcontext.rotate(angle)context.save();// rotation angle is specified in radianscontext.rotate(1.57);context.drawImage(myImage, 0, 0, 100, 100);context.restore();
  89. 89. mos.bayomi@gmail.com• fillText (text, x, y, maxwidth)• strokeText (text, x, y, maxwidth)
  90. 90. mos.bayomi@gmail.commos.bayomi@gmail.comBoth functions take the text as well as the location at which itshould be drawn.Optionally, a maxwidth argument can be provided to constrainthe size of the text by automatically shrinking the font to fit thegiven size.
  91. 91. mos.bayomi@gmail.com• font• textAligntext-alignstart, end, left, right, center.• textBaselinetop, hanging, middle, alphabetic,ideographic, and bottom.
  92. 92. mos.bayomi@gmail.com• textBaseline
  93. 93. mos.bayomi@gmail.commos.bayomi@gmail.comThe top of the em square is roughly at the top of the glyphs in afont, the hanging baseline is where some glyphs like ը areanchored, the middle is half-way between the top of theem square and the bottom of the em square, the alphabeticbaseline is where characters like Á, ÿ, f, and Ω are anchored,the ideographic baseline is where glyphs like 私 and達 are anchoredand the bottom of the em square is roughly at the bottom of theglyphsin a font.The top and bottom of the bounding box can be far from thesebaselines, dueto glyphs extending far outside the em square
  94. 94. mos.bayomi@gmail.comcontext• shadowColor• shadowOffsetX:• shadowOffsetY:• shadowBlur
  95. 95. mos.bayomi@gmail.comrequestAnimFrame
  96. 96. mos.bayomi@gmail.comwindow.requestAnimFrame = (function(callback) {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};})(); // call function after its declaration
  97. 97. mos.bayomi@gmail.comfunction animate() {// get canvas and its context.....// clear canvas contextcontext.clearRect(0, 0, canvas.width, canvas.height);// draw stuff.....// request new framerequestAnimFrame(function() {animate();});}// end of animate function
  98. 98. mos.bayomi@gmail.comSVGVector-based graphics for the Web
  99. 99. mos.bayomi@gmail.com
  100. 100. mos.bayomi@gmail.com<svg viewBox="0 0 320 240“ style=“border: 1px solid #999;width: 320px; height:240px;"></svg>
  101. 101. mos.bayomi@gmail.com<svg id="mysvg" viewBox="0 0 320 240" style="border: 1pxsolid #999; width: 320px; height:240px;"><rect x="50" y="50" width="100" height="100“style="fill: rgb(255,0,0)"></rect><line x1="50" y1="50" x2="150" y2="150"style="stroke: rgb(0,127,127); stroke-width: 5;"></line><circle cx="165" cy="100" r="50"style="fill:rgb(0,255,0);"></circle></svg>
  102. 102. mos.bayomi@gmail.com<polygon points="265,50 315,150 215,150"style="stroke: rgb(51,51,51); fill: rgb(204,204,204);stroke-width: 5;"></polygon>
  103. 103. mos.bayomi@gmail.com<polyline>
  104. 104. mos.bayomi@gmail.com<rect x="50" y="50" width="100" height="100"fill="rgb(255,0,0)"></rect><line x1="50" y1="50" x2="150" y2="150"stroke="rgb(0,127,127)" stroke-width="5"></line>
  105. 105. mos.bayomi@gmail.comrect {fill: rgb(255,0,0);}line {stroke: rgb(0,127,127);stroke-width: 5;}
  106. 106. mos.bayomi@gmail.com<image x="10" y="10"width="236" height="260"xlink:href="example.png"></image>xlink:href
  107. 107. mos.bayomi@gmail.com<text x="10" y="20">Hi everybody , everything is OK!</text>
  108. 108. mos.bayomi@gmail.com
  109. 109. mos.bayomi@gmail.comNo Plugin?? -- Yes -- no plugin
  110. 110. mos.bayomi@gmail.com<audio>– The <audio> tag identifies sound content, such as music or any other audiostreams.– The <audio> tag has attributes that control what, when, and how audio will beplayed. The attributes are src, preload, controls, loop, and autoplay.<audio src="MyFirstMusic.ogg" controls autoplay loop>Your browser does not support the audio tag.</audio>
  111. 111. mos.bayomi@gmail.com<source><source>– The <video> and <audio> tags can contain the <source> tag, whichdefines multimedia resources for <video> and <audio>tags.– With this element, you specify alternative video and audio files fromwhich the browser can then choose based on its media type or codecsupport.<audio controls><source src="MyFirstAudio.ogg" /><source src=" MyFirstAudio.mp3" /><p>Your browser does not support the audio tag</p></audio>
  112. 112. mos.bayomi@gmail.comBrowser MP3 Wav OggInternet Explorer 9 YES NO NOFirefox 4.0 NO YES YESGoogle Chrome 6 YES YES YESApple Safari 5 YES YES NOOpera 10.6 NO YES YES<audio>
  113. 113. mos.bayomi@gmail.com
  114. 114. mos.bayomi@gmail.com1. load():2. play():3. pause():4. canPlayType(type):
  115. 115. mos.bayomi@gmail.com1. Duration :2. Paused:3. ended4. startTime5. error6. currentSrc :
  116. 116. mos.bayomi@gmail.com1. autoplay :2. loop3. currentTime4. controls5. volume6. muted
  117. 117. mos.bayomi@gmail.comProblems, Problems, and Solutions
  118. 118. mos.bayomi@gmail.com
  119. 119. mos.bayomi@gmail.com<embed><embed><embed src="intro.swf" height="200" width="200">• Problems:
  120. 120. mos.bayomi@gmail.com<object><object><object data="intro.swf" height="200" width="200">• Problems:
  121. 121. mos.bayomi@gmail.com<video><video>– allows you to broadcast video clips or streaming visual media.– It has all the attributes of the <audio> tag plus three more: poster, width,and height.– The poster attribute lets you identify an image to be used while the video isloading or in the case when the video wont load at all.<video src="MyFirstMovie.ogg" controls="controls">Your browser does not support the video tag</video>• Problems:<video>
  122. 122. mos.bayomi@gmail.com<video><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm" type="video/webm"><object data="movie.mp4" width="320" height="240"><embed src="movie.swf" width="320" height="240"></object></video>
  123. 123. mos.bayomi@gmail.com1. poster :2. width, height3. videoWidth, videoHeight
  124. 124. mos.bayomi@gmail.comYou Are Here (And So Is Everybody Else)
  125. 125. mos.bayomi@gmail.com
  126. 126. mos.bayomi@gmail.com
  127. 127. mos.bayomi@gmail.comnavigatornavigator.geolocationfunction get_location() {navigator.geolocation.getCurrentPosition(show_map);}if (Modernizr.geolocation)
  128. 128. mos.bayomi@gmail.comgetCurrentPosition()
  129. 129. mos.bayomi@gmail.comshow_map()getCurrentPosition()getCurrentPosition(callback function)
  130. 130. mos.bayomi@gmail.comfunction show_map(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;// lets show a map or do something interesting!}coords timestampgetCurrentPosition(callback function)
  131. 131. mos.bayomi@gmail.com(Since this is all happening asynchronously, you can’t reallyknow when that will happen in advance.It might take some time for the user to read the info bar and agree to shareher location, devices with dedicated GPS hardware may take some moretime to connect to a GPS satellite, and so on.)
  132. 132. mos.bayomi@gmail.composition.coordsposition.coordsProperty Type Notescoords.latitude double Decimal degreescoords.longitude double Decimal degreescoords.altitude doubleor null Meters above the reference ellipsoidcoords.accuracy double Meterscoords.altitudeAccuracy doubleor null Meterscoords.heading doubleor null Degrees clockwise from true northcoords.speed doubleor null Meters/second
  133. 133. mos.bayomi@gmail.comOnly three of the properties are guaranteed to be there (coords.latitude,coords.longitude, and coords.accuracy).The rest might come back as null, depending on the capabilities of yourdevice and the backend positioning server with which it communicates.The headingand speedproperties are calculated based on the user’sprevious position, if possible.
  134. 134. mos.bayomi@gmail.comgetCurrentPosition()navigator.geolocation.getCurrentPosition(show_map, handle_error).PositionErrorcode message
  135. 135. mos.bayomi@gmail.comcode
  136. 136. mos.bayomi@gmail.comfunction handle_error(err) {if (err.code== 1) {// user said no!}}
  137. 137. mos.bayomi@gmail.comgetCurrentPosition()PositionOptionsPositionOptions• enableHighAccuracy• timeout• maximumAge
  138. 138. mos.bayomi@gmail.comEx:navigator.geolocation.getCurrentPosition(success_callback, error_callback, {maximumAge: 75000});What you’re saying is that you don’t necessarily need the user’scurrentlocation.You would be satisfied with knowing where he was 75 seconds (75000milliseconds) ago.
  139. 139. mos.bayomi@gmail.comwatchPosition()getCurrentPosition().
  140. 140. mos.bayomi@gmail.comwatchPosition()clearWatch(t)setInterval() clearInterval()
  141. 141. mos.bayomi@gmail.comgeolocation<scriptsrc=" http://maps.google.com/maps/api/js?sensor=false"></script>var map = newgoogle.maps.Map(document.getElementById("map_div"), myOptions);//the div to display on , and options for map
  142. 142. mos.bayomi@gmail.comvar myOptions = {zoom: 8, //the zoom level 0 to 21center: new google.maps.LatLng(latitude, longitude),//the center of map displayedmapTypeId: google.maps.MapTypeId.ROADMAP//Map Type}
  143. 143. mos.bayomi@gmail.com
  144. 144. mos.bayomi@gmail.com
  145. 145. mos.bayomi@gmail.com– sessionStorage localStoragewindow
  146. 146. mos.bayomi@gmail.comwindow.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);myFirstValue myFirstKey
  147. 147. mos.bayomi@gmail.comgetItemalert(window.sessionStorage.getItem(‘myFirstKey’));window.sessionStorage.myFirstKey = ‘myFirstValue’;alert(window.sessionStorage.myFirstKey);
  148. 148. mos.bayomi@gmail.comlocalStorage
  149. 149. mos.bayomi@gmail.comsessionStorage localStorageValues persist only as long asthe window or tab in whichthey were storedValues persist beyond window andbrowser lifetimes.Values are only visible withinthe window or tab that createdthem.Values are shared across every windowor tabrunning at the same origin.
  150. 150. mos.bayomi@gmail.comlengthkey(index)• getItem(key)null
  151. 151. mos.bayomi@gmail.com• setItem(key, value)QUOTA_EXCEEDED_ERR
  152. 152. mos.bayomi@gmail.com• removeItem(key) :
  153. 153. mos.bayomi@gmail.comThreads in JS
  154. 154. mos.bayomi@gmail.com
  155. 155. mos.bayomi@gmail.comworker = new Worker("myWorker.js");
  156. 156. mos.bayomi@gmail.compostMessagepostMessage().worker.postMessage("a message from parent page");
  157. 157. mos.bayomi@gmail.compostMessage()onmessageevent.dataonmessage = function myFunction(event){event.data;……postMessage(a message to the parent page);}myWorkers.js
  158. 158. mos.bayomi@gmail.comErrorEventWorker.onerror = function(e){…………}
  159. 159. mos.bayomi@gmail.com
  160. 160. mos.bayomi@gmail.com
  161. 161. mos.bayomi@gmail.com

×