SlideShare uma empresa Scribd logo
N O T A S D E A U L A
M A R Ç O / 2 0 1 3
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
 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.
 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
 W3C - World Wide Web Consortium
Padrões:
 CSS
 DOM(JavaScript)
 XML
 XHTML 1.0
Web Standards
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
 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
O HTML5 e suas mudanças
 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
Motores de Renderização
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
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]-->
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/
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/
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.
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.
}
HTML
Tags básicas:
• <a></a>;
• <p></p>;
• <img/>;
• <div></div>
• <table></table>
• <iframe></iframe>
• <br/>
• Etc ...
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.
XHTML
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.
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">
HTML5
<div id=“header”>
<div
id=“nav”>
<div id=“footer”>
<div
id=“sidebar”>
<div class=“section”>
<div class=“article”>
HTML5
<header>
<nav>
<footer>
<aside>
<section>
<article>
<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
<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
<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
<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
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
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
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
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
Elementos removidos
<frame> <frameset> <noframes>
 Fere princípios de acessibilidade;
<basefont>,<big>,<center>,<font>,<s>,<strike>,<tt>
<u>
 Efeito somente visual;
HTML5
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
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
HTML5
Suporte dos Browsers
http://html5test.com/
HTML5
http://slides.html5rocks.com/#semantic-tags-1
HTML5
http://slides.html5rocks.com/#semantic-tags-2
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.
HTML5
http://slides.html5rocks.com/#link-relations
HTML5
http://slides.html5rocks.com/#new-form-types
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
HTML5
Number
HTML5
Range
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
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"/>
HTML5
HTML5
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:
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)
HTML5
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.
Midias com HTML5
http://slides.html5rocks.com/#video-audio
HTML5
Todos os recursos:
 http://slides.html5rocks.com/#slide21

Mais conteúdo relacionado

Mais procurados

HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
ondazul
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
Devmedia
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Fábio Flatschart
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
HTML5
HTML5HTML5
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Dra. Camila Hamdan
 
Html Básico
Html BásicoHtml Básico
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
Léo Dias
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
Faculdade São Lucas
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
hellequin
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
rommelweb
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
André Luís
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
Fábio Costa
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
Sergio Finamore
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
marioreis
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
Sedu
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
Leandro Santos
 

Mais procurados (20)

HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
HTML5
HTML5HTML5
HTML5
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 

Destaque

HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
Fábio Flatschart
 
Death To Paper Drupal Fresno
Death To Paper Drupal FresnoDeath To Paper Drupal Fresno
Death To Paper Drupal Fresno
Bob Kepford
 
S Ta R Chart
S Ta R ChartS Ta R Chart
S Ta R Chart
balangston
 
Design de Interação - Parte 2
Design de Interação - Parte 2Design de Interação - Parte 2
Design de Interação - Parte 2
Flavia Siqueira
 
Gestao por processos
Gestao por processosGestao por processos
Gestao por processos
rommelweb
 
De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...
De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...
De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...
Lorena Lopez
 
Introdução ao Sencha por Flávia Siqueira
Introdução ao Sencha por Flávia SiqueiraIntrodução ao Sencha por Flávia Siqueira
Introdução ao Sencha por Flávia Siqueira
Flavia Siqueira
 
'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais
'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais
'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais
Maíra Bianchini
 
Sistema PGLP básico
Sistema PGLP básicoSistema PGLP básico
Sistema PGLP básico
Larissa Pereira Mayer
 
Marketing online
Marketing onlineMarketing online
Marketing online
Fábio Pessoa
 
Exposiçao: Kandinsky - Tudo começa num ponto
Exposiçao: Kandinsky - Tudo começa num pontoExposiçao: Kandinsky - Tudo começa num ponto
Exposiçao: Kandinsky - Tudo começa num ponto
Fabiana Motroni
 
Apresentação paredes
Apresentação paredesApresentação paredes
Apresentação paredes
Paredes Produções Artísticas
 
Bebê Clínica
Bebê ClínicaBebê Clínica
Bebê Clínica
Wellington Gonçalves
 
Pesquisa E Life Inpress
Pesquisa E Life InpressPesquisa E Life Inpress
Pesquisa E Life Inpress
Marcela Panhota
 
Apresentação WAW - agosto
Apresentação WAW - agostoApresentação WAW - agosto
Apresentação WAW - agosto
Bianca Furtado
 
