euconectei web

Criação de Layout: Expansível ou Fixo?

2011-04-09T11:46:00.003-03:00

Uma das primeiras perguntas que nos fazemos ao começar a pensar num layout é ~~será que dá pra desenvolver na praia?~~ como disponibilizar as informações. Junto com essa pergunta vem uma outra: Layout Expansível (que ocupa toda a àrea do navegador) ou fixo (que fica "preso" a uma determinada àrea independente da resolução da tela)?

Esta é uma questão que somente você e seu cliente podem entrar em ~~guerra~~ acordo.

Então para facilitar nossa vida, vou disponibilizar umas maneiras simples de montar cada um dos tipos. Vamos começar com Layout Expansível.

Como sempre fazemos, vamos começar por partes, abaixo temos o html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <link type="text/css" rel="stylesheet" href="estilo.css" />
  </head>
  <body>
    <div id="cabecalho">
      <h1>Cabeçalho</h1>
    </div>
    <div id="conteudo">
      <div id="esquerda" class="coluna">
        <h2>Coluna Esquerda</h2>
        <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd  adihasidiasdiasdhaisdads dasidhasdhads </p>
      </div>
      <div id="principal">
        <h2>Coluna Principal</h2>
        <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
      </div>
      <div id="direita" class="coluna">
        <h2>Coluna Direita</h2>
        <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
      </div>
    </div>
    <div id="rodape">
      <address>Rua com Endereço, s/n - Lugar - UF</address>
    </div>
  </body>
</html>

Feito o html, chegou a hora de aplicar o css nele. Abaixo temos o CSS:

@charset "utf-8";
/* CSS Document */

#cabecalho, #rodape {
 background-color:#00CCFF;
}

/* Modo Expansível */


#principal {
 margin: 0 200px;
}
#conteudo {
 position: relative;
 min-height: 300px;
}
.coluna {
 background-color:#CCCCCC;
 position: absolute;
 top:0;
 width: 190px;
}
#esquerda {
 left:0;
}
#direita {
 right: 0;
}

/* Modo Fixo */

#centralizador {
 margin: 0 auto;
 width: 900px;
}
#colesq, #coldir {
 float: left;
 width: 150px;
}
#centro {
 float:left;
 width: 600px;
}
#corpo {
 display: table;
}

Finalizando ~~com felicidade~~ o css, poderemos ver a página pronta

Chegou a hora de começarmos a mexer no Layout Fixo, com isso veremos um diferença na criação da página. Segue o código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <link type="text/css" rel="stylesheet" href="estilo.css" />
  </head>
  <body>
    <div id="centralizador">
      <div id="cabecalho">
        <h1>Cabeçalho</h1>
        <ul id="nav">
          <li><a href="#">Item1</a></li>
          <li><a href="#">Item2</a></li>
          <li><a href="#">Item3</a></li>
          <li><a href="#">Item4</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
        </ul>
      </div>
      <div id="corpo">
        <div id="colesq">
          <h2>Coluna Esquerda</h2>
          <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
        </div>
        <div id="centro">
          <h2>Coluna Principal</h2>
          <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
        </div>
        <div id="coldir">
          <h2>Coluna Direita</h2>
          <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
        </div>
      </div>
      <div id="rodape">
        <address>Rua com Endereço, s/n - Lugar - UF</address>
      </div>
    </div>
  </body>
</html>

Agora, vamos ~~a la playa~~ ao css:

@charset "utf-8";
/* CSS Document */

#cabecalho, #rodape {
 background-color:#00CCFF;
}
/* Modo Fixo */

#centralizador {
 margin: 0 auto;
 width: 900px;
}
#colesq, #coldir {
 float: left;
 width: 150px;
}
#centro {
 float:left;
 width: 600px;
}
#corpo {
 display: table;
}

/* Menu Horizontal */

#nav {
 list-style:none;
 display:table;
 margin:0 auto;
 padding:0;
}
#nav li{
 float:left;
 margin:3px 2px;
}
#nav a {
 background-color:#FFFFFF;
 display:block;
 text-align:center;
 text-decoration:none;
 width:50px;
}
#nav a:hover {
 background-color:#333333;
}

