Na campo do web design e desenvolvimento, estamos rapidamente chegando ao ponto de ser incapaz de prosseguir com as resoluções infinitas e novos dispositivos. Para muitos websites, foi criando uma versão website para cada resolução e novo dispositivo seria impossível, ou pelo menos impraticável. Devemos apenas sofrer as conseqüências de perder visitantes de um dispositivo? Ou existe outra opção?

Responsive Website é a abordagem que sugere onde design e desenvolvimento deve responder ao comportamento do usuário e ambiente baseado na plataforma, tamanho de tela e orientação. A prática consiste em uma mistura de grades flexíveis, layouts, imagens e um uso inteligente de consultas de media CSS. Como o usuário hoje é “portável”, ele sai de seu laptop e vai para iPad, o website deve alternar automaticamente para acomodar o novo tamanho de tela, resolução imagem e habilitar scripts específicos. Em outras palavras, o site deve ter a tecnologia para responder automaticamente a preferências do usuário. Isso eliminaria a necessidade de um design diferente para cada novo dispositivo no mercado.

O Conceito de Responsive Website

“Ethan Marcotte” escreveu um artigo introdutório sobre a abordagem, “Responsive Web Design“, para o “A List Apart”, dando uma noção de design arquitetônico responsável, no qual fala sobre “espaços” que se ajusta automaticamente ao número e fluxo de pessoas dentro dele.

Transpondo esta disciplina para o Design de sites, temos uma idéia similar. Por que deveríamos criar um design web personalizados para cada grupo de usuários; afinal, arquitetos não projetam um edifício para cada tamanho e tipo de pessoas que passes através dela? Como na arquitetura inteligente o site deve se ajustar automaticamente. Não deve requerem incontáveis soluções personalizadas para cada nova categoria de usuários.

Obviamente, não podemos usar sensores de movimento e robótica para realizar isto. Um Design Web “adaptável” exige uma forma mais abstrata de pensar. Entretanto, algumas idéias já estão sendo praticadas: layouts fluido, media queries e scripts que podem reformatar uma página web e fazer um “mark-up” automaticamente.

Mas um Responsive Website não é somente sobre resoluções de tela ajustável e imagens automaticamente redimencionadas, mas sobre uma maneira inteiramente nova de pensar sobre design web. Vamos falar sobre todos esses recursos e os conceitos associados.

Ajustando a Resolução da Tela

Com novos dispositivos no mercado, a variedade de resoluções de tela, definições e orientações são cada vez maiores. Novos dispositivos com novos tamanhos de tela estão sendo desenvolvidos diariamente, e cada um desses dispositivos pode ter variações nas corres, tamanho e funcionalidade. Alguns estão na orientação paisagem, outras em retrato, e outro ainda completamente quadrado. Como sabemos, a partir da crescente popularidade dos smartphones, iPhone e iPad, os novos dispositivos são capazes de mudar de retrato para paisagem no capricho da vontade do usuário. E como fazer um projeto para essas situações?

Além de projetar para ambos, paisagem e retrato, devemos considerar as centenas de diferentes tamanhos de tela. Sim, é possível agrupa-los em categorias principais e fazer cada design ficar tão flexível quanto necessário.

“Morten Hjerde” e alguns de seus colegas identificaram, em estatísticas, que aproximadamente 400 dispositivos vendidos entre 2005 e 2008 usam alguns dos tamanhos abaixo:

Desde então mais dispositivos saíram para o mercado. E é óbvio que não podemos manter/criar soluções personalizadas para cada um deles. Mas como lidamos com a situação?

Parte da Solução: Deixe tudo Flexível

Alguns anos atrás, quando layouts flexíveis eram quase um “luxo” para websites, as únicas coisas que eram flexíveis em um design foram as colunas do layout e o texto. Imagens poderiam facilmente quebrar seu layout, e mesmo tendo uma elementos estruturais flexíveis, quebrava o layout. Designs flexíveis não eram realmente tão flexível; eles poderiam dar ou ocupar algumas centenas pixels, mas eles freqüentemente não poderia ajustar a uma tela de computador grande para uma de netbook.

Agora podemos tornar as coisas mais flexível. Imagens podem ser automaticamente ajustadas, e temos soluções alternativas para o layout não quebrar. Embora não seja uma correção completa, a solução nos dá uma opção. É perfeito para dispositivos que alternam de orientação facilmente (de retrato para paisagem) ou para quando os usuários passam de um computador grande para um iPad.
No artigo de “Ethan Marcotte”, ele criau um “Responsive Website” de demonstração que mostra melhor as características este layout flexível:

O design inteiro é uma mix encantador de grids fluido, imagens fluido e mark-up inteligente onde necessário. Criando grids fluido é razoavelmente é uma prática comum, e há um número de técnicas para criar imagens fluido:

- Escondendo e Revelando Parte de Imagens
- Criando Sliding Composite Images
- Images Foreground escaláveis com o tamanho do layout

Para mais informações sobre criação de websites fluido, recomendo o livro “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” por Zoe Mickley Gillenwater, e baixar o capítulo exemplo “Criando Imagens Flexíveis“, além de uma extensa lista de tutorials, resources e melhores práticas sobre criação de grids flexível e layouts: “Essential Resources for Creating Liquid and Elastic Layouts”
Enquanto que do ponto de vista técnico tudo isso é facilmente possível, mas não se trata apenas de ligar esses recursos e tudo está feito.

Imagens flexível

Um grande problema que precisa ser resolvido com um “Responsive Website” são as imagens. Há uma série de técnicas para redimensionar imagens proporcionalmente, e muitos são facilmente aplicadas. A opção mais popular é usar CSS max-width para um reparo fácil.

img { max-width: 100%; }

