Html5 & CSS3

HTML5 & CSS3
Jonas Keizo Hirata

TREINAMENTOS

Wednesday, May 25, 2011

TREINAMENTOS O QUE VEREMOS?

Uma breve história do HTML
Estrutura de um documento HTML5
Comparação entre HTML4/XHTML e HTML5
Apresentar a especiﬁcação
Descobrir as novas possibilidades


TREINAMENTOS O QUE NÃO VEREMOS?

Código e mais código
Explicação detalhada de uso das APIs
Exemplos de Elementos e ou APIs que não
foram implementados por nenhum browser
Explicações passo a passo de técnicas de como
tentar tornar um browser compatível com o
HTML5


TREINAMENTOS HTML5: UM POUCO DE HISTÓRIA
1998: HTML 4.01
2000: XHTML
Transitional Geração de desenvolvedores
Strict preocupados com código
Frameset válido e bem estruturado.
2002: XHTML 2.0
Quebraria a
Prometia uma revolução
compatibilidade com
na linguagem
browsers mais antigos

2004: Web Forms 2.0
X WHATWG
Web Hypertext Application
Technology Working Group
www.whatwg.org


TREINAMENTOS HTML5: UM POUCO DE HISTÓRIA
2006: W3C cai na real (XHTML 2.0)

W3C WHATWG
Processo de especiﬁcação totalmente diferente: aberto e empírico

2009: W3C direciona os esforços para o HTML5
2010 ~ 2011: Suporte ao HTML5 aumenta a cada release dos
browsers.

2012: O mundo acaba :P

TREINAMENTOS HTML5: ESTRUTURA
Vamos começar pelo começo e por aquilo que ninguém lembra
de cabeça como se ecreve: DOCTYPE

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">



HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



HTML5

<!doctype html>


Outro elemento importante em qualquer documento HTML
(HTML 4.01/XHTML/HTML5): META

HTML 4.01
<meta http-equiv="content-type" content="text/html;charset=UTF-8">



HTML 4.01

XHTML
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />



HTML 4.01

XHTML
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

HTML5
<meta charset="utf-8">


Hora de juntar tudo...

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Título da página</title>
</head>
<body>

</body>
</html>

E aquele negócio de SGML e XML?



HEIN?!

<!doctype html> <html xmlns="http://www.w3.org/
<html lang="pt-BR"> 1999/xhtml" xml:lang="pt-BR">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Título</title> <title>Título</title>
</head> </head>
<body> <body>
<p>Texto simples. <p>Texto simples.</p>
</body> </body>
</html> </html>


<!doctype html> <html xmlns="http://www.w3.org/
<html lang="pt-BR"> 1999/xhtml" xml:lang="pt-BR">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Título</title> <title>Título</title>
</head> </head>
<body> <body>
<p>Texto simples. <p>Texto simples.</p>
</body> </body>
</html> </html>

text/html application/xhtml+xml

HTML XML
Página
Parser/Serializer Parser/Serializer

TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG
Como um blog se parece?


Como um blog se parece? Um possível wireframe seria...

Cabeçalho (header)

Post
Menu
lateral
(sidebar)
Post

Rodapé (footer)

E em HTML, como ﬁcaria?


E em HTML, como ﬁcaria? Provavelmente assim...
<div id="header">
<h1>Meu BLOG</h1>
</div>
<div id="sidebar">
<ul>
<li><a href="maio-2011.html">Maio 2011</a></li>
<li><a href="abril-2011.html">Abril 2011</a></li>
<li><a href="marco-2011.html">Marco 2011</a></li>
<li><a href="fevereiro-2011.html">Fevereiro 2011</a></li>
<li><a href="janeiro-2011.html">Janeiro 2011</a></li>
</ul>
</div>
<div class="post">
<h2>Título do Post 1</h2>
<p>Texto do Post 1</p>
</div>
<div class="post">
</div>
<div id="footer">
<p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p>
</div>


Apenas para visualizarmos o HTML em nosso wireframe...

<div id=”header”>

<div class=”post”>
<div id=
”sidebar”>
<div class=”post”>

<div id=”footer”>


Que diabos é esse tal
<div>?!


De acordo com a especiﬁcação do HTML 4.01:

