NAVEGADORES MODERNOSNOVAS PERSPECTIVAS

APRESENTAÇÃO

Graduado em Sistemas para Internet no IFSUL; Desenvolvedor Front-End na AG2 Publicis Modem.

1. HTML5

2. CSS3

3. Javascript

1. HTML5

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

NAVEGADORES

Internet Explorer (Trident); Firefox (Gecko); Google Chrome (Webkit); Safari (Webkit); Opera (Presto);

MELHORIA NA SEMÂNTICA

Tags Modificadas; Tags Novas; Tags Removidas; Atributos Globais;

20 CLASSES MAIS UTILIZADAS

CLASSES E ID’S MAIS UTILIZADOS

ESTRUTURA HTML4

ESTRUTURA HTML5

Hidden; Id; Lang; Spellcheck; Style; Tabindex; Title;

ATRIBUTOS GLOBAIS

Accesskey; Class; Contenteditable; Contextmenu; Dir; Draggable; Dropzone;

NOVAS API’S

• Geolocalização;

• Formulários;

• Multimídia;

• Canvas;

• WebGL.

1. GEOLOCALIZAÇÃO

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;

FOURSQUARE

FACEBOOK

ADIDAS MICOACH

1. FORMULÁRIOS

Date; Datetime; Datetime-local; Month; Week;

NOVOS TIPOS DE FORMULÁRIOS

Search; Url; Email; Number; Tel; Color; Range; Time;

NOVOS ATRIBUTOS DE FORMULÁRIOS

Autocomplete; Autofocus; Pattern; Placeholder; Required;

APLICAÇÕES

Tipo email:

Tipo Tel

APLICAÇÕES

Tipo Number

1. MULTIMÍDIA

MULTIMÍDIA

Áudio e Vídeo nativo no navegador; Problema de incompatibilidade entre vários formatos;

Ogg/Theora; WebM/VP8; MPEG4/H.264.

ÁUDIO

VÍDEO

1. CANVAS

SKETCHPAD CANVAS

ANGRY BIRDS

1. WEBGL

MapsGL

HELLO RACER

BOOK CASE

1. ACESSIBILIDADE

WAI-ARIA

WAI: Iniciativa para a Acessibilidade na Web, do W3C; ARIA: Aplicações Internet Ricas e Acessíveis.

Exemplo:<div role=“main”>

1. RICH SNIPPETS (MICRODADOS, MICROFORMATOS E RDFa)

MICRODADOS

MICROFORMATOS

RDFa

http://www.google.com/support/webmasters/bin/answer.py?answer=99170

1. CSS3

FONT-FACE

FLASHLIGHT

box-shadow, perspective, transition, opacity;

CSS3D

text-shadow;

TILT-SHIFT

perspective , box-shadow, transition;

STAR WARS CSS3

Perspective, transform, opacity.

UMBRUI

Perspective, text-shadow, box-shadow, transform;

CSS3 ZOOM

Scale.

HOLOBOX

Transform 3D.

MORPHING POWER CUBES

SPIDER-MAN CSS3

1. TENDÊNCIAS

X-WEBKIT-SPEECH

SLIDESHARE

GOOGLE SWIFFY

FACEBOOK

1. EXPERIMENTOS

CHROME

FIREFOX

SAFARI

INTERNET EXPLORER

OBRIGADO!

1.Email: david.wrs@gmail.com

2.@davidwrs no twitter