Download pdf - Html5 - Notas de aula

Transcript
Page 1: Html5 - Notas de aula

N O T A S D E A U L A

M A R Ç O / 2 0 1 3

Page 2: Html5 - Notas de aula

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

Page 3: Html5 - Notas de aula

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.

Page 4: Html5 - Notas de aula

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

Page 5: Html5 - Notas de aula

W3C - World Wide Web Consortium

Padrões:

CSS

DOM(JavaScript)

XML

XHTML 1.0

Web Standards

Page 6: Html5 - Notas de aula
Page 7: Html5 - Notas de aula

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

Page 8: Html5 - Notas de aula

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

Page 9: Html5 - Notas de aula

O HTML5 e suas mudanças

Page 10: Html5 - Notas de aula

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

Page 11: Html5 - Notas de aula

Motores de Renderização

Page 12: Html5 - Notas de aula

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

Page 13: Html5 - Notas de aula

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]-->

Page 14: Html5 - Notas de aula

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/

Page 15: Html5 - Notas de aula

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/

Page 16: Html5 - Notas de aula

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.

Page 17: Html5 - Notas de aula

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.

}

Page 18: Html5 - Notas de aula

HTML

Tags básicas: • <a></a>;

• <p></p>;

• <img/>;

• <div></div>

• <table></table>

• <iframe></iframe>

• <br/>

• Etc ...

Page 19: Html5 - Notas de aula

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.

Page 20: Html5 - Notas de aula

XHTML

Page 21: Html5 - Notas de aula

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.

Page 22: Html5 - Notas de aula

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">

Page 23: Html5 - Notas de aula

HTML5

<div id=“header”>

<div id=“nav”>

<div id=“footer”>

<div id=“sidebar”>

<div class=“section”>

<div class=“article”>

Page 24: Html5 - Notas de aula

HTML5

<header>

<nav>

<footer>

<aside>

<section>

<article>

Page 25: Html5 - Notas de aula

<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

Page 26: Html5 - Notas de aula

<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

Page 27: Html5 - Notas de aula

<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

Page 28: Html5 - Notas de aula

<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

Page 29: Html5 - Notas de aula

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

Page 30: Html5 - Notas de aula

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

Page 31: Html5 - Notas de aula

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, thead 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

Page 32: Html5 - Notas de aula

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

Page 33: Html5 - Notas de aula

Elementos removidos

<frame> <frameset> <noframes>

Fere princípios de acessibilidade;

<basefont>,<big>,<center>,<font>,<s>,<strike>,<tt><u>

Efeito somente visual;

HTML5

Page 34: Html5 - Notas de aula

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

Page 35: Html5 - Notas de aula

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

Page 36: Html5 - Notas de aula

HTML5

Suporte dos Browsers

http://html5test.com/

Page 37: Html5 - Notas de aula

HTML5

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

Page 38: Html5 - Notas de aula

HTML5

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

Page 39: Html5 - Notas de aula

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.

Page 40: Html5 - Notas de aula

HTML5

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

Page 41: Html5 - Notas de aula

HTML5

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

Page 42: Html5 - Notas de aula

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

Page 43: Html5 - Notas de aula

HTML5

Number

Page 44: Html5 - Notas de aula

HTML5

Range

Page 45: Html5 - Notas de aula

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

Page 46: Html5 - Notas de aula

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"/>

Page 47: Html5 - Notas de aula

HTML5

Page 48: Html5 - Notas de aula

HTML5

Page 49: Html5 - Notas de aula

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:

Page 50: Html5 - Notas de aula

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)

Page 51: Html5 - Notas de aula

HTML5

Page 52: Html5 - Notas de aula

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.

Page 53: Html5 - Notas de aula

Midias com HTML5

http://slides.html5rocks.com/#video-audio

Page 54: Html5 - Notas de aula

HTML5

Todos os recursos:

http://slides.html5rocks.com/#slide21