“The DIV and SPAN elements, in conjunction with the id and
class attributes, offer a generic mechanism for adding
structure to documents. These elements deﬁne content to be
inline (SPAN) or block-level (DIV) but impose no other
presentational idioms on the content. Thus, authors may use
these elements in conjunction with style sheets, the lang
attribute, etc., to tailor HTML to their own needs and tastes.”


De acordo com a especiﬁcação do HTML 4.01:

class attributes, offer a generic mechanism for adding
structure to documents. These elements deﬁne content to be
inline (SPAN) or block-level (DIV) but impose no other
presentational idioms on the content. Thus, authors may use
these elements in conjunction with style sheets, the lang
attribute, etc., to tailor HTML to their own needs and tastes.”

HEIN?! Inline?! Block-level?! Calma...


Uma palavrinha sobre semântica HTML...

A semântica HTML é o uso da linguagem de marcação
HTML para dar signiﬁcado ao conteúdo de um documento
ao invés de deﬁnir a sua apresentação (aparência).


Uma palavrinha sobre semântica HTML...

A semântica HTML é o uso da linguagem de marcação
HTML para dar significado ao conteúdo de um documento
ao invés de definir a sua apresentação (aparência).

Exemplo:
<i>: formata um texto em itálico apresentação
<em>: indica que o texto deve ser enfatizado significado
<cite>: indica uma citação significado



OK, mas e aquele tal
<div>?!


O elemento <div> não possui significado e, por padrão,
não afeta a apresentação.
Mais uma olhadinha na especificação do HTML 4.01:
class attributes, offer a generic mechanism for
adding structure to documents. These elements
define content to be inline (SPAN) or block-level (DIV) but
impose no other presentational idioms on the content. Thus,
authors may use these elements in conjunction with style
sheets, the lang attribute, etc., to tailor HTML to their own
needs and tastes.”


Voltando ao nosso blog...


Não seria perfeito se fosse assim?

<header>

<post>

<sidebar>

<post>

<footer>


Por quê?



Por quê?
Dois motivos bem simples:
1 - obviamente, escreve-se menos
2 - traria signiﬁcado ao conteúdo


Legal... e daí?


Legal... e daí? É aí que entre o HTML5!
Um dos objetivos do HTML5 é trazer uma semântica maior
aos elementos da linguagem. Para isso foram introduzidos
novos elementos e alguns já existentes foram alterados
semanticamente.


Vamos ver como poderia ﬁcar o nosso blog em HTML5:
<header>
<h1>Meu BLOG</h1>
</header>
<aside>
<nav>
<ul>
<li><a href="maio-2011.html">Maio 2011</a></li>
<li><a href="abril-2011.html">Abril 2011</a></li>
<li><a href="marco-2011.html">Marco 2011</a></li>
<li><a href="fevereiro-2011.html">Fevereiro 2011</a></li>
<li><a href="janeiro-2011.html">Janeiro 2011</a></li>
</ul>
</nav>
</aside>
<article>
</article>
<article>
</article>
<footer>
<p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p>
</footer>


Apenas para visualizarmos o HTML5 em nosso wireframe...

As tags <post> e
<header> <sidebar> que
utilizamos na nossa
“situação perfeita” não
existem.
<article>
No lugar delas utilizamos
as tags <article> e
<aside> <aside> que são mais
genéricas, aﬁnal seria
<article> impossível existirem tags
para para todo tipo de
site com diversos temas
diferentes, não é mesmo?
<footer>

TREINAMENTOS UM POUCO DE ESTATÍSTICA

Analysis of Variance

___ 2
2 2
BSS nj X j M Xj nj XT N
___ 2
2
2 2
WSS = X ij Xj nj 1 s j X Xj nj
2 2
2 2
TSS = N -1 s T X ij M X T XT N

BSS k 1 NOTE: T = Total
F df ,dfb w WSS n k M = Grand Mean
df b k 1, df w n k, df t n 1 N = Overall N
TSS = BSS + WSS


UM POUCO DE ESTATÍSTICA

?!
TREINAMENTOS

Analysis of Variance

___ 2
2 2
BSS nj X j M Xj nj XT N
___ 2
2
2 2
WSS = X ij Xj nj 1 s j X Xj nj
2 2
2 2
TSS = N -1 s T X ij M X T XT N

BSS k 1 NOTE: T = Total
F df ,dfb w WSS n k M = Grand Mean
df b k 1, df w n k, df t n 1 N = Overall N
TSS = BSS + WSS



Valores populares para o atributo id
Total: 1.782.769

