Criando uma página da Web melhor

Uma estrutura CSS bem projetada economiza tempo e esforços

Uma estrutura Cascading Style Sheets (CSS) acelera e simplifica o projeto e o desenvolvimento de páginas Web. Além disso, uma estrutura CSS produz resultados mais padronizados em todos os navegadores. Eis uma apresentação de duas estruturas CSS, cada uma com uma filosofia singular.

Martin Streicher, Web developer, 自由职业者

Photo of Martin StreicherMartin Streicher is a freelance Ruby on Rails developer and the former Editor-in-Chief of Linux Magazine. Martin holds a Masters of Science degree in computer science from Purdue University and has programmed UNIX-like systems since 1986. He collects art and toys.


nível de autor Contribuidor do
        developerWorks

23/Jun/2009

Por volta de 1950, depois de construir dezenas de suas casas usonianas típicas em forma de L, o arquiteto Frank Lloyd Wright apresentou o sistema Usoniano Automático, um sistema inovador de peças pré-fabricadas e técnicas simples que permitiriam que um leigo construísse a maior parte da estrutura de uma nova casa. Para Wright, a casa Usoniana Automática era financeiramente suportável, significativa, atraente e que ia transformar a habitação.

No núcleo do sistema de Wright estava um bloco padronizado de concreto ou vidro de 4x12x24 polegadas com bordas côncavas. Construir uma parede, por exemplo, levava três passos. Primeiro, os blocos eram empilhados sem guias ou cimento. Depois, barras de aço transversais e verticais eram inseridas entre os blocos para formar um esqueleto. Finalmente, bombeava-se ou derramava-se concreto dentro dos vãos das bordar para integrar o aço, unir os blocos e solidificar a estrutura. Então, além de assentar a base, a maior parte do trabalho podia ser feita por qualquer pessoa habilidosa.

Embora inteligente, o sistema Usoniano Automático se mostrou difícil e caro na prática, para a tristeza de Wright. Contrário ao objetivo de Wright, muitos dos proprietários de imóveis voltaram-se às empreiteiras profissionais para a construção. Entretanto, o sistema de Wright foi uma tentativa valiosa de oferecer uma infraestrutura completa — materiais, técnica e filosofia— para transformar a economia de adquirir uma casa confortável. O Usoniano Automático era literalmente uma estrutura.

Estruturas de desenvolvimento de software

O desenvolvimento de software também pode se beneficiar das estruturas. Como o sistema Usoniano Automático, uma estrutura de software simplifica a construção de código, permitindo aos desenvolvedores concentrar menos esforços na montagem e mais no propósito.

Por exemplo, a conhecida estrutura Cocoa da Apple® oferece ferramentas, biblioteca de classes, tecnologias e filosofias que incorporam a abordagem da empresa para o desenvolvimento de aplicativos. Ao adotar o Cocoa, os desenvolvedores Mac não precisam reinventar a roda clicável. Ao invés disso, eles podem aproveitar o tempo com recursos exclusivos, valiosos e comerciáveis.

Além do Cocoa, muitas outras estruturas de software estão amplamente disponíveis. A Zend oferece sua estrutura homônima Zend Framework para desenvolvimento PHP. Django, Rails e Catalyst oferecem uma estrutura baseada em MVC (Model-View-Controller) para aplicativos Python, Ruby e Perl, respectivamente. O Qt da Nokia é uma estrutura de plataforma cruzada (incluindo Mac OS® X, Linux® e Microsoft® Windows®, entre outros) para desenvolvimento de aplicativo gráfico.

De fato, quase todo aspecto do desenvolvimento de software oferece pelo menos uma estrutura. Isso é especialmente verdade em qualquer arte de programação em sua segunda geração ou posterior. Os testes e erros antecipados levam a melhores práticas e invenções esclarecidas, consequentemente aproveitadas em uma estrutura de próxima geração.

Conforme evidenciado por Django e Rails, o desenvolvimento de Web no lado do servidor certamente amadureceu sobre iterações. Então, tem também o desenvolvimento de aplicativo centralizado em navegador. O SproutCore é uma infraestrutura rica JavaScript para aplicativos baseados em navegador e o Flex e Silverlight oferecem, cada um, uma pilha de aplicativos completa.

