Arquivo da categoria: HTML 5

O que muda com o HTML 5?

Há algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que o profissional deverá apresentar na criação de um website.

Você desenvolvedor web, antenado, com certeza vem acompanhando a evolução, as críticas, as observações, os elogios e, claro, os tutoriais para entender um pouco mais do que efetivamente significa esta versão “5” do HTML.
Já você desenvolvedor, que limita-se a saber que uma nova versão está a caminho, talvez ainda não tenha tido a chance de conhecer quais serão essas importantes mudanças e o que trarão de novo para as bases do desenvolvimento web.

Aproveitando esta lacuna de compreensão do assunto procuro explanar, abaixo, sobre algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que este profissional deverá apresentar na criação de um website.

HTML 5

HTML 5

Lendo um “guia de aprendizado rápido para HTML5”, em meio à tantas outras informações que recebo todos os dias a respeito (desde jogos à músicas), percebi que além das diversas sinalizações quanto à nova estrutura que os códigos html vão apresentar, vai ficar cada vez mais claro que o trabalho do Htmler ou Front-End Engineer estará diretamente ligado à arquitetura de exibição de informação, já que no HTML5 vamos agrupar as informações de acordo com a sua relevância tanto para o usuário, quanto para os mecanismos de busca.

Aproveitando, deixo a primeira dica: este processo vai exigir que seja realizado um estudo sobre a importância e a hierarquia das informações e como elas devem ser exibidas no site, por isso caro desenvolvedor, ampliar seu leque para conhecer o gigante mundo da arquitetura de informação para websites, pode ser um grande diferencial em seu currículo.

Além disso, conhecer um pouco melhor o conteúdo do site, sem limitar-se à ao “Loren Ipsun” no HTML5, auxiliará na construção da semântica do código e numa comunicação mais direta com os mecanismos de busca, como por exemplo, conseguir perceber mais claramente se numa lista usaremos os tipos UL, OL ou DL, levando em consideração principalmente a ordenação e subordinação das informações na tela e na leitura dos mecanismos.

Talvez caro leitor, você esteja pensando: “mas hoje, isso já é possível e deve ser feito” então, lhe explico o porque de ressaltar a importância de um cuidado com a semântica da informação nos websites:  infelizmente muitos desenvolvedores limitam-se a conhecer apenas o uso de DIV’s em substituição às tabelas, afim de resolver “problemas” de diagramação de imagens e textos quando feito o cross-browsers, bem como ignoram qualquer estrutura hierárquica que a informação exibida possa ter no site, e com o HTML5,  isso não poderá mais ser ignorado assim
como as incompatibilidades entre browers, também devem diminuir.

Em termos técnicos no html5, teremos a tag <header> que poderá ser utilizada para toda informação introdutória ou elementos de auxílio a navegação como H1, H2, etc;  a tag <nav> para utilizar em estruturas que representem a navegação do site, como os menus; as tags <section> para as secções da página;  as tags <article> que vão representar uma parte do conteúdo como notícias ou novos posts de um blog;  as tags <aside> que vão representar um grupo de conteúdo com pouca relação ao conteúdo principal, mas de considerável relevância para estar presente na página – neste caso, o exemplo que podemos citar são os sidebar’s com banners ou informações de atendimento à clientes ao lado do conteúdo principal e por fim e não menos importante, as tags <footer> que utilizaremos para informações de rodapé do site – assinaturas, endereços, copyright, etc.

Percebe? Teremos que nos familiarizar muito mais com a estratégia comunicacional do site, através das informações textuais e visuais, do que costumamos fazer nos projetos de hoje para que a construção dos nossos códigos, dentro da nova versão, tragam ainda mais benefícios de usabilidade e acessibilidade ao site. Sem contar claro, com o fato de poder alterar a posição do seu site nos resultados de busca orgânica, através da clareza na exposição das informações e na linearidade de comunicação entre seu código e o robô de resultados.