Valor Frequência Valor Frequência Valor Frequência

footer 288.061 table1 101.677 wrapper 66.730

content 228.661 menu 96.161 top 66.615

header 223.726 layer1 93.920 table2 57.934

logo 121.351 autonumber1 77.350 layer2 56.823

container 119.877 search 74.887 sidebar 52.416

main 106.327 nav 72.057 image1 48.922

Fonte: Opera MAMA crawler
http://dev.opera.com/articles/view/mama-common-attributes/
MAMA - Metadata Analysis and Mining Application



Valores populares para o atributo class
Total: 2.139.184

Valor Frequência Valor Frequência Valor Frequência

footer 179.528 style2 89.851 nav 68.634

menu 146.673 header 89.274 clear 68.571

style1 138.308 copyright 86.979 search 59.802

msonormal 123.374 button 81.503 style4 56.032

text 122.911 main 69.620 logo 48.831

content 113.951 style3 69.349 body 48.052

title 91.957 small 68.995 left 47.822

Fonte: Opera MAMA crawler
http://dev.opera.com/articles/view/mama-common-attributes/
MAMA - Metadata Analysis and Mining Application



Coincidência alguns desses nomes serem os
mesmos que os utilizados em alguns dos novos
elementos do HTML5?



Coincidência alguns desses nomes serem os
mesmos que os utilizados em alguns dos novos
elementos do HTML5?

Não

Lembra que eu disse que o processo de especiﬁcação do
HTML5 era diferente? Eu disse que era:

Aberto
Qualquer um pode participar da lista de e-mail do WHATWG

Empírico
Os responsáveis pela especiﬁcação não levaram em conta
apenas o que era discutido nas listas de e-mail ou o que eles
achavam melhor. Eles observaram o comportamento dos
desenvolvedores, ou seja, analisaram páginas e mais páginas em
busca de um padrão.


TREINAMENTOS HTML5: NOVOS ELEMENTOS
De marcação:
<article> <nav>
<aside> <progress>
<ﬁgure> <ruby>
<ﬁgcaption> <rt>
<footer> <rp>
<header> <section>
<hgroup> <time>
<mark> <wbr>

De marcação:
<article> <nav>
<aside> <progress>
<ﬁgure> <ruby> X
<ﬁgcaption> <rt> Ruby: Linguagem
de Programação

<footer> <rp>
<header> <section>
<hgroup> <time>
<mark> <wbr>

Mídia:
<audio>
<video> Safari 5.0.5
<source>
<embed> Firefox 4.0.1

Chrome 11.0.696.68

Opera 11.11


Gráﬁco:
<canvas>


Gráﬁco: // Get the canvas element.
var elem = document.getElementById('myCanvas');
if (!elem || !elem.getContext) {
<canvas> }
return;

// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context) {
return;
}

context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;

// Draw a right triangle.
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.fill();
context.stroke();
context.closePath();


Gráﬁco:
<canvas>

Bibliotecas para manipular o canvas:
gury - http://guryjs.org/
EaselJS - http://easeljs.com/
RGraph - http://www.rgraph.net/
Processing.js - http://processingjs.org/

Formulário:
<datalist>
<keygen>
<output>


TREINAMENTOS HTML5: ELEMENTOS REDEFINIDOS

<ol>
<dl>
<cite>
<address>
<em>, <i>
<strong>, <b>
<hr>
<small>



<input type=”TIPO”>
button
password
checkbox
radio
color
range
date
reset
datetime
search
datetime-local
submit
email
tel
ﬁle
text
hidden
time
image
url
month
week
number


<input>
Alguns dos novos atributos para o <input>:

list
autofocus
placeholder
required
multiple
pattern
autocomplete*
min
max
step



<input>
Alguns dos novos atributos para o <input>:

list
autofocus * The off state indicates either that the control's input
placeholder data is particularly sensitive (for example the
required activation code for a nuclear weapon); or that
multiple it is a value that will never be reused (for example a
pattern one-time-key for a bank login) and the user will
therefore have to explicitly enter the data each time,
autocomplete*
instead of being able to rely on the UA to preﬁll the
min value for him; or that the document provides its own
max autocomplete mechanism and does not want the user
step agent to provide autocompletion values.


TREINAMENTOS HTML5: ATRIBUTOS GLOBAIS