Enquanto nenhuma outra regra de largura em imagem for usada para substituir essa, cada imagem será carregada em seu tamanho original, a menos que a área de visualização torna-se menor que a largura original da imagem. A largura máxima da imagem é definido como 100% da tela ou largura do navegador, então quando que 100% torna-se mais estreito, o mesmo acontece com a imagem. Essencialmente, como Jason Grigsby observou: “A idéia por trás imagens de fluidos é fornecer imagens no tamanho máximo que será usado. Você não declarar a altura e a largura em seu código, mas sim você deixa o browser redimensionar as imagens quando necessário ao usar CSS para orientar seu tamanho relativo”. É uma grande técnica e simples para redimensionar imagens.

Note-se que max-width não é suportada no IE, mas um bom uso de width: 100% em um arquivo CSS específico resolveria o problema. Mais uma questão é que quando uma imagem é redimensionada para um espaço menor, em alguns navegadores mais antigos no Windows, a renderização não é tão clara como deveria ser. Mas existe alguns scripts JS quem corrigem este problema.

Sabemos que o tamanho da imagem original é destinado a dispositivos de grande porte. Mas se as imagens forem renderizadas em um dispositivo móvel, o que poderiamos fazer para não impactar significativamente o tempo de download e ocupar um espaço desnecessário?

Imagens Responsável por Grupo

Esta técnica, apresentada por Grupo, leva em consideração não apenas o redimensionamento de imagens proporcionalmente, mas também em diminui a resolução da imagem em dispositivos menores, paras as imagens grandes não desperdiçarem um espaço desnecessário em telas pequenas.

Esta técnica requer alguns arquivos, os quais estão disponíveis no Github. Primeiro, o arquivo JavaScript (rwd-images.js) e o arquivo .htaccess. Então, podemos usar apenas um pouco de HTML para fazer referência tanto a resolução de imagens maiores e menores:

- Primeiro, a imagem pequena e em seguida uma referência para a imagem maior usando o parâmetro “full“.

<img src="smallImg.jpg?full=largeImg.jpg">

O parâmetro “full” definido no arquivo relacionado acima e para qualquer tela que é maior do que 480 pixels, a imagem de maior resolução (largeImg.jpg) será carregado; telas menores não precisariam carregar a imagem maior, e assim a imagem menor (smallImg.jpg) será carregada.

O JavaScript insere no arquivo de imagem um elemento base que permite a página decidir qual a melhor usar para aquela determinada resolução. Quando a página carrega, todos os arquivos são reescritos para sua forma original, e apenas as imagens grandes ou pequenas são carregadas quando necessário. Com outras técnicas, todas as imagens de alta resolução teriam que ser carregados, mesmo que as versões maiores nunca seriam usados. Principalmente para sites com muitas imagens, esta técnica pode economizar muito no consumo de banda e tempo de carregamento.

Esta técnica é totalmente suportado em navegadores modernos, como o IE8+, Safari, Chrome e Opera, bem como os dispositivos móveis que usam esses navegadores mesmo (iPhone, iPad, etc.) Navegadores mais antigos (IE7 e Firefox) degradam muito bem e ainda redimensionam a imagem de resposta quando esta sendo carregada, mas para ambos em resoluções menores esta técnica é nula.

Redimensionamento de imagens no iPhone

Uma coisa legal sobre o iPhone e iPod Touch é que website se redimensiona automaticamente para caber na tela pequena. Um projeto normal só iria diminuir proporcionalmente no browser para um tamanho minúsculo, sem a necessidade de deslocamento para uma versão mobile. Então, o usuário poderia facilmente dar um “zoom in/out”, conforme necessário.

Mas isso gera um problemas quando redimencionamos as imagens proporcionalmente conforme o tamanho da tela. As imagens ainda são carregadas na sua forma original.

Para resolver este problema podemos usar uma meta tag específicas da Apple, colocando em seu site, dentro da tag <head> o código abaixo:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Definindo o initial-scale para 1 substitui o padrão de redimensionamento das imagens, deixando como é que a largura do site fique com a mesma largura do dispositivo (nos modos retrato ou paisagem). A documentação da Apple tem muito mais informações sobre a meta tag viewport.

Estrutura de layout personalizado

Para mudanças de tamanhos extremos, podemos querer alterar o layout totalmente, através de uma folha de estilo separada ou, de forma mais eficiente, através de uma consulta de mídia CSS. Este mudança não deve ser problemática, a maioria dos estilos pode permanecer o mesmo, enquanto as folhas de estilo específicas podem herdar estes estilos e os elementos podem ser decorados como “carros alegóricos”.

Por exemplo, poderíamos ter uma folha de estilo principal (que também seria o padrão) que define todos os principais elementos estruturais, tais como #conteiner, #header, #content , #sidebar, #nav, #footer, juntamente com cores, fundos e tipografia. Larguras com padrões flexíveis também poderia ser definido.

Se uma folha de estilo fez o layout muito estreito/curto (largura ou altura), poderíamos então detectar isso e mudar para uma nova folha de estilo. Esta nova folha de estilo “filha” adotaria esta a folha de estilo padrão e acrescentaria apenas o necessário para redefinir a estrutura do layout.

Aqui está o base.css (padrão) de conteúdo:

* link para o arquivo base.css

Media Queries

O CSS3 suporta todos os mesmos tipos de mídia como CSS 2.1, tais como screen, print e handheld, mas acrescentou dezenas de novos recursos de mídia, incluindo max-width, device-width, orientation e color. Novos dispositivos feitos após o lançamento do CSS3 (como o iPad e dispositivos Android) vai certamente dar suporte a recursos de mídia. Então, chamar uma consulta de mídia usando recursos CSS3 para esses dispositivos iria funcionar muito bem, e seria ignorado se acessado por um computador com um navegador mais antigo que não suporta CSS3.

Exemplo:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) href="sheetland.css" />

Esta consulta de mídia é bastante auto-explicativa: se o navegador exibe esta página em uma tela (ao invés de impressão, etc), e se a largura da tela (não necessariamente o viewport) é de 480 pixels ou menos, então carregar sheetland.css.

