Html5 - Novas Tags na Prática!

491 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
491
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
21
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

×