Bons estudos e divirta-se ;-)

Criando formulários com CSS

2011-02-22T11:58:00.007-03:00

Formatar um formulário semântico e com CSS não tem mistério.

Utilizaremos somente as tags próprias para o formulário. Sem a necessidade de <br>, ou <div>, ou qualquer outra tag que não seja própria do formulário.

Todo e qualquer estilo (tamanho, espaçamento, cores, etc) será dado pelo CSS.

Então vamos ao código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Documento sem título</title>
     <link href="css/estilo.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
     <form action="">
        <fieldset>
           <legend>Dados Pessoais</legend>
           <label>Nome:
              <input type="text" name="nome" id="nome" />
           </label>
           <label>Sobrenome:
              <input type="text" name="sobrenome" id="sobrenome" />
           </label>
           <label>Data de Nascimento:
              <input type="text" name="dtnasc" id="dtnasc" />
           </label>
           <label>CPF:
              <input type="text" name="cpf" id="cpf" />
           </label>
        </fieldset>
        <fieldset>
           <legend>Endereço</legend>
           <label>Logradouro:
              <input type="text" name="logradouro" id="logradouro" />
           </label>
           <label>Número:
              <input type="text" name="numero" id="numero" />
           </label>
           <label>Bairro:
              <input type="text" name="bairro" id="bairro" />
           </label>
           <label>Cidade:
              <input type="text" name="cidade" id="cidade" />
           </label>
           <label>UF:
              <input type="text" name="uf" id="uf" />
           </label>
        </fieldset>
        <fieldset>
           <legend>Mensagem</legend>
           <label>Assunto:
              <input type="text" name="assunto" id="assunto" />
           </label>
           <label>Corpo:
              <textarea name="corpo" id="corpo"></textarea>
           </label>
        </fieldset>
        <input type="submit" value="Enviar" />
        <input type="reset" value="Limpar" />
     </form>
  </body>
  </html>

Com esse código pronto, temos agora um formulário básico ~~e desorganizado~~.

Começa entao, uma ~~batalha árdua~~ nova fase de criação dos estilos. Como vemos abaixo:

@charset "utf-8";
/* CSS Document */

* {
 font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 margin:0;
 padding:0;
}
fieldset {
 border:1px dotted #CCC;
 margin:5px 0;
 padding:5px;
 width:200px;
}
input[type=reset] {
 background-color:#FC0;
 border:none;
 width:100px;
}
input[type=submit] {
 background-color:#0C0;
 border:none;
 margin:0 0 0 3px;
 width:100px;
}
legend {
 background-color:#333;
 color:#CCC;
 font-size:14px;
 padding:5px 10px;
}
label {
 display:block;
 width:200px;
}
label input {
 border:1px solid #AEAEAE;
 margin:0 5px;
 width: 190px;
}
label input:focus {
 border:1px solid #000;
}
textarea {
 border:1px solid #AEAEAE;
 margin:0 5px;
 height:100px;
 width:190px;
}

Como final temos o seguinte ~~desastre~~ resultado:

Bons estudos e divirta-se! ;-)

Servindo HTML & XHTML

2011-01-24T13:36:00.003-02:00

Este artigo descreve de maneira sumária alguns aspectos de como os servidores enviam o XHTML para os agentes de usuário (p. ex.: um navegador), bem como a maneira como estes agentes processam a marcação recebida. Trata-se de uma descrição de itens específicos e não de uma norma do W3C.

Os tópicos desse artigo se inspiram na FAQ como declarar codificação de caracteres em um documento HTML ou XHTML. As informações aqui contidas esclarecem também o porquê de certos aspectos da estilização via CSS não surtirem o efeito planejado, ou mesmo sofrer variações de um agente de usuário para outro.

Tipos de MIME

Quando o servidor envia um documento para o navegador, envia também informações adicionais com o documento denominadas de Cabeçalho HTTP.