Novos recursos CSS3 também incluem “orientation” (paisagem e retrato), device-width, min-device-width e muito mais. Pode-se criar várias folhas de estilo, bem como alterações no layout básico, definido para atender faixas de larguras e orientações (paisagem/retrato). Não deixe de olhar o artigo “Meet the media query” para mais exemplos e uma explicação mais aprofundada.
Várias consultas de mídia também podem ser descartadas para uma folha de estilo único, que é a opção mais eficiente quando utilizado:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    ....
    styles here
    ....
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    ....
    styles here
    ....
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    ....
    styles here
    ....
}

O código acima é de um modelo livre para várias consultas de mídia entre dispositivos populares por Andy Clark. Veja as diferenças entre esta abordagem e incluindo arquivos estilo diferente folha no mark-up como mostrado no post “Hardboiled CSS3 Media Queries”

Consultas de Mídia CSS3

Acima estão alguns exemplos de consultas como a mídia, tanto do CSS 2.1 e CSS3 poderia funcionar. Vamos agora olhar para alguns casos específicos de como usar consultas de mídia em CSS3 para criar projetos Web responsáveis. Muitos destes usos são facilmente aplicados hoje, e todos serão definitivamente aplicáveis em um futuro próximo.

As propriedades min-width e max-width fazer exatamente o que eles sugerem. O min-width propriedade define um browser mínimo ou largura da tela que um determinado conjunto de estilos (ou folha de estilo separada) seria aplicada. Se alguma coisa está abaixo deste limite, o link folha de estilo ou estilos serão ignorados. O max-width propriedade faz exatamente o oposto. Qualquer coisa acima da largura do navegador ou na tela de máxima especificada não se aplica à consulta respectivas mídias.

Nota nos exemplos abaixo que estamos usando a sintaxe para consultas de mídia que poderiam ser usados ​​todos em um folha de estilo. Como mencionado acima, a forma mais eficiente de usar consultas de mídia é colocá-los todos em uma folha de estilo CSS, com o resto dos estilos para o site. Desta forma, várias solicitações não têm que ser feitas para várias folhas de estilo.

@media screen and (min-width: 600px) {
  .myClass { width: 30%; float: right; }
}

Na consulta de mídia acima a classe ( .myClass ) irá funcionar apenas se o navegador ou a largura da tela for acima de 600 pixels. Em outras palavras, esta consulta de mídia será executado somente se a largura mínima for de 600 pixels.

@media screen and (max-width: 600px) {
  .aClassforSmallScreens { clear: both; font-size: 1.3em; }
}

Agora, com o uso do max-width, esta consulta de mídia só se aplica a quando a largura da tela (ou navegador) for no máxima de 600 pixels ou mais estreita.

As consultas min-width/max-width podem ser aplicadas em qualquer tamanho de tela ou largura de navegador, às vezes é necessário fazer uma consulta de mídia que é relevante para um dispositivo específico. Isto significa que mesmo se um navegador ou área de visualização for minimizado para algo menor, a consulta de mídia ainda se aplicam ao tamanho do dispositivo real. O min-device-width e max-device-width são propriedades de consulta de mídia usados para atender um grupo de dispositivos com dimensões definidas, sem aplicar os mesmos estilos de outros tamanhos em um navegador que “imita” o tamanho do aparelho.

@media screen and (max-device-width: 480px) {
  .classForiPhoneDisplay { font-size: 1.2em; }
}

@media screen and (min-device-width: 768px) {
  .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; }
}

Há também outros truques com consultas de mídia para dispositivos de destino específico. Thomas Maier escreveu dois pequenos trechos e explicações para a segmentação do iPhone e do iPad apenas:

- CSS for iPhone 4 (retina display)

- How To: CSS para o iPad

Para o iPad especificamente, há também uma propriedade consulta de mídia chamado de orientação. O valor pode ser paisagem (orientação horizontal) ou retrato (orientação vertical).

@media screen and (orientation: landscape) {
  .iPadLandscape { width: 30%; float: right; }
}

@media screen and (orientation: portrait) {
  .iPadPortrait { clear: both; }
}

Infelizmente, esta propriedade só funciona no iPad. Para determinar a orientação para o iPhone e outros dispositivos o truque é usar o max-device-width e min-device-width.
Há também muitas consultas de mídia que fazem sentido quando combinados. Por exemplo, o min-width e max-width podem definir um estilo específico.

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .classForaMediumScreen { background: #cc0000; width: 30%; float: right; }
}

O código acima nesta consulta de mídia só se aplica quando a tela/browser tiver uma larguras entre 800 e 1200 pixels. Um bom uso dessa técnica é mostrar determinados conteúdos ou sidebars inteiro, dependendo da quantidade de espaço horizontal disponível.

Alguns desenvolvedores front-end preferem um link para uma folha de estilo separada para determinadas consultas de mídia. Se os benefícios organizacionais superarem a eficiência perdida – Tudo bem!. Para dispositivos que não mudam de orientação ou para telas cuja largura não podem ser alterados manualmente, usar uma folha de estilo separada são uma ótima alternativa.

Outro exemplo é um projeto flexível, destinado a telas de computadores com navegadores redimensionável. Se o navegador pode ser redimensionado manualmente, colocar todas as consultas variáveis de mídia em uma folha de estilo  é a melhor saida.

No entanto, a organização pode ser a chave, e um desenvolvedores front-end pode querer definir consultas de mídia em uma tag de link HTML:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />

<link rel="stylesheet" media="print" href="print.css" />

JavaScript

Outro método que pode ser usado é o JavaScript, especialmente como um back-up para dispositivos que não suportam todas as opções de consulta de mídia CSS3. Felizmente, já existe uma biblioteca JavaScript pronta que faz com que os navegadores mais antigos (IE5+, Firefox 1+, Safari 2) oferecer suporte a consultas de mídia CSS3. Se você já está usando essas consultas, basta pegar uma cópia da biblioteca e incluí-lo no seu código: css3-mediaqueries.js.

