NOVAS TAGS NA PRÁTICA!Rômulo Reis de Oliveirahttp://about.me/romuloreis                             devinpf.or
What is HTML5?HTML5 will be the new standard for HTML.
How Did HTML5 Get Started?HTML5 is a cooperation between the … World Wide Web Consortium (W3C) Web Hypertext Application...
Some rules for HTML5 wereestablished:   New features should be based on HTML, CSS,    DOM, and JavaScript   Reduce the n...
HTML5 Multimedia   Adeus Flash e Plugins!   HTML5 <video>   HTML5 <audio>
HTML5 Multimedia
HTML5 Multimedia   <!DOCTYPE html>   <html>     <body>    <video width="320" height="240" controls autoplay>     <sou...
HTML5 Canvas<audio controls> <source src=“music.ogg" type="audio/ogg"> <source src=“music.mp3" type="audio/mpeg">not suppo...
HTML5 Canvas   <!DOCTYPE html>   <html>   <body>   <canvas id="myCanvas" width="200" height="100"    style="border:1px...
HTML5 SVG   <!DOCTYPE html>   <html>   <body>   <svg xmlns="http://www.w3.org/2000/svg" version="1.1"    height="190">...
HTML5 Drag and Drop   <div id="div1" ondrop="drop(event)"    ondragover="allowDrop(event)"></div>   <img id="drag1" src=...
HTML5 Geolocationif (navigator.geolocation)     {  navigator.geolocation.getCurrentPosition(showPositi  on);    }else{...
HTML5 Geolocationfunction showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude  + "<br>Longitude...
HTML5 Geolocationfunction showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; vari...
HTML5 Input Types   Color   Datetime   Time   Date   Email   Number   Range   Search   Tell
HTML5 New Form Attributes   autocomplete   autofocus   form   formaction   formenctype   formmethod   formnovalidat...
Autocomplete   <form action="doit.php" autocomplete="on">     First name:<input type="text" name="fname">     Last name...
Autofocus   Name:<input type="text" name="name" autofocus>
Placeholder   <input type="text" name="fname" placeholder="First    name">   <input type="text" name="lname" placeholder...
Others   Web Workers   Web Storage   Application Cache
Referências   http://www.w3schools.com/html/html5_intro.asp
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
Upcoming SlideShare
Loading in …5
×

Html5 - Novas Tags na Prática!

437 views

Published on

Html5 - Novas Tags na Prática!
Demonstração de algumas tags do HTML5.

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

  • Be the first to like this

No Downloads
Views
Total views
437
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 - Novas Tags na Prática!

  1. 1. NOVAS TAGS NA PRÁTICA!Rômulo Reis de Oliveirahttp://about.me/romuloreis devinpf.or
  2. 2. What is HTML5?HTML5 will be the new standard for HTML.
  3. 3. How Did HTML5 Get Started?HTML5 is a cooperation between the … World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG).*WHATWG (2004): Apple, Mozilla, Opera.
  4. 4. Some rules for HTML5 wereestablished: New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public
  5. 5. HTML5 Multimedia Adeus Flash e Plugins! HTML5 <video> HTML5 <audio>
  6. 6. HTML5 Multimedia
  7. 7. HTML5 Multimedia <!DOCTYPE html> <html> <body> <video width="320" height="240" controls autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video> </body> </html>
  8. 8. HTML5 Canvas<audio controls> <source src=“music.ogg" type="audio/ogg"> <source src=“music.mp3" type="audio/mpeg">not supported.</audio>
  9. 9. HTML5 Canvas <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas> </body> </html>
  10. 10. HTML5 SVG <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill- rule:evenodd;"> </svg> </body> </html>
  11. 11. HTML5 Drag and Drop <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
  12. 12. HTML5 Geolocationif (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPositi on); }else{ x.innerHTML="Geolocation is not supported"; }
  13. 13. HTML5 Geolocationfunction showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;}
  14. 14. HTML5 Geolocationfunction showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; varimg_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false";document.getElementById("mapholder").innerHTML="<imgsrc="+img_url+">";}
  15. 15. HTML5 Input Types Color Datetime Time Date Email Number Range Search Tell
  16. 16. HTML5 New Form Attributes autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step
  17. 17. Autocomplete <form action="doit.php" autocomplete="on"> First name:<input type="text" name="fname"> Last name: <input type="text" name="lname"> E-mail: <input type="email" name="email" autocomplete="off"> </form>
  18. 18. Autofocus Name:<input type="text" name="name" autofocus>
  19. 19. Placeholder <input type="text" name="fname" placeholder="First name"> <input type="text" name="lname" placeholder="Last name">
  20. 20. Others Web Workers Web Storage Application Cache
  21. 21. Referências http://www.w3schools.com/html/html5_intro.asp

×