O campo Content-Type do cabeçalho HTTP descreve o tipo de dado que está sendo enviado. Essa informação é passada em um rótulo definindo o tipo de MIME da mídia. Observe a seguir um cabeçalho HTTP para um arquivo HTML usando o tipo de MIME text/html. Notar que o campo Content-Type pode, também, expressar a codificação de caracteres do documento.

HTTP/1.1 200 OK
Date: Wed, 05 Nov 2003 10:46:04 GMT
Server: Apache/1.3.28 (Unix) PHP/4.2.3
Content-Location: CSS2-REC.en.html
Vary: negotiate,accept-language,accept-charset
TCN: choice
P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml
Cache-Control: max-age=21600
Expires: Wed, 05 Nov 2003 16:46:04 GMT
Last-Modified: Tue, 12 May 1998 22:18:49 GMT
ETag: "3558cac9;36f99e2b"
Accept-Ranges: bytes
Content-Length: 10734
Connection: close
Content-Type: text/html; charset=utf-8
Content-Language: en

O tipo de MIME text/html é a escolha natural para documentos HTML. Quando um navegador recebe um arquivo com esse tipo de MIME assume que a marcação segue a sintaxe HTML e usa um parser HTML para interpretar a marcação.

Ao contrário da HTML a XHTML é uma linguagem de marcação baseada na XML. A sintaxe XML é diferente da sintaxe HTML e os processadores XML são bem mais rigorosos no tratamento de erros de marcação. Conteúdos desenvolvidos em conformidade com a XML devem ser bem formados e válidos além de estarem perfeitamente integrados aos mecanismos de leitura das ferramentas de processamento, de transporte de dados e automação existentes no mundo da XML. Muitos desenvolvedores preferem usar XHTML em função do rigor que a XML impõe à edição e processamento dos documentos.

Para servir marcação XHTML, ao navegador, como XML você deve usar um dos seguintes tipos de MIME: application/xhtml+xml, application/xml ou text/xml. O W3C recomenda que para servir XHTML como XML se use o primeiro dos tipos de MIME citados, ou seja, application/xhtml+xml.

O navegador lê XML usando um parser XML e não um parser HTML.

Infelizmente o navegador Internet Explorer nas suas versões 8 e anteriores não suportam arquivos servidos como XML, embora muitos outros navegadores suportem. Para contornar o problema de suporte à XML pelos navegadores a maioria dos arquivos são servidos com uso do tipo de MIME text/html. Nesses casos o agente de usuário trata os arquivos como se fossem HTML e usam um parser HTML.

Se o navegador tratar XML como HTML você deve estar atento às difereças de formato entre as duas marcações quando escrever XHTML para assegurar-se de que as diferenças entre a sintaxe XML e HTML não confundam o navegador. Essa atenção deve estar voltada também para as diferentes maneiras de codificação de caracteres e declaração de idioma no documento.

O Apêndice C da especificação para a XHTML recomenda algumas diretrizes de compatibilidade para servir XHTML como HTML. Elas são particularmente importantes para versões antigas de navegadores. Aquelas diretrizes recomendam, entre outras coisas, que se deixe um espaço em branco antes de '/>' no final de uma tag de fechamento (tais como, img, hr ou br), que se use tanto a o atributo lang da HTML como o atributo xml:lang da XML, que se use os atributos id e name para fragmentos identificadorees (âncoras), etc.

Modo 'Standards' versus modo 'Quirks'

Os navegadores atuais estão aptos a apresentar um arquivo HTML tanto no modo standards com no modo quirks. Isso significa que diferentes regras são aplicadas para apresentar um documento, umas para comportamento segundo as recomendações do W3C e outras para comportamentos não standards para versões antigas de navegadores.

Nas versões mais recentes da maioria dos navegadores o modo standards é acionado pela presença da declaração do DOCTYPE. A ausência de um DOCTYPE pode resultar em diferentes renderizações de um navegador para outro.

As imagens a seguir mostram tais diferenças de renderização

Documento renderizado em modo standards.

