Baixado 35 vezes
Palestra html5 e CSS3
- 1. O próximo passoda WEB Emiliano Barreto @ebarreto emiliano@celula.cc
- 2. • Proposta detrabalhar com as mais atuais tecnologias e softwares • Atuação na pesquisa e formação de profissionais • Consultoria e desenvolvimento • Forte preocupação com a formação • e carreira do aluno
- 3. Instrutores • CERTIFICADOS • COMEXPERIENCIA DE MERCADO • DIDÁTICOS E PRONTOS PARA TIRAR TODAS AS DÚVIDAS • INSTRUTORES DA CELULA ATUAM DIARIAMENTE COM AS MATERIAS QUE MINISTRAM AULA E SÃO ESPECIALISTAS NO QUE FAZEM
- 4. Diferenciais • Poucos alunospor turma • Ambiente pessoal e compromissado com o aprendizado na prática • Aulas 100% práticas • Estrutura enxuta = valores mais acessíveis
- 5. HTML 5 ....PORQUE,ONDE, COMO E QUANDO ?
- 10. NEGÓCIOS ONLINE MUITAS EMPRESASDESCOBRIRAM QUE A INTERNET
- 11. Enxurrada de informações eserviços
- 12. NOVAS DEMANDAS DEPROFISSINAIS
- 13.
- 14. Tudo tem queser mais fácil
- 15. Tudo tem queser mais fácil
- 17.
- 20.
- 21.
- 22.
- 23. E quem vaiacessar o seu site ? • Somente quem estiver no pc / windows com internet explorer ????
- 25.
- 26. Apresentando HTML 5.0 É A MAIS NOVA ATUALIZAÇÃO DA LINGUAGEM HTML
- 27. Porque aprender adesenvolver utilizando HTML 5.0 ???
- 28. Alguns motivos • Mercado: falta de cases e profissionais bons nacionais na área • Mais poder e recursos no HTML, CSS E JAVASCRIPT • Conteúdo acessível de vários dispositivos e plataformas
- 29.
- 30. Principais Características • WebSemântica: melhoria na estrutura com novas tags • Mais poder com visual com CSS3 • Recursos multimídia com Vídeo e Áudio • Gráficos ricos e dinâmicos (SVG / Canvas) • Web Apps – Web Storage, indexDB etc • GeoLocation • Gráficos 3D ( Web GL)
- 31. Estrutura do HTML5 <!DOCTYPE html> <html lang=“en”> <head> <title></title> <meta charset=“utf-8”> </head> <body> </body> </html>
- 32. Estrutura do HTML5 <header id="topo"> topo do site</header> <nav id="menu"> menu do site</nav> <section id="conteudo"> area de conteúdo do site</section> <footer id="rodape"> rodapé </footer>
- 33.
- 35. Video Tag <video src=“videos/video.mp4”id”myVideo” preload=“auto” type=“video/mp4”> </video>
- 37.
- 38. Transforms #box { -webkit-transform:rotateY(360deg); transform:rotateY(360deg); }
- 39.
- 41. Animações e transições com CSS3
- 43.
- 45.
- 46.
- 48. Gráficos ricos edinâmicos Áudio e Vídeo Canvas gerando imagem 3D com Web GL SVG gerando vetor CSS3 com efeitos e 3D/Perspectiva
- 49.
- 53.
- 54.
- 59.
- 60. Já posso utilizar essesrecursos ?
- 61. Sim, mais antes.... Adequaçãoe necessidade para cada projeto Polyfills – modernizr.com Shims Google html
- 62. Calma calma......Pode simmais antes.... Adequação e necessidade para cada projeto Polyfills – modernizr.com Shims Google html
- 63. Calma calma......Pode simmais antes.... Adequação e necessidade para cada projeto Polyfills – modernizr.com Shims Google html
- 64. Market Share dosnavegadores Estatísticas por versões (maio de 2011) Dados de maio/11 – by netmarketingshare
- 65. Market Share dosnavegadores Estatísticas por versões (maio de 2012) Dados de maio/12 – by netmarketingshare
- 66. Market Share dosnavegadores Quadro geral em 2012 Dados de maio/12 – by netmarketingshare
- 68. Market share dosnavegadores • Ie 6 • Ie 8 • Firefox • Chome • safari
- 69. E o Flashmorreu ?????
- 70. E o Flashmorreu ?????
- 71. Faltam recursos e implementações • Acesso a Web Cam • Falta de softwares fáceis • Incompatibilidade de Navegadores • Recomendação do W3C
- 72. Faltam elementos aserem concluidos <device> - microfone e cameras HTML5 – “FUTURO” PRÓXIMO DA WEB FLASH – PRESENTE (99% das plataformas fixas rodam flash)
- 73. NOVAS DEMANDAS DEPROFISSINAIS
- 74. Novos horizontes e possibilidades
- 75. Você está prontopara o próximo passo ?
- 76. HTML5 e CSS3 O Próximo passo da WEB Obrigado Emiliano Barreto emiliano@celula.cc @ebarreto