Fonte: http://livedocs.adobe.com/flex/201/langref/flash/net/FileReferenceList.html 

A classe FileReferenceList fornece recursos para permitir o usuário selecionar um ou mais arquivos para upload. Um objeto FileReferenceList representa um grupo de um ou mais arquivos locais no disco do usuário como um array de objetos FileReference.

Para trabalhar com a classe FileReferenceList:

•  Instanciar a classe: var frl:FileReferenceList = new FileReferenceList();
• Chamar o método FileReferenceList.browse(), que abre uma janela que permiete o usuário selecionar um ou mais arquivos para upload: frl.browse();
• Depois o método é browse() ser chamado com sucesso, a propriedade fileList do pobjeto FileReferenceList é populado com um array de objetos FileReference.
• Chame FileReference.upload() em cada elemento do array fileList.

A classe FileReferenceList inclui um método browse() e uma propriedade fileList para trabalhar com múltiplos arquivos. Enquanto uma chamada para FileReferenceList.browse() está em execução, o arquivo pausa a reprodução em stand-alone e players externos para Linux e Mac OS X 10.1 e versões anteriores.

Propriedades Públicas

• fileList:Array – [somente leitura] Cria um novo objeto FileReferenceList.
• browse(typeFilter:Array):Boolean – Apresenta uma janela que permite o usuário selecionar um ou mais arquivos para upload.

Eventos

• cancel – Disparado quando o usuário fecha a janela.
• select – Disparado quando o usuário seleciona um ou mais arquivos para upload de uma janela de arquivo

Resolvi traduzir, apesar do meu inglês não ser muito avançado, da documentação da Adobe, para que todos tivessem um conhecimento maior da classe FileReference e de outras que pretendo traduzir. 

Essa especificamente agora, pois estarei postando aqui no Blog um tutorial de como desenvolver um MultiFileUpload com Flex e PHP.

Se alguma tradução não estiver de acordo, mande um e-mail, deixe um comentário. 

Boa leitura! 

FileReference 

Fonte:  http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/FileReference.html

A classe FileReference fornece recursos para upload e download de arquivos entre o cliente e o servidor. Uma janela avisa o usuário para selecionar um arquivo para upload ou um local para download. Cada objeto FileReference referencia um único arquivo no disco do usuário e tem propriedades que contêm informações sobre o arquivo: Tamanho, tipo, data de criação, data de modificação e tipo do criador (somente Macintosh).

Instâncias FileReference são criadas em dois passos:

• Quando você usa o operador new com o construtor FileReference: var fr:FileReference = new FileReference();
• Quando você chama o método FileReferenceList.browse(), que cria um array de objetos FileReference.

Durante a operação de upload, todas as propriedades de um objeto FileReference são populados por chamadas para os métodos FileReference.browse() ou FileReferenceList.browse(). Durante uma operação de download, a propriedade name é populada quando o evento select é disparado, todas as outras propriedades são populadas quando o evento complete é disparado.

O método browse() abre uma janela do sistema operacional para o usuário selecionar um arquivo para upload.

O método FileReference.browse() pemite o usuário selecionar somente um arquivo; o método FileReferenceList.browse() permite o usuário selecionar múltiplos arquivos. Depois de uma chamada bem sucedida do método browse(), chame o método FileReference.upload() para fazer o upload de um arquivo de cada vez.

As classes FileReference e FileReferenceList não permitem definir o local padrão de arquivos para a caixa de diálogo que os métodos browse() ou download() geram. O local padrão mostrado na caixa de diálogo é a pasta que recentemente foi mais acessada, se aquele local puder ser determinado, ou o desktop. As classes não permitem ler ou escrever a partir do arquivo transferido. Elas não permitem que o arquivo SWF que iniciou o upload ou download acesse o arquivo baixado ou a localização no disco do usuário.

As classes FileReference e FileReferenceList também não fornecem métodos para autenticação. Como servidores que requerem  autenticação, você pode baixar arquivos com o Flash Player, mas upload (em todos players) e download (no stand-alone ou player externo) falha. Observe os eventos FileReference para determinar se as operações foram concluídas com êxito e para tratar os erros.

Para operações de upload e download, um arquivo SWF pode acessar somente dentro do mesmo domínio, incluindo alguns domínios que estiverem especificados em um arquivo cross-domain policy. Coloque um arquivo policy no servidor se iniciar upload ou download de outro servidor de arquivos.