Fotografias Oscar Freire e Conjunto Nacional
Fotografias Oscar Freire e Conjunto NacionalFotografias Oscar Freire e Conjunto Nacional
Fotografias Oscar Freire e Conjunto Nacional
Jeferson L. Feuser
 
Revista pro news 153
Revista pro news 153Revista pro news 153
Revista pro news 153
Rogério Angelim
 
Apresentação Exa Multimídia
Apresentação Exa MultimídiaApresentação Exa Multimídia
Apresentação Exa Multimídia
Exa Multimídia
 
Why the coo should lead social media customer service
Why the coo should lead social media customer serviceWhy the coo should lead social media customer service
Why the coo should lead social media customer service
Rafael . Vieira
 
Waw rj 2012
Waw   rj 2012Waw   rj 2012
Waw rj 2012
Ruy Carneiro
 

Destaque (20)

HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Death To Paper Drupal Fresno
Death To Paper Drupal FresnoDeath To Paper Drupal Fresno
Death To Paper Drupal Fresno
 
S Ta R Chart
S Ta R ChartS Ta R Chart
S Ta R Chart
 
Design de Interação - Parte 2
Design de Interação - Parte 2Design de Interação - Parte 2
Design de Interação - Parte 2
 
Gestao por processos
Gestao por processosGestao por processos
Gestao por processos
 
De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...
De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...
De la biblioteca tradicional a la biblioteca 2.0”: el uso de herramientas soc...
 
Introdução ao Sencha por Flávia Siqueira
Introdução ao Sencha por Flávia SiqueiraIntrodução ao Sencha por Flávia Siqueira
Introdução ao Sencha por Flávia Siqueira
 
'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais
'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais
'Não é TV' - Estratégias Comunicacionais da HBO no Contexto das Redes Digitais
 
Sistema PGLP básico
Sistema PGLP básicoSistema PGLP básico
Sistema PGLP básico
 
Marketing online
Marketing onlineMarketing online
Marketing online
 
Exposiçao: Kandinsky - Tudo começa num ponto
Exposiçao: Kandinsky - Tudo começa num pontoExposiçao: Kandinsky - Tudo começa num ponto
Exposiçao: Kandinsky - Tudo começa num ponto
 
Apresentação paredes
Apresentação paredesApresentação paredes
Apresentação paredes
 
Bebê Clínica
Bebê ClínicaBebê Clínica
Bebê Clínica
 
Pesquisa E Life Inpress
Pesquisa E Life InpressPesquisa E Life Inpress
Pesquisa E Life Inpress
 
Apresentação WAW - agosto
Apresentação WAW - agostoApresentação WAW - agosto
Apresentação WAW - agosto
 
Fotografias Oscar Freire e Conjunto Nacional
Fotografias Oscar Freire e Conjunto NacionalFotografias Oscar Freire e Conjunto Nacional
Fotografias Oscar Freire e Conjunto Nacional
 
Revista pro news 153
Revista pro news 153Revista pro news 153
Revista pro news 153
 
Apresentação Exa Multimídia
Apresentação Exa MultimídiaApresentação Exa Multimídia
Apresentação Exa Multimídia
 
Why the coo should lead social media customer service
Why the coo should lead social media customer serviceWhy the coo should lead social media customer service
Why the coo should lead social media customer service
 
Waw rj 2012
Waw   rj 2012Waw   rj 2012
Waw rj 2012
 

Semelhante a Html5 - Notas de aula

HTML5
HTML5HTML5
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
HTML5
HTML5HTML5
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
info_cimol
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
Fábio Flatschart
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Html
HtmlHtml
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
Adagenor Ribeiro
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
Mércia Regina da Silva
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
fernandamota929941
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Marcelo Mattos
 
Html5
Html5Html5
Seminario html5
Seminario html5Seminario html5
Seminario html5
Wérmeson Da Silva Lopes
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
Clécio Bachini
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
Rodrigo Kono
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
Ana Carolina Gracioso
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 

Semelhante a Html5 - Notas de aula (20)

HTML5
HTML5HTML5
HTML5
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
HTML5
HTML5HTML5
HTML5
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Html
HtmlHtml
Html
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
Html5
Html5Html5
Html5
 
Seminario html5
Seminario html5Seminario html5
Seminario html5
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 

Html5 - Notas de aula

  • 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
  • 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">
  • 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
  • 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.
  • 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
  • 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.
  • 54. HTML5 Todos os recursos:  http://slides.html5rocks.com/#slide21