Novos horizontes eoportunidades com                Emiliano Barreto                      @ebarreto          contato@emilia...
HTML 5 ....PORQUE, ONDE,   COMO E QUANDO ?
NEGÓCIOS ONLINEMUITAS EMPRESAS DESCOBRIRAM QUE            A INTERNET
Enxurradade informações e serviços
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      ????
Apresentando         HTML 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 rec...
Principais Características• Web Semantica -  <header><footer><section><nav><aside>• Melhorias com css 3 – Animações / @Fon...
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 d...
Estrutura do HTML 5.0
Gráficos ricos e dinâmicos•   Audio & Video•   Canvas•   Open GL•   SVG 1.1    –   Formas Básicas    –   Paths    –   Text...
Criando gráficosCanvas 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 utilizaresses recursos ?
Pode sim mais antes....Adequação e necessidade para cada projetoPolyfills –modernizr.comShims Google - http://code.google....
Calma calma......Pode sim mais          antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGo...
Calma calma......Pode sim mais          antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGo...
Calma calma......Pode sim mais          antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGo...
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• ...
Faltam elementos a serem           concluidos<device> - microfone e cameras
Novos horizontes e  possibilidades
HTML 5.0 E CSS 3.0      Novos horizontes      e oportunidades           Obrigado                           Emiliano Barret...
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Palestra html5 e CSS3
Upcoming SlideShare
Loading in …5
×

Palestra html5 e CSS3

1,364 views
1,293 views

Published on

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 !!!

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,364
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Palestra html5 e CSS3

  1. 1. Novos horizontes eoportunidades com Emiliano Barreto @ebarreto contato@emilianobarreto.com.br
  2. 2. HTML 5 ....PORQUE, ONDE, COMO E QUANDO ?
  3. 3. NEGÓCIOS ONLINEMUITAS EMPRESAS DESCOBRIRAM QUE A INTERNET
  4. 4. Enxurradade informações e serviços
  5. 5. NOVAS TECNOLOGIAS
  6. 6. Novas oportunidades
  7. 7. Tudo tem que ser mais fácil
  8. 8. Tudo tem que ser mais acessível
  9. 9. PENSE MULTI
  10. 10. E quem vai acessar o seu site ?• Somente quem estiver no pc / windows com internet explorer ????
  11. 11. Que tal o HTML 5 ????
  12. 12. Apresentando HTML 5.0É A MAIS NOVA ATUALIZAÇÃO DA LINGUAGEM HTML
  13. 13. Porque aprender a desenvolver utilizando HTML 5.0 ???
  14. 14. 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
  15. 15. 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)
  16. 16. Estrutura do HTML 5<!DOCTYPE html><html lang=“en”><head><title></title><meta charset=“utf-8”></head><body></body></html>
  17. 17. 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>
  18. 18. Estrutura do HTML 5.0
  19. 19. 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
  20. 20. Criando gráficosCanvas API
  21. 21. Video Tag<video src=“videos/video.mp4” id”myVideo” preload=“auto” type=“video/mp4”></video>
  22. 22. Border radius
  23. 23. Transitions
  24. 24. @Media
  25. 25. @Media
  26. 26. GEO LOCATION
  27. 27. Já posso utilizaresses recursos ?
  28. 28. Pode sim mais antes....Adequação e necessidade para cada projetoPolyfills –modernizr.comShims Google - http://code.google.com/p/html5shiv/
  29. 29. Calma calma......Pode sim mais antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGoogle html
  30. 30. Calma calma......Pode sim mais antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGoogle html
  31. 31. Calma calma......Pode sim mais antes....Adequação e necessidade para cada projetoPolyfills – modernizr.comShimsGoogle html Dados de maio/11 – by netmarketingshare
  32. 32. Market share dos navegadores• Ie 6• Ie 8• Firefox• Chome• safari
  33. 33. E o Flash morreu ?????
  34. 34. Opss......
  35. 35. Tabela de recursos e navegadores – percentual de aceitação dos padrões html 5• Firefox 50%• Chome 70%• IE• Rock melt• Safari• Opera
  36. 36. Faltam elementos a serem concluidos<device> - microfone e cameras
  37. 37. Novos horizontes e possibilidades
  38. 38. HTML 5.0 E CSS 3.0 Novos horizontes e oportunidades Obrigado Emiliano Barreto contato@emilianobarreto.com.br @ebarreto

×