Category Archives: HTML5

#04 – HTML5 – Básico – MetaTags

Um pouco de teoria! – Web Apps! (Conceitos & Utilização)

Saga: M&M (Mundo Mobile)

O que é?

MetaTags representam estruturas de informações que descrevem características de uma fonte de informação. Ou seja, elas expõem informações sobre um site para buscas ou aplicações.

Em resumo, metadados são dados sobre dados, informações sobre a própria informação.

Utilização

Os metadados servem para ajudar para informar aos devs ou apps como localizar/descrever informações, melhorando o gerenciamento/uso das nossas informações.

Na prática, as aplicações conseguem fazer um melhor uso/aproveitamento destas informações.

Padrões

Existem vários de padrões para criação de Metadados, mas no universo web, entra em ação as Metatags. Ou seja, tags HTML que permite inserir informações sobre site.

A MetaTag mais simples do mundo

Definidas dentro da tag HEAD do doc HTML:

<meta name="description" content="site.rio - Site sobre Rio Web." />

html5_basico_metatags

Os sistemas de “Search” usam metatags para exibir informações sobre sites nos resultados de busca. Por exemplo, o Google descarta as metatags Keywords, mas utiliza a metatags Description para exibir a descrição de sites nos resultados de sua busca.

Metatags importantes

Description

Informa uma descrição sobre o site. Diga para que serve, o assunto principal.

<meta name="description" content="site.rio - Site sobre Rio Web." />

As busca conseguem indexar em média 250 caracteres desta metatag. Atenção neste limite, ou a sua descrição pode ser exibida pela metade nos resultados de busca.

Keywords

Informa as palavras chaves relativas ao assunto do site.

<meta name="keywords" content="xhtml, ajax, javascript, c#">

Existem CMS e sistema de blog (tipo WordPress) onde é importante realizar um estudo para inserir as tags dos posts nestas metatags.

Robots

Informa para os robôs de busca o que eles irão e não indexar no site.

Muito utilizada para páginas que não desejamos que o sistema de busca faça a indexação.

<meta name="robots" content="valor, valor, valor" />
  • none: robôs ignoram a página. Equivale ao noindex e nofollow
  • noindex: não indexa a page pela busca
  • nofollow: impede os robôs que sigam os links da page
  • noimageindex: impede indexar imagens (Isso não inclui os textos)
  • noimageclick: ignora links colocados diretamente em imgs
  • all: sem restrições de indexação
  • index: permite aos robôs incluir esta página nas buscas
  • follow: robôs podem seguir os links da page para localizar outras pages

Language

Informa a linguagem da página.

<meta name="language" content="pt-br" />

Author

Informa os autores do site.

<meta name="author" content="Aldo" />

Pragma

Informa que o browser não deve cachear a página.

<meta http-equiv="pragma" content="no-cache" />

HTTP-EQUIV e NAME (Diferença)

Quando o um link é clicado, o servidor recebe um request do browser via protocolo HTTP (regras que determinam o diálogo entre cliente/server).

O Server “fala” retornará várias repostas ao browser (este exibirá na tela o que o server mandar).

A metatag HTTP-EQUIV, permite controlar alguns destes comandos, como o cacheamento da página ou redirecionamento para outro endereço.

Já as metatags NAME não irá utilizar este tipo de conversa. Eles ficam responsáveis apenas em passar informações sobre o site para sistemas ou apps (como sistemas de busca).

Definir muitas metatags?

Utilize somente as metatags realmente úteis para o seu objetivo.

No WordPress, existem plugins que auxiliam na publicação de metatags.

Então é isso treine bastante, e foco no HTML5.

Ok! Um pouco sobre as FEATURES do HTML5.

HTML5 – APIs – Intro

Chega de teoria! #1 – As APIs do HTML5

Saga M&M (Mundo Mobile)

Vamos conhecer agora um pouco sobre o HTML5 e suas “features” projetadas para nos ajudar no desenvolvimento de nossos webapps. Vamos lá:

HTML5 e suas APIs

O HTML5 não se resume somente em uma linguagem de marcação, mas de um poderoso “set” de recursos encapsulados em APIs e acessíveis via JS. Porém, algumas destas APIs não fazem parte do core HTML5.

Em resumo, o HTML5 é uma tecnologia web que potencializa/agrega recursos, novas APIs e tecnologias adjacentes.

Padronização W3C

Algumas APIs podem ter o status de em processo de padronização W3C, ou seja, não fazem parte da especificação do HTML5. Elas são especificações relacionadas não intrínsecas ao HTML5, isso significa que, a sua utilização não fica estritamente atrelada ao uso da linguagem. Algumas, inclusive, já participaram do core HTML5, mas agora estão dissociadas e mantém a sua especificação separada, como o Web Storage.

Novas APIs

Algumas novas APIs contidas na especificação HTML5:

  1. Validação de forms
  2. Canvas
  3. Controles de áudio e vídeo
  4. App cache / offline Apps
  5. Markup editável (contenteditable)
  6. Drag and drop
  7. Manipulação do histórico do browser

As APIs próprias do HTML5 são mais específicas para tratar as funcionalidades que atuam no escopo da página e na manipulação de elementos. Na maioria dos casos elas se relacionam com o DOM.

Em relação as outras APIs, elas geralmente tratam funcionalidades mais complexas, como armazenamento de dados e manipulação de arquivos.

WHATWG e W3C

Algumas novas APIs desenvolvidas em conjunto (WHATWG/W3C) e trabalham bem com HTML5, mas que não são (mais) exclusivas dele:

  1. Web Storage (localStorage e sessionStorage)
  2. Web messaging
  3. Microdata
  4. Web Workers
  5. Web Sockets

Outras Especificações

Especificações não desenvolvidas pelo WHATWG, mas possuem especificações publicadas separadamente pelo W3C:

  1. Geolocation
  2. File API
  3. Indexed DB
  4. File Writer
  5. Notifications

HTML5 e as APIs relacionadas

O gráfico exibe uma visão macro do contexto e do relacionamento entre as novas APIs e o HTML5. O gráfico também exibe o status de desenvolvimento de cada uma das especificações. Note que Web Storage ainda está incluído junto à especificação do HTML5, mas isto já mudou.

html5_apis

Esse gráfico resume, apps que utilizam estas novas possibilidades do HTML5, estamos nos referindo à uma poderosa geração de tecnologias desenhada para a web.

Conclusão, o HTML5 sozinho, não tornou a web melhor. Porém, ajudou a potencializar este mercado rumo ao desenvolvimento de apps inteligentes. Este novo cenário representa que temos em nossas mãos, um arsenal de tecnologias web que, em conjunto, tornam a web melhor, na visão de devs e consequentemente dos seus usuário.

Então é isso treine bastante, e fiquei familiarizado com estes novos recursos.

Ok! Um pouco sobre as FEATURES do HTML5.