HTML5 Multimedia and Form Features
•Als PPTX, PDF herunterladen•
0 gefällt mir•538 views
Html5 - Novas Tags na Prática! Demonstração de algumas tags do HTML5.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie HTML5 Multimedia and Form Features
Ähnlich wie HTML5 Multimedia and Form Features (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
HTML5 Multimedia and Form Features
- 2. NOVAS TAGS NA PRÁTICA! Rômulo Reis de Oliveira http://about.me/romuloreis devinpf.or
- 3. What is HTML5? HTML5 will be the new standard for HTML.
- 4. 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.
- 5. Some rules for HTML5 were established: 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
- 7. HTML5 Multimedia Adeus Flash e Plugins! HTML5 <video> HTML5 <audio>
- 9. 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>
- 10. HTML5 Canvas <audio controls> <source src=“music.ogg" type="audio/ogg"> <source src=“music.mp3" type="audio/mpeg"> not supported. </audio>
- 11. 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>
- 12. 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>
- 14. 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">
- 15. HTML5 Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPositi on); } else{ x.innerHTML="Geolocation is not supported"; }
- 16. HTML5 Geolocation function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; }
- 17. HTML5 Geolocation function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
- 18. HTML5 Input Types Color Datetime Time Date Email Number Range Search Tell
- 19. 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
- 20. 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>
- 21. Autofocus Name:<input type="text" name="name" autofocus>
- 22. Placeholder <input type="text" name="fname" placeholder="First name"> <input type="text" name="lname" placeholder="Last name">
- 23. Others Web Workers Web Storage Application Cache
- 24. Referências http://www.w3schools.com/html/html5_intro.asp