Estranhamente, porém, a construção de página da Web— tarefa crucial, fundamental para qualquer empreendimento on-line— tem demorado para pegar esse ritmo. Ou, esteve lenta em se manter avançando. Nos últimos dois anos ou mais, muitas estruturas de página da Web apareceram para tornar a construção de HTML (linguagem de marcação de hipertexto) e CSS mais simples, mais rápida, e mais previsível —até mesmo padronizada— através de navegadores notoriamente instáveis.

Este artigo analisa duas estruturas para a construção de página da Web: Blueprint e Yahoo!® User Interface (YUI) Grid (biblioteca de interface com o usuário do Yahoo). Ambas estruturas são de uso e permuta gratuitos, de acordo com os termos da Licença liberal do MIT (Instituto Tecnológico de Massachusetts) e da Licença BSD (Berkeley Software Distribution), respectivamente. Este artigo explora as novidades e recursos de cada um e se apóia em uma série de exemplos. Você pode escolher a opção que funciona melhor para você.


Apresentando o Blueprint

Como HTML é um padrão e descreve estrutura e não estilo, a estrutura Blueprint é totalmente realizada como CSS. Para utilizar o Blueprint, é necessário projetar o web site com o Blueprint em mente e então criar ou gerar HTML como sempre, anexando estilos Blueprint CSS aos elementos HTML. Na verdade, como o Blueprint oferece "redução" CSS, é possível projetar páginas da Web em HTML ao invés de utilizar um programa de design gráfico, como photoshop, para emular a página final. De certo modo, o Blueprint oferece autoria de página de Web WYSIWYG real (o que você vê é o que você tem), porque seu protótipo utiliza o mesmo código que o site de produção eventual.

Além disso, como o Blueprint é projetado para espelhar o visual de uma página impressa, o design interativo com o Blueprint é provavelmente muito parecido com o trabalho no QuarkXPress ou Adobe InDesign. Os estilos do Blueprint são baseados em pixels e uma grade básica de 18 pixels. Sem muito esforço ou talento de design, é possível criar páginas com visual profissional.

Os estilos CSS do Blueprint (aproximadamente 250) são divididos em três grupos funcionais, descritos na Tabela 1.

Tabela 1. Categorias de estilo CSS do Blueprint
CategoriaDescrição
RedefinirLimpa todas as suposições que o navegador possa fazer sobre preenchimento, margens e estilo de fonte, entre outras características. Pense em redefinir como começar do zero: Os únicos estilos e efeitos que você vê são os do Blueprint ou explicitamente definidos.
Listagem 1 é código CSS do Blueprint para redefinir.
GradeDefine um contêiner superior, uma variedade de larguras de coluna fixas e muitos outros modificadores para mover colunas individuais para a direita e esquerda, adicionar bordar, construir formas atraentes, e muito mais. Um dos estilos de grade até colore as colunas subjacentes para facilitar o projeto e a depuração. A maioria dos estilos do Blueprint é implementada como uma classe CSS, então é possível misturar e combinar efeitos atribuindo uma ou mais classes a um elemento HTML.
TipografiaControla a aparência de uma fonte na página. Elementos de fonte HTML são definidos em ems, permitindo visualizar a página para mantê-la coerente e coesa mesmo se a fonte for redimensionada. A tipografia CSS também define o alinhamento vertical de todos os elementos com a linha de base (a última linha do código CSS na Listagem 1), para que a fonte em todas as caixas, não importa quão profundamente aninhada, fique alinhada.
Listagem 1. Código CSS do Blueprint para redefinir
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;

A figura 1 é um exemplo do que o Blueprint é capaz de fazer. Este exemplo está disponível on-line (ver Recursos).

Figura 1. Uma amostra de uma página HTML em estilo Blueprint
A sample of a Blueprint-styled HTML page showing a title, subtitle, various header boxes with a large content area on the left and a sidebar to the right.