Além disso, você pode optar por uma abordagem mais “hands-on” como no código jQuery abaixo. Que detecta a largura do navegador e muda a folha de estilo.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
<script type="text/javascript">
  $(document).ready(function(){
    $(window).bind("resize", resizeWindow);
    function resizeWindow(e){
      var newWindowWidth = $(window).width();
      // If width width is below 600px, switch to the mobile stylesheet
      if(newWindowWidth < 600){
        $("link[rel=stylesheet]").attr( {href : "mobile.css"} );
      }
      // Else if width is above 600px, switch to the large stylesheet
      else if(newWindowWidth > 600){
        $("link[rel=stylesheet]").attr( {href : "style.css"} );
      }
    }
  });
</script>

Existem muitas soluções em JavaScript para consultas de mídia CSS. Lembre-se que as consultas de mídia não são uma resposta absoluta, mas são ótimas opções para Web Developers quando se trata de soluções baseadas em CSS puro. Com a adição do JavaScript que podem acomodar variações muito mais abrangentes. Para obter mais informações leia o artigo “Combinação de consultas Mídia e JavaScript”

Mostrando ou ocultando Conteúdo

É possível diminuir as coisas proporcionalmente e reorganizar os elementos necessário para fazer caber tudo (razoavelmente bem), quando uma tela fica menor. Mas fazer todo o conteúdo de telas grandes disponíveis em uma tela menor ou dispositivo móvel nem sempre é a melhor alternativa. Temos como boas práticas para ambientes móveis: uma navegação mais simples, o conteúdo mais focado, listas/linhas em vez de múltiplas colunas.

O Web Developer não deve apenas saber como criar um layout flexível em uma ampla gama de plataformas e tamanhos de tela. Ele deve também deixar o usuário escolher o conteúdo. Felizmente, via CSS é possível mostrar e ocultar o conteúdo com facilidade!. Utilizando o “display: none;”

Basta declarar “display: none” para o elemento HTML que precisa ser escondido, em uma folha de estilo específica ou detectar a largura do navegador, e fazê-lo através de JavaScript. Além de esconder o conteúdo em telas menores, também podemos esconder os blocos em nossa folha de estilo padrão.

Note que não falamos do “visibility: hidden”, isso apenas deixa o conteúdo invisível (embora ele ainda está lá), enquanto a propriedade “display: none” esconde dele completamente. Para dispositivos menores, não há necessidade de manter o mark-up na página – isso poderia causar uma deslocamento desnecessário ou até quebrar o layout.

Aqui está o nosso mark-up:

<p>
  <a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a>
</p>
<div id="content">
  <h2>Main Content</h2>
</div>
<div id="sidebar-left">
  <h2>A Left Sidebar</h2></span>
</div>
<div id="sidebar-right">
  <h2>A Right Sidebar</h2>
</div>

Em nossa folha de estilo padrão a seguir, temos escondido os links para o conteúdo da barra lateral. Porque a nossa tela é grande o suficiente, podemos exibir este conteúdo no carregamento da página.
Aqui está o base.css (padrão) de conteúdo:

#content { width: 54%; float: left; margin-right: 3%; }
#sidebar-left { width: 20%; float: left; margin-right: 3%; }
#sidebar-right { width: 20%; float: left; }
.sidebar-nav { display: none; }

