NAVEGADORES MODERNOS NOVAS PERSPECTIVAS
APRESENTAÇÃO <ul><li>Graduado em Sistemas para Internet no IFSUL; </li></ul><ul><li>Desenvolvedor Front-End na AG2 Publici...
<ul><li>HTML5 </li></ul><ul><li>CSS3 </li></ul><ul><li>Javascript </li></ul>
<ul><li>HTML5  </li></ul>
HISTÓRIA ANO ESPECIFICAÇÃO 1991 HTML 1994 HTML2 1996 CSS1 + Javascript 1997 HTML4 1998 CSS2 2000 XHTML1 2002 Tableless 200...
NAVEGADORES <ul><li>Internet Explorer (Trident); </li></ul><ul><li>Firefox (Gecko); </li></ul><ul><li>Google Chrome (Webki...
MELHORIA NA SEMÂNTICA <ul><li>Tags Modificadas; </li></ul><ul><li>Tags Novas; </li></ul><ul><li>Tags Removidas; </li></ul>...
20 CLASSES MAIS UTILIZADAS
CLASSES E ID’S MAIS UTILIZADOS
ESTRUTURA HTML4
ESTRUTURA HTML5
<ul><li>Hidden; </li></ul><ul><li>Id; </li></ul><ul><li>Lang; </li></ul><ul><li>Spellcheck; </li></ul><ul><li>Style; </li>...
<ul><li>NOVAS API’S </li></ul><ul><ul><li>Geolocalização; </li></ul></ul><ul><ul><li>Formulários; </li></ul></ul><ul><ul><...
<ul><li>GEOLOCALIZAÇÃO </li></ul>
COMO FUNCIONA? <ul><li>GPS; </li></ul><ul><li>Endereço de IP; </li></ul><ul><li>ID’s de celulares GSM/CDMA; </li></ul><ul>...
FOURSQUARE
FACEBOOK
ADIDAS MICOACH
<ul><li>FORMULÁRIOS </li></ul>
<ul><li>Date; </li></ul><ul><li>Datetime; </li></ul><ul><li>Datetime-local; </li></ul><ul><li>Month; </li></ul><ul><li>Wee...
NOVOS ATRIBUTOS DE FORMULÁRIOS <ul><li>Autocomplete; </li></ul><ul><li>Autofocus; </li></ul><ul><li>Pattern; </li></ul><ul...
APLICAÇÕES <ul><li>Tipo email: </li></ul>
<ul><li>Tipo Tel </li></ul>APLICAÇÕES <ul><li>Tipo Number </li></ul>
<ul><li>MULTIMÍDIA </li></ul>
MULTIMÍDIA <ul><li>Áudio e Vídeo nativo no navegador; </li></ul><ul><li>Problema de incompatibilidade entre vários formato...
ÁUDIO
VÍDEO
<ul><li>CANVAS </li></ul>
SKETCHPAD CANVAS
ANGRY BIRDS
<ul><li>WEBGL </li></ul>
MapsGL
HELLO RACER
BOOK CASE
<ul><li>ACESSIBILIDADE </li></ul>
WAI-ARIA <ul><li>WAI: Iniciativa para a Acessibilidade na Web, do W3C; </li></ul><ul><li>ARIA: Aplicações Internet Ricas e...
<ul><li>RICH SNIPPETS  (MICRODADOS, MICROFORMATOS E RDFa) </li></ul>
MICRODADOS
MICROFORMATOS
RDFa
 
<ul><li>CSS3 </li></ul>
FONT-FACE
FLASHLIGHT <ul><li>box-shadow, perspective, transition, opacity; </li></ul>
CSS3D <ul><li>text-shadow; </li></ul>
TILT-SHIFT <ul><li>perspective , box-shadow, transition; </li></ul>
STAR WARS CSS3 <ul><li>Perspective, transform, opacity. </li></ul>
UMBRUI <ul><li>Perspective, text-shadow, box-shadow, transform; </li></ul>
CSS3 ZOOM <ul><li>Scale. </li></ul>
HOLOBOX <ul><li>Transform 3D. </li></ul>
MORPHING POWER CUBES
SPIDER-MAN CSS3
<ul><li>TENDÊNCIAS </li></ul>
X-WEBKIT-SPEECH
SLIDESHARE
GOOGLE SWIFFY
FACEBOOK
<ul><li>EXPERIMENTOS </li></ul>
CHROME
FIREFOX
SAFARI
INTERNET EXPLORER
<ul><li>OBRIGADO! </li></ul><ul><li>Email: david.wrs@gmail.com </li></ul><ul><li>@davidwrs no twitter </li></ul>
Upcoming SlideShare
Loading in …5
×

Navegadores modernos – novas perspectivas

1,031 views
957 views

Published on

Palestra apresentada dia 27/10/11 na Faculdade de Tecnologia Senac Pelotas (FATEC) com o intuito de mostra o que é possível fazer com HTML5 e CSS3 nos navegadores mais modernos, a palestra não tem um objetivo tão técnico focado mais em demonstrações.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Navegadores modernos – novas perspectivas

  1. 2. NAVEGADORES MODERNOS NOVAS PERSPECTIVAS
  2. 3. APRESENTAÇÃO <ul><li>Graduado em Sistemas para Internet no IFSUL; </li></ul><ul><li>Desenvolvedor Front-End na AG2 Publicis Modem. </li></ul>
  3. 4. <ul><li>HTML5 </li></ul><ul><li>CSS3 </li></ul><ul><li>Javascript </li></ul>
  4. 5. <ul><li>HTML5 </li></ul>
  5. 6. HISTÓRIA ANO ESPECIFICAÇÃO 1991 HTML 1994 HTML2 1996 CSS1 + Javascript 1997 HTML4 1998 CSS2 2000 XHTML1 2002 Tableless 2005 Ajax 2009 Implementação inicial do HTML5 2014 Implementação final do HTML5
  6. 7. NAVEGADORES <ul><li>Internet Explorer (Trident); </li></ul><ul><li>Firefox (Gecko); </li></ul><ul><li>Google Chrome (Webkit); </li></ul><ul><li>Safari (Webkit); </li></ul><ul><li>Opera (Presto); </li></ul>
  7. 8. MELHORIA NA SEMÂNTICA <ul><li>Tags Modificadas; </li></ul><ul><li>Tags Novas; </li></ul><ul><li>Tags Removidas; </li></ul><ul><li>Atributos Globais; </li></ul>
  8. 9. 20 CLASSES MAIS UTILIZADAS
  9. 10. CLASSES E ID’S MAIS UTILIZADOS
  10. 11. ESTRUTURA HTML4
  11. 12. ESTRUTURA HTML5
  12. 13. <ul><li>Hidden; </li></ul><ul><li>Id; </li></ul><ul><li>Lang; </li></ul><ul><li>Spellcheck; </li></ul><ul><li>Style; </li></ul><ul><li>Tabindex; </li></ul><ul><li>Title; </li></ul>ATRIBUTOS GLOBAIS <ul><li>Accesskey; </li></ul><ul><li>Class; </li></ul><ul><li>Contenteditable; </li></ul><ul><li>Contextmenu; </li></ul><ul><li>Dir; </li></ul><ul><li>Draggable; </li></ul><ul><li>Dropzone; </li></ul>
  13. 14. <ul><li>NOVAS API’S </li></ul><ul><ul><li>Geolocalização; </li></ul></ul><ul><ul><li>Formulários; </li></ul></ul><ul><ul><li>Multimídia; </li></ul></ul><ul><ul><li>Canvas; </li></ul></ul><ul><ul><li>WebGL. </li></ul></ul>
  14. 15. <ul><li>GEOLOCALIZAÇÃO </li></ul>
  15. 16. COMO FUNCIONA? <ul><li>GPS; </li></ul><ul><li>Endereço de IP; </li></ul><ul><li>ID’s de celulares GSM/CDMA; </li></ul><ul><li>Endereço MAC via Bluetooth e WiFi; </li></ul><ul><li>Usuário informa sua posição; </li></ul>
  16. 17. FOURSQUARE
  17. 18. FACEBOOK
  18. 19. ADIDAS MICOACH
  19. 20. <ul><li>FORMULÁRIOS </li></ul>
  20. 21. <ul><li>Date; </li></ul><ul><li>Datetime; </li></ul><ul><li>Datetime-local; </li></ul><ul><li>Month; </li></ul><ul><li>Week; </li></ul>NOVOS TIPOS DE FORMULÁRIOS <ul><li>Search; </li></ul><ul><li>Url; </li></ul><ul><li>Email; </li></ul><ul><li>Number; </li></ul><ul><li>Tel; </li></ul><ul><li>Color; </li></ul><ul><li>Range; </li></ul><ul><li>Time; </li></ul>
  21. 22. NOVOS ATRIBUTOS DE FORMULÁRIOS <ul><li>Autocomplete; </li></ul><ul><li>Autofocus; </li></ul><ul><li>Pattern; </li></ul><ul><li>Placeholder; </li></ul><ul><li>Required; </li></ul>
  22. 23. APLICAÇÕES <ul><li>Tipo email: </li></ul>
  23. 24. <ul><li>Tipo Tel </li></ul>APLICAÇÕES <ul><li>Tipo Number </li></ul>
  24. 25. <ul><li>MULTIMÍDIA </li></ul>
  25. 26. MULTIMÍDIA <ul><li>Áudio e Vídeo nativo no navegador; </li></ul><ul><li>Problema de incompatibilidade entre vários formatos; </li></ul><ul><ul><li>Ogg/Theora; </li></ul></ul><ul><ul><li>WebM/VP8; </li></ul></ul><ul><ul><li>MPEG4/H.264. </li></ul></ul>
  26. 27. ÁUDIO
  27. 28. VÍDEO
  28. 29. <ul><li>CANVAS </li></ul>
  29. 30. SKETCHPAD CANVAS
  30. 31. ANGRY BIRDS
  31. 32. <ul><li>WEBGL </li></ul>
  32. 33. MapsGL
  33. 34. HELLO RACER
  34. 35. BOOK CASE
  35. 36. <ul><li>ACESSIBILIDADE </li></ul>
  36. 37. WAI-ARIA <ul><li>WAI: Iniciativa para a Acessibilidade na Web, do W3C; </li></ul><ul><li>ARIA: Aplicações Internet Ricas e Acessíveis. </li></ul><ul><li>Exemplo: </li></ul><ul><ul><li><div role=“main”> </li></ul></ul>
  37. 38. <ul><li>RICH SNIPPETS (MICRODADOS, MICROFORMATOS E RDFa) </li></ul>
  38. 39. MICRODADOS
  39. 40. MICROFORMATOS
  40. 41. RDFa
  41. 43. <ul><li>CSS3 </li></ul>
  42. 44. FONT-FACE
  43. 45. FLASHLIGHT <ul><li>box-shadow, perspective, transition, opacity; </li></ul>
  44. 46. CSS3D <ul><li>text-shadow; </li></ul>
  45. 47. TILT-SHIFT <ul><li>perspective , box-shadow, transition; </li></ul>
  46. 48. STAR WARS CSS3 <ul><li>Perspective, transform, opacity. </li></ul>
  47. 49. UMBRUI <ul><li>Perspective, text-shadow, box-shadow, transform; </li></ul>
  48. 50. CSS3 ZOOM <ul><li>Scale. </li></ul>
  49. 51. HOLOBOX <ul><li>Transform 3D. </li></ul>
  50. 52. MORPHING POWER CUBES
  51. 53. SPIDER-MAN CSS3
  52. 54. <ul><li>TENDÊNCIAS </li></ul>
  53. 55. X-WEBKIT-SPEECH
  54. 56. SLIDESHARE
  55. 57. GOOGLE SWIFFY
  56. 58. FACEBOOK
  57. 59. <ul><li>EXPERIMENTOS </li></ul>
  58. 60. CHROME
  59. 61. FIREFOX
  60. 62. SAFARI
  61. 63. INTERNET EXPLORER
  62. 64. <ul><li>OBRIGADO! </li></ul><ul><li>Email: david.wrs@gmail.com </li></ul><ul><li>@davidwrs no twitter </li></ul>

×