Figura 2 é a mesma página, embora com fonte muito maior. A grade permanece intacta e idêntica porque as dimensões são especificadas em pixels.

Figura 2. A mesma página HTML da Figura 1, mas com fonte ampliada através da preferência de um navegador
The same HTML page as Figure 1, with the same layout as described above, but with type enlarged via a browser preference.

A grade padrão do Blueprint é 950 pixels de largura, divididos em vinte e quatro colunas de 30 pixels, separadas por canais de 10 pixels: [(24 colunas * 30 pixels/coluna) + (23 canais * 10 pixels/canal) = 950 pixels]. Se preferível ou necessária uma grade mais larga ou mais estreita, ou com larguras de coluna diferentes, o Blueprint oferece uma ferramenta Ruby para gerar novamente o Blueprint de acordo com especificações pessoais. A ferramenta Ruby também cria uma imagem da grade para utilização como referência no Photoshop, por exemplo, e "minimiza" ou comprime o CSS resultante para diminuir o tamanho do arquivo, reduzindo assim o tempo e largura de banda de transferência.

Criando páginas da Web com o Blueprint

Para ajudar a conhecer o Blueprint, este artigo recria uma parte da página da amostra demonstrada na Figura 1.

O primeiro passo é incluir os arquivos CSS do Blueprint na página HTML, como demonstrado na Listagem 2. Este fragmento de HTML supõe que os arquivos Blueprint estão em um subdiretório da raiz da Web chamado css/blueprint.

Listagem 2. Incluir arquivos CSS do Blueprint na página HTML
<head>
<!--[if IE]>
<link media="screen" rel="stylesheet" type="text/css"
   href="css/blueprint/ie.css" />
<![endif]-->
<link media="screen" rel="stylesheet" type="text/css"
   href="css/blueprint/screen.css" />
<link  media="print" rel="stylesheet" type="text/css"
   href="css/blueprint/print.css" />
<link rel="stylesheet" type="text/css"
   href="css/custom.css" />
   ...
</head>

Há três arquivos Blueprint padrão, descritos na Tabela 2.

Tabela 2. Arquivos CSS Blueprint padrão
ArquivoDescrição
ie.cssCódigo especializado para reiniciar o Internet Explorer
screen.cssSuspende estilos para exibição da tela
print.cssDeclara um bonito conjunto de estilos padrão para imprimir

Em geral, não é recomendável editar os arquivos CSS Blueprint. Ao invés disso, é adequado definir estilos próprios em um arquivo separado e substituir o código Blueprint conforme necessário. Este é o propósito do último arquivo, css/custom.css, criado e mantido como parte do código particular.

Para começar, todas as páginas Blueprint devem estar contidas em uma div apropriadamente identificada como class="container". Se quiser ver a grade subjacente da página, deve-se adicionar a classe showgrid, como demonstrado na Listagem 3 .

Listagem 3. Adicionar classe showgrid
<body>
  <div class="container showgrid" style="height:500px;">
  </div><
/body>

Figura 3 demonstra a grade Blueprint padrão.

Figura 3. Grade Blueprint padrão
A blank Blueprint grid shows a white page with several evenly spaced columns defined.

Há duas regras simples a seguir ao projetar com o Blueprint:

  1. Lembrar da grade.
    O Blueprint pré-define um grande número de estilos com base em múltiplos de colunas. Por exemplo, o estilo .span-4 tem quatro colunas de largura, incluindo os canais intermediários, ou 150 pixels. É possível anexar esse estilo a qualquer tipo de elemento HTML—, como uma textarea— para deixá-lo com quatro colunas de largura. Obviamente, é possível aplicar o .span-4 a um div, mas é importante lembrar que um div.span-n, onde n é de 1 a 24, flutua para a esquerda e tem margem direita de um canal de largura.
  2. Lembrar da linha de base.
    O Blueprint define a altura da linha para toda a página em 18 pixels, então, cada imagem e variante de texto deve ser um múltiplo de 18 pixels.

Para continuar com o exemplo (novamente usando a Figura 1 como referência), o primeiro e segundo parágrafos da página são facilmente obtidos com a classe alt, demonstrada na Listagem 4. A classe alt é um estilo personalizado definido em custom.css.