contenteditable
setAttribute()
data-*
getAttribute()
draggable=”true”
spellcheck
tabindex=”-1”


TREINAMENTOS HTML5: ARMAZENAMENTO

Hoje em dia, como armazenamos dados localmente
através de um documento HTML?




Uma dica... s




COOKIES

Compartilhado com o servidor através do cabeçalho de requisição

Chato de criar, chato de manter e chato de remover
Para armazenar estruturas de dados um pouco mais complexas, deve
ser serializado primeiro



Quais as opções do HTML5?

COOKIES
Web Storage
Web SQL Databases


TREINAMENTOS HORA DE DAR UMA BROCHADA
E aí, já posso sair usando o HTML5?!

Sim


TREINAMENTOS HORA DE DAR UMA BROCHADA
E aí, já posso sair usando o HTML5?!

Sim... e Não
Utilize o bom senso


TREINAMENTOS CSS3
Temos vontade de matar o designer quando ele pede para...


TREINAMENTOS CSS3
Temos vontade de matar o designer quando ele pede para...
Fazer caixinhas com bordas arredondadas
Colocar uma sombrinha nos textos/caixas
Utilizar um background gigante
Utilizar um background composto
Fazer uma página adaptável ao tamanho da tela
Fazer os títulos das páginas ter uma fonte mais “style”


TREINAMENTOS CSS3: BORDAS ARREDONDADAS
1 2

border-radius: 10px;
border-radius: 5px 10px 15px 20px;

-moz-border-radius
-webkit-border-radius

4 3


TREINAMENTOS CSS3: SOMBRAS

box-shadow: inset 5px 5px 5px #ff0000;

-moz-box-shadow
-webki-box-shadow

box-shadow: 10px 10px 10px #000000;


TREINAMENTOS CSS3: BACKGROUND GIGANTE
Qual o problema do background gigante?


TREINAMENTOS CSS3: BACKGROUND GIGANTE
Qual o problema do background gigante?

Solução:

SVG + background-size


TREINAMENTOS CSS3: BACKGROUND COMPOSTO
Como resolvemos hoje o problema dos backgrounds
compostos?


compostos?

<div> <div> <div> <div> <div> <div> <div> <div>

compostos?
Solução:

Múltiplas declarações de background.


TREINAMENTOS CSS3: PÁGINA ADAPTÁVEL
Como resolvemos o problema das páginas com
aparências diferentes para tamanhos diferentes de tela?



Antes do CSS3:
@media screen { p { font-family: sans-serif } }
<link rel="stylesheet" media="print" href="..." />



Antes do CSS3:
@media screen { p { font-family: sans-serif } }
<link rel="stylesheet" media="print" href="..." />

CSS3:
@media all and (min-width:500px) { ... }
@media print and (orientation: portrait) { ... }
<link rel="stylesheet" media="print and (min-width:
25cm)" href="..." />

TREINAMENTOS CSS3: FONTES “STYLE”
E as fontes diferentes das que não são as do padrão web?



Como era feito até hoje?

Imagem estática
SIFR (Scalable Inman Flash Replacement)
Cufón
Imagem dinâmica (ex: FLIR)


Com CSS3 ﬁca assim:

@font-face {
font-family: nomeDaFonte;
src: url('/local-da-fonte/arquivo-da-fonte') format("tipo-da-fonte");
}

Na hora de usar:
ELEMENTO {
font-family: nomeDaFonte, verdana, helvetica;
}


Padrões de formatos de fonte:
WOFF (webfonts)
TTF (Truetype)
OTF (Opentype)
SVG (Scalable Vector Graphic) → iPhone/iPad/WebKit


TREINAMENTOS CSS3: SELETORES
Novos seletores de atributo:

E[foo^="bar"]

E[foo$="bar"]

E[foo*="bar"]


TREINAMENTOS CSS3: SELETORES
Seletor de “irmao” genérico:
E~F
Funciona exatamente como o E + F, porém F não precisa estar
imediatamente precedido de E


TREINAMENTOS CSS3: PSEUDO-CLASSES
Novas pseudo-classes:
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:ﬁrst-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:enabled
E:checked
E:not(s)

HTML5 & CSS3
Jonas Keizo Hirata

TREINAMENTOS

www.k19.com.br
twitter: @k19treinamentos
contato@k19.com.br


Html5 & CSS3

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Html5 & CSS3 (20)

Último (19)

Html5 & CSS3