Assinar Feed Assinantes

Seguir no Twitter Seguidores

Artigos publicados Artigos

Comentários recebidos Comentários

Pages

Introdução ao HTML5

As diferenças entre HTML4 e HTML5 não são muitas, mas há algumas que são importantes e que convém referir, confira!

Trabalhar num escritório móvel...idéia que pode ser bem legal!

Nos ultimos meses venho me acostumando com a idéia de desenvolver projetos freelancer e sinceramente venho gostando muito. Digo a vocês porque...

O outro lado dos sites de compra coletiva

A oferta parece tentadora, o desconto é maior que 60%, o gerente deve ter enlouquecido. Uma mamata que pode sair caro...

10 razões para sua empresa ter um Site

Este artigo tenta resumir os melhores argumentos para explicar o potencial da Internet para qualquer empresa, seja grande, média, pequena ou até uma micro empresa...

De quanto em quanto tempo deve-se redesenhar um site?

A Globo.com estreou no último dia 30 de agosto de 2007 sua décima home em dez anos. Não estamos falando de pequenos ajustes e sim de reformulações completas...

sábado, 12 de março de 2011

Introdução ao HTML5

A linguagem HTML5 ainda não está na sua versão final, mas a cada dia que passa mais e mais websites começam a usá-la. A linguagem aproxima-se dos requisitos da Web e torna-se mais fácil publicar conteúdos Web 2.0. Quando HTML4 reinava, a Web2.0 nem sequer tinha sido pensada, sendo assim pouco compatíveis. Mas com HTML5, é expectável que seja diferente.
Embora seja previsível que quando HTML5 chegar à sua versão final, já exista Web 3.0, 4.0 ou quem sabe até mais, criando assim a necessidade de um update ao HTML5. As diferenças entre HTML4 e HTML5 não são muitas, mas há algumas que são importantes e que convém referir, confira em baixo!


SINTAXE SIMPLIFICADA
Esta é uma das diferenças mais notáveis entre HTML4 e HTML5, e que certamente irá fazer as delicias dos programadores Web. A sintaxe HTML5 é compatível com HTML4 mas há bastantes melhorias. A declaração doctype é muito mais curta (“<!doctype html>” ao invés de por ex. “<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>” ).
Variações de doctypes já não são suportadas, é necessário sintaxe XHTML ou HTML em modo restrito.

NOVOS ELEMENTOS
Os novos elementos em HTML5 é a diferença mais notável, têm como propósito a simplificar o desenvolvimento do website, aproximar dos requisitos Web2.0, entre outros de entre uma lista enorme que pode ser consultada aqui.
Deixo agora alguns elementos aqui descritos:
§  <article> – Este atributo é usado para separar artigos, posts de blogs e outro conteúdo de texto. Com a crescente comunidade de bloggers e artigos de opinião, este elemento é certamente muito útil.
§  <header> e <footer> – Estes elementos são usados para o cabeçalho e rodapé da página e podem substituir os elementos <div> que usamos hoje para identificar vários elementos, incluindo o cabeçalho e rodapé. Uma vez que cabeçalho e rodapé estão presentes em quase todas as páginas, faz sentido que agora tenham um elemento só seu.
§  <nav> – Semelhente ao <header> e <footer>, na medida em que foi criado para dar um elemento à navegação de página.
§  <audio> e <video> – O conteúdo áudio e vídeo é tão comum de hoje em dia, alavancado pelas ligações à internet de alta velocidade, que era impossível não ter estes elementos disponíveis em HTML5, para facilitar a colocação destes conteúdos no website.
Além dos novos elementos introduzidos, foram também introduzidos novos atributos a elementos já existentes, mas a lista é ainda maior do que a lista dos elementos! De qualquer forma, antes de começar a programar em HTML5, dê uma olhadela na nova lista de atributos para elementos que usa freqüentemente.
ELEMENTOS E ATRIBUTOS MODIFICADOS
Alguns dos atributos fundamentais de HTML como <a>, <b> ou <i> foram modificados. Poderá levar algum tempo e esforço até redecorar os novos significados. Deixo-lhe aqui algumas mudanças dignas de serem referenciadas:
§  <a> – Quando o elemento <a> é usado sem o atributo <href>, torna-se num link.
§  <b> – A nova função do elemento <b> ficou um bocadinho vaga. Não é negrito, mas continua a ser uma maneira de fazer sobressair texto. Pode ser usado por exemplo para palavras chave.
§  <hr> – O elemento <hr> agora é um novo tipo de quebra de linha, associado a quebra de parágrafo.
§  <i> – Diferencia texto, embora o seu uso seja diverso. Pode usar para nomes, termos técnicos ou mesmo idiomas. Isto é um pouco vago, pois se continuar a usar <b> e <i> da maneira que usava antes, será um erro. Se pretende ter negrito e texto itálico, será melhor opção meter na folha de estilos. Não chamaria conveniente a esta alteração, mas uma vez que lá está, teremos de nos habituar a ela. Talvez para SEO seja mais útil,pois é uma maneira de fazer sobressair texto sem usar negrito e itálico. Os elementos <mark> e <em> também podem ser usados para fazer sobressair texto.