Listagem 4. Classe alt
             <h1>Uma página simples<
			/h1>
			
			 <hr><h2 class="alt">Esta página simples demonstra
			uma pequena fração de o que é possível obter com o Blueprint.</h2>
			<hr>

A próxima parte da página, a linha de três caixas de texto, também é facilmente obtida devido a algumas amplitudes pré-definidas pelo Blueprint e demonstradas na Listagem 5.

Listagem 5. Amplitudes pré-definidas pelo Blueprint
<div class="span-7 colborder">
  <h6>Aqui há uma caixa</h6>
  <p>Lorem ...</p>
</div>

<div class="span-8 colborder">	
  <h6>E outra caixa</h6>
  <p>Lorem ...</p>
</div>

<div class="span-7 last">
  <h6>Esta caixa está alinhada com a barra lateral</h6>
  <p>Lorem ...</p>
</div>
<hr>
<hr class="space">

Como mencionado anteriormente, uma div identificada como span-n amplia n colunas, flutua à esquerda e tem a margem direita com a largura de um canal. O último estilo deveria ser anexado á coluna final em qualquer série. Surpreendentemente, o último não força uma limpeza para reposicionar nenhum elemento que segue; ele simplesmente define a margem direita para 0, que substitui a margem direita padrão de 10 pixels em span-n. Por outro lado, o elemento hr força uma limpeza, impedindo qualquer elemento seguinte se agrupe. O hr class="space" desenha uma linha branca, restituindo efetivamente a regra invisível, mas oferecendo um espaço em branco vertical padrão.

O estilo colborder cria uma linha cinza entre a primeira e segunda, e a segunda e terceira caixas. Para realizar a linha, o estilo expande o preenchimento direito para 24 pixels, desenha uma linha de um pixel (no meio da coluna) e amplia a margem direita para 25 pixels. Como o Blueprint é baseado em pixels, manter o alinhamento à grade é essencial.

A próxima fila de conteúdo é semelhante à anterior, mas a primeira coluna é levemente empurrada para fora da grade com o modificador prepend-1, demonstrado na Listagem 6.

Listagem 6. Modificador prepend-1
<div class="span-15 prepend-1 colborder">
  <p>
    <img src="test.jpg" class="top left" alt="test">Lorem ...
  </p>

  <blockquote>
	<p>Integer cursus ornare mauris. ...</p>
  </blockquote>
  ...

  <hr>
  <div class="span-7 colborder">
	<h6>Esta é uma coluna aninhada</h6>
    <p>Lorem ipsum ...
  </p>
  </div>
  <div class="span-7 last">
	<h6>Esta é outra coluna aninhada</h6>
    <p>Lorem ipsum ...</p>
  </div>
</div>

Os estilos prepend-v, onde v é de 1 a 23, pré-anexa colunas v e canais v-1 em pixels utilizando preenchimento esquerdo.

A imagem do cão tem 180 pixels de altura. Como a altura é um múltiplo de 18, o texto exibido à direita da imagem e o texto exibido abaixo da imagem permanecem equidistantes sobre a linha de base designada.

A melhor forma de descobrir todos os truques do Blueprint é ler o arquivo screen.css do início ao fim. Alguns destaques e dicas:

  • A classe de estilo hide oculta qualquer elemento utilizando monitor: nenhum;.
  • As classes de estilo added e removed são úteis em aplicativos Assíncronos JavaScript + XML (Ajax) para destacar elementos adicionados e removidos da página, respectivamente. Há também uma classe chamada highlight que colore o plano de fundo de qualquer elemento amarelo.
  • É possível utilizar push-i e pull-j para mover uma coluna para colunas i à direita ou j à esquerda, respectivamente.

Novamente, a abordagem do Blueprint é exclusiva. Ela reforça uma grade regulada normalmente encontrada em um projeto impresso. Entretanto, isso não é necessariamente um detrator. A precisão oferece excelente controle sobre a aparência do site em qualquer navegador.

Apresentando o YUI Grids

