Category Archives: HTML5

#01 – HTML5 – New Tag – Section 

Chega de teoria! – Web Apps!

Saga: M&M (Mundo Mobile)

Novas features HTML5 projetadas para auxiliar no desenvolvimento de nossos webapp. Vamos lá:

Como sugere o seu nome, a nova tag section representa uma seção na página ou doc.

Index.html

Implementação simples:

<!DOCTYPE HTML>

<html>
<body>

<section>
<h1>HTML5</h1>
My Passion
    </section>

<section>
<h1>JS</h1>
My Passion
    </section>

<section>
<h1>C#</h1>
My Passion
    </section>

</body>
</html>

A tag section define/representa áreas específicas no doc.

Qualquer página pode conter mais de uma seção.

html5_newtag_section

O resultado no chrome.

html_basico_estrutura

Visão do template padrão, comportamento deste elemento dentro do seu contexto.

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

Ok! Um pouco sobre as FEATURES do 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.