• 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.


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