Diferente do Blueprints, o YUI Grids oferece CSS para páginas de largura fixa e flutuante, além de oferecer profundidade de aninhamento de colunas arbitrariamente. Também é possível posicionar e mover as colunas arbitrariamente para reordenar o conteúdo da página com CSS de forma rápida e simples. Por exemplo, é possível mover a navegação da esquerda para a direita com uma alteração CSS. Além disso, é possível aumentar as Grades YUI com a própria biblioteca de JavaScript do Yahoo para agregar interatividade. Você pode ler mais sobre a biblioteca JavaScript YUI separadamente. Este artigo aborda as folhas de estilo do Grids, que podem funcionar independentemente da biblioteca JavaScript..

O YUI Grids é semelhante ao Blueprint em vários aspectos:

  • Ele começa do zero com um conjunto de estilos básicos, previsíveis.
  • Ele define estilos para a topografia.
  • Oferece uma série de layouts de página pré-definidos para a maioria dos aplicativos de Web.

O YUI Grids também define um conjunto de grades em colunas que podem ser aninhadas para criar páginas complexas arbitrariamente.

Os aproximadamente 100 estilos CSS do YUI Grids são divididos em três categorias descritas na Tabela 3.

Tabela 3. Categorias de estilo CSS do YUI Grids
CategoriaDescrição
DocumentoDefine a largura da página.
TemplateDescreve uma série de formatos de página populares, de duas colunas. Tipicamente, uma coluna é mais larga que a outra fornecendo uma área principal de conteúdo e um "trilho" de navegação. Os estilos de template também fornecem variantes para trocar a ordem das duas colunas.
GradeControle de como dois ou mais elementos div aparecem em uma linha. A grade de aninhamento define a largura de cada div integrada, habilita a flutuação e controla quando começar e terminar uma linha.
Diferente do Blueprint, os estilos da grade de aninhamento utiliza percentuais para descrever a largura dos componentes. Assim, conforme a página cresce em largura, o mesmo acontece com a grade toda e com os elementos individuais na grade. Entretanto, os componentes da grade sempre mantêm um tamanho0 relativo, como 66% e 33%.

Figura 4 captura um layout de 4 colunas criado via aninhamento. Há um cabeçalho na parte superior e um rodapé na parte inferior. A área de conteúdo em si é uma grade de duas colunas, com cada uma delas subdividida em uma grade de duas colunas.

Figura 4. Layout YUI Grids com grades dípticas aninhadas
A screenshot shows YUI Grids CSS layout with nested diptych grids. A header is followed by four columns with individual content and a footer at the bottom.

Construindo páginas da Web com o YUI Grids

Para utilizar o YUI Grids, o Yahoo recomenda comportamento estrito em navegadores da Web que ofereçam múltiplos modos de renderização. É possível solicitar o modo estrito com uma linha principal no arquivo HTML:

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

Depois, é necessário incluir o CSS YUI Grids. O Yahoo hospeda uma folha de estilo minimizada por uma questão de conveniência.

<link rel="stylesheet" 
            type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">

(É possível também fazer a transferência do arquivo por download e guardá-lo na raiz de Web, ou fazer a transferência por download de cada uma de suas partes individualmente se preferir utilizar apenas uma parte de seus recursos. Uma parte implementa a redefinição, outra descreve a tipografia e a terceira define os elementos da grade).

Como no Blueprint, uma página construída como YUI Grids deve ter componentes padrão, como demonstrado na Listagem 7.

Listagem 7. Componentes padrão da página YUI Grids
<div id="doc">
  <div id="hd"><!-- header --></div>
  <div id="bd"><!-- body --></div>
  <div id="ft"><!-- footer --></div>
</div>

A ID da div mais distante determina a largura da página. Há quatro estilos, doc1 a doc4. Especificar id="doc1" para uma página estreita, de 750 pixels; id="doc2" para 950 pixels; e id="doc4" para a página mais larga e cada vez mais comum de 974 pixels. id="doc3" é uma largura flutuante de 100%. Todos os estilos de largura de página centralizam o conteúdo.

O conteúdo do site deve ser colocado no div com bd ID.