O mesmo documento renderizado em modo quirks.

Clique as imagens para abrir a página HTML correspondente. Se você abrir as páginas no Internet Explorer vai constatar as diferenças mostradas nas imagens.

As duas imagens mostram a renderização de duas páginas com marcação HTML e estilização CSS exatamente iguais. A única diferença entre elas que a página mostrada na figura à esquerda tem no início da sua marcação uma declaração DOCTYPE e a da direita não tem a declaração. Um arquivo marcado com uma declaração de DOCTYPE apropriada normalmente é renderizado em modo standards pela maioria dos navegadores mais recentes. A falta de um DOCTYPE na marcação causa renderização em modo quirks.

As diferenças visuais mostradas nas imagens resultam na adoção de critérios em desacordo com os Padrões Web para implementações de renderização em diferentes navegadores, tais como o Internet Explorer:

Em modo quirks a largura definida por regra CSS para o div não considera quaisquer acréscimos de larguras definidas para padding e border e em modo standards essas larguras são somadas – essa é a razão porque o box mostrado na figura à esquerda (modo standars) e mais largo.
Em modo quirks a tabela não herda a definição CSS de font size para o elemento body - essa é a razão porque o texto tem fonte maior nesse modo.

A finalidade original do DOCTYPE é fornecer informações sobre a linguagem de marcação do documento. Observe a seguir um exemplo mostrando a declaração de DOCTYPE no início da marcação (destaque com borda na cor vermelha ).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>XHTML document</title> 
    <style type="text/css">
    body { background: white; color: black; font-family: arial, sans-serif; font-size: 12px; }
    p { font-size: 100%; }
    h1 { font-size: 16px; }
    div { margin: 20px; width: 170px; padding: 50px; border: 6px solid teal; }
    table { border: 1px solid teal; }
    </style> 
    </head> 

<body> 
    <h1>Test file for Standards/Quirks</h1> 
    <div>
        A div with CSS width:170px, margin:20px, padding:50px and border:6px.
        </div> 
    <p>Text in a p element.</p>
    <table> 
        <tr><td>Text in a table.</td></tr> 
        </table>
    </body> 
</html>

Diz-se que navegadores que se comportam de maneira diferente de acordo com o modo processam o chaveamento do DOCTYPE .

A princípio é uma boa ideia servir suas páginas web em modo standards, isto é, declare sempre um DOCTYPE.

Os DOCTYPEs e a declaração XML

Um aspecto relacionado ao uso de DOCTYPEs tem importância decisiva na declaração de caracteres e na correta aplicação de estilos.

Pelo fato que XHTML 1.0 é baseada em XML é possível inserir no início da marcação uma declaração XML ainda que o documento seja servido como HTML. Observe a inserção dessa declaração na marcação mostrada anteriormente (a declaração XML foi destacada em itálico e na cor vermelha.):

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xml‎ns="http://www.w3.org/1999/xhtml">
<head>
...

Em navegadores como os Internet Explorer 7, Firefox, Safari, Opera, Google Chrome e outros a presença ou não da declaração XML em uma marcação contendo um DOCTYPE causa a renderização em modo stanrd.

Contudo, no Internet Explorer 6 qualquer marcação, exceto byte-order mark, inserida antes do DOCTYPE causa a renderização em modo quirks.

O Internet Explorer 6 ainda é muito usado é isso pode ser um problema. Se você quer se assegurar que suas páginas são renderizadas consistentemente nos demais navegadores standards você precisa saber lidar com isso.

É óbvio que se o seu documento foi criado com marcação que não é afetada pelas diferenças de renderização entre os modos standards e quirks isso não é um problema. Mas, se por outro lado a marcação pode causar renderizção inconsistente você precisa lançar mão de artifícios CSS para acabar com as diferenças ou então omitir a declaração XML.

Lembre-se que ao omitir a declaração XML você deverá optar por uma codificação de caracteres em UTF-8 ou UTF-16 para sua página. (Ver Declaração de codificação de caracteres em HTML para esclarecimentos sobre as consequências da declaração de caracteres.)