Enquanto chamadas para o FileReference.browse(), FileReference.browse(), FileReferenceList.browse(), ou FileReference.download() são executadas, o arquivo SWF pausa a reprodução em stand-alone e players externos para o Mac OS X 10.1 e anteriores.

Propriedades Públicas

• creationDate : Date - [somente leitura] A data de criação do arquivo no disco local.
• creator : Strng – [somente leitura ] O tipo criador de arquivo do Macintosh, que só é usado no Mac OS em versões anteriores ao Mac OS X.
• extension : String – [AIR][somente leitura] A extensão do arquivo.
• modificationDate : Date – [somente leitura] A data que o arquivo foi modificado no disco local.
• name : String – [somente leitura] O nome do arquivo no disco local.
• size : Number – [somente leitura] O tamanho do arquivo no disco local.
• type : String – [somente leitura] O tipo de arquivo.

Métodos Públicos

• FileReference() – Cria um novo objeto FileReference.
• browse(tipeFilter:Array = null):Boolean – Apresenta uma janela que permite o usuário selecionar um arquivo para upload.
• cancel():void – Cancela qualquer operação de upload ou download em curso neste objeto FileReference.
• download(request:URLRequest, defaultFileName:String = null):void – Abre uma janela que permite o usuário baixar um arquivo de um servidor remoto.
• upload(request:URLRequest, uploadDataFieldName:String = “FileData”, testUpload:Boolean = false):void – Inicia o upload de um arquivo selecionado por um usuário para um servidor remote.
• uploadUnencoded(request:URLRequest):void – Inicia o upload de um arquivo para uma URL sem qualquer codificação.

Eventos

• cancel – Disparado quando o upload ou download de arquivos é cancelado através de uma caixa de diálogo de navegação pelo usuário.
• complete – Disparado quando download é completado ou quando o upload gerar um HTTP status código 200.
• httpResponseStatus – [AIR] Disparado se a chamada para o método upload() ou uploadUnencoded tenta acessar os dados sobre HTTP e Adobe AIR é capaz de detectar e retornar o código de status da solicitação.
• httpStatus – Disparado quando um upload falha e um status HTTP está disponível para descrever a falha.
• ioError – Disparado quando uma operação de upload ou download falha.
• open – Disparado quando uma operação de upload ou download inicia.
• progress – Disparado periodicamente durante a operação de upload ou download.
• securityError – Disparado quando uma chamada para o método FileReference.upload() ou FileReference.download() tenta fazer o upload de um arquivo de um servidor ou pegar um arquivo de um servidor que esteja fora do sandbox de segurança da chamada.
• select – Disparado quando o usuário seleciona um arquivo para download ou upload de uma janela do sistema.
• uploadCompleteData – Disparado após os dados serem recebidos pelo servidor depois de um upload bem-sucedido.

Com esta combinação deixei o cliente satisfeito com o resultado visual, mas acabei projetando um verdadeiro problema para estruturar o XHTML, pois preciso agora de 6 imagens de fundo para cada caixa e devido ao meu layout ser líquido / elástico, acabei com a seguinte estrutura:

<span class=”wrap1″>
<span class=”wrap2″>
<span class=”wrap3″>
<span class=”wrap4″>
<span class=”wrap5″>
<span class=”wrap6″>
<div class=”box”>
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>
</span>
</span>
</span>
</span>
</span>
</span>

Acabei tendo que escrever um código repetitivo e nada semântico, além de tornar meu código mais difícil de manter, prejudicando assim a escabilidade de um portal que está constantemente recebendo novas implementações.

Para solucionar isto, resolvi escrever um código javascript, que insere tags <span> de forma dinâmica deixando o meu código XHTML apenas com a <div class=”box”>…</box>, como abaixo:

<div class=”box”>
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>

Para inserir as tags <span> necessárias para inserer as imagens de fundo na caixa, lembrando que cada tag aceita apenas uma imagem de fundo, escrevi o script a seguir:

// Crio um array
var alltags = new Array();
function changeBox() {
// O método getElementsByTagName() retorna um array com todas os elementos <div> que existem no documento e armazena no array alltags.
var alltags=document.getElementsByTagName(”div”);
// A estrutura de repetição for passa por cada elemento <div> armazenado em alltags.
for (i=0; i<alltags.length; i++) {
// Verifica se o elemento tem a classe box.
if (alltags[i].className==’box’) {
// Armazena na variável element em  cada interação do for o velor armazenado no índice i de alltags
var element = alltags[i];
// Armazena o objeto pai de element na variável content
var content = element.parentNode;
// Cria os elementos XHTML <span>
var wrap1 = document.createElement(’span’);
var wrap2 = document.createElement(’span’);
var wrap3 = document.createElement(’span’);
var wrap4 = document.createElement(’span’);
var wrap5 = document.createElement(’span’);
var wrap6 = document.createElement(’span’);
// Atribui para cada elemento XHTML <span> uma classe
wrap1.setAttribute(’class’, ‘wrap1′);
wrap2.setAttribute(’class’, ‘wrap2′);
wrap3.setAttribute(’class’, ‘wrap3′);
wrap4.setAttribute(’class’, ‘wrap4′);
wrap5.setAttribute(’class’, ‘wrap5′);
wrap6.setAttribute(’class’, ‘wrap6′);
// Insere um elemento filho ao elemento atual, antes de um determinado elemento. O elemento wrap1 é inserido em content antes de element
// Mais informações do método insertBefore no endereço: http://developer.mozilla.org/pt/DOM/element.insertBefore.
content.insertBefore(wrap1, element);
// O elemento wrap1 recebe o novo elemento wrap2. E assim acontece com os demais elementos respectivamente.
// Mais informações do método appendChild no endereço: http://developer.mozilla.org/Pt/DOM/Element.appendChild.
wrap1.appendChild(wrap2);
wrap2.appendChild(wrap3);
wrap3.appendChild(wrap4);
wrap4.appendChild(wrap5);
wrap5.appendChild(wrap6);
// Remove element de content
content.removeChild(element);
// E insere element para wrap6
wrap6.appendChild(element);
}
}
}
// Executa a função
changeBox();

E para finalizar nossas caixas vamos estilizá-las com CSS. Não irei comentar o CSS, pois acredito que se chegou até aqui buscando solução para um problema semelhante,  já domine a linguagem.

Além do CSS ques estilizam as classes que atribuímos por JavaScript as tags <span>, escrevi outros estilos para compor a página e representar melhor o exemplo.