O conteúdo ainda é dividido em dois "blocos", um principal e um secundário, como demonstrado na Listagem 8. (Os blocos podem ser subdivididos conforme necessário, como demonstrado na Figura 4.)

Listagem 8. Blocos principal e secundário
<div id="bd">
   <div id="yui-main">
     <div class="yui-b">
     </div>
   </div>

   <div class="yui-b">
   </div>
 </div>

yui-b significa "bloco" e deve haver sempre dois blocos em uma página YUI Grids. Por convenção, yui-main é exibido à esquerda, a menos que um estilo de classe seja adicionado à div mais distante para mudar a ordem das duas colunas. Por exemple, <div id="doc" class="yui-t2"> coloca o trilho de 180 pixels (ao contrário, mais à direita) do lado esquerdo.

Com os blocos, uma grade é incorporada em cada um deles. Por sua vez, cada grade pode conter uma ou mais subgrades ou uma ou mais "unidades". Listagem 9 é HTML e CSS associado para construir o layout de quatro colunas mostrado na Figura 4.

Listagem 9. HTML e CSS associado para construir o layout de quatro colunas mostrado na Figura 4
<div id="outermost" class="yui-g">
  <div id="firstgrid" class="yui-g first">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>

  <div id="secondgrid" class="yui-g">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>
</div>

yui-g significa "grade", enquanto que yui-u significa "unidade". Aqui, a grade mais distante (assim nomeada simplesmente para diferenciá-la nesta discussão) contém duas outras grades: firstgrid e secondgrid. O primeiro estilo indica o começo de uma nova "linha" ou sequência de grades ou unidades. O conteúdo real aparece dentro de cada unidade.

Por padrão, uma grade—isto é, uma yui-g—é dividida igualmente entre duas unidades. É possível mudar isso utilizando uma classe especial para substituir yui-g. Por exemplo, se desejar subdividir cada uma das duas grades na listagem anterior em duas unidades, onde uma unidade é duas vezes mais larga que a outra, é necessário escrever o código apresentado na Listagem 10.

Listagem 10. Subdividindo duas grades em duas unidades onde uma unidade é duas vezes mais larga que a outra
<div id="outermost" class="yui-g">
  <div id="firstgrid" class="yui-gc first">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>
    <div id="secondgrid" class="yui-gc">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>
</div>

yui-gc faz uma unidade de 66% e outra de 33% da largura disponível. O resultado é mostrado na Figura 5. Há outras variantes também que podem ser encontradas na documentação do YUI Grids. Uma exceção interessante é o estilo de grade yui-gb, que divide o espaço igualmente entre três unidades integradas.

Figura 5. É possível alterar o layout de unidades em uma grade CSS YUI Grids
A screenshot shows the same YUI CSS Grid as Figure 4, with a header, 4 columns and a footer, but the column widths have been changed so that columns 1 and 3 are wider than columns 2 and 4.

O YUI Grids é um pouco detalhado, mas funciona bem em todos os navegadores e tem bom desempenho em dispositivos móveis. O Yahoo diz que o YUI Grids é amplamente utilizado em seu próprio site. Se for verdade, realmente ele está bem testado e é compatível com todos os navegadores populares.

Poupe tempo, procure melhor

Além do Blueprint e do YUI Grids, é possível procurar na Web e encontrar dez ou doze outras estruturas para acelerar o design e desenvolvimento de páginas da Web. Algumas das estruturas são "pesadas", ditando a organização do projeto e outras convenções. Outros são "leves". Na verdade, um é uma coleção de fragmentos de CSS com explicações. Para descobrir todas as opções disponíveis, digite estrutura CSS em um mecanismo de pesquisa, examine os resultados e avalie se o projeto pode se beneficiar de um ou mais.

Independentemente da estrutura escolhida— e sim, deve-se escolher uma estrutura se não houver uma—ela certamente poupará tempo e esforços.

O sistema Usoniano Automático de Wright pode não ter tido sucesso, mas sua essência permanece viva.

Recursos

Aprender

Obter produtos e tecnologias

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=406793
ArticleTitle=Criando uma página da Web melhor
publish-date=06232009