Notas de aula da disciplina Design para Web

1. N O T A S D E A U L A
M A R Ç O / 2 0 1 3

2. Resumo de vários artigos encontrados na internet:
Introdução a HTML5
 ssatorres (Salvador Torres)
http://www.slideshare.net/ssatorres/introduo-a-html5
Minicurso HTML5
 Manoel dos Santos
http://www.slideshare.net/manoeldossantos/minicurso-html5
Taking Advantage of HTML5 and CSS3 with Modernizr
 FARUK ATEŞ
http://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr
Habilitar HTML5 no Internet Explorer
 Pedro Rogério
http://www.pinceladasdaweb.com.br/blog/2010/09/10/habilitar-html5-no-internet-explorer/
Tableless.com.br
http://tableless.com.br/html5/
HTML5

3.  De acordo com o W3C a Web é baseada em 3 pilares:
 Um esquema de nomes para localização de fontes
de informação na Web, esse esquema chama-se
URI.
 Um Protocolo de acesso para acessar estas fontes,
hoje o HTTP.
 Uma linguagem de Hypertexto, para a fácil
navegação entre as fontes de informação: o HTML.

4.  Conjunto de especificações técnicas e guidelines para
interpretação e criação de web sites
 W3C - World Wide Web Consortium
 SEO
Arquivos menores
Acessibilidade
Compatibilidade
Fácil manutenção
Flexibilidade de layout
Web Standards

5.  W3C - World Wide Web Consortium
Padrões:
 CSS
 DOM(JavaScript)
 XML
 XHTML 1.0
Web Standards

7.  HTML4 - boas práticas que deveriam ser seguidas ao
produzir códigos client-side.
A separação da estrutura do código com a formatação e
princípios de acessibilidade
 HTML4 ainda não trazia diferencial real para a
semântica do código.
 HTML4 também não facilitava a manipulação dos
elementos via Javascript ou CSS.
O HTML5 e suas mudanças

8.  HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu
trabalho da melhor maneira possível.
 HTML5 facilita a manipulação dos elementos possibilitando ao
desenvolvedor modificar as características dos objetos de forma não
intrusiva e de maneira que seja transparente para o usuário final.
 HTML5 também cria novas tags e modifica a função de outras.
 As versões antigas do HTML não continham um padrão universal para
a criação de seções comuns e específicas como rodapé, cabeçalho,
sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs,
Classes ou tags. Não havia um método de capturar de maneira
automática as informações localizadas nos rodapés dos websites.
O HTML5 e suas mudanças

9. O HTML5 e suas mudanças

10.  Há uma grande diversidade de dispositivos que acessam a internet.
Entre eles, há uma série de tablets, smartphones, pc's e etc. Cada um
destes meios de acesso utilizam um determinado browser para navegar
na web.
Motores de Renderização
Motor Browser
Webkit Safari, Google Chrome
Gecko Firefox, Mozilla, Camino
Trident Internet Explorer 4 ao 9
Presto Opera 7 ao 10

11. Motores de Renderização

12. Técnicas de detecção
 Pode ser que o usuário não utilize um browser que suporta HTML5
1. Mensagem alertando o usuário sobre a importância da atualização do
browser
2. Empregar hacks CSS e usar browser sniffing. Prática não confiável
3. Usando detecção manual fica cansativo
Ferramentas de detecção

13. Técnicas de detecção
Ferramentas de detecção
 HTML5 shiv
Para habilitar as novas tags do HTML5 no Internet
Explorer, você precisa inserir um simples código
javascript na sua página para que o IE possa entender as
novas tags. O código responsável é o seguinte:
<!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->

14. Técnicas de detecção
Ferramentas de detecção
 Google Chrome Frame
Uma ferramenta criada pelo Google para dar um „up‟
no Internet Explorer.
http://code.google.com/chrome/chromeframe/

15. Técnicas de detecção
Ferramentas de detecção
 Modernizr
Modernizr é uma biblioteca criada para detectar
suporte a HTML5 e CSS3 no browser, e caso o
mesmo não possua suporte, proporcione o mesmo
via JavaScript.
http://www.modernizr.com/

