E as novas tecnologias de desenvolvimento web<br />Talita pagani – dc/ufscar - @talitapagani			       maio/2011<br />
So, Ozzy, what do youthinkaboutHTML5?<br />Whatthe f*** isHTML5?<br />2<br />De 52<br />
Agenda<br />Apresentação<br />Evolução do HTML<br />Como começou o HTML5: WHATWG e W3C<br />O que o HTML5 traz de novo<br ...
Apresentação<br />Talita Pagani<br />Bacharel em Ciência da Computação pela USC<br />Mestranda em Ciência da Computação na...
Evolução do HTML<br />5<br />De 52<br />
Como começou o HTML5: WHATWG e W3C<br />Criação do Grupo WHATWG (http://www.whatwg.org/)<br />Web Hypertext Application Te...
O que o HTML5 traz de novo<br />Conectividade e aplicações de tempo real<br />Novas possibilidades de estilo com CSS3<br /...
O que o html5 traz de novo<br />simplicidade<br />8<br />De 52<br />
A tríade do desenvolvimento web<br />9<br />De 52<br />
HTML5 X HTML 4.1:Elementos descontinuados<br />Os elementos abaixo foram descontinuados por que seus efeitos são apenas vi...
HTML5 X HTML 4.1:NOVOS VALORES DE INPUTS<br />tel<br />search<br />url<br />email<br />datetime<br />date<br />month<br />...
HTML5 X HTML 4.1:Elementos substituídos<br />12<br />De 52<br />
HTML5 permite a mesma sintaxe do HTML<br />Tags sem fechamento<br />Tags em maiúscula<br />Valores de atributos sem aspas<...
O QUE NÃO É html5<br /><!DOCTYPE html><br />CSS3<br />SVG<br />14<br />De 52<br />
Novas tags e Atributos<br /><header> / <footer><br /><nav><br /><article> / <section> / <aside><br /><hgroup><br />15<br /...
Novas tags e Atributos<br /><figure><br /><figcaption><br /><details><br /><summary><br /><dialog><br />16<br />De 52<br />
Novas tags e atributos<br /><audio><br /><video><br /><audiosrc="music.oga" controls> <a href="music.oga">Download song</a...
Novas tags e Atributos<br />18<br />De 52<br />
19<br />De 52<br />
Tecnologias adjacentes<br />20<br />De 52<br />
TECNOLOGIAS ADJACENTES<br />SVG<br />Gráfico Vetorial Escalar<br />Padrão da W3C para gráficos vetoriais independente do H...
Diferenças entre bitmap e svg<br />Fonte: www.maujorsvg.com.br<br />22<br />De 52<br />
TECNOLOGIAS ADJACENTES<br />Canvas<br />Também trabalha com gráficos, porém bitmap<br />Faz parte do HTML5<br />Gráficos c...
TECNOLOGIAS ADJACENTES<br />CSS3<br />Maior controle de formas e efeitos<br />Maior independência do uso de imagens, princ...
TECNOLOGIAS ADJACENTES<br />Cantos arredondados: border-radius<br />#div1 {  <br />border: 1px solid #699;  <br />-moz-bor...
TECNOLOGIAS ADJACENTES<br />Sombras em elementos de bloco: box-shadow<br />#div2 {  <br />border: 1px solid #699;  <br />-...
TECNOLOGIAS ADJACENTES<br />Sombras em textos: text-shadow<br />p.shadow { <br />text-shadow: 2px 2px2px #000;<br />}<br /...
TECNOLOGIAS ADJACENTES<br />Transparência: opacity e rgba<br />#div3 {  <br />background-color: rgba(110, 142, 185, .4);  ...
TECNOLOGIAS ADJACENTES<br />Colunas: column-count, column-gap, column-rule<br />#div4 {  <br />/* borda inserida para faci...
TECNOLOGIAS ADJACENTES<br />Múltiplos backgrounds: separar os backgrounds por vírgula<br />#div5 blockquote{ <br />backgro...
TECNOLOGIAS ADJACENTES<br />Background com gradiente: linear-gradient, gradient<br />#div8 { <br />background: -moz-linear...
TECNOLOGIAS ADJACENTES<br />Rotacionar elementos: transform<br />#div9 {  <br />-moz-transform: rotate(2deg);  <br />-webk...
TECNOLOGIAS ADJACENTES<br />Seletores por atributos<br />elemento[atributo=valor]<br />input[type=“text”]<br />div[title=“...
TECNOLOGIAS ADJACENTES<br />APIsJavaScript (aí sim!)<br />DragandDrop nativo<br />Geolocalização<br />Web Storage<br />Web...
TECNOLOGIAS ADJACENTES<br />Draganddrop nativo<br />Nas páginas<br />Do desktop para uma página web<br />http://slides.htm...
TECNOLOGIAS ADJACENTES<br />Geolocalização<br />Rastreamento da localização física do usuário<br />Utiliza a API do Google...
TECNOLOGIAS ADJACENTES<br />Web Storage<br />Mecanismo similar aos cookies, para armazenar dados no cliente<br />SessionSt...
TECNOLOGIAS ADJACENTES<br />Notificações<br />Notificações em tempo real na área de trabalho<br />Múltiplas possibilidades...
Tecnologias adjacentes<br />Caching<br />http://slides.html5rocks.com/#app-cache<br />39<br />De 52<br />
HTML5 x FLASH<br />40<br />De 52<br />
Flash x html5<br />O HTML 5 NÃO vai tomar o lugar do Flash, entretanto, o Flash NÃOserá a ÚNICA opção!<br />41<br />De 52<...
Flash x html5<br />Era dos sites ultra animados já passou (será?)<br />Mas Flash ainda continuará a ser utilizado<br />Foc...
Posso usar o HTML5 hoje?<br />43<br />De 52<br />
Posso Usar o html5 hoje?<br />Depende do projeto e público-alvo<br />44<br />De 52<br />
Posso usar o html5 hoje?<br />http://www.findmebyip.com/litmus/<br />Mas como eu faço pra saber qual o suporte dos browser...
Posso usar o html5 hoje?<br />2 opções<br />Mas... e seu quiser fazer meu site em HTML5 funcionar no IE 7 e 8?<br />46<br ...
<!--[if lteIE 8]><br /><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><br /><![endif]--> <br />...
Referências<br />http://www.w3.org/html/logo/<br />http://maujorsvg.com.br/<br />http://www.tableless.com.br/html5-diff<br...
Referências<br />http://www.slideshare.net/edu_agni/css3-seu-desenho-vai-virar-cdigo-e-agora<br />http://tableless.com.br/...
Referências<br />http://planetoftheweb.com/components/promos.php?id=556<br />http://playground.html5rocks.com<br />http://...
Perguntas?<br />51<br />De 52<br />
www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani<br />Obrigada!<br />52<br />De 52<br />
Upcoming SlideShare
Loading in...5
×

HTML5 e as novas tecnologias de desenvolvimento web

8,918

Published on

O HTML 5 é a nova especificação do HTML em desenvolvimento pelo W3C e propõe melhorias à semântica, uso de hipermídia, usabilidade e acessibilidade de páginas web, juntamente com outras linguagens como CSS e JavaScript. Nesta palestra serão abordadas as principais mudanças semânticas de elementos e atributos, o que muda com o HTML 5 em termos de padrões web, as tecnologias adjacentes que atuam em conjunto com a linguagem e alguns exemplos de aplicações e jogos desenvolvidos em HTML 5.

Published in: Technology

HTML5 e as novas tecnologias de desenvolvimento web

  1. 1. E as novas tecnologias de desenvolvimento web<br />Talita pagani – dc/ufscar - @talitapagani maio/2011<br />
  2. 2. So, Ozzy, what do youthinkaboutHTML5?<br />Whatthe f*** isHTML5?<br />2<br />De 52<br />
  3. 3. Agenda<br />Apresentação<br />Evolução do HTML<br />Como começou o HTML5: WHATWG e W3C<br />O que o HTML5 traz de novo<br />HTML5 X HTML 4.1 e XHTML 1.0<br />O que não é HTML5<br />Novas tags e atributos<br />Tecnologias adjacentes<br />Flash x HTML5<br />Posso usar o HTML5 hoje?<br />Referências<br />3<br />De 52<br />
  4. 4. Apresentação<br />Talita Pagani<br />Bacharel em Ciência da Computação pela USC<br />Mestranda em Ciência da Computação na UFSCar<br />Designer de Interface desde 2005<br />Trabalha com usabilidade, qualidade em uso, interfaces ricas, CSS e HTML<br />Editora regular do site Tableless – Padrões Web e blog WebDesign Experience<br />4<br />De 52<br />
  5. 5. Evolução do HTML<br />5<br />De 52<br />
  6. 6. Como começou o HTML5: WHATWG e W3C<br />Criação do Grupo WHATWG (http://www.whatwg.org/)<br />Web Hypertext Application Technology Working Group<br />Fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004<br />Não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML<br />Em 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C<br />XHTML 2 foi descontinuado em 2009<br />6<br />De 52<br />
  7. 7. O que o HTML5 traz de novo<br />Conectividade e aplicações de tempo real<br />Novas possibilidades de estilo com CSS3<br />Acesso à dispositivos (interoperabilidade)<br />Gráficos 2D, 3D e efeitos<br />Recursos multimídia<br />Melhor performance e integração<br />Elementos mais semânticos<br />Armazenamento off-line<br />7<br />De 52<br />
  8. 8. O que o html5 traz de novo<br />simplicidade<br />8<br />De 52<br />
  9. 9. A tríade do desenvolvimento web<br />9<br />De 52<br />
  10. 10. HTML5 X HTML 4.1:Elementos descontinuados<br />Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais:<br />basefont<br />big<br />center<br />font<br />s<br />strike<br />tt<br />u<br />Atributos substituídos pois modificam a formatação dos elementos<br />align<br />background<br />bgcolor<br />border<br />cellpadding<br />cellspacing<br />10<br />De 52<br />
  11. 11. HTML5 X HTML 4.1:NOVOS VALORES DE INPUTS<br />tel<br />search<br />url<br />email<br />datetime<br />date<br />month<br />week<br />time<br />datetime-local<br />number<br />range<br />color<br />11<br />De 52<br />
  12. 12. HTML5 X HTML 4.1:Elementos substituídos<br />12<br />De 52<br />
  13. 13. HTML5 permite a mesma sintaxe do HTML<br />Tags sem fechamento<br />Tags em maiúscula<br />Valores de atributos sem aspas<br />HTML5 X XHTML<br />13<br />De 52<br />
  14. 14. O QUE NÃO É html5<br /><!DOCTYPE html><br />CSS3<br />SVG<br />14<br />De 52<br />
  15. 15. Novas tags e Atributos<br /><header> / <footer><br /><nav><br /><article> / <section> / <aside><br /><hgroup><br />15<br />De 52<br />
  16. 16. Novas tags e Atributos<br /><figure><br /><figcaption><br /><details><br /><summary><br /><dialog><br />16<br />De 52<br />
  17. 17. Novas tags e atributos<br /><audio><br /><video><br /><audiosrc="music.oga" controls> <a href="music.oga">Download song</a> </audio><br /><videosrc="video.ogv" controlsposter="poster.jpg" width="320" height="240"><br /><a href="video.ogv">Download movie</a><br /></video><br />17<br />De 52<br />
  18. 18. Novas tags e Atributos<br />18<br />De 52<br />
  19. 19. 19<br />De 52<br />
  20. 20. Tecnologias adjacentes<br />20<br />De 52<br />
  21. 21. TECNOLOGIAS ADJACENTES<br />SVG<br />Gráfico Vetorial Escalar<br />Padrão da W3C para gráficos vetoriais independente do HTML5<br />Arquivos menores<br />Não degradam quando escalados<br />21<br />De 52<br />
  22. 22. Diferenças entre bitmap e svg<br />Fonte: www.maujorsvg.com.br<br />22<br />De 52<br />
  23. 23. TECNOLOGIAS ADJACENTES<br />Canvas<br />Também trabalha com gráficos, porém bitmap<br />Faz parte do HTML5<br />Gráficos com HTML5 + JS (sem API)<br />http://www.mutantzombiemonsters.com<br />http://slides.html5rocks.com/#canvas-2d-example<br />http://slides.html5rocks.com/#canvas-3d<br /><canvasheight=“600” width=“800”></canvas><br />23<br />De 52<br />
  24. 24. TECNOLOGIAS ADJACENTES<br />CSS3<br />Maior controle de formas e efeitos<br />Maior independência do uso de imagens, principalmente PNG para criar transparências<br />Estilizar elementos de acordo com determinados atributos da tag HTML<br />Concentrar a formatação cada vez mais apenas no CSS, diminuindo o uso de imagens e scripts<br />24<br />De 52<br />
  25. 25. TECNOLOGIAS ADJACENTES<br />Cantos arredondados: border-radius<br />#div1 {  <br />border: 1px solid #699;  <br />-moz-border-radius: 20px;  <br />-webkit-border-radius: 20px;  <br />}  <br />25<br />De 52<br />
  26. 26. TECNOLOGIAS ADJACENTES<br />Sombras em elementos de bloco: box-shadow<br />#div2 {  <br />border: 1px solid #699;  <br />-moz-box-shadow: 5px 5px 5px #b6ebf7;  <br />-webkit-box-shadow: 5px 5px 5px #b6ebf7;  <br />} <br />26<br />De 52<br />
  27. 27. TECNOLOGIAS ADJACENTES<br />Sombras em textos: text-shadow<br />p.shadow { <br />text-shadow: 2px 2px2px #000;<br />}<br />27<br />De 52<br />
  28. 28. TECNOLOGIAS ADJACENTES<br />Transparência: opacity e rgba<br />#div3 {  <br />background-color: rgba(110, 142, 185, .4);  <br />}  <br />#div3 {  <br />background-color: #6e8eb9;  <br />opacity: 0.4;<br />}  <br />28<br />De 52<br />
  29. 29. TECNOLOGIAS ADJACENTES<br />Colunas: column-count, column-gap, column-rule<br />#div4 {  <br />/* borda inserida para facilitar o entedimento */  <br />border: 1px solid #699;  <br />-moz-column-count: 2;  <br />-moz-column-gap: 20px;  <br />-moz-column-rule: 1px solid #6e8eb9;  <br />  <br />-webkit-column-count: 2;  <br />-webkit-column-gap: 20px;  <br />-webkit-column-rule: 1px solid #6e8eb9;  <br />}  <br />29<br />De 52<br />
  30. 30. TECNOLOGIAS ADJACENTES<br />Múltiplos backgrounds: separar os backgrounds por vírgula<br />#div5 blockquote{ <br />background: url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%; <br />} <br />30<br />De 52<br />
  31. 31. TECNOLOGIAS ADJACENTES<br />Background com gradiente: linear-gradient, gradient<br />#div8 { <br />background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); <br />background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff)); <br />} <br />31<br />De 52<br />
  32. 32. TECNOLOGIAS ADJACENTES<br />Rotacionar elementos: transform<br />#div9 {  <br />-moz-transform: rotate(2deg);  <br />-webkit-transform: rotate(2deg);  <br />}<br />32<br />De 52<br />
  33. 33. TECNOLOGIAS ADJACENTES<br />Seletores por atributos<br />elemento[atributo=valor]<br />input[type=“text”]<br />div[title=“abc”]<br />:not()<br />div.teste :not(span)<br />tabletrtd :not(:last-child)<br />:last-child<br />ol.teste li:last-child<br />:empty<br />p:empty<br />E muitos outros<br />33<br />De 52<br />
  34. 34. TECNOLOGIAS ADJACENTES<br />APIsJavaScript (aí sim!)<br />DragandDrop nativo<br />Geolocalização<br />Web Storage<br />Web SQL Database<br />Notificações<br />Etc...<br />34<br />De 52<br />
  35. 35. TECNOLOGIAS ADJACENTES<br />Draganddrop nativo<br />Nas páginas<br />Do desktop para uma página web<br />http://slides.html5rocks.com/#drag-and-drop<br />35<br />De 52<br />
  36. 36. TECNOLOGIAS ADJACENTES<br />Geolocalização<br />Rastreamento da localização física do usuário<br />Utiliza a API do Google Maps de modo mais simples<br />Quase um GPS disponível para qualquer dispositivo<br />http://studio.html5rocks.com/#Geolocation<br />36<br />De 52<br />
  37. 37. TECNOLOGIAS ADJACENTES<br />Web Storage<br />Mecanismo similar aos cookies, para armazenar dados no cliente<br />SessionStorage<br />Local Storage<br />http://playground.html5rocks.com/#localstorage<br />http://slides.html5rocks.com/#web-storage<br />37<br />De 52<br />
  38. 38. TECNOLOGIAS ADJACENTES<br />Notificações<br />Notificações em tempo real na área de trabalho<br />Múltiplas possibilidades<br />http://slides.html5rocks.com/#notifications-api<br />38<br />De 52<br />
  39. 39. Tecnologias adjacentes<br />Caching<br />http://slides.html5rocks.com/#app-cache<br />39<br />De 52<br />
  40. 40. HTML5 x FLASH<br />40<br />De 52<br />
  41. 41. Flash x html5<br />O HTML 5 NÃO vai tomar o lugar do Flash, entretanto, o Flash NÃOserá a ÚNICA opção!<br />41<br />De 52<br />
  42. 42. Flash x html5<br />Era dos sites ultra animados já passou (será?)<br />Mas Flash ainda continuará a ser utilizado<br />Foco da web é conteúdo<br />Semântico<br />Acessível<br />Mas HTML tem que ser bem utilizado<br />42<br />De 52<br />
  43. 43. Posso usar o HTML5 hoje?<br />43<br />De 52<br />
  44. 44. Posso Usar o html5 hoje?<br />Depende do projeto e público-alvo<br />44<br />De 52<br />
  45. 45. Posso usar o html5 hoje?<br />http://www.findmebyip.com/litmus/<br />Mas como eu faço pra saber qual o suporte dos browsers ao HTML5?<br />45<br />De 52<br />
  46. 46. Posso usar o html5 hoje?<br />2 opções<br />Mas... e seu quiser fazer meu site em HTML5 funcionar no IE 7 e 8?<br />46<br />De 52<br />
  47. 47. <!--[if lteIE 8]><br /><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><br /><![endif]--> <br />http://www.modernizr.com/<br />47<br />De 52<br />
  48. 48. Referências<br />http://www.w3.org/html/logo/<br />http://maujorsvg.com.br/<br />http://www.tableless.com.br/html5-diff<br />http://www.tableless.com.br/contedo-flash-e-html<br />http://www.slideshare.net/1Marc/html5-essentials<br />http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web<br />http://www.tableless.com.br/html5-estrutura-semantica<br />48<br />De 52<br />
  49. 49. Referências<br />http://www.slideshare.net/edu_agni/css3-seu-desenho-vai-virar-cdigo-e-agora<br />http://tableless.com.br/html5/<br />http://www.tableless.com.br/afinal-o-que-muda-com-o-html-5<br />http://www.tableless.com.br/html-5-novos-elementos-e-atributos<br />http://www.tableless.com.br/html5-brevissima-introducao<br />49<br />De 52<br />
  50. 50. Referências<br />http://planetoftheweb.com/components/promos.php?id=556<br />http://playground.html5rocks.com<br />http://www.alistapart.com/articles/previewofhtml5/<br />http://html5doctor.com<br />http://html5demos.com/<br />http://www.canvasdemos.com<br />50<br />De 52<br />
  51. 51. Perguntas?<br />51<br />De 52<br />
  52. 52. www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani<br />Obrigada!<br />52<br />De 52<br />
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×