• Comunicação Visual

sexta-feira, 3 de fevereiro de 2012

Retirados do HTML5

3- Conhecendo os elementos retirados do HTML5


Tão importante quanto saber o que tem de novo, é saber o que tem de ultrapassado.

Elementos retirados pois seu uso dificultava a usabilidade e acessibilidade para o internauta.
  • frame
  • frameset
  • noframes

Elementos retirados por terem uso raro, criarem confusão e poderem ser satisfatoriamente tratados por outros elementos:
  • acronym - Use abbr para siglas e abreviações.
  • applet - Use object.
  • isindex - pode ser substituído pelo uso de controles de formulário.
  • dir - use ul.

Elementos retirados por terem feito puramente de apresentação. Agora se usa CSS para controlar a apesentação do conteúdo.
  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u

4- Conhecendo os atributos retirados do HTML5

A lista do que está obsoleto, do que não usar, até agora está pequena, mas vai crescer bastante quando eu colocar a lista de atributos obsoletos.

Calma! Não se desespere. Não é difícil. A maioria é intuitivo.


Observe que a lista de elementos obsoletos teve 15 itens. Frame, frameset, noframes, acronym , applet , isindex , dir , basefont, big, center , font , s , strike, tt e u .
Desses 15, 4 você já não usava mesmo, né?! Eu, pelo menos, nunca usei: acronym, applet, isindex e dir.
E, do restante, a maioria foi retirado pelo mesmo motivo. Antes não tinha CSS e agora tem!
Esse é o “pulo do gato”, a “grande dica”: Você deve controlar a aparência pelo CSS e não pelo HTML. Logo... tudo que for para controle de aparência ficou obsoleto.

Nada melhor q eu exemplo para acabar com qualquer dúvida:
Antes, se a gente queria destacar um pedaço do texto, a gente tinha que usar:



<font size="4" face="verdana" color="red"><u>Texto em destaque</u></font>


Assim o texto apareceria com um tamanho maior (4), com uma fonte diferente (verdana), em vermelho e sublinhado.
Agora não tem mais porque usar nem o elemento font e nem nenhum desses atributos, pois tudo isso vai ser controlado pelo CSS.
Se seguirmos essa lógica, fica muito fácil, pois a lista do que ficou obsoletos diminui muito.

---------------------
Segue uma lista com os atributos obsoletos retirado do Curso de HTML 5 do W3C Escritório Brasil



Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:
• 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, thead 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.
• 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.

Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles serão discutidos.
• rev e charset como atributos da tag link e a.
• shape e coords como atributos da tag a.
• longdesc como atributo da tag img and iframe.
• target como atributo da tag link.
• nohref como atributo da tag area.
• profile como atributo da tag head.
• version como atributo da tag html.
• name como atributo da tag img (use id instead).
• scheme como atributo da tag meta.
• archive, classid, codebase, codetype, declare e standby como atributos da tag object.
• valuetype e type como atributos da tag param.
• axis e abbr como atributos da tag td e th.
• scope como atributo da tag td.

----
Viu como a maioria você vai tirar de letra?
É só lembrar que antes não tinha CSS e agora tem! E tudo que for para controle de aparência ficou obsoleto.
Retirar os que você raramente usa, pois esses, quando você for usar, você vai acabar tendo alguma dúvida e pesquisando. O que a gente quase não usa, a gente esquece. E quando tem que usar, lembra que existe mas acaba pesquisando. “Como é que era isso mesmo?”

Agora a lista ficou pequena né?!

quinta-feira, 2 de fevereiro de 2012

Conhecendo os novos elementos do HTML5

2- Conhecendo os novos elementos do HTML5

Vamos começar por: Header, Section, Article, Nav e footer.

Vou dar uma explicação meio “grosso modo”, só para dar uma visão geral e começar a situar quem nunca viu essas tags.

Foi observado que os sites sempre tinham:
uma div que continha o cabeçalho da página. Geralmente <div class= “header”>
uma div que continha o menu. Geralmente <div class=“menu”>
uma div que continha o conteúdo da página. Geralmente <div class=“content”>
uma div que continha o rodapé da página. Geralmente <div class=“footer”>

Se você, como a maioria, também costuma usar essas divs, vai ser fácil. No lugar da div que continha:
o cabeçalho – use header
o menu – use nav
o conteúdo - use section
os assuntos dentro do conteúdo – use article
o rodapé - use footer

Por exemplo:
- Ao invés de:

<div class=”header”>
<h1> Título da página
<img src=”logo.jpg” >
</div>


Use:


<header>
<h1> Título da página
<img src=”logo.jpg” >
</ header>


Deu para começar a entender essas tags novas e como usa-las?
São tags que definem um grupo, juntam dentro delas elementos afins.


Acho que com uma imagem vai ficar mais fácil.


OBS importante: O uso dessas tags tornam os documentos mais semânticos e influenciam positivamente em SEO.

---------------------
Segue uma lista com os novos elementos retirado do Curso de HTML 5 do W3C Escritório Brasil


section

A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.

nav

O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.

article

O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.

aside

O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.

hgroup

Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis como título com subtítulos e etc.

header

O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.

footer

O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.

time

Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano.


---------------------

terça-feira, 31 de janeiro de 2012

HTML 5 - Introdução e começando pelo começo

HTML5