16. Modernizr
 Ao incorporar o script Modernizr na sua página,
ele detecta se o navegador atual suporta recursos
como CSS3
@font-face, border-radius, border-
image,box-shadow, rgba()
e assim por diante, bem como recursos HTML5
como áudio, vídeo, localStorage, e os
novos <input> tipos de elementos e atributos.

17. Modernizr
 Assim, se você quiser verificar se o browser suporta Geolocalização, por
exemplo, basta inserir este script na página.
Se o browser suportar a feature testada, ele retornará true:
if (Modernizr.geolocation) {
// Aceita a feature
}
else {
// Não aceita a feature testada.
}

18. HTML
Tags básicas:
• <a></a>;
• <p></p>;
• <img/>;
• <div></div>
• <table></table>
• <iframe></iframe>
• <br/>
• Etc ...

19. HTML5
Muda a forma de escrever código e organizar a informação:
 Mais semântica e menos código;
 Mais interatividade sem plugins e perda de performance;
 Código interoperável, pronto para futuros dispositivos;
 Facilita a reutilização da informação de diversas formas.

20. XHTML

21. HTML5
Muda a forma de escrever código e organizar a informação:
 O atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em
qualquer outro elemento para indicar o idioma do texto representado.
 O atributo LANG é necessário para que os user-agents saibam qual a linguagem
principal do documento.

22. HTML5
HEAD
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD
ficam os metadados. Metadados são informações sobre a página e o
conteúdo ali publicado.
Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a
página está utilizando.
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

23. HTML5
<div id=“header”>
<div
id=“nav”>
<div id=“footer”>
<div
id=“sidebar”>
<div class=“section”>
<div class=“article”>

24. HTML5
<header>
<nav>
<footer>
<aside>
<section>
<article>

25. <section>
 define uma nova seção genérica no documento
(introdução ou destaque, novidades, etc.);
<nav>
 seção da página que contém links (importantes) para
outras partes do website;
HTML5

26. <article>
 parte da página que poderá ser distribuída e reutilizada
em FEEDs por exemplo (post, artigo, um bloco de
comentários de usuários, etc.);
<aside>
 define uma área de conteúdo relacionado ao seu conteúdo
principal (sidebars em textos impressos, publicidade,
etc.);
HTML5

27. <hgroup>
 agrupar elementos de título de H1 até H6 quando eles tem
múltiplos níveis de títulos;
<time>
 marcar parte do texto que exibe um horário ou uma data;
HTML5

28. <header>
 grupo de introdução ou elementos de navegação (índices de
conteúdos, campos de busca ou até mesmo logomarcas);
<footer>
 representa literalmente o rodapé da página.
HTML5

29. Os novos elementos possibilitaram uma nitidez
maior no código;
É possível diferenciar diretamente pelo código
HTML5 áreas importantes do site como sidebar,
rodapé e cabeçalho;
HTML5

30. Os buscadores conseguem vasculhar o código de
maneira mais eficaz;
Guardando informações mais exatas e levando
menos tempo para estocar essa informação.
HTML5

31. Elementos descontinuados
 align como atributo da
tag caption, iframe, img, input, object, legend, table, hr, div,
h1, h2, h3, h4,h5, h6, p, col, colgroup, tbody, td, tfoot, th, the
ad e tr.
 alink, link, text e vlink como atributos da tag body.
 background como atributo da tag body.
 bgcolor como atributo da tag table, tr, td, th e body.
 border como atributo da tag table e object.
 cellpadding e cellspacing como atributos da tag table.
 char e charoff como atributos da
tag col, colgroup, tbody, td, tfoot, th, thead e tr.
 clear como atributo da tag br.
 compact como atributo da tag dl, menu, ol e ul.
HTML5

32. Elementos descontinuados
 frame como atributo da tag table.
 frameborder como atributo da tag iframe.
 height como atributo da tag td e th.
 hspace e vspace como atributos da tag img e object.
 marginheight e marginwidth como atributos da tag iframe.
 noshade como atributo da tag hr.
 nowrap como atributo da tag td e th.
 rules como atributo da tag table.
 scrolling como atributo da tag iframe.
 size como atributo da tag hr.
 type como atributo da tag li, ol e ul.
 valign como atributo da
