SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart
Palestra html5 e CSS3
-
Upload
emiliano-barreto -
Category
Technology
-
view
1.205 -
download
4
description
Transcript of Palestra html5 e CSS3
![Page 2: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/2.jpg)
HTML 5 ....PORQUE, ONDE, COMO E QUANDO ?
![Page 3: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/3.jpg)
![Page 4: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/4.jpg)
![Page 5: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/5.jpg)
![Page 6: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/6.jpg)
![Page 7: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/7.jpg)
NEGÓCIOS ONLINE
MUITAS EMPRESAS DESCOBRIRAM QUE A INTERNET
![Page 8: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/8.jpg)
Enxurrada de informações e serviços
![Page 9: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/9.jpg)
NOVAS DEMANDAS DE PROFISSINAIS
![Page 10: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/10.jpg)
NOVAS TECNOLOGIAS
![Page 11: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/11.jpg)
Novas oportunidades
![Page 12: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/12.jpg)
Tudo tem que ser mais fácil
![Page 13: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/13.jpg)
Tudo tem que ser mais acessível
![Page 14: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/14.jpg)
![Page 15: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/15.jpg)
![Page 16: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/16.jpg)
PENSE MULTI
![Page 17: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/17.jpg)
![Page 18: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/18.jpg)
![Page 19: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/19.jpg)
![Page 20: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/20.jpg)
![Page 21: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/21.jpg)
![Page 22: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/22.jpg)
E quem vai acessar o seu site ?
• Somente quem estiver no pc / windows com internet explorer ????
![Page 23: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/23.jpg)
Que tal o HTML 5 ????
![Page 24: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/24.jpg)
ApresentandoHTML 5.0
É A MAIS NOVA ATUALIZAÇÃO DA LINGUAGEM HTML
![Page 25: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/25.jpg)
Porque aprender a desenvolver utilizando HTML 5.0 ???
![Page 26: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/26.jpg)
Motivos para aprender
• Mercado – sair na frente, pois ainda faltam profissionais com esse conhecimento
• Mais poder e recursos no HTML
• Conteúdo acessível de vários dispositivos e plataformas
![Page 27: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/27.jpg)
Principais Características• Web Semantica -
<header><footer><section><nav><aside>• Melhorias com css 3 – Animações / @FontFace
; media; transform; transitions• Multimídia – Vídeos e Audio• SVG / Canvas• Web Apps – Web Storage, etc• GeoLocation• 3D ( Web GL)
![Page 28: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/28.jpg)
Estrutura do HTML 5<!DOCTYPE html><html lang=“en”><head><title></title><meta charset=“utf-8”></head><body>
</body></html>
![Page 29: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/29.jpg)
Estrutura do HTML 5
<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>
![Page 30: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/30.jpg)
Estrutura do HTML 5.0
![Page 31: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/31.jpg)
![Page 32: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/32.jpg)
Gráficos ricos e dinâmicos• Audio & Video• Canvas• Open GL• SVG 1.1
– Formas Básicas– Paths– Text– Transforms– Gradientes– Preenchimentos padrões
• 3D
![Page 33: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/33.jpg)
Criando gráficos
Canvas API
![Page 36: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/36.jpg)
Video Tag
<video src=“videos/video.mp4” id”myVideo” preload=“auto” type=“video/mp4”>
</video>
![Page 37: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/37.jpg)
![Page 38: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/38.jpg)
![Page 39: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/39.jpg)
Border radius
![Page 41: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/41.jpg)
![Page 42: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/42.jpg)
Transitions
![Page 43: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/43.jpg)
@Media
![Page 46: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/46.jpg)
@Media
![Page 49: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/49.jpg)
GEO LOCATION
![Page 50: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/50.jpg)
Já posso utilizar esses recursos ?
![Page 51: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/51.jpg)
Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills –modernizr.com
Shims Google - http://code.google.com/p/html5shiv/
![Page 52: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/52.jpg)
Calma calma......Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills – modernizr.com ShimsGoogle html
![Page 53: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/53.jpg)
Calma calma......Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills – modernizr.com ShimsGoogle html
![Page 54: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/54.jpg)
Calma calma......Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills – modernizr.com ShimsGoogle html
Dados de maio/11 – by netmarketingshare
![Page 55: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/55.jpg)
![Page 56: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/56.jpg)
Market share dos navegadores
• Ie 6• Ie 8• Firefox• Chome• safari
![Page 57: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/57.jpg)
E o Flash morreu ?????
![Page 58: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/58.jpg)
Opss......
![Page 59: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/59.jpg)
Tabela de recursos e navegadores – percentual de aceitação dos
padrões html 5
• Firefox 50%• Chome 70%• IE• Rock melt• Safari• Opera
![Page 60: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/60.jpg)
Faltam elementos a serem concluidos
<device> - microfone e cameras
![Page 61: Palestra html5 e CSS3](https://reader033.fdocumentos.tips/reader033/viewer/2022051111/555eab9cd8b42a08408b493b/html5/thumbnails/61.jpg)
Novos horizontes e possibilidades