Quando começar a usar o HTML5? Ontem!!!
Por cautela, muitas vezes demoramos a começar a usar o HTML5. Esperamos que a maioria dos navegadores se adequassem para evitar gastar muito tempo com “recursos” para fazer o site funcionar na maioria dos navegadores. Bom, essa fase já passou. Se você ainda está receoso, perca o medo e se lance, pois o HTML5 veio para ficar e para facilitar.

O que eu preciso saber para começar a usar o HTML5?
Para quem já conhece o HTML, tableless e XHTML vai ser muito fácil. Vou mostrar as duas formas. Comparando o novo com o que se usa comumente.

1- HTML5 - Começando pelo começo.
2- Conhecendo os novos elementos do HTML5
3- Conhecendo os elementos retirados do HTML5
4- Conhecendo os atributos retirados do HTML5
5- Conhecendo os atributos inseridos do HTML5

1- HTML5 - Começando pelo começo.

Vamos criar o nosso primeiro arquivo HTML5.
Exemplo:

<!DOCTYPE html >
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>
<body>
<p>Alô mundo!</p>
</body>
</html>


As diferenças começam no head.
Vamos por partes:
1.1)

<!DOCTYPE html >

Eu não disse q o html5 veio para facilitar?! Sim, é só isso mesmo.

Para quem estava acostumado com:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

ou

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


Facilitou, não?!

1.2)

<meta charset="utf-8">


Ainda pode ser usado como antes:
<meta equiv="Content-Type" content="text/html; charset=utf-8">
Mas é melhor usar a forma nova.

Observe que também pode ser usado em maiúsculas e com aspas. As sintaxes abaixo são igualmente válidas:
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta charset="utf-8">
<meta charset="Utf-8">

“o HTMl não é XML”
- O HTML não é “case sensitive”, logo não faz diferença se as letras aparecerem maiúsculas ou minúsculas . O XML é “case sensitive”. No XML <meta charset="UTF-8"> é diferente de <meta charset="utf-8">.

1.3) Outro detalhe, sobre “o HTMl não é XML” é que no HTML não é necessário a barra ao final de elementos vazios.
Ex.:
Use: <br> ao invés de <br />
Use: <hr> ao invés de <hr />
Use: <img src="ex.jpg" alt="exemplo" /> ao invés de <img src="ex.jpg" alt="exemplo" />

Logo, também são sintaxes igualmente válidas:
<meta charset="utf-8">
<meta charset="utf-8">

Se você está acostumado a colocar barra no fim, como nos exemplos acima, não se preocupe. Vai funcionar mesmo com a barra, mas procure ir se acostumando a não coloca-la.

1.4) Use o atributo LANG

<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>


Lembre-se que você não só pode como deve usar atributo LANG em outras tags para indicar a mudança no idioma do texto. Por exemplo:

<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>O amor é lindo!</title>
</head>
<body>
<h1>Eu estou apaixonada!!!! rs</h1>

<span lang="es">Yo te amo</span>


<p lang="fr">Je t'aime</p>


<em lang="it">Io ti amo</em>


<p lang="de">Ich liebe dich</p>
<strong lang="en">I love you.</strong>
<p>Resumindo... O amor é lindo!</p>


</body>
</html>


Amanhã continuamos... É uma série.rs

Mais um site de dentista - Mas agora foi para fazer SEO

Esse não foi uma site criado e desenvolvido por mim. O layout foi pouco alterado. Na prática, reescrevi o site todo, para otimiza-los para mecanismos de busca.

Quando escrevi o artigo sobre SEO falei por exemplo da importancia de usar as tags de Título (h1, h2...) Esse é um site que não tinha um título sequer. Tudo era div. Tinha div class="titulo1" por exemplo. Mas nenhum h1, h2, h3... Claro que isso prejudicava o site em sua indexação nos mecanismos de busca. Foi uma das coisas que tive que alterar.

Muita coisa foi acrescida no conteúdo. E em alguns pontos o layout teve q ser alterado.

Essa imagem mostra a página do consultório com suas tecnologias. Um esquema usando jQuery proporcionou uma apresentação melhor do conteúdo.



A página mostrada abaixo é uma exemplo das páginas de vídeo que foram acrescidas, pois antes, quando o internauta clicava em um vídeo, ele era redirecionado a uma página no youtube. Ora, isso é algo que se deve evitar, pois o youtube é um "mundo". As chances do internauta se interessar por outro vídeo de lá e não retornar ao site são enormes. Ou seja, cada vídeo era uma porta de saída do site. Por isso foram criadas uma página para cada vídeo. Assim o internauta não sai do site. E mais, em cada página foram colocados links para outros vídeos e assuntos no site, estimulando a navegação e permanencia no site. Isso também são estratégias de SEO. Perceber portas de saída, evita-las ou corrigi-las. Procurar manter e incentivar a navegação interna no site.

terça-feira, 8 de novembro de 2011

Outro site de dentista

Desenvolvido para a dentista Isabelle Perlucio, de quem também fiz a marca e a papelaria.

O site apresenta bons resultados em buscas orgânicas, não só pelo nome da dentista, bem como em buscas mais genéricas como por exemplo: "dentista na Ilha do Govenador".

terça-feira, 25 de outubro de 2011

Site de dentista

Novo site da Dentista Cristiane Cunha.
Com menos de um mês já estava indexando super bem. Chegando a alcançar a primeira página em buscas no google por combinações de palavras como "dentista em botafogo".
Visitar o site

quarta-feira, 19 de outubro de 2011