HTML5Colored HELLO WORLDBy : Solieman ElSaber
Agenda1- HTML5 new elements2- CSS33- Animation4- Touch events5- Javascript6- Smartphone !!!
New elementsarticleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooterheaderhgroupkeygenmarkmeternavoutputpr...
New elementsarticleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooterheaderhgroupkeygenmarkmeternavoutputpr...
New elementsarticleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooterheaderhgroupkeygenmarkmeternavoutputpr...
CSS3-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-ms-transition: all 2s ease;-o-transition: all 2s ease;tr...
Font@font-face {font-family: ourNewFont;src: url(newfont.eot?) format(eot),url(newfont.woff) format(woff),url(newfont.ttf)...
CSS3 Animationdiv {animation-duration: 3s;animation-name: rotateIt;animation-iteration-count: infinite;animation-direction...
CSS3 Animation exampleshttp://www.creativebloq.com/css3/animation-with-css3-712437http://www.sitepoint.com/build-awesome-a...
Audio<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does ...
Video<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video...
Canvas<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"><h1>Canvas is NOT supported in your ...
Canvas<canvas id="canvas" width="838" height="220"></canvas><script>var canvasContext = document.getElementById("canvas")....
Canvas<canvas id="canvas" width="838" height="220"></canvas><script>var canvasContext = document.getElementById("canvas")....
Canvasvar TO_RADIANS = Math.PI/180; //here we rotate an imagefunction drawRotatedImage(image, x, y,width,height,angle){// ...
Canvas<canvas id="myCanvas" width="200" height="100"style="border:1px solid #d3d3d3;">Your browser does not support the HT...
CanvasimageData = c.getImageData(0, 0, width, height);c.putImageData(imageData, 0, 0);Source
Touch eventstouchstarttouchmovetouchendfunction init(){canvas.addEventListener("touchstart",start,false);canvas.addEventLi...
Touch eventscanvas.addEventListener("touchstart",handleStart,false);function handleStart(evt){evt.preventDefault();var tou...
Touch eventscanvas.addEventListener("touchend",handleEnd,false);function handleEnd(evt){evt.preventDefault();var touches =...
Touch eventscanvas.addEventListener("touchmove",handleMove,false);function handleMove(evt){evt.preventDefault();var touche...
Javascript !!- Web Storage- Web SQL Database- IndexedDB- Application Cache- Web Workers- WebSocket- Notifications- Native ...
Smartphone- Performance- Limitations- rAF- Resources
Questions ?contact me if you want :)@selsaber
Upcoming SlideShare
Loading in …5
×

Html5

653 views

Published on

Walkthrough HTML5,collection of information and links

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
653
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. HTML5Colored HELLO WORLDBy : Solieman ElSaber
  2. 2. Agenda1- HTML5 new elements2- CSS33- Animation4- Touch events5- Javascript6- Smartphone !!!
  3. 3. New elementsarticleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooterheaderhgroupkeygenmarkmeternavoutputprogressrprtrubysectionsourcesummarytimevideowbrsource
  4. 4. New elementsarticleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooterheaderhgroupkeygenmarkmeternavoutputprogressrprtrubysectionsourcesummarytimevideowbrsource
  5. 5. New elementsarticleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooterheaderhgroupkeygenmarkmeternavoutputprogressrprtrubysectionsourcesummarytimevideowbrsource
  6. 6. CSS3-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-ms-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;CSS3 GeneratorUnderstand CSS3
  7. 7. Font@font-face {font-family: ourNewFont;src: url(newfont.eot?) format(eot),url(newfont.woff) format(woff),url(newfont.ttf) format(truetype);}CSS3 Generator
  8. 8. CSS3 Animationdiv {animation-duration: 3s;animation-name: rotateIt;animation-iteration-count: infinite;animation-direction: alternate;}@-ms-keyframes rotateIt {0% {-ms-transform: rotate(0deg)}50% {-ms-transform: rotate(-5deg)}100% {-ms-transform: rotate(0deg)}}
  9. 9. CSS3 Animation exampleshttp://www.creativebloq.com/css3/animation-with-css3-712437http://www.sitepoint.com/build-awesome-apps-with-css3-animations/https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations
  10. 10. Audio<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>For Mobile :audio-sprites
  11. 11. Video<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>
  12. 12. Canvas<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"><h1>Canvas is NOT supported in your browser</h1></canvas><script>var ourCanvas=document.getElementById("myCanvas");var ourContext=ourCanvas.getContext("2d");ourContext.fillStyle="#FF0000";ourContext.fillRect(0,0,150,75);</script>
  13. 13. Canvas<canvas id="canvas" width="838" height="220"></canvas><script>var canvasContext = document.getElementById("canvas").getContext("2d");canvasContext.fillRect(250, 25, 150, 100);canvasContext.beginPath();canvasContext.arc(450, 110, 100, Math.PI * 1/2,Math.PI*3/2);canvasContext.lineWidth = 15;canvasContext.lineCap = round;canvasContext.strokeStyle = rgba(255, 127, 0, 0.5);canvasContext.stroke();</script>
  14. 14. Canvas<canvas id="canvas" width="838" height="220"></canvas><script>var canvasContext = document.getElementById("canvas").getContext("2d");var img = new Image();img.src = "ourImage.png";canvasContext.drawImage(img,100,100,200,200);canvasContext.drawImage(img,0,0,200,200,100,100,50,50);</script>
  15. 15. Canvasvar TO_RADIANS = Math.PI/180; //here we rotate an imagefunction drawRotatedImage(image, x, y,width,height,angle){// save the current co-ordinate system before we screw withitcontext.save();// move to the middle of where we want to draw our imagecontext.translate(x, y);// rotate, converting our angle from degrees to radianscontext.rotate(angle * TO_RADIANS);// draw it up and to the left by half the width and height ofthe image//context.drawImage(image, -(image.width/2), -(image.height/2));// and restore the co-ords to how they were when we begancontext.restore();}
  16. 16. Canvas<canvas id="myCanvas" width="200" height="100"style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvastag.</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.strokeText("Hello World",10,50);</script>
  17. 17. CanvasimageData = c.getImageData(0, 0, width, height);c.putImageData(imageData, 0, 0);Source
  18. 18. Touch eventstouchstarttouchmovetouchendfunction init(){canvas.addEventListener("touchstart",start,false);canvas.addEventListener("touchmove",draw,false);canvas.addEventListener("touchend",stop,false);canvas.addEventListener("mousedown",start,false);canvas.addEventListener("mousemove",draw,false);canvas.addEventListener("mouseup",stop,false);canvas.addEventListener("mouseout",stop,false);}
  19. 19. Touch eventscanvas.addEventListener("touchstart",handleStart,false);function handleStart(evt){evt.preventDefault();var touches = evt.changedTouches;pointerX = touches[0].clientX;pointerY = touches[0].clientY;}
  20. 20. Touch eventscanvas.addEventListener("touchend",handleEnd,false);function handleEnd(evt){evt.preventDefault();var touches = evt.changedTouches;pointerX = touches[0].clientX;pointerY = touches[0].clientY;}
  21. 21. Touch eventscanvas.addEventListener("touchmove",handleMove,false);function handleMove(evt){evt.preventDefault();var touches = evt.changedTouches;pointerX = touches[0].clientX;pointerY = touches[0].clientY;}
  22. 22. Javascript !!- Web Storage- Web SQL Database- IndexedDB- Application Cache- Web Workers- WebSocket- Notifications- Native Drag & Drop- Desktop Drag-In (File API)- Desktop Drag-Out- FileSystem APIs- Geolocation- Device OrientationSource
  23. 23. Smartphone- Performance- Limitations- rAF- Resources
  24. 24. Questions ?contact me if you want :)@selsaber

×