Neste post continuarei a falar sobre o
HTML5 e suas novidades em relação a suas versões anteriores, tratando de
assunto como o desenvolvimento modular, motores de Renderização, utilização de Modernizr e muito mais.
O desenvolvimento modular
Antigamente, para que uma nova versão do HTML fosse lançada,
todas as ideias listadas na especificação deveriam ser testadas e desenvolvidas
para então serem publicadas para o uso dos browsers e os desenvolvedores.
Esse método foi mudado com o lançamento do HTML5. A partir de
agora, as duas tecnologias foram divididas em módulos. Isso quer dizer que a
comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar
que todo o padrão seja escrito e publicado para utilizarem as novidades das linguagens.
O ponto negativo nesse formato, é que problemas de
compatibilidade podem ocorrer com mais frequência. Por exemplo, um browser pode
escolher suportar um API diferente do API que o concorrente programou.
Contudo, os browsers tem mostrado grande interesse em se
manterem atualizados em relação aos seus concorrentes.
Motores de Renderização
Há uma grande diversidade de dispositivos que acessam a
internet. Entre eles, há uma série de tablets, smartphones, computadores
pessoais e etc. Cada um destes meios de acesso utiliza um determinado browser
para navegar na web. Contudo não há como os desenvolvedores manterem um bom
nível de compatibilidade com todos estes browsers. Uma solução desenvolvida
pelos browsers foi à criação de Motores de Renderização. Cada browser utiliza
um motor de Renderização que é responsável pelo processamento do código da
página.
Webkit
|
Moz
|
Trident
|
Presto
|
Safari,
Google Chrome
|
Firefox, Mozilla, Camino
|
Internet Explorer 4 ao 9
|
Opera 7 ao 10
|
Compatibilidade com HTML5
Atualmente o Webkit é
o motor mais compatível com os Padrões do HTML5. Como a Apple tem interesse que
seus dispositivos sejam ultra compatíveis com os Padrões, ela tem feito um belo
trabalho de atualização e avanço da compatibilidade deste motor.
Contudo o Firefox e o Opera já estão compatíveis com grande
parte da especificação do HTML5 e a cada atualização eles trazem mais
novidades. Entretanto é bom informar algo que já é de conhecimento dos
programadores web mais antigo. O Internet Explorer apresenta pouca
compatibilidade com as versões com HTML5, contudo a Microsoft vem desenvolvendo
um árduo trabalhado para compatibilizar seu browser, prometendo assim, que a
cada versão lançada seja aumentada o nível de compatibilidade com asa recentes
tecnologias desenvolvidas.
Utilização o Modernizr
Para
aqueles que não conhecem o Modernizr, apresento-lhes ele que é uma biblioteca
de detecção que permite verificar o suporte da maioria das características do
HTML5 e CSS3.
O
Modernizr roda automaticamente assim que você o adiciona no head do documento.
Assim, se você quiser verificar se o browser suporta Geolocalização, por
exemplo, basta inserir o script abaixo no head de sua página.
if (Modernizr.geolocation) {
alert(“Aceita”);
} else {
alert(“Não Aceita”);
}
Estruturas básicas do HTML5
A estrutura básica do HTML5 continua sendo a mesma das versões
anteriores da linguagem há apenas uma exceção na escrita do Doctype. Segue
abaixo como a estrutura básica pode ser seguida:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="estilo.css">
<title></title>
</head>
<body>
<p>Estrutura básica de um HTML</p>
</body>
</html>
O Doctype
O Doctype deve ser a primeira linha de código do documento antes
da tag HTML, cuja função é indicar para o navegador e para outros meios a
especificações que o código ira utilizar.
Em versões anteriores, era necessário referenciar o DTD
diretamente no código do Doctype.
Com o HTML5, a referência por qual DTD utilizar é responsabilidade
do Browser.
<!DOCTYPE html>
Importante:
O Doctype não é uma
tag do HTML, mas uma instrução para que o browser tenha informações sobre qual
versão de código a marcação foi escrita.
O elemento HTML
O código HTML é uma série de elementos em árvore onde alguns
elementos são filhos de outros e assim por diante. O elemento principal dessa
grande árvore é sempre a tag HTML.
<html lang="pt-br">
O atributo LANG é necessário para que os user-agents saibam qual
a linguagem principal do documento.
Lembre-se que o atributo LANG
não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro
elemento para indicar o idioma do texto representado.
HEAD
A Tag HEAD é onde fica toda a parte inteligente da página. No
HEAD ficam os metadados. Ai você pensa que são Metadados? Estes são informações
sobre a página e o conteúdo ali publicado.
Metatag Charset
No exemplo desse post há uma metatag responsável por chavear
qual tabela de caracteres da página.
<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">
Importante:
O HTML5 continua
suportando a forma antiga. Porém, acredito que seja melhor utilizar a nova
forma.
Tag Link
Uma tag utilizada 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.
Para dar continuidade aos posts sobre HTML5, escolha um dos links abaixo:
- HTML5 Parte I - Doctype, Html, head, body
- HTML5 Parte II Atributo Type: tel, search, email, url, number, color
- HTML5 Parte III - Validadores: autofocos, placeholder, required, pattern etc.
- HTML5 Parte IV motores de Renderização, utilização de Modernizr e muito mais.
- HTML5 Parte V - details, summary, Drag and Drop e spellcheck
- HTML5 Parte VI - Audio, Video e Codec.
Bom, espero ter ajudado e tirado algumas de suas duvidas, caso
isso não tenha acontecido é você ainda tenha ficado com duvidas, deixe um
comentário.
“Não basta adquirir sabedoria, é preciso também
usá-la.”
(Cícero)
0 comentários:
Postar um comentário