palestra html5 e css3
DESCRIPTION
Uma demosntração de como o html5 e o css3 vão mudar a cara da web e de como esses recursos já podem ser utilizados !!!TRANSCRIPT
HTML 5 ....PORQUE, ONDE, COMO E QUANDO ?
NEGÓCIOS ONLINE
MUITAS EMPRESAS DESCOBRIRAM QUE A INTERNET
Enxurrada de informações e serviços
NOVAS DEMANDAS DE PROFISSINAIS
NOVAS TECNOLOGIAS
Novas oportunidades
Tudo tem que ser mais fácil
Tudo tem que ser mais acessível
PENSE MULTI
E quem vai acessar o seu site ?
• Somente quem estiver no pc / windows com internet explorer ????
Que tal o HTML 5 ????
ApresentandoHTML 5.0
É A MAIS NOVA ATUALIZAÇÃO DA LINGUAGEM HTML
Porque aprender a desenvolver utilizando HTML 5.0 ???
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
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)
Estrutura do HTML 5<!DOCTYPE html><html lang=“en”><head><title></title><meta charset=“utf-8”></head><body>
</body></html>
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>
Estrutura do HTML 5.0
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
Criando gráficos
Canvas API
Video Tag
<video src=“videos/video.mp4” id”myVideo” preload=“auto” type=“video/mp4”>
</video>
Border radius
Transitions
@Media
@Media
GEO LOCATION
Já posso utilizar esses recursos ?
Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills –modernizr.com
Shims Google - http://code.google.com/p/html5shiv/
Calma calma......Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills – modernizr.com ShimsGoogle html
Calma calma......Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills – modernizr.com ShimsGoogle html
Calma calma......Pode sim mais antes....
Adequação e necessidade para cada projeto
Polyfills – modernizr.com ShimsGoogle html
Dados de maio/11 – by netmarketingshare
Market share dos navegadores
• Ie 6• Ie 8• Firefox• Chome• safari
E o Flash morreu ?????
Opss......
Tabela de recursos e navegadores – percentual de aceitação dos
padrões html 5
• Firefox 50%• Chome 70%• IE• Rock melt• Safari• Opera
Faltam elementos a serem concluidos
<device> - microfone e cameras
Novos horizontes e possibilidades