tag col, colgroup, tbody, td, tfoot, th, thead e tr.
 width como atributo da tag hr, table, td, th, col, colgroup e pre
HTML5

33. Elementos removidos
<frame> <frameset> <noframes>
 Fere princípios de acessibilidade;
<basefont>,<big>,<center>,<font>,<s>,<strike>,<tt>
<u>
 Efeito somente visual;
HTML5

34. Elementos modificados
 O elemento B passa a ter o mesmo nível semântico
que um SPAN, mas ainda mantém o estilo de
negrito no texto. Contudo, ele não dá nenhuma
importância para o texto marcado com ele.
 O elemento I também passa a ser um SPAN. O
texto continua sendo itálico e para usuários de
leitores de tela, a voz utilizada é modificada para
indicar ênfase. Isso pode ser útil para marcar
frases em outros idiomas, termos técnicos e etc.
HTML5

35. Elementos Alterados
<address>
 agora é tratado como uma seção no documento;
<hr>
 mesmo nível que um parágrafo;
<strong>
 ganhou mais importância.
<a>
 sem o atributo href agora representa um placeholder no exato
lugar que este link se encontra
<head>
 não aceita mais elementos child como seu filho
HTML5

36. HTML5
Suporte dos Browsers
http://html5test.com/

37. HTML5
http://slides.html5rocks.com/#semantic-tags-1

38. HTML5
http://slides.html5rocks.com/#semantic-tags-2

39. HTML5
Tag LINK
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros
documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
<link rel="stylesheet" type="text/css" href="estilo.css">
O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a folhas de
estilo.
Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">
Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um
caminho alternativo via Atom FEED.
No HTML5 há outros links relativos que você pode inserir como o rel="archives" que indica uma referência a
uma coleção de material histórico da página. Por exemplo, a página de histórico de um blog pode ser
referenciada nesta tag.

40. HTML5
http://slides.html5rocks.com/#link-relations

41. HTML5
http://slides.html5rocks.com/#new-form-types

42. HTML5
required
 Para tornar um campo de formulário obrigatório (seu valor precisa ser preenchido) basta,
em HTML5, incluir o atributo required:
 <input name="login" required>
email
 E-mail, com formatação e validação. O user-agent pode inclusive promover a integração
com sua agenda de contatos.
data
O campo de formulário pode conter qualquer um desses valores no atributo type:
 datetime
 date
 month
 week
 time
 datetime-loca

43. HTML5
Number

44. HTML5
Range

45. HTML5
color
 O campo com type="color" é um seletor de cor. O agente de usuário pode
mostrar um controle de seleção de cor ou outro auxílio que estiver disponível. O
valor será uma cor no formato #ff6600
search
 mudar a aparência para parecer com os demais do sistema
url
 formatação e validação de endereços web

46. HTML5
autofocus
 o foco será colocado neste campo automaticamente ao carregar a página;
 <input name="login" autofocus/>
Placeholder text
texto padrão do campo antes do foco ir para ele;
<input name="q" placeholder="Pesquisa"/>

47. HTML5

48. HTML5

49. HTML5
maxlength
 o atributo agora também está disponível no textarea;
pattern
 O atributo pattern nos permite definir expressões regulares de validação, sem
Javascript. Veja um exemplo de como validar CEP:

50. HTML5
Custom validators
definir expressões regulares de validação, sem Javascript;
 <input name="cpf" oninput="vCPF(this)"/>
contenteditable
tornar um elemento do HTML editável.
 <div contenteditable="true">
Edite-me...
</div>
http://html5demos.com/contenteditable (ver em ação)

51. HTML5

52. Midias com HTML5
Áudio
 <audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
<p>Faça o <a href="mus.mp3">download da música</a>.</p>
</audio>
 O valor de controls define se um controle de áudio, com botões de play, pause, volume,
barra de progresso, contador de tempo, etc. será exibido na tela;
 O estilo dos botões é definido pelo browser.

53. Midias com HTML5
http://slides.html5rocks.com/#video-audio

54. HTML5
Todos os recursos:
 http://slides.html5rocks.com/#slide21