Agora em seguida, nós escondemos as duas barras laterais e mostramos os links de navegação para estes pedaços de conteúdo. Como alternativa, os links de navegação poderiam ser chamados via JavaScript, apenas para cancelar o “display: none”, quando clicado as barras laterais poderiam ser exibidas abaixo do conteúdo (#content).

Aqui está o conteúdo (mais simples) mobile.css:

#content { width: 100%; }
#sidebar-left { display: none; }
#sidebar-right { display: none; }
.sidebar-nav { display: block; }

Com a facilmente mostrar e ocultar conteúdo, reorganizar os elementos de layout e redimensionar automaticamente imagens, elementos de formulário e muito mais, um projeto pode ser transformado para atender a uma enorme variedade de tamanhos de tela e tipos de dispositivos. Quando a tela fica menor, reorganizar os elementos para se adequar as diretrizes móveis, por exemplo, use um script ou folha de estilo alternativa para aumentar o espaço em branco ou para substituir imagens de navegação em dispositivos móveis para uma melhor usabilidade (ícones seria mais benéfico em telas menores).

Abaixo estão alguns dos recursos pertinentes:

- Mobile Web Design Trends For 2009
- 7 Usability Guidelines for Websites on Mobile Devices

Alguns exemplos de Responsive Website

Abaixo temos alguns exemplos de Responsive Websites em prática hoje. Para muitos desses sites, existe várias soluções para uma variedade de navegadores, e alguns até mesmo ajustam os elementos dinamicamente dependendo do tamanho da tela e dimensões específicas do navegador. Visite cada um destes, e ajuste o tamanho do navegador ou dispositivos de mudança de vê-los em ação.

Galeria de “Media Queries”

http://mediaqueri.es/

Food Sense

http://foodsense.is/

Fonte: Smashing Magazine, A List Apart, 24 ways, Impressive Webs

Esta é a forma como a especificação DOM define um “DOM”:

O Document Object Model (DOM) é um Application Programming Interface (API) para HTML válido e documentos XML bem formatados. Ele define a estrutura lógica dos documentos e o modo como um documento é acessado e manipulado.

Em outras palavras, o DOM é uma forma padrão para permitir que as linguagens de programação interajam com documentos HTML / XML. O W3C fornece, o que é chamado de linguagem de vinculações, para o ECMAScript. Isto significa que as funcionalidades definidos na especificação DOM foram implementadas nessa linguagem.

ECMAScript é uma “uniformização” da língua (script) dos “homens das cavernas” – Netscape JavaScript e Microsoft JScript para que todos os browsers possam compreender instruções escritas usando o ECMAScript.

Agora, existem três grandes “dialetos” do ECMAScript: JavaScript (Firefox / Chrome / Safari), JScript (IE), e ActionScript (Adobe Flash / Flex). Estes são chamados dialetos como suporte a código escrito antes da normalização e fornecem alguns recursos não disponíveis no ECMAScript ou em outros dialetos.

Os navegadores fornecem uma implementação das interfaces do DOM que permite ECMAScript (ou dialetos suportados) interagirem com o DOM de um documento XML/HTML. Assim, a maioria dos browsers decentes, lançado conforme os padrões, dizem qual ECMAScript é suportado para cada versão do seu navegador.

O DOM de uma página HTML tem uma “árvore-como estrutura” quando visualizadas. É importante notar que o DOM não representa o conteúdo do HTML, mas representa apenas objetos através dos quais o conteúdo pode ser acessado. Esses objetos são modelados após a marcação que existe na página HTML. As relações, funções, comportamentos e atributos desses objetos são identificados pelo DOM.

Bom, é isso! Você normalmente não precisa de saber sobre interfaces DOM principalmente se você trabalhar com uma biblioteca JavaScript. Mas se você estiver interessado, Quirksmode (http://www.quirksmode.org) tem uma excelente introdução ao DOM.

O QUE É SVG?

SVG é uma linguagem para descrever gráficos bidimensionais e aplicações gráficas em XML. Alguns exemplos de SVG são: o logo da Wikipedia (http://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) e o “Hello World” do SVG chamado de “Tiger” (http://www.amplesdk.com/examples/svg/tiger). Veja o fonte desses dois arquivos SVG para ver como SVG parece.

Demo SVG:

<svg xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 100"
  width="200px" height="100px">
  <circle cx="50" cy="50" r="30"
  style="stroke:none; fill:#ff0000;"/>
  <g transform="translate(100, 20) scale(1.65)">
  <polygon points="36 25, 25 36, 11 36, 0 25,
  0 11, 11 0, 25 0, 36 11"
  style="stroke:none; fill:#0000ff;" />
  </g>
  <rect x="60" y="20" height="60" width="60"
  style="stroke:none; fill:#00ff00;
  fill-opacity: 0.5;" />
</svg>

O QUE É CANVAS?

A especificação do HTML 5 define da seguinte forma: “Elemento de tela que representa um processamento gráficos “bitmap” para gerar imagens, gráficos, jogos através de JavaScript”.

Vladimir Vukićević da Mozilla, em 2006, deu uma boa explicação sobre as diferenças entre o SVG e Canvas:

- SVG é baseado em XML. Isto significa que, cada elemento está disponível no DOM SVG (útil quando você deseja anexar os manipuladores de eventos javascript para um elemento). Canvas não é baseado em XML.

- Canvas é processado pixel por pixel. SVG é um monte de vetores e precisa ser manipulado como um grupo de formas. Uma analogia no mundo Photoshop seria, criar um retângulo usando a “ferramenta forma” contra usar o “PaintBrush”.

Demo Canvas:

E aqui está o JavaScript que o criou o desenho:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
  if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx. (); // the circle
  ctx.fillStyle = "#ff0000";
  ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  // move and resize the octagon
  ctx.translate(100, 20);
  ctx.scale(1.65, 1.65);
  ctx.fillStyle = "#0000ff";
  ctx.beginPath();
  ctx.moveTo(36, 25); ctx.lineTo(25, 36);
  ctx.lineTo(11, 36); ctx.lineTo(0, 25);
  ctx.lineTo(0, 11); ctx.lineTo(11, 0);
  ctx.lineTo(25, 0); ctx.lineTo(36, 11);
  ctx.closePath();
  ctx.fill();
  // restore graphics as they
  // were before move and resize
  ctx.restore();
  ctx.fillStyle = "#00ff00";
  ctx.globalAlpha = 0.5;
  ctx.beginPath();
  ctx.rect(60, 20, 60, 60);
  ctx.closePath();
  ctx.fill();
 }
}

QUEM VAI GANHAR?

Mesmo que sejam completamente diferentes na sua natureza e finalidade, há várias coisas que pode ser feito usando “Canvas” e “SVG”. A recente popularização do elemento “Canvas” parecem para algumas pessoas a morte do SVG. Mas pelo que notei está longe da verdade.

O “Canvas” é tão bom como uma imagem – mas ele não manipula pixel por pixel. Neste momento, elemento Canvas não suporta os “manipuladores” de eventos (por exemplo, ter um retângulo 20x60px dentro de um canvas que seja clicável). Já com o SVG isso é possível.

Canvas em seu estado “natural” não é acessível. O SVG, porém, é bastante acessível.

No entanto existe diferenças significativas de desempenho entre Canvas e SVG. O resultado do experimento descrito no link (http://www.borismus.com/canvas-vs-svg-performance) é que: Canvas é mais adequado para um “gráficos intensivos” onde o objeto são os redesenhos com freqüência (como um jogo), enquanto o SVG é melhor para aplicações que envolvem grandes áreas de processamento (como Google Maps).

POSSO USÁ-LOS AGORA?

Sim, pode. Existem muitas iniciativas para permitir que os navegadores que não suportam SVG ou Canvas tornarem-se “usáveis” por outros meios. O Google tem um impressionante projeto SVG Web (http://code.google.com/p/svgweb/) que usa o Flash para renderizar SVG em navegadores que não suportam SVG nativamente. Para Canvas, o Google tem uma biblioteca “explorecanvas” (http://code.google.com/p/explorercanvas/) que utiliza VML (ou Silverlight) para processar os elementos Canvas (basta incluir o arquivo excanvas.js, e ele deve funcionar) no Internet Explorer.

ENTÃO… QUEM GANHA?

Ambos. Estas é uma fase fantástica para SVG e Canvas. Finalmente temos uma alternativa natural para o “Flash” e animação de necessidade básica. Mantenha seus olhos abertos no “mailing list” do “W3C HTML Working Group” (http://lists.w3.org/Archives/Public/public-html/) para as últimas notícias.

Neste artigo, vou mostrar algumas técnicas diferentes CSS3, que alguns dos principais navegadores (mais especificamente Firefox, Chrome, Safari e Opera) já suportam. Com isso ficará evidente a degradação do layout pela falta de suporte dos outros browsers (como por exemplo o Internet Explorer). Usando as extensões específicas disponíveis para cada navegador, muitos dos estilos que estão sendo especificados no CSS3 já podem ser usados hoje!

CSS Vendor Extensions

O CSS permite que os desenvolvedores de navegadores criem implementações proprietárias para os mais variados estilos CSS. Isso permite ao distribuidor do navegador realize implementações próprias para determinada propriedade CSS, mesmo que já padronizado ou especificado, o que não é tão comum nem tão recomendado. Para utilizar no CSS, a propriedade que deseja utilizar para determinado(s) navegador(es) deve ser precedida de um prefixo. Esse prefixo indicará que se trata de uma extensão que somente aquele navegador interpretará.

Alguns browsers com seus prefixos (CSS Proprietary Extensions Scheme):

• Firefox : -moz-
• Safari: -webkit-
• Chrome: -webkit-
• Opera: -o-
• IE: -ms-

A grande vantagem das extensões é que os navegadores podem ir implementando as novas propriedades, como no caso do CSS3. Propriedades essas que já estão previstas, porém não especificadas. Isso certamente acelera a evolução dos navegadores em relação ao suporte às novas propriedades; Prepara os “CSS coders” para a nova forma de trabalhar; e contribui para a especificação oficial do CSS propriamente dita.
Clique se quiser saber mais sobre (CSS Proprietary Extensions Scheme);

Como você deve ter percebido, uma grande desvantagem de usar essas extensões é o fato de que acabamos tendo que repetir as propriedades para que funcione em todos os navegadores. É isso ou procurar soluções com javascript, folhas de estilos alternativas entre outras “viagens” para que a manutenção do código continue simples onerando o mínimo de recursos. Tudo bem, não basta falar, vamos mergulhar na direito no CSS3! Nota: os estilos sem um prefixo é a proposta da especificação atual W3C.

Uma nota sobre os Demos nesta página

Todos os exemplos estão nesta página, por isso, se você não está vendo alguns exemplos corretamente (ou nada), então o navegador que você está usando não dá suporte a técnica particular CSS3.

Sombras

O efeito de sombra aceita vários valores. Em primeiro lugar é simplesmente a cor da sombra. Ele aceita quatro valores de “length” e os dois primeiros são os x (offset horizontal) e do y (offset vertical). O valor seguinte é a quantidade de desfoque adicionado à sombra. O valor da quarta e última, é a quantidade propagação da sombra. “Box shadow” também vai aceitar uma palavra-chave “inset” que vai criar uma sombra interna.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

DEMO DE SOMBRA

<p>
<div style="width: 500px; height: 100px; margin-left:50px; color: #FFF;
background-color: #069; padding: 0 7px 0 7px; box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;">
&amp;amp;amp;nbsp;</div><br />
</p>

Gradientes

Gradientes pode ser bastante confuso no início, especialmente quando se comparam as diferenças -moz e -webkit. Com -moz você primeiro definir a direção do gradiente, em seguida, determinar o início e término. Da -webkit tem um pouco mais de código. Primeiro você define o tipo de gradiente. Os próximos dois valores definem a direção. Finalmente, os últimos dois valores definem o início e término da cor do gradiente.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

DEMO DE GRADIENTE

<p>
<div style="width: 500px; height: 100px; background-color:#2e3192;
background: -moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#069), to(#036));">
&amp;amp;amp;nbsp;</div><br />
</p>

RGBA

O método de cor RGBA realmente é mais fácil do que pode parecer à primeira vista. Leva quatro valores e na ordem em que estão: a quantidade de vermelho, a quantidade de verde, de azul e do nível de opacidade. Em vez de usar cor em (#) hexadecimal, defina o modo de cor em RGB, quanto o nível de opacidade pode se ver a cor transparente. A opacidade aceita valores entre 0 e 1. Com 0 sendo completamente opaco e 1 sendo a cor real definida. O exemplo abaixo tem um valor de opacidade da .5 fazendo com que o elemento fique com 50% de transparência. RGBA na verdade não necessita de qualquer das extensões do navegador.

background-color: rgba(0, 54, 105, .5);

DEMO DE RGBA

<p>
<div style="width: 480px; height: 80px; text-align: center;
padding: 10px; background-color: rgba(0, 54, 105, .5);">
Este elemento está com 50% de transparência </div><br />
</p>

HSL

Junto com RGBA, CSS3 pode tornar o modelo de cor HSL disponível para nós. Isso poderia dar-nos todo um arsenal de cores e tons. Neste modelo de cor, HSL (H = tonalidade, S = saturação, L = luminosidade). Tonalidade é um grau na “roda de cores”, enquanto a saturação e a luminosidade são valores percentuais das cores.

background-color: hsl(209, 41.2%, 20,6%);

DEMO HSL

<p>
<div style="width: 480px; height: 80px; padding: 10px;
background-color: hsl(209, 41.2%, 20,6%);"> &amp;amp;amp;nbsp; </div><br />
</p>

Cor da Borda

Com este estilo, você deve definir border-top border-right border-bottom e border-left separadamente para obter o efeito abaixo. Você vai perceber que eu tenho definido uma borda de 8px juntamente com 8 cores diferentes para cada estilo de cor da borda. Isso porque a mesma quantidade de cores tem de coincidir com a quantidade de pixels na definição da borda.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;

DEMO COR DA BORDA

<p>
<div style="width: 500px; height: 100px;
background-color: #2e3192; border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;">
&amp;amp;amp;nbsp; </div><br />
</p>

Seleção Cor do Texto

Devo dizer que mudar a cor de seleção de texto é um recurso muito bacana. Com o pseudo-elemento ::selection, você pode alterar a color e background quando o usuário destaca um elemento de texto. O ::selection foi removido do projecto CSS3 atual, mas deixa a esperança que irão adicioná-lo novamente mais tarde!

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

DEMO SELEÇÃO DE TEXTO

<style type="text/css">
<!--
#textSelection { width: 500px; }
/* Safari */
p.selection::selection { background: #3C0; color: #90C; }
/* Firefox */
p.selection::-moz-selection { background: #3C0; color: #90C; }
-->
</style>
<div id="textSelection">
<p>Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! Selecione o texto para ver o
efeito deste recurso! Selecione o texto para ver o efeito deste recurso! Selecione
o texto para ver o efeito deste recurso! Selecione o texto para ver o efeito deste
recurso! Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! </p>
</div>

Transformação

Com o estilo “transform”, você pode fazer os elementos “crescerem”, quando o mouse estiver sobre o elemento. Com um valor acima de 1 o elemento irá aumentar de tamanho. Por outro lado, com um valor abaixo de 1 fará com que o elemento diminuir de tamanho. Junto com o “scale” o “transform” tem muitos diferentes formas de uso. Visite a página do desenvolvedor do Firefox para ver o que mais você pode usar. (https://developer.mozilla.org/En/CSS/-moz-transform)

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);

DEMO DE TRANSFORMAÇÃO

<style type="text/css">
<!--
#transform ul { list-style:none; background:none; }
#transform ul li{ width: 200px; color:#FFF; list-style: none; padding: 5px;
background:none; background-color: #069; border-bottom: #036 solid 1px; }
#transform li a:link { color: white; }
#transform li:hover { -moz-transform: scale(1.15); -webkit-transform: scale(1.15);
background-color: #003669; }
-->
</style>
<div id="transform">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">A Empresa</a></li>
		<li><a href="#">Produtos</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Contato</a></li>
	</ul>
</div>

Layout Multi-column

Com este novo estilo de “layout multi-column”, podemos dar ao nosso texto um “estilo jornal”. Implementar isto é muito simples em relação ao modo “tradicional” de se fazer com CSS. Primeiro eu especifico quantas colunas eu quero, o tipo de regra que eu quero para separá-las, e como que “espaçamento” eu quero entre as colunas. Simples não?

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

DEMO DE MULTI-COLUMN

<style type="text/css">
<!--
#multiColumns {
	-moz-column-count:3;
	-moz-column-rule: solid 1px black;
	-moz-column-gap: 20px; }
-->
</style>
<div id="multiColumns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Resumo

Espero que todos estão tão animado com o CSS3 como eu estou. Ele nos dá mais poder tanto para webmasters quanto para desenvolvedores, e em muitos aspectos muito mais simples. Agora, se nós pudéssemos chegar em todos os navegadores e dizer para apoiá-lo seria fantástico! O que eu mostrei são apenas algumas das novas características potenciais do CSS3. Se você quiser obter mais informações, dicas e/ou ajuda, eu aconselho a visitar todos os sites abaixo:

* CSS: Current Work (http://www.w3.org/Style/CSS/current-work)

* CSS3.info (http://www.css3.info/)

* Mozilla CSS Extensions (https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions)

* The WebKit Open Source Project (http://webkit.org/)

Veja o que outros têm feito

A primeira coisa que você pode fazer para se preparar para o HTML 5 é ver como as outras pessoas estão usando. Uma visita à galeria de HTML 5 (http://html5gallery.com/) vai mostrar como vários sites já estão usando os novos elementos de HTML 5. Use-o como fonte de inspiração!

Agora, mão à obra

Você pode olhar para os sites (http://html5doctor.com/), ler todos os artigos disponíveis na internet e até mesmo ler as especificações (http://www.whatwg.org/specs/web-apps/current-work/), mas nenhum deles vão te ajudar a entender o HTML 5, tanto quanto utilizando os novos elementos. Você pode modificar parte de um site existente ou fazer uma experiência criando novas páginas. Faça isso com seu site pessoal, de amigos ou até em sua empresa.

Ao fazer isso, você vai descobrir o que funciona e o que não funciona. Por exemplo, eu descobri que o Firefox 3.5 trata elementos como o article e a section como display:inline e eu tinha que definir explicitamente-los para display:block para fazê-los funcionar como esperado.

O (X) em análise

Se você é como a maioria dos designers, você provavelmente não escreve todas as marcações (tags) na mão. Mas até os bons editores tentam acompanhar os novos elementos de (X)HTML 5, e mesmo assim você acaba fazendo algumas marcações na mão e desta forma você acaba aprendendo um pouco. Existe um pouco de confusão (e polêmica!) sobre a relação entre HTML 5, XHTML 1.0/1.1 e XHTML 5. Vamos deixar tudo bem claro agora.

HTML 4.0 (a linguagem de marcação que todos nós conhecemos e amamos) é baseada em um “livro de regras” (rulebook) chamado SGML. No livro de regras da SGML, os nomes dos elementos não são “case sensitive”, você pode ter elementos com tags de fechamento opcional (como <p>) e você pode ter valores de atributo sem aspas.

XHTML 1.0 e 1.1 são baseados em um “livro de regras” chamado XML. No livro de regras XML, elemento e atributo nomes são “case sensitive”, cada tag de abertura deve ter uma tag de fechamento e os valores dos atributos devem estar entre aspas.

HTML 5 define uma linguagem de marcação que não seja baseado em qualquer livro de regras, mas podem ser escritas de “forma HTML” (ou renderizada, conforme a especificação chamada) ou de ” forma XHTML”.

Quando você escreve de “forma HTML”, você está autorizando deixar algumas tags abertas, valores de atributos sem aspas e elementos e nomes de atributos não são case sensitive. Você também terá de usar em algumas tags marcação XML, será obrigado a colocar barra em elementos como <img /> ou <hr />

Quando você usa a serialização XHTML, você tem que seguir as regras XML mencionado alguns parágrafos atrás.

Eu sugiro que você escreva a sua marcação em XHTML 5, ou, se você usar o HTML 5, fazer a marcação como se fosse XHTML. Vai ser melhor ficar com o padrão XML que requer um tag de fechamento para cada tag de abertura, em vez de gastar o seu tempo de para otimizar as tags que têm fechamento e/ou abertura opcional. Da mesma forma, colocar com aspas todos os valores de atributo ao invés de tentar decidir quando você pode deixar o valor de atributo sem aspas. Além de não ter que gastar neurônios sobre essas decisões, a marcação será mais consistente.

Se você utiliza alguma ferramenta de geração automática de marcação configure para gerar XHTML 5 em vez do HTML 5. O uso de XML é o futuro, seus espaços permitem que você tenha documentos “poliglota”, que consistem em várias marcações para além do HTML5 o RDF, MathML e o SVG. Você também pode usar ferramentas como XPath, XSLT e XQuery de marcação baseada em XML, utilizando qualquer analisador XML de sua escolha.

Claro, nem tudo é boa notícia. Se você trabalhar com XHTML 5, lembre-se que o servidor deve entregar os documentos com um tipo MIME de application/xhtml+xml ou text/xml. Isto pode envolver a negociação com o seu serviço de hospedagem. Além disso, quando você entregar um arquivo XML, qualquer erro de sintaxe irá causar uma mensagem de erro.

Se você estiver fazendo a marcação com a mão, acho que essas mensagens de erro manterá você fiel a validação. Se você estiver usando ferramentas que criam XHTML, não há problema, pois a maioria das ferramentas produzem códigos XML bem formados.

Expressões Regulares

HTML 5 estende o elemento input oferecendo novos atributos que permitem especificar os dados de entrada. Esses atributos incluem min e max (para definir um intervalo numérico), e também oferece novos valores para o atributo type como a url, email, date e time

Se nenhum desses novos tipos de entrada atendem às suas necessidades o HTML 5 fornece o atributo pattern para elementos input com type=”text”. O valor do atributo pattern é uma expressão regular, tal como definido no ECMAScript e utilizado em JavaScript. As expressões regulares são uma forma concisa e talvez um tanto enigmática de especificar um padrão de caracteres. Por exemplo, se eu quiser um jogo de cinco dígitos mais hífen e três caracteres para CEP, posso usar esse padrão:

([0-9]{5}-[0-9]{3})

Todo poder do novo formulário web já estão parcialmente implementado no Safari e Chrome, e completamente no Opera (veja este site http://a.deveria.com/caniuse/ para obter mais informações sobre a capacidade de cada browser). Não se preocupe se o seu browser ainda não suporta as extensões do form para o HTML 5, você pode fazer o download do Google Web Forms 2 (http://code.google.com/p/webforms2/)

Aqui está um exemplo de formulário que valida data e cep:

<p>
  Digite uma data: <input type="date" name="data"
  required="required"
  title="Fotmato de data dd-mm-yyyy" />
</p>

<p>
  Digite um cep:
  <input type="text" name="cep"
   required="required"
   pattern="([0-9]{5}-[0-9]{3})"
title="CEP: 99999-999" />
</p>

As expressões regulares são muito úteis e vale a pena investir um tempo para aprender. Muitos editores de texto já tem integrado pesquisa com expressão regular e substituição características, e quando você começar a usá-los, você nunca mais conseguirá ficar sem eles.

Arte estática com SVG

Se você quiser que as bordas nítidas, o HTML 5 permite que você use SVG (Scalable Vector Graphics) em seus documentos. Colocar inline SVG é parcialmente implementado em Firefox, Safari e Opera, de acordo com este site (http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers).

E aqui está o SVG gerado:

<svg xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 100"
  width="200px" height="100px">
  <circle cx="50" cy="50" r="30"
  style="stroke:none; fill:#ff0000;"/>
  <g transform="translate(100, 20) scale(1.65)">
  <polygon points="36 25, 25 36, 11 36, 0 25,
  0 11, 11 0, 25 0, 36 11"
  style="stroke:none; fill:#0000ff;" />
  </g>
  <rect x="60" y="20" height="60" width="60"
  style="stroke:none; fill:#00ff00;
  fill-opacity: 0.5;" />
</svg>

Embora seja possível usar o JavaScript para modificar dinamicamente um gráfico SVG, HTML 5 oferece uma melhor solução:

Canvas em ação

O elemento de canvas é uma das características mais marcantes do HTML 5, e é suportada pelo Firefox, Safari, Opera e Chrome mas não pelo Internet Explorer. O elemento de canvas é realmente uma característica promissora. Você usa JavaScript para desenhar o que você precisa sobre a tela em branco. (Obs: A qualidade gráfica me surpreendeu!)

Aqui está o mesmo desenho feito com SVG em Canvas:

E aqui está o JavaScript que o criou o desenho:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
  if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx. (); // the circle
  ctx.fillStyle = "#ff0000";
  ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  // move and resize the octagon
  ctx.translate(100, 20);
  ctx.scale(1.65, 1.65);
  ctx.fillStyle = "#0000ff";
  ctx.beginPath();
  ctx.moveTo(36, 25); ctx.lineTo(25, 36);
  ctx.lineTo(11, 36); ctx.lineTo(0, 25);
  ctx.lineTo(0, 11); ctx.lineTo(11, 0);
  ctx.lineTo(25, 0); ctx.lineTo(36, 11);
  ctx.closePath();
  ctx.fill();
  // restore graphics as they
  // were before move and resize
  ctx.restore();
  ctx.fillStyle = "#00ff00";
  ctx.globalAlpha = 0.5;
  ctx.beginPath();
  ctx.rect(60, 20, 60, 60);
  ctx.closePath();
  ctx.fill();
 }
}

Veja Canvas tutorial da Mozilla (https://developer.mozilla.org/en/Canvas_tutorial) para uma introdução mais aprofundada.

O que você está esperando?

Apesar de alguns desenvolvedores terem receio sobre a direção em que o HTML 5 está levando a web (e eu compartilho com este receio), as características do HTML 5 são bem interessantes e vale a pena ser explorada. Assim, comece a olhar código fonte de outras pessoas, e fazer experiências em seu próprio site, e mergulhe nas novas características de validação de formulários e as de CANVAS.

Post baseado no artigo de J. David Eisenberg (catcode@catcode.com) também escritor do livro SVG – Scalable Vector Graphics e professor em San Jose, CA.