Enfim, teremos muito a aprender e muito a compartilhar com os designers de interfaces e arquitetos de informação, mas acima de tudo, vejo como uma situação positiva aos htmler’s, afinal estaremos participando ainda mais da concepção dos projetos como um todo e tendo a chance de desenvolver um trabalho muito mais direcionado e minucioso, valorizando a posição e a existência de profissionais Front-End nas empresas e agências de soluções web.

Fonte: tableless.com.br

Deixe um comentário

Arquivado em HTML 5

Modelos de conteúdo no HTML5

Este texto faz parte do capítulo 4 da apostila e guia de referência de HTML5.

Há pequenas regras básicas que nós já conhecemos e que estão no HTML desde o início. Estas regras definem onde os elementos podem ou não estar. Se eles podem ser filhos ou pais de outros elementos e quais os seus comportamentos.

Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos: elementos de linha e de bloco.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a, strong, em, img, input, abbr, span.

Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout.

Abaixo segue algumas premissas que você precisa relembrar e conhecer:

  • Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label.
  • Os elementos de linha nunca podem conter elementos de bloco.
  • Elementos de bloco sempre podem conter elementos de linha.
  • Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível.

Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de conteúdo o elemento trabalha e como pode ser seu comportamento.

Categorias

Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias estão a seguir. Manteremos os nomes das categorias em inglês para que haja um melhor entendimento:

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

Abaixo segue como as categorias estão relacionadas de acordo com o WHATWG:

Sectioning content, heading content, phrasing content, and<br />   embedded content are all types of flow content. Embedded content is<br />   also a type of phrasing content.

Metadata content

Os elementos que compõe a categoria Metadata são:

  • base
  • command
  • link
  • meta
  • noscript
  • script
  • style
  • title

Este conteúdo vem antes da apresentação, formando uma relação com o documento e seu conteúdo com outros documentos que distribuem informação por outros meios.

Flow content

A maioria dos elementos utilizados no body e aplicações são categorizados como Flow Content. São eles:

  • a
  • abbr
  • address
  • area (se for um decendente de um elemento de mapa)
  • article
  • aside
  • audio
  • b
  • bdo
  • blockquote
  • br
  • button
  • canvas
  • cite
  • code
  • command
  • datalist
  • del
  • details
  • dfn
  • div
  • dl
  • em
  • embed
  • fieldset
  • figure
  • footer
  • form
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • header
  • hgroup
  • hr
  • i
  • iframe
  • img
  • input
  • ins
  • kbd
  • keygen
  • label
  • link (Se o atributo itemprop for utilizado)
  • map
  • mark
  • math
  • menu
  • meta (Se o atributo itemprop for utilizado)
  • meter
  • nav
  • noscript
  • object
  • ol
  • output
  • p
  • pre
  • progress
  • q
  • ruby
  • samp
  • script
  • section
  • select
  • small
  • span
  • strong
  • style (Se o atributo scoped for utilizado)
  • sub
  • sup
  • svg
  • table
  • textarea
  • time
  • ul
  • var
  • video
  • wbr
  • Text

Por via de regra, elementos que seu modelo de conteúdo permitem inserir qualquer elemento que se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento descendente que faça parte da categoria embedded.

Fonte: http://www.tableless.com.br

Deixe um comentário

Arquivado em HTML 5

Apostila sobre HTML 5

Apostila construída pela equipe Visie com todo o conteúdo abordado no curso dirigido pelo W3C. Essa apostila será publicada sob Creative Commons no site Tableless.

Html 5

Html 5

Ela ficará em processo de constante atualização já que muitos pontos do HTML5 não foram ainda definidos e também porque diversas outras características estão sendo planejadas e rascunhadas ainda.

O legal é que todos nós poderemos interagir e unir esforços para ajudar na atualização dela.

Visualize e navegue pela apostila “Um guia de referência para os desenvolvedores web”.

Fonte: http://tableless.com.br/html5/

Deixe um comentário

Arquivado em HTML 5