HTML5

Colored HELLO WORLD

By : Solieman ElSaber

Agenda

1- HTML5 new elements2- CSS33- Animation4- Touch events5- Javascript6- Smartphone !!!

New elements

articleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooter

headerhgroupkeygenmarkmeternavoutputprogressrprtruby

sectionsourcesummarytimevideowbr

source

New elements

articleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooter

headerhgroupkeygenmarkmeternavoutputprogressrprtruby

sectionsourcesummarytimevideowbr

source

New elements

articleasideaudiocanvascommanddatalistdetailsembedfigcaptionfigurefooter

headerhgroupkeygenmarkmeternavoutputprogressrprtruby

sectionsourcesummarytimevideowbr

source

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 Generator

Understand CSS3

Font@font-face {font-family: 'ourNewFont';src: url('newfont.eot?') format('eot'),url('newfont.woff') format('woff'),url('newfont.ttf') format('truetype');}

CSS3 Generator

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)

}

}

CSS3 Animation exampleshttp://www.creativebloq.com/css3/animation-with-css3-712437

http://www.sitepoint.com/build-awesome-apps-with-css3-animations/

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations

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

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>

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>

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>

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>

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 with it

context.save();// move to the middle of where we want to draw our image

context.translate(x, y);// rotate, converting our angle from degrees to radians

context.rotate(angle * TO_RADIANS);// draw it up and to the left by half the width and height of

the image //context.drawImage(image, -(image.width/2), -(image.

height/2));// and restore the co-ords to how they were when we began

context.restore();}

Canvas<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.strokeText("Hello World",10,50);

</script>

CanvasimageData = c.getImageData(0, 0, width, height);

c.putImageData(imageData, 0, 0);

Source

Touch eventstouchstarttouchmovetouchend

function 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);}

Touch eventscanvas.addEventListener("touchstart",handleStart,false);

function handleStart(evt){

evt.preventDefault();

var touches = evt.changedTouches;

pointerX = touches[0].clientX;pointerY = touches[0].clientY;

}

Touch eventscanvas.addEventListener("touchend",handleEnd,false);

function handleEnd(evt){

evt.preventDefault();

var touches = evt.changedTouches;

pointerX = touches[0].clientX;pointerY = touches[0].clientY;

}

Touch eventscanvas.addEventListener("touchmove",handleMove,false);

function handleMove(evt){

evt.preventDefault();

var touches = evt.changedTouches;

pointerX = touches[0].clientX;pointerY = touches[0].clientY;

}

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 Orientation

Source

Smartphone- Performance - Limitations- rAF- Resources

Questions ?

contact me if you want :)@selsaber