*{
padding:0;
margin:0;
font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body{
background:transparent url(bg_body.png) repeat left top;
font-size:11px;
padding:100px 400px;
}
h2{
font-size:1.5em;
padding-bottom:.5em;
}
p{
color:#666;
}
.box{
padding:25px 30px 30px;
}
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .wrap6 {
display:block;
}

.wrap1 {
background:transparent url(bg_cr.png) repeat-y right center;
margin-bottom:1em;
}
.wrap2 {
background:transparent url(bg_cl.png) repeat-y left center;
}
.wrap3 {
background:transparent url(bg_tr.png) no-repeat right top;
}
.wrap4 {
background:transparent url(bg_tl.png) no-repeat left top;
}
.wrap5 {
background:transparent url(bg_br.png) no-repeat right bottom;
}
.wrap6 {
background:transparent url(bg_bl.png) no-repeat left bottom;
}

Para baixar os arquivos deste exemplo clique aqui.

Espero que visite o Portal do Professor daqui algum tempo e veja o resultado prático do que estou falando aqui.

Um abraço e até o próximo post.

É muito bom receber a notícia de lançamentos de livros na área de usabilidade e acessibilidade de autores brasileiros, que é uma área, dentre tantas, que temos que buscar autores estrangeiros e quase sempre em inglês.

O livro trata de aspectos de usabilidade com a finalidade de apoiar os estudantes e profissionais de sistemas de informação, em especial os sistemas orientados para a Web, a projetarem e administrarem interfaces que propeciem a seus usuários uma interação fácil e transparente. Isto é, uma interface que, quando acessada por um usuário para executar uma tarefa, seja projetada de tal forma que ele só precise focalizar sua atenção no trabalho que deseja executar.Para isso são abordados diversos aspectos da usabilidade, como:

• Interação Homem-Computador
• Estilos de Interface
• O Uso de Cores em Sistema Computacionais
• Estratégias de Usabilidade em Sistemas de Informação Globalizados
• e-Acessibilidade
• Alinhamento dos Requisitos de Usabilidade com as Diretrizes de Acessibilidade

Um abraço!

Esta semana lendo a revista Você S/A encontrei este artigo, escrito por Françoise Terzian.

Espero que gostem e aproveitem as dicas, da mesma maneira.

Saiba como usar a vitrine da internet para construir uma imagem pessoal positiva.

A internet é uma vitrine. Escreva seu nome no Google e confira o resultado: surge um rastro digital feito de listas de aprovação em concursos, comentários em salas de bate-papo, resultados de competições esportivas e fotos. A web registra pedaços de sua vida em forma uma imagem virtual. As empresas de recrutamento já descobriram isso faz tempo.

A consultoria americana Michael Page, que tem escritório em São Paulo, desenvolveu, por exemplo, uma ferramenta de busca própria, voltada para encontrar informações de profissionais na web. É impossível controlar tudo o que sai publicado na internet. Mas é possível aumentar a relevância de uma parcela das informações. Confira as sugestões e use a rede a seu favor.

CRIE UM BLOG

Um blog profissional, que discuta temas pertinentes ao trabalho, dá um toque de credibilidade à imagem de seu criador. “Um blog amplia a exposição do autor. As chance de o nome aparecer numa pesquisa aumenta e favorecem o profissional. Desde que o conteúdo tenha qualidade, relevância e português sem erros”, dis Ricardo Basaglia, gerente da divisão de TI da Michael Page. Mas, atenção: mantenha o site atualizado. Caso contrário, você vai passar a imagem de desorganização.

- Relevância - Há mais de 120 milhões de blogs na web. Ser criativo não é fácil.

SEJA NATURAL

Evite criar uma imagem altamente positiva. Trata-se de um erro facilmente percebido por headhunders e recrutadores. Ninguém é perfeito, e demonstrar humanidade, acredite, pode contar pontos a seu favor. As empresas valorizam candidatos autênticos. Portanto, seja transparente. Não minta nem omita. Tenha apenas bom senso. “Não faça na internet algo que você evitaria fazer no mundo real”, diz Fernando Mantovani, gerente do escritório de São Paulo da consultoria de recrutamento Robert Half.

PUBLIQUE CONTEÚDOS PERTINENTES

Se tiver algo realmente a dizer na internet, diga. Se não for importante, fique calado. “Criar mais um blog ou abrir uma comunidade para não ter o que dizer é perda de tempo. Tente ser singular no conteúdo”, diz o paulista René de Paula Júnior, autor de seis blogs independentes e funcionário da área de experiência do usuário da Microsoft.

SIGA SEU RASTRO

Uma vez por mês, Marcelo Sant’iago, diretor de novos negócios da agência de publicidade digital MidiaClick, de São Paulo, entra no Google, digita seu nome e faz uma busca. É uma boa medida. Os buscadores são um termômetro para saber o que aparece sobre ele e se há alguém falando algo a seu respeito. “Encontro meu trabalho em outros sites”, diz Marcelo Sant’iago.

EVITE A IMAGEM POPSTAR

Estar presente em todos os sites de relacionamento, blogs, fotologs e comunidades da internet não é bom para a imagem. “Fazer marketing pessoal em excesso atrabalha”, diz Karin Parodi, diretora de consultoria Career Center, de São Paulo. “Evite a alta exposição”, diz Karin.

TORNE-SE UM VERBETE

Há uma série de grandes executivos com um verbete criado na enciclopédia virtual Wikipédia. Muitos foram construídos de forma neutra, enquanto outros são partidários ou subjetivos demais. Criar um para o seu nome é simples. Se alguém já criu seu perfil, você poderá alterá-lo com informações mais precisas. A dica é fazer buscas frequentes para descobrir se há novidades ou erros envolvendo seu nome.

FAÇA USO DE SUA LISTA DE CONTATOS

No Linkedin, Plaxo ou qualquer outra rede de relacionamento, é importante trazer para a vida real a lista de contatos virtuais. “Cuide da sua rede de contatos, não procuré só quando necessitar”, diz Karin Parodi, diretora do Career Center. Ou seja, mantenha contato com as pessoas fora da internet.

CORRA PARA O LINKEDIN

É conselho entre headhunters, recrutadores e executivos: o Linkedin é a ferramenta de relacionamento profissional mais poderosa da internet. Preencha cada item com o máximo possível de informações. Tome cuidado: o que vale é a qualidade dos relacionamentos, e não a quantidade. Entre os contatos conhecidos, tente fazer uma seleção de quem realmente integrará sua rede. Evite adicionar desconhecidos recomendações exageradas. “O risco de obter uma série de recomendações sem critério é cair no descrédito. O recrutador percebe e checa esse tipo de coisa”, diz Ricardo Basaglia.

SEJA DISCRETO

O Orkut é um dos sites de relacionamento mais conhecidos do Brasil e também o de maior exposição. Marcar presença em suas páginas não é ruim. Pelo contrário, pode transmitir a imagem de profissional conectado. No entanto, use o bom senso. Não vá moderar a comunidade “Eu odeio a minha empresa”. Cuidado também com fotos ousadas.

MELHORE A PESQUISA

Já ouviu falar de Search Engine Optimization (SEO)? Trata-se de uma combinação de técnicas e estratégias para facilitaa a seleção de um site pelo Google, por exemplo. Otimizado, o site salta para os primeiros lugares na lista de resultados. As empresas usam SEO. Nada impede que um um profissional faça o mesmo para destacar seus blogs profissionais. Há alguns macetes tecnológicos, como programar o site para os buscadores, atualizar constantemente o conteúdo e fazer com que o maior número possível de sites inclua links para a sua página.

Fonte: revista Você S/A

PHP é uma das linguagens mais usadas para desenvolvimento de sites, pela sua simplicidade e grande suporte por empresas de hospedagem.

Trabalhei com projetos em PHP durante 5 anos, onde grande parte deste tempo trabalhei com o programador Rafael Jaques, mantenedor do blog www.phpit.com.br.

Por isso pedi para o mesmo escrever um artigo sobre o assunto.

Valeu Jaques pela contribuição!

Olá amigos! Tudo jóia?

Primeiramente eu gostaria de me apresentar. Meu nome é Rafael Jaques, tenho 19 anos e programo em PHP há 5 anos. Meu intuito aqui hoje é explicar pra vocês o que é o PHP, para que serve e coisas interessantes que se pode fazer com ele!

O que é o PHP?

PHP é uma linguagem que permite criar sites WEB dinâmicos, possibilitando uma interação com o usuário através de formulários, parâmetros da URL e links. A diferença de PHP com relação a linguagens semelhantes a Javascript é que o código PHP é executado no servidor, sendo enviado para o cliente apenas html puro. Desta maneira é possível interagir com bancos de dados e aplicações existentes no servidor, com a vantagem de não expor o código fonte para o cliente. Isso pode ser útil quando o programa está lidando com senhas ou qualquer tipo de informação confidencial.

O que diferencia PHP de um script CGI escrito em C ou Perl é que o código PHP fica embutido no próprio HTML, enquanto no outro caso é necessário que o script CGI gere todo o código HTML, ou leia de um outro arquivo.

O que pode ser feito com PHP?

Basicamente, qualquer coisa que pode ser feita por algum programa CGI pode ser feita também com PHP, como coletar dados de um formulário, gerar páginas dinamicamente ou enviar e receber cookies.

PHP também tem como uma das características mais importantes o suporte a um grande número de bancos de dados, como dBase, Interbase, mSQL, MS SQL Server, MySQL, Oracle, Sybase, Firebird, PostgreSQL e vários outros. Construir uma página baseada em um banco de dados torna-se uma tarefa extremamente simples com PHP.

Além disso, PHP tem suporte a outros serviços através de protocolos como IMAP, SNMP, NNTP, POP3 e, logicamente, HTTP. Ainda é possível abrir sockets e interagir com outros protocolos.

Como surgiu o PHP?

A linguagem PHP foi concebida durante o outono de 1994 por Rasmus Lerdorf. As primeiras versões não foram disponibilizadas, tendo sido utilizadas em sua home-page apenas para que ele pudesse ter informações sobre as visitas que estavam sendo feitas. A primeira versão utilizada por outras pessoas foi disponibilizada em 1995, e ficou conhecida como “Personal Home Page Tools” (ferramentas para página pessoal). Era composta por um sistema bastante simples que interpretava algumas macros e alguns utilitários que rodavam “por trás” das home-pages: um livro de visitas, um contador e algumas outras coisas.

Em meados de 1995 o interpretador foi reescrito, e ganhou o nome de PHP/FI, o “FI” veio de um outro pacote escrito por Rasmus que interpretava dados de formulários HTML (Form Interpreter). Ele combinou os scripts do pacote Personal Home Page Tools com o FI e adicionou suporte a mSQL, nascendo assim o PHP/FI, que cresceu bastante, e as pessoas passaram a contribuir com o projeto.

Estima-se que em 1996 PHP/FI estava sendo usado por cerca de 15.000 sites pelo mundo, e em meados de 1997 esse número subiu para mais de 50.000. Nessa época houve uma mudança no desenvolvimento do PHP. Ele deixou de ser um projeto de Rasmus com contribuições de outras pessoas para ter uma equipe de desenvolvimento mais organizada. O interpretador foi reescrito por Zeev Suraski e Andi Gutmans, e esse novo interpretador foi a base para a versão 3.

Em maio de 2000 o PHP3 deu espaço para a versão 4, a qual foi revolucionária, pois o PHP começava a engatinhar na Orientação a Objetos.

Em 2004 foi lançado o PHP5, com melhoramentos na OOP e muitas outras adições.
Atualmente o PHP6 está no forno e parece não demorar muito mais para ficar pronto.

Conclusão

Embora seja uma linguagem de código-fonte aberto, o que gera discriminação por parte de alguns, PHP é uma ferramenta poderosa que possui diversos recursos e uma sintaxe simples e fácil de ser aprendida. Linguagem promissora que ainda tem muito pra dar.

Espero ter sido claro em todas as especificações acima e qualquer dúvida ou sugestão vocês podem me encontrar no PHPit!

Um grande abraço a todos e fiquem com Deus!
Rafael Jaques

Pensada para o uso de conceitos e técnicas práticas, foi usada em diversos treinamentos e distribuida pela Rede de Desenvolvimento do SIEP.

Tendo sempre em mente contribuir para a comunidade, alcançando uma web mais rica e acessível, disponibilizo para donwload aqui, para todos os interessados.

Boa leitura!

“Semântica é a parte da gramática que estuda o sentido e a aplicação das palavras em um contexto.” 

O grande paradigma do desenvolvimento de sites e sistemas acessíveis está no uso correto de cada tag para o seu respectivo conteúdo, como por exemplo, ao pegarmos uma citação e seu autor, como segue abaixo, de que forma devemos implementar a demarcação?

“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”

- Lin Yutang

Que tal desta forma:

<p>“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”</p>

<p>- Lin Yutang</p>

Para muitos, isto será muito familiar, mais está forma não é correta, sendo que temos tags apropriadas como elementos semânticos:

<blockquote>“Somente aquele que administra suas idéias de forma livre é dono de suas idéias, e somente aquele que é dono de suas idéias não é escravizado por elas.”</blockquote>

<cite>- Lin Yutang</cite> 

Muios desenvolvedores estão habituados a escrever HTML desta forma e inclinados a desenvolver sites com várias tags <div> no início do desenvolvimento com a metodologia Tableless, claramente espelhandos em layouts estruturados com tabelas. Esta prática é chamada de divite, mas deve ser evitada.

Similarmente, devemos ser cautelosos sobre a divisão de elementos únicos com tags <div>. Isto é frequentemente realizado para propósitos de estilização, mas usualmente isto destrói com a marcação semântica, além de ser totalmente desnecessário.

A tag <div> é usada para criar divisões na página, mas ao mesmo tempo é utilizada para criar grupos de conteúdo. Por exemplo, por que fazer isto:

<div id=”menu”>

<ul>

<li>Item A</li>

<li>Item B</li>

<li>Item C</li>

</ul>

</div>

Quando podemos estruturar a página usando menos código:

<ul id=”menu”>

<li>Item A</li>

<li>Item B</li>

<li>Item C</li>

</ul>

A este uso desnecessário da tag <div> damos o nome de “divite”. O mesmo problema pode ocorrer comumente com desenvolvedores web ao utilizar o atributo class, ao que chamaremos de classite.

O atributo class existe para que possamos utilizar a mesma esitilização para vários elementos em comum, mas como a divite, muitos desenvolvedores utilizam o atributo class no lugar da tag apropriada, como no exemplo:

<p class=”address”>

Carlos Tristacci<br />

Rua 13 de Maio, 1535 <br />

Bento Gonçalves - RS

</p>

O correto é usar o elemento (X)HTML address, veja abaixo:

<address>

Carlos Tristacci<br />

Rua 13 de Maio, 1535 <br />

Bento Gonçalves - RS

</address>

Desenvolvedores tem também a tendência de usar o atributo class em diversos elementos que se repetem ao invés de simplificar aplicando a class para o elemento pai, veja o seguinte código:

<ul>

<li class=”tipos-queijo”>Cheddar</li>

<li class=”tipos-queijo”>Mozzarella</li>

<li class=”tipos-queijo”>Parmesan</li>

<li class=”tipos-queijo”>Swiss</li>

</ul>

Aqui uma maneira muito mais simplificada:

<ul class=”tipos-queijos”>

<li>Cheddar</li>

<li>Mozzarella</li>

<li>Parmesan</li>

<li>Swiss</li>

</ul>

Mas, quando temos o cuidado no uso das tag <div>, <p>, <span> juntamente com as demais tags e estudando padrões de desenvolvimento web, iremos utilizar elementos (X) HTML mais apropriados, eliminando a confusão do documento e possibilitando um código mais semântico, fácil de dar manutenção, leve e rápido de ser carregado pelo browser e enfim acessível.

Fico muito lisonjeado de poder contribuir para mais um dos portais mais acessados do Brasil, onde pude aprender muito com artigos de seus colunistas, chegando a minha hora de poder retribuir todo o aprendizado.

O principal disto é poder dividir com todos as minhas idéias e conhecimentos, receber críticas e elogios e principalmente alimentar a paixão por escrever.

Acessem meu primeiro artigo, Entendendo Orientação a Objetos, postado dia 10.05.2008:

http://www.mxstudio.com.br/flash/entendendo-orientacao-a-objetos/

Bom… espero que gostem deste e de outros artigos que eu venha a postar.

Um abraço e até a próxima!

Boa leitura!

O título pode parecer meio estranho, mas essa é uma das grandes verdades da web, o google é o maior cego da internet, e isso é muito bom para nós(desenvolvedores). Você deve estar pensando: “esse cara é louco”, mas vou explicar um pouco da minha lógica, e depois você pode tirar suas conclusões.

Quando eu comecei a montar minhas páginas html eu fui questionado sobre como eu tratava da acessibilidade nas minhas páginas eu respondi que não me importava muito com isso, que deficientes não usam a internet(como eu era ingênuo nessa época).

Acontece que os deficientes(parciais ou totais) acessam sim a web, e acessam muito, cerca de 20% das pessoas que navegam na web são portadoras de algum tipo de deficiência, e não pensar nelas é excluir milhões de possíveis visitantes aos nossos sites.

Mas agora você deve estar se perguntando: “como um cego acessa um site?”, pois eu respondo, através de leitores de tela(progamas que lêem o conteudo do site e expressam de forma verbal para o deficiente poder acessar a página) tais como Jaws ou DoxVox. Mas se na hora que desenvolvemos o site não pensarmos nesses programas, eles com certeza irão confundir o deficiente no lugar de ajudá-lo.

Devemos tomar medidas preventivas para que um deficiente tenha uma boa experiência quando navegar em nosso site, medidas como colocar conteúdos alternativos para leitores de tela, separar conteúdo de estilização, usar webstandards, escrever html semântico, conteúdo alternativo para navegadores que não suportam flash, e outros mais(nas próximas colunas eu explico cada técnica mais detalhadamente).

Agora você me pergunta: “onde o google do título entra nesta história?”, pois ele é mais importante, mais inteligente e mais cego do que você pode imaginar.

Veja por este lado, quanto melhor a colocação do seu site numa busca mais visitas você vai ter. Agora você já se perguntou como o google determina quais sites aparecerão melhor numa busca?

Pois o google visita seu site semanalmente, e quanto mais você atualizar ele melhor ele ficará colocado numa busca, isso claro, se o google conseguir ler seu site. Para o google ler seu site ele precisa de conteúdo, muito conteúdo, e a melhor forma de se conseguir muito conteúdo é usar pouco código na marcação, e para isso existem os webstandards, que separam estruturação de estilização. Quanto mais acessível aos leitores de tela seu site for melhor cotado ele será pelo google e mais visitas ele terá, pois o google é o grande oráculo cego da web.

Vivemos num país onde existem muitas desigualdedes e preconceitos, pelo menos na internet vamos tentar fazer algo para mudar esse quadro.

Autor: Anderson Triacca ( www.andersontriacca.com )