Fonte: W3C

Desenvolvimento Web: dicas e sermões

2011-01-21T11:12:00.005-02:00

A web hoje é um fenômeno que está crescendo a cada dia, e a medida que ela cresce, cresce também parte daqueles que fazem a Web: os Web Designers, Web Master e por ai vai. O que acontece é que muitos desses “profissionais”, aprendem a trabalhar com duas ou até três ferramentas, e saem desenvolvendo sites e mais sites que mais se parecem com um misturado de gambiarras sem sentido.

Este post irá reunir alguns tópicos sobre o desenvolvimento Web em geral, abordando desde algumas dicas à alguns sermões para os profissionais da Web.

Use todos os seletores CSS avançados

Você realmente conhece a fundo o CSS? Nesta dica irei reunir algumas formas avançadas de selecionar elementos para definir os estilos.

Attribute selectors

Nesse tipo de seletor ele irá pegar um elemento baseado em algum atributo definido no XHTML. No exemplo abaixo todos os elementos img com a propriedade alt definida serão afetados pelo estilo:

img[alt] {
   border: 1px dotted #999;
}

Um outro exemplo é aplicar o estilo dependendo do conteúdo dos atributos:

p[class="title"]{
   font-size:16px;
   color:green;
}

Neste caso, todos os parágrafos que tenham a classe title serão afetados pelo estilo.

Child selectors

Um child selector atinge o filho “direto” de um elemento. Por exemplo, suponha que tenhamos a seguinte marcação:

<div>
   <a href="#">Teste</a>
   <ul>
      <li><a href="##">Teste1</a></li>
      <li><a href="##">Teste2</a></li>
   </ul>
</div>

Perceba que somente o primeiro link é que é um filho direto da div, os outros links são filhos diretos da lista e não da div.

div > a {
   color: black;
}

O estilo acima só irá afetar o primeiro link, uma vez que ele é filho direto da div.

Adjacent sibling selectors

Este tipo de seletor consiste em pegar o elemento que possui o mesmo pai e que esta imediatamente após outro seletor.

<h2>Título</h2>
<p>Este aqui será estilizado</p>
<p>Este aqui não será estilizado</p>

E com o seguinte CSS, somente o primeiro parágrafo será estilizado.

h2 + p {
   color: red;
}

Existem muitas outros seletores, não poderei abordar todos para não deixar o post muito grande. Mas isso serve como um incentivo para vocês buscarem conhecer mais.

Use convenções de nomes

Quem aqui já desenvolveu um site e não se preocupou muito com a organização, sabe a grande dor de cabeça que isto dá, por isso, uma outra dica que eu dou é usar convenções de nomes para os seus elementos. E claro, nunca misture inglês com português, use somente um idioma.

Abaixo uma lista de convenções de nomes geralmente usadas (em inglês):

#branding
#content_sub
#content_main
#content_supp
#nav_main
#nav_sub
#site_info

Instale as extensões Firebug e Web Developer

Eu acredito que a grande maioria dos desenvolvedores Web utilizam o Firefox para seu ambiente de produção. Caso você não use, recomendo fortemente que o faça agora. O Firefox possui duas extensões poderosas e que auxiliam e muito o desenvolvimento de páginas web: Firebug e Web Developer.

Você pode baixá-las aqui: http://getfirebug.com/ e https://addons.mozilla.org/en-US/firefox/addon/60/.

Quando você instala essas extensões, é criada uma barra na parte superior do navegador, com diversas opções do Web Developer. O Firebug fica no canto direito inferior da tela. Após instalar o Firebug irá aparecer um ícone de um inseto que ao ser clicado irá abrir o Firebug.

Com o Web Developer podemos editar o CSS enquanto estamos visualizando a página no navegador e obter o resultado na medida que fazemos as alterações. Podemos também ver diversas informações da página. Uma função que eu gosto muito é a de exibir a topografia. Vá em informações > Exibir topografia e veja o resultado.

