HTML5 e as novas tecnologias de desenvolvimento web

E as novas tecnologias de desenvolvimento web Talita pagani – dc/ufscar - @talitapagani maio/2011

So, Ozzy, what do youthinkaboutHTML5? Whatthe f*** isHTML5? 2 De 52

Agenda Apresentação Evolução do HTML Como começou o HTML5: WHATWG e W3C O que o HTML5 traz de novo HTML5 X HTML 4.1 e XHTML 1.0 O que não é HTML5 Novas tags e atributos Tecnologias adjacentes Flash x HTML5 Posso usar o HTML5 hoje? Referências 3 De 52

Apresentação Talita Pagani Bacharel em Ciência da Computação pela USC Mestranda em Ciência da Computação na UFSCar Designer de Interface desde 2005 Trabalha com usabilidade, qualidade em uso, interfaces ricas, CSS e HTML Editora regular do site Tableless – Padrões Web e blog WebDesign Experience 4 De 52

Como começou o HTML5: WHATWG e W3C Criação do Grupo WHATWG (http://www.whatwg.org/) Web Hypertext Application Technology Working Group Fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004 Não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML Em 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C XHTML 2 foi descontinuado em 2009 6 De 52

O que o HTML5 traz de novo Conectividade e aplicações de tempo real Novas possibilidades de estilo com CSS3 Acesso à dispositivos (interoperabilidade) Gráficos 2D, 3D e efeitos Recursos multimídia Melhor performance e integração Elementos mais semânticos Armazenamento off-line 7 De 52

O que o html5 traz de novo simplicidade 8 De 52

A tríade do desenvolvimento web 9 De 52

HTML5 X HTML 4.1:Elementos descontinuados Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais: basefont big center font s strike tt u Atributos substituídos pois modificam a formatação dos elementos align background bgcolor border cellpadding cellspacing 10 De 52

HTML5 X HTML 4.1:NOVOS VALORES DE INPUTS tel search url email datetime date month week time datetime-local number range color 11 De 52

HTML5 X HTML 4.1:Elementos substituídos 12 De 52

HTML5 permite a mesma sintaxe do HTML Tags sem fechamento Tags em maiúscula Valores de atributos sem aspas HTML5 X XHTML 13 De 52

O QUE NÃO É html5 <!DOCTYPE html> CSS3 SVG 14 De 52

Novas tags e Atributos <header> / <footer> <nav> <article> / <section> / <aside> <hgroup> 15 De 52

Novas tags e Atributos <figure> <figcaption> <details> <summary> <dialog> 16 De 52

Novas tags e atributos <audio> <video> <audiosrc="music.oga" controls> <a href="music.oga">Download song</a> </audio> <videosrc="video.ogv" controlsposter="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video> 17 De 52

Novas tags e Atributos 18 De 52

Tecnologias adjacentes 20 De 52

TECNOLOGIAS ADJACENTES SVG Gráfico Vetorial Escalar Padrão da W3C para gráficos vetoriais independente do HTML5 Arquivos menores Não degradam quando escalados 21 De 52

Diferenças entre bitmap e svg Fonte: www.maujorsvg.com.br 22 De 52

TECNOLOGIAS ADJACENTES Canvas Também trabalha com gráficos, porém bitmap Faz parte do HTML5 Gráficos com HTML5 + JS (sem API) http://www.mutantzombiemonsters.com http://slides.html5rocks.com/#canvas-2d-example http://slides.html5rocks.com/#canvas-3d <canvasheight=“600” width=“800”></canvas> 23 De 52

TECNOLOGIAS ADJACENTES CSS3 Maior controle de formas e efeitos Maior independência do uso de imagens, principalmente PNG para criar transparências Estilizar elementos de acordo com determinados atributos da tag HTML Concentrar a formatação cada vez mais apenas no CSS, diminuindo o uso de imagens e scripts 24 De 52

TECNOLOGIAS ADJACENTES Cantos arredondados: border-radius #div1 { border: 1px solid #699; -moz-border-radius: 20px; -webkit-border-radius: 20px; } 25 De 52

TECNOLOGIAS ADJACENTES Sombras em elementos de bloco: box-shadow #div2 { border: 1px solid #699; -moz-box-shadow: 5px 5px 5px #b6ebf7; -webkit-box-shadow: 5px 5px 5px #b6ebf7; } 26 De 52

TECNOLOGIAS ADJACENTES Sombras em textos: text-shadow p.shadow { text-shadow: 2px 2px2px #000; } 27 De 52

TECNOLOGIAS ADJACENTES Transparência: opacity e rgba #div3 { background-color: rgba(110, 142, 185, .4); } #div3 { background-color: #6e8eb9; opacity: 0.4; } 28 De 52

TECNOLOGIAS ADJACENTES Colunas: column-count, column-gap, column-rule #div4 { /* borda inserida para facilitar o entedimento */ border: 1px solid #699; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px solid #6e8eb9; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #6e8eb9; } 29 De 52

TECNOLOGIAS ADJACENTES Múltiplos backgrounds: separar os backgrounds por vírgula #div5 blockquote{ background: url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%; } 30 De 52

TECNOLOGIAS ADJACENTES Background com gradiente: linear-gradient, gradient #div8 { background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff)); } 31 De 52

TECNOLOGIAS ADJACENTES Rotacionar elementos: transform #div9 { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); } 32 De 52

TECNOLOGIAS ADJACENTES Seletores por atributos elemento[atributo=valor] input[type=“text”] div[title=“abc”] :not() div.teste :not(span) tabletrtd :not(:last-child) :last-child ol.teste li:last-child :empty p:empty E muitos outros 33 De 52

TECNOLOGIAS ADJACENTES APIsJavaScript (aí sim!) DragandDrop nativo Geolocalização Web Storage Web SQL Database Notificações Etc... 34 De 52

TECNOLOGIAS ADJACENTES Draganddrop nativo Nas páginas Do desktop para uma página web http://slides.html5rocks.com/#drag-and-drop 35 De 52

TECNOLOGIAS ADJACENTES Geolocalização Rastreamento da localização física do usuário Utiliza a API do Google Maps de modo mais simples Quase um GPS disponível para qualquer dispositivo http://studio.html5rocks.com/#Geolocation 36 De 52

TECNOLOGIAS ADJACENTES Web Storage Mecanismo similar aos cookies, para armazenar dados no cliente SessionStorage Local Storage http://playground.html5rocks.com/#localstorage http://slides.html5rocks.com/#web-storage 37 De 52

TECNOLOGIAS ADJACENTES Notificações Notificações em tempo real na área de trabalho Múltiplas possibilidades http://slides.html5rocks.com/#notifications-api 38 De 52

Tecnologias adjacentes Caching http://slides.html5rocks.com/#app-cache 39 De 52

Flash x html5 O HTML 5 NÃO vai tomar o lugar do Flash, entretanto, o Flash NÃOserá a ÚNICA opção! 41 De 52

Flash x html5 Era dos sites ultra animados já passou (será?) Mas Flash ainda continuará a ser utilizado Foco da web é conteúdo Semântico Acessível Mas HTML tem que ser bem utilizado 42 De 52

Posso usar o HTML5 hoje? 43 De 52

Posso Usar o html5 hoje? Depende do projeto e público-alvo 44 De 52

Posso usar o html5 hoje? http://www.findmebyip.com/litmus/ Mas como eu faço pra saber qual o suporte dos browsers ao HTML5? 45 De 52

Posso usar o html5 hoje? 2 opções Mas... e seu quiser fazer meu site em HTML5 funcionar no IE 7 e 8? 46 De 52

http://www.modernizr.com/ 47 De 52

Referências http://www.w3.org/html/logo/ http://maujorsvg.com.br/ http://www.tableless.com.br/html5-diff http://www.tableless.com.br/contedo-flash-e-html http://www.slideshare.net/1Marc/html5-essentials http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web http://www.tableless.com.br/html5-estrutura-semantica 48 De 52

Referências http://www.slideshare.net/edu_agni/css3-seu-desenho-vai-virar-cdigo-e-agora http://tableless.com.br/html5/ http://www.tableless.com.br/afinal-o-que-muda-com-o-html-5 http://www.tableless.com.br/html-5-novos-elementos-e-atributos http://www.tableless.com.br/html5-brevissima-introducao 49 De 52

Referências http://planetoftheweb.com/components/promos.php?id=556 http://playground.html5rocks.com http://www.alistapart.com/articles/previewofhtml5/ http://html5doctor.com http://html5demos.com/ http://www.canvasdemos.com 50 De 52

www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani Obrigada! 52 De 52

HTML5 e as novas tecnologias de desenvolvimento web

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Mais de Talita Pagani

Mais de Talita Pagani (20)

HTML5 e as novas tecnologias de desenvolvimento web