ELEMENTOS E ATRIBUTOS ELIMINADOS
Além de novos elementos e atributos, também alguns destes foram apagados. Embora muitos deles não venham a fazer falta, porque muito raramente eram utilizados, alguns podiam ter ficado.
§  O primeiro grupo de elementos que foram utilizados e que serão melhor utilizados através de CSS são o <center>, <big> e <u>. Agora o seu lugar é na folha de estilos.
§  O segundo grupo tem a ver com as frames, <frame>, <frameset> e <noframes> eram tão antiquados que foi um alívio terem sido eliminados. Quando foram lançados, seriam espetaculares… mas com a evolução rapidamente passaram a antiquados.
§  O terceiro grupo pende em elementos raramente utilizados, que é o caso do <isindex>, <dir>, <applet> e <acronym>.
Como pode constatar, há de fato algumas diferenças entre o HTML5 e o HTML4, mas elas não são diferenças muito profundas. Quero com isto dizer que não terá de reaprender HTML da estaca zero. De qualquer das formas irá levar o seu tempo até se habituar ás novas regras, nomeadamente no que toca aos atributos e elementos alterados. A boa notícia é que o HTML5 veio para simplificar, e isto é o suficiente para justificar a atualização.
Ainda assim, deixamos uma relação das novas tags HTML5, as quais vêm mudar um pouco o contexto do novo HTML5, tome nota:
§  article: Bloco de artigo
§  aside: Conteúdo extra q tenha a ver com o site / artigo
§  audio: Conteúdo de som
§  canvas: Gráfico vetorial
§  command: Botão de comando
§  datagrid: Dados em uma lista ramificada
§  datalist: Lista dropdown
§  datatemplate: Template de dados
§  details: Detalhes de um elemento
§  dialog: Diálogo de uma conversa
§  embed: Interatividade com conteúdo externo ou um plugin (até que fim foi especificado!)
§  event-source: Alvo para eventos enviados por um servidor
§  figure: Grupo de conteúdo de mídia e sua legenda
§  footer: Bloco de rodapé
§  header: Bloco de cabeçalho
§  mark: Tag para marcação em textos
§  meter: Medição entre um valor mínimo e um valor máximo
§  nav: Bloco de navegação
§  nest: Próximo ponto para criação de elemento (trabalha junto com a tag datatemplate e rule)
§  output: Alguns tipos de saída de dados como em execução de scripts
§  progress: Progresso de uma tarefa de qualquer tipo
§  rule: Linha de um template (datatemplate)
§  selection: Seção do documento como capítulos ou alguma outra seção do documento
§  source: Recurso multimídia
§  time: Data / tempo
§  video: Um vídeo

Caso tenham alguma sugestão ou lembrem de algo importante que esqueci de mencionar, deixem um comentário. Afinal de contas o Blog Atrativa é feito pra vocês. Então sintam-se em ksa ;)

Twitter Delicious Facebook Digg Stumbleupon Favorites More