Usando Firebug podemos facilmente descobrir onde está determinado elemento ou a que elemento pai um elemento filho pertence. Com o Firebug instalado e o Firefox aberto, clique no ícone do inseto para abrir o Firebug.

Clique agora no ícone da setinha azul, a segunda opção da esquerda para a direita. Após fazer isso passe o mouse por cima da página, você vai perceber que ele vai selecionando os elementos, quando você clicar em algum elemento ele irá mostrar o XHTML e o CSS daquele elemento.

Separe o estilo do conteúdo

Já se foi a época em que usávamos o HTML para definir o visual das páginas Web, hoje em dia devemos utilizar o CSS para este fim. O XHTML é onde definimos a marcação e colocamos o conteúdo, somente isso! Todo a estilização é feita via CSS. Uma forma interessante de ver se você está fazendo a coisa certa é verificar como sua página fica sem o CSS. Se ela ainda possuir fontes customizadas, fontes coloridas, backgrounds e etc, isso é um mal sinal, pois você está usando o XHTML para estilizar sua página. Com o Web Developer é possível verificar como a página fica sem o CSS.

Para fazer isso vá em “Nenhum erro de CSS > Desativar estilos > Todos os estilos”, após fazer isso o CSS será desativado e o navegador só ira renderizar o XHTML.

Teste em todos os navegadores

Um outro ponto de suma importância: teste o site em todos os navegadores, não há nada mais desagradável do que ver um site funcionar perfeitamente em um navegador mas em outro navegador ele está com erros. Um exemplo é o site da Wizard . Até o presente momento ele está com o layout quebrado no Google Chrome.

Preze pela acessibilidade

Você sabe o que é acessibilidade? Você sabe as técnicas utilizadas para prover uma acessibilidade? Se você não sabe responder essas perguntas, provavelmente seus sites são bastantes inacessíveis.
Propriedades como alt e title são essenciais para uma boa acessibilidade. Imagine que você tem uma imagem como um link, um internauta cego, logicamente não vai conseguir ver a sua página, então ele usa um leitor de tela.
Quando o leitor de tela vê uma imagem, ele procura por propriedades como alt e title, que descrevem o que é aquilo. Dessa forma um internauta cego conseguiria saber do que se trata aquele link. Se não houver um atributo deste tipo, provavelmente o leitor de tela irá ler o destino do link. O que não seria nada esclarecedor para o internauta.
Agora vamos mudar de situação, imagine um internauta que não consiga usar o mouse, ou que tenhas dificuldades de usar o mouse, então ele usa na maior parte do tempo o teclado para trabalhar no computador. Imagine aqueles famosos menus que quando passamos o mouse em cima aparece o submenu, como o deficiente iria conseguir imaginar que ali tem submenus?
Outra dificuldade seria navegar pela página, navegar pelos links utilizando apenas o teclado. Para problemas desse tipo existe o tabindex, uma propriedade que define a “prioridade” de cada elemento. Ou seja quando pressionarmos a tecla TAB os elementos serão selecionados de acordo com a prioridade definida pela propriedade tabindex.
Você pode estar sentindo falta de um apelo anti-flash, mas isso é assunto para um post inteiro, então para finalizar deixo esses vídeos que falam muito sobre acessibilidade, é um pouco grande mas vale muito a pena assistir. Espero que após verem esses vídeos, seus sites sejam mais acessíveis.

Fonte: I/O Tecnologia

Padrões de Projeto: o que são e por que usá-los

2011-01-21T10:26:00.000-02:00

Se você estuda, simpatiza ou trabalha em alguma área relacionada ao desenvolvimento de software, talvez já tenha ouvido falar em Padrões de Projeto, ou pelo menos já tenha esbarrado por aí com o termo Design Pattern. Nesse post explicarei o que são, para que servem e citar algumas vantagens do uso de tais padrões no desenvolvimento de softwares orientados a objetos.

O que é um Padrão de Projeto?
A definição clássica dos padrões estabelece que um padrão é uma forma de “descrever soluções para problemas recorrentes no desenvolvimento de sistemas de software orientados a objetos. Um padrão de projeto estabelece um nome e define o problema, a solução, quando aplicar esta solução e suas conseqüências”.

Trocando em miúdos, os padrões estabelecem algumas técnicas genéricas que podem ser utilizadas para resolver algum tipo de problema de desenvolvimento. Como ninguém gosta de “reinventar a roda”, surgiram os primeiros padrões de projeto, que acabaram auxiliando os demais desenvolvedores em seus problemas semelhantes.

Imagine que você está escrevendo uma classe que só poderá ser instanciada uma única vez, como você fará isso? E se você quiser encapsular as chamadas ao banco de dados? E se você precisar encontrar uma maneira para alterar o comportamento dos seus objetos em tempo de execução? E se você quiser encapsular a criação de objetos? E se você quiser que o seu web site tenha todos os seus componentes separados por responsabilidades? Num primeiro momento, você talvez quebre um pouco a cabeça e acabe bolando uma maneira de resolver todos esses problemas, porém se você já tivesse conhecimento sobre os padrões DAO, Singleton, Strategy, Factory e o conjunto de padrões do MVC talvez você não tivesse tanta dor de cabeça e não teria gasto tanto tempo ~~reinventando a roda~~.

Perceba que um padrão não lhe dará o código da sua classe prontinho, ao invés disso ele lhe servirá para lhe elucidar em relação a solução do problema. O fato que prova isto é que raramente os desenvolvedores irão seguir “à risca” o que sugere o padrão, fazendo algumas adaptações acerca da sugestão original.

Um ponto que muita gente se engana, é quando alguém diz que “padrões são coisas do Java ou do PHP”. Perceba que no inicio do post eu falei que os padrões estabelecem técnicas genéricas, portanto estas não estão ligadas a nenhuma linguagem específica, e sim aos problemas de desenvolvimento de softwares OO.

Por que usar os Padrões de Projeto?
Além de evitar que você ~~perda~~ perca tempo reinventando a roda, os padrões lhe sugerem uma solução bacana do ponto de vista OO. O que pretendo dizer é que o uso deles nos ajudam a desenvolver um projeto com bom nível de coesão e reusabilidade, o que facilita o processo de manutenção do software. Lembre-se que a manutenção é justamente o que toma o maior período do tempo de vida de qualquer projeto de desenvolvimento.

Outro ponto, não menos importante, é que muitas vezes você não está desenvolvendo um projeto sozinho. Se toda a equipe está familiarizada com os Patterns você poderá economizar bastante tempo caso seja necessário explicar como você desenvolveu uma funcionalidade qualquer, fazendo com que você não precise ‘baixar o nível’. Ao invés de dizer “fiz com que o construtor da classe não pudesse ser visível às demais e coloquei um método getInstance pra retornar a única instância da classe”, você simplesmente diz: “usei o Singleton”.

A partir do momento que você sabe utilizar os Design Patterns de forma coerente, podemos dizer que você é, de fato, um bom desenvolvedor OO.

Quero saber qual caminho seguir pra estudar sobre o assunto
Uma forma é buscar as definições dos padrões no Google, principalmente pelas definições “oficiais”. Os principais padrões são os do GoF (Gang Of Four) e os J2EE (voltados para projetos empresariais). Recomendo estudá-los nesta ordem e depois buscar outros padrões de acordo com a sua necessidade.

Se você prefere um estudo mais formal, recomendo os livros:

Design Patterns: Elements of Reusable Object-Oriented Software (mais completo)
Head First: Design Patterns ou Use a Cabeça: Padrões de Projeto (pra quem gosta da série)

Infelizmente não achei o primeiro livro em nenhuma loja, apenas sua versão traduzida que encontrei aqui. Já o segundo livro eu encontrei aqui e sua versão traduzida aqui.

Bom gente, é isso… Qualquer dúvida, crítica ou sugestão que vocês tenham, deixem nos comentários! Espero que o post tenha ajudado a vocês a ter uma noção geral sobre Design Patterns. Até a próxima!

Fonte:I/O Tecnologia