Minicurso HTML5
•Als PPTX, PDF herunterladen•
5 gefällt mir•1,015 views
O documento apresenta uma introdução aos padrões web, incluindo o que são, quem os define, onde encontrá-los e por que são importantes. Também resume as principais novidades do HTML5 como semântica aprimorada, novos elementos para formulários e mídia, e recursos adicionais de CSS3.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Minicurso HTML5
Ähnlich wie Minicurso HTML5 (20)
Mehr von Manoel dos Santos
Minicurso HTML5
- 1. Computer onthe Beach 2011 | Manoel dos Santos
- 2. Manoel F. C. dos Santos manoeldossantos@gmail.com @manoeldossantos www.manoeldossantos.com
- 3. User Experience Designer Consultor de Interfaces
- 4. Primeiro, umaintroduçãoaos Web Standards
- 5. O quê? Conjunto de especificaçõestécnicas e guidelines parainterpretação e criação de web sites
- 6. Quem? W3C World Wide Web Consortium
- 8. Porque? SEO Arquivosmenores Acessibilidade Compatibilidade Fácilmanutenção Flexibilidade de layout
- 11. Conteúdo HTML
- 13. Comportamento Javascript/AJAX CSS HTML
- 14. A História
- 15. A Evolução HTML5
- 16. Apple ama HTML5 apple.com/html5
- 17. Google ama HTML5 html5rocks.com
- 18. Mozilla ama HTML5 mozillademos.org/demos/planetarium/demo.html
- 19. Opera ama HTML5 dev.opera.com/articles/view/get-familiar-with-html5/
- 20. Microsoft ama HTML5 ie.microsoft.com/testdrive/
- 21. X X
- 23. O Quehá de Novo Semântica/Sintaxe Formulários Multimídia Gráficos Estilos/CSS3 E muitomais…
- 24. Semântica
- 25. O velho <div id=“header”> <div class=“section”> <div id=“nav”> <div id=“sidebar”> <div class=“article”> <div id=“footer”>
- 26. O novo <header> <section> <nav> <aside> <article> <footer>
- 27. Novo Doctype <!DOCTYPE html>
- 28. Semfrescuras <img src=“imagem.jpg” /> <img src=“imagem.jpg”> <img src=imagem.jpg> <IMG SRC=imagem.jpg>
- 29. Formulários
- 30. Elementosmaisricos <input type=“date”> <input type=“time”> <input type=“month”> <input type=“week”> <input type=“range”> <input type=“number”>
- 32. Validaçãoembutida <input … required> <input type=“tel”> <input type=“email”> <input type=“url”> <input … pattern=“[a-z] {3} [0-9] {3}”>
- 33. Multimídia
- 34. <audio id=“audio” src=“musica.mp3” controls></audio> <video id=“video” src=“filme.mp4” controls></video>
- 35. Gráficos
- 36. Canvas <canvas id=“canvas” width=“500” height=“500”></canvas> <script> varcanvasContext = 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>
- 37. CSS3
- 38. MenosImagens border-radius text-shadow box-shadow gradient
- 39. E muito mais...
- 40. Offline Geolocalização Drag and Drop Web SQL Database Web Workers APIs
- 41. 2012? Posso usar isso tudo hoje?
- 42. A situaçãoAtual
- 43. Suporte dos Navegadores http://www.findmebyip.com/litmus/
- 45. Links http://dev.w3.org/html5/spec-author-view/ http://slides.html5rocks.com/ http://html5demos.com/ http://html5doctor.com/ http://www.apple.com/html5/ http://www.nevermindthebullets.com/ http://diveintohtml5.org/ http://www.edesignerz.net/html/2913-html-5-and-css-3-the-techniques-youll-soon-be-using
- 46. Obrigado! manoeldossantos@gmail.com @manoeldossantos Perguntas?
Hinweis der Redaktion
- A missão da W3C étornar a web um mundoperfeito. O paraíso da informação.A W3C quergarantirque a Web sejaacessívelportodotipo de pessoa e emqualquerlugar.E a visão da W3C éque a web seja um canal de duasvias, onde a interação entre osusuários e osautoressejatão forte quenãohajamaisdiferenciação entre eles. Elesvisualizam a web tambémcomotrocaintensa de informações e serviços. E, porfim, que a web sejaconfiável, segura e amigável.