Navegadores modernos – novas perspectivas
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Navegadores modernos – novas perspectivas

on

  • 1,353 views

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

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.

Statistics

Views

Total Views
1,353
Views on SlideShare
1,352
Embed Views
1

Actions

Likes
1
Downloads
11
Comments
0

1 Embed 1

http://us-w1.rockmelt.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Navegadores modernos – novas perspectivas Presentation Transcript

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