HTML5 e as novas tecnologias de desenvolvimento web
52
E as novas tecnologias de desenvolvimento web TALITA PAGANI – DC/UFSCAR - @talitapagani MAIO/2011
-
Upload
talita-pagani -
Category
Technology
-
view
8.504 -
download
0
description
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.
Transcript of 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 you think
about HTML5?What the f***
is HTML5?
2De 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
4De 52
EVOLUÇÃO DO HTML19
91 -
HTM
L19
94 –
HTM
L219
96 -
CSS1
+
Java
Scrip
t19
97 –
HTM
L4
1998
– C
SS2
2000
–
XHTM
L1
2002
- Ta
blel
ess
Web
Des
ign
2005
- AJ
AX
2009
- HT
ML5
5De 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
6De 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-line7
De 52
O QUE O HTML5 TRAZ DE NOVO
simplicidade8
De 52
A TRÍADE DO DESENVOLVIMENTO WEB
Aplicações ricas, leves, semânticas
JavaScript
CSS3HTML5
9De 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
10De 52
HTML5 X HTML 4.1:NOVOS VALORES DE INPUTS• tel• search• url• email• datetime• date• month• week• time• datetime-local• number• range• color
11De 52
HTML5 X HTML 4.1:ELEMENTOS SUBSTITUÍDOS
acronym
applet
isindex
dir
HTML4.1
abbr
object
Controles de formulários
ul
HTML5
12De 52
• HTML5 permite a mesma sintaxe do HTML• Tags sem
fechamento• Tags em
maiúscula• Valores de
atributos sem aspas
HTML5 X XHTML
13De 52
O QUE NÃO É HTML5
•<!DOCTYPE html>
•CSS3
•SVG
14De 52
NOVAS TAGS E ATRIBUTOS
<header> / <footer>
<nav>
<article> / <section> / <aside>
<hgroup>15
De 52
NOVAS TAGS E ATRIBUTOS
<figure>
<figcaption>
<details>
<summary>
<dialog> 16De 52
NOVAS TAGS E ATRIBUTOS
<audio>
<video>
<audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a></video>
17De 52
NOVAS TAGS E ATRIBUTOS
18De 52
19De 52
TECNOLOGIAS ADJACENTES
SVG e Canvas
Gráficos 2D, 3D e vetoriais
CSS3Novos seletores e efeitos
APIs JSDrag and Drop nativo, geolocalização, etc. 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
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
<canvas height=“600” width=“800”></canvas>
23De 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;
}
25De 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;
}
26De 52
TECNOLOGIAS ADJACENTES
• Sombras em textos: text-shadowp.shadow { text-shadow: 2px 2px 2px #000;
}
27De 52
TECNOLOGIAS ADJACENTES
• Transparência: opacity e rgba#div3 {
background-color: rgba(110, 142, 185, .4); } #div3 {
background-color: #6e8eb9; opacity: 0.4;
}
28De 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;
}
29De 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%;
}
30De 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));
}
31De 52
TECNOLOGIAS ADJACENTES
• Rotacionar elementos: transform#div9 {
-moz-transform: rotate(2deg); -webkit-transform: rotate(2deg);
}
32De 52
TECNOLOGIAS ADJACENTES
• Seletores por atributos• elemento[atributo=valor]
• input[type=“text”]• div[title=“abc”]
• :not()• div.teste :not(span)• table tr td :not(:last-child)
• :last-child• ol.teste li:last-child
• :empty• p:empty
• E muitos outros33
De 52
TECNOLOGIAS ADJACENTES
• APIs JavaScript (aí sim!)• Drag and Drop nativo• Geolocalização• Web Storage• Web SQL Database• Notificações• Etc...
34De 52
TECNOLOGIAS ADJACENTES
• Drag and drop nativo• Nas páginas• Do desktop para uma página web• http://slides.html5rocks.com/#drag-and-drop
35De 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
36De 52
TECNOLOGIAS ADJACENTES
• Web Storage• Mecanismo similar aos cookies, para armazenar
dados no cliente• Session Storage• Local Storage• http://playground.html5rocks.com/#localstorage• http://slides.html5rocks.com/#web-storage
37De 52
TECNOLOGIAS ADJACENTES
• Notificações• Notificações em tempo real na área de trabalho• Múltiplas possibilidades• http://slides.html5rocks.com/#notifications-api
38De 52
TECNOLOGIAS ADJACENTES
• Caching• http://slides.html5rocks.com/#app-cache
39De 52
HTML5 x FLASH40
De 52
FLASH X HTML5
O HTML 5 NÃO vai
tomar o lugar do Flash,
entretanto, o Flash NÃO
será a ÚNICA opção!
41De 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?
Conteúdo mais semânticoRecursos interoperáveis e acessíveisMultimídia
HTML5 é um rascunhoNem todos os browsers dão o suporte adequado
43De 52
POSSO USAR O HTML5 HOJE?
Depende do projeto e público-alvo
44De 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?
45De 52
POSSO USAR O HTML5 HOJE?
2 opções
Mas... e seu quiser fazer meu site em HTML5
funcionar no IE 7 e 8?
46De 52
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
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
48De 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
49De 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
50De 52
PERGUNTAS?
51De 52
