tudo que você precisa saber sobre robots.txt
Por Felipe de Albuquerque na categoria SEO em 29 de março de 2010
O arquivo robots.txt é como se fosse um cardápio que informa o que deverá ser consumido e o que não deverá ser. É como se fosse um cartão de acesso para os mecanismos de busca, mas caso esse o (Robots.txt) não exista o seu site será vasculhado, isso significa que todas as pastas e arquivos serão analisados e provavelmente indexados pelos agentes de busca. Por default os robots (googlebot, por exemplo) são programados para vasculhar e indexar tudo que encontre.
Você pode estar se perguntando?… Mas, eu quero que o Google e os demais mecanismos de busca encontrem o meu site. Qual seria o motivo de me preocupar com o robots.txt já que ele verifica o meu site sem este artifício?
É verdade, você não precisaria se preocupar com isso. Mas se o seu web software tiver pastas privadas com documentos de sigilo… já imaginou se o seu cliente encontrar esse conteúdo em uma pesquisa no google por exemplo… Ou até mesmo se o projeto estiver em fase de desenvolvimento e a URL de teste vazar, e de alguma forma os Robots encontram e indexam todo projeto, e os concorrentes do seu cliente passarem a ter acesso, e ai?
Mas o que vocal está tentando me dizer?
O Google e outros mecanismos de buscas tém algoritmos sofisticados que varem os códigos do site e eles guardam estas informações para quando for digitada alguma palavra chave no campo de busca, o mesmo cruza o texto digitado com as informações que ele tem guardado e monta a página com os possíveis sites que você possivelmente está procurando.
E esse robots.txt, como ele se comunica com os tais robots?
Assim que GoogleBots visita o seu site ele procura o arquivo robots.txt, que deverá ser salvo no root de seu site e nesse arquivo vamos dizer o que ele vai e o que ele não vai indexar.
A sintaxe é assim:
#comente assim
User-agent: *
Disallow: /
Onde o User-agent são os robots, o “ * ” diz que é para todos os bots, e o Disallow são as pastas que ele não poderá indexar, neste caso o “/” está dizendo que nada poderá ser indexado, mas preste bem atenção porque se você não colocar o “/” ele indexará tudo pois o caractere “/” significa um diretório e se você omitir esse caractere o Robots irá compreender o contrário que você está querendo. Veja o próximo exemplo.
User-agent: *
Disallow: #Perceba que omitimos o / e com isso a propriedade Disallow ficará sem sentido e o bot indexará todo o seu site
O exemplo também pode ser feito utilizando uma meta tag.
// Assim estamos dizendo que nada poderá ser indexado
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
Vamos a outro exemplo que tem na Wikipédia:
User-agent: Googlebot
#As pastas que serão visitadas pelo Googlebot
Allow: /post
Allow: /portifolio
#As pastas que não serão visitadas pelo Googlebot
Disallow: /confidencial
Disallow: /protegido
Este exemplo especifica o bot (Googlebot) e informa as pastas que não serão indexadas. É importante ter em mente que as demais pastas do site serão indexadas normalmente.
Alguns robots:
- Google: User-agent: Googlebot
- Yahoo: User-agent: Slurp
- MSN: User-agent: msnbot.
- Todos os mecanismos: User-agent: *.
Observações importantes
O arquivo robots.txt é uma técnica importante de SEO (Search Engine Optimization), mas não é um arquivo de segurança para o seu projeto, ele apenas sinaliza para os mecanismos de busca o que deve e o que não deve ser acessado. Outro fator é que é um arquivo .txt e fica na raiz do site ele poderá ser acessado por qualquer pessoa e nele tem informações dos caminhos de sua aplicação e com isso um hacker mal intencionado poderá ter uma brecha para invadir sua aplicação. Antes de ir implementando essa técnica é importante conversar com os responsáveis pela segurança de redes do seu projeto ou dependendo da sua necessidade você poderá substituir o .txt pela meta tag nas páginas especificas.
Em suas buscas pelo assunto você também poderá ver outras nomenclaturas para as engine de busca que eu me refiro aqui como robots, você poderá achar algo como spiders, crawlers entre outros que se referem à mesma coisa que é um algoritmo de busca.
Menu Drop Down com jQuery
Por Felipe de Albuquerque na categoria CSS, javaScript em 25 de março de 2010
Vou descrever um menu drop down feito com XHTML, CSS e jQuery que ficará assim.
É muito simples e os arquivos estão aqui.
Este menu irá utilizar um método de evento do mouse “hover” e não permite navegação através de teclado, por tantanto ele não é acessível, mas caso seu objetivo seja um menu inclusivo leia um outro post onde eu descrevo um menu drop down acessível.
Primeiro vou criar o documento de marcação para o menu, que no caso será o XHTML.
<div id="menu"><span></span>
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 5</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
</ul>
<span class="right"></span></div>
Agora que os nós do menu estão feitos, formato ele utilizando CSS.
*{margin:0;padding:0}//um reset básico, pra gente poder controlar melhor a página
//Os códigos CSS a baixo podem variar bastante, depende da sua necessidade e criatividade
#menu{background:url(../Images/bg-menu.jpg) repeat-x; height:37px; width:80%; margin:20px auto}
#menu span{height:37px; width:5px; background:url(../Images/bg-menu-esq.jpg) no-repeat; float:left;}
#menu span.right{background:url(../Images/bg-menu-dir.jpg) no-repeat; float:right;}
#menu ul{position:relative;z-index:2;}
#menu li{float:left; list-style:none; display:inline;}
#menu a{text-decoration:none;display:block; font-size:12px; font-family:Arial;color:#000; padding:10px;}
#menu a:hover{text-decoration:none}
#menu ul li ul{position:absolute;z-index:1;background:#f5f8fd url(../Images/bg-sub-menu.jpg) repeat-x !important;border:1px solid #cfd7ea;border-top:none;
-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul li ul li{float:none;display:block;padding:0 10px !important; border-top:1px solid #dbe2ec;}
#menu ul li ul li:hover{background:#e2ecf8;color:#26156E;}
Agora vamos ao que interessa, o jQuery
/**
* @author Felipe
*Se for usar me avisa e comenta o post 
*/
$(document).ready(function(){
$("ul li ul").hide();//aqui eu escondo as ul´s que forem filhas de li.
$("ul li").hover(function(){//O método hover recebe dois parametros que são duas funções.
$(this).find("ul:first").slideDown("slow"); //aqui você faz o que quiser quando o mouse estiver em cima
}, function(){
$(this).find("ul:first").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.O jQuery como você pode ver, é o arquivo mais simples e com poucas linhas de código.
Utilizamos o método hover que recebe dois parâmetros, que é referente a dois estados do mouse, o mouse hover e mouse down. Em jQuery esse método pode receber duas funções como parâmetros, que é o que fizemos e após eu utilizo o this pra referenciar ao elemento que está sendo acionado e com o find peço pra ele procurar naquele elemento o elemento filho, no caso o primeiro ul que existir e por fim faço o slideDown e Up.
Escolhi esconder o ul filho de li “o sub-menu” com o jQuery, por que se o javaScript estiver desabilitado ou por algum motivo não estiver funcionando, o usuário poderá ver o menu pois ele ficará aberto, se você optar em esconder o menu inicialmente com o CSS o seu menu poderá ficar inutilizável.
Essa foi uma demonstração de um menu simples e bem interessante, porém o jQuery tem plugns incríveis e se você quiser implementar um super menu, você poderá instalar algum plugin, como alguns que vou listar.
2 Comentários | Assine | Topo
Introdução à Acessibilidade Web
Por Felipe de Albuquerque na categoria Acessibilidade em 24 de março de 2010
Imagem do filme, Um Sonho de Liberdade
Acessibilidade à web permite que pessoas com as mais diversas necessidades especiais, possam interagir com web sites e web software de modo a que eles possam perceber, entender, navegar e interagir de maneira efetiva, bem como criar e contribuir com conteúdos da web.
Para que a web acessível possa acontecer, é necessário o trabalho de várias áreas de desenvolvimento e de interação. Um dos principais motivos para termos tantos sites não acessíveis é a utilização de ferramentas de geração de conteúdo que não usam os Standards de acessibilidade e também o desinteresse de alguns desenvolvedores.
A web exerce um papel crescentemente importante nas áreas de educação, comércio, negócios, governo e recreação. Um sistema web acessível e que permita a inclusão de pessoas com necessidades especiais na sociedade é fundamental para proporcionar oportunidades iguais para todos.
Referência: W3C
Brincando com jQuery
Por Felipe de Albuquerque na categoria javaScript em 16 de março de 2010
Quem nunca ouviu falar em jQuery?!
É uma biblioteca de javaScript que foi feita para simplificar e otimizar a produção no desenvolvimento web, como o próprio slogan do jQuery diz “write less, do more ” faça mais escrevendo menos.
Não se trata de uma nova tecnologia, é apenas javaScript assim como mootools e prototype, uma das grandes vantagens em optar por jQuery é a documentação disponível no site oficial, que é bastante completa e os artigos encontrados em fóruns e blogs espalhados na web.
Neste post em especifico eu vou brincar um pouco com o jQuery pra gente sentir um pouco da biblioteca dos deuses.
O primeiro passo é baixar a biblioteca no site oficial, depois chame a biblioteca entre a tag <head> da página que você irá usar as funções do jQuery.
Deverá ficar algo assim:
<head>
<title>Brincando com jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>//js = pasta onde ficará seus arquivos javaScript, isso é você que escolhe onde ficaram os arquivos e o jquery.js é a biblioteca
</head>Agora vamos testar se a biblioteca está instalada corretamente:
<script type="text/javascript">
$(document).ready(
//Aqui você faz o que quiser útilizando a sintax jQuery ou javaScript puro
function(){
alert("O jQuery está funcionando e a brincadeira já pode começar!!!");//alert comum com a sintax javaScript
});
</script>
Este código espera a página ficar pronta “toda carregada” e após executa uma função que é apenas um alerta normal, com a sintaxe javaScript. Se ao carregar a página com este código e apresentar um alert é porque o jQuery está funcionando e a sua página já compreende a sintaxe jQuery e os métodos e funcionalidades podem ser usadas e isso significa que a brincadeira vai começar a ficar bom agora!
Mas se não funcionou é importante verificar se o caminho que você está chamando está correto ou se há alguma tag escrita incorreta ou sem fechamento, mas de qualquer maneira vou disponibilizar todo código citado aqui.
Uma piada ao getElementById()
O getElementById ficou famoso com a difusão da API DOM e é sem dúvidas um dos métodos mais usados, mas imagina digitar tudo isso umas vinte ou trinta vezes, e em casos extremos, que é necessário chamar esse método várias vezes, me dá tendinite só de pensar, mas com o jQuery isso é tão simples que se torna ridículo, uma verdadeira piada, foi uma das coisas que me chamou a atenção quando eu comecei com o jQuery, isso tudo se resume a “$();”, $(“id desejado, e não só o id, mas os seletores e classes”), vamos aos exemplos para compreendermos melhor:
O método puro
Com JavaScript utilizando a API DOM
document.getElementById();
Com a biblioteca dos Deuses
$();
Manipulando CSS com jQuery
$("#meuId").css("color", "red");
Os elementos de texto que estiverem dentro do id “meuId” ficaram com a cor vermelho.
Manipular CSS com a sintaxe de javaScript ficaria algo assim:
Forma muito usada
var n = document.getElementById("meuId");
n.style.color = "red";
Forma otimizada
document.getElementById("meuId").style.color = "red";
Os três exemplos fazem a mesma coisa, deixa os elementos de texto do meuid na cor vermelha.
Brincando de pic esconde
Ocultar e mostrar elementos sempre foi algo útil, tanto pra criar sub-menus e tudo que a necessidade do seu cliente mandar.
Fazer isso com jQuery é muito fácil e tem algumas formas interessantes, vamos ver um delas:
$(document).ready(function(){
$("#meuId").click(function(){
$("p").toggle("slow");
});
});
HTML
<body>
<span id="#meuId">Clique me!!!</span>
<p>paragrafo 1</p>
<p>paragrafo 2</p>
</body>
Ajax virou brincadeira de criança
Para usar o Ajax normalmente é necessário usar uma receitinha de bolo para inicializar o objeto XMLHTTPRequest e ainda por cima fazer um IF se for o IE pra ativar o ActveX, pra funcionar em ambos ou browsers, mas com o jQuery virou outra maravilhosa piada:
Ajax com javaScript
var Ajax = false;// Ajax
function AjaxRequest() {
Ajax = false;
if (window.XMLHttpRequest) {//Mozilla e safari
Ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {// IE
try{
Ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
Ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
Ajax com jQuery
$("#idOndeVaiCarregar").load("pagina.php", callback);
Acredito que já deu pra brincar um pouco e espero que a leitura tenha sido proveitosa.
As melhores referências de jQuery você poderá achar no site oficial, vale a pena conferir e estudar
4 Comentários | Assine | Topo
Conceitos de SOA
Por Felipe de Albuquerque na categoria Cotidiano em 1 de março de 2010
SOA não é e também não promove uma nova tecnologia. Também é equivocada sua apresentação como uma nova “metodologia”. Trata-se de um conceito ou, como colocado anteriormente, uma Estratégia de TI. A principal motivação para sua implementação é a realização do tão sonhado (e raramente concretizado) Alinhamento Estratégico de TI com o Negócio. Entende-se que tal alinhamento acontece de fato quando [2]:
• TI agrega real valor ao plano de negócios;
• Não resiste às mudanças;
• Combate a resistência às mudanças; e
• É planejado.
Os três primeiros itens da lista são traduzidos em considerável ganho de Agilidade. SOA promete a criação de uma estrutura que reproduz fielmente, em mapeamento um-para-um, os processos e atividades de negócios. Tamanha aproximação deve gerar uma arquitetura flexível, que favorece as mudanças. Mas os ganhos possibilitados pela implementação de uma Arquitetura Orientada a Serviços não ocorrem por acaso ou de forma pontual. Uma implementação SOA é uma iniciativa de longo prazo – é a execução de um bem elaborado Plano Estratégico.
SOA é uma arquitetura de software. Uma arquitetura de software é “um conjunto de definições que descreve componentes de software e associa a funcionalidade do sistema a tais componentes. Descreve a estrutura técnica, restrições e características dos componentes e das interfaces entre eles. A arquitetura é uma ‘planta baixa’ para o sistema e um plano de alto nível para sua construção” [3].
Serviços em uma SOA são a representação direta de entidades, tarefas, atividades ou processos de negócio. Por representação direta entende-se a paridade em sua granularidade e o uso de um vocabulário comum, que deve ser a terminologia padrão do negócio. São características-chave de uma Arquitetura Orientada a Serviços:
• Acoplamento fraco dos serviços;
• Independência de tecnologias e protocolos;
• Uso irrestrito de padrões; e
• Incentivo à reutilização de ativos.
SOA é composta de quatro elementos principais: Frontends de Aplicações, Serviços, um Repositório de Serviços e um Mecanismo de Execução e Comunicação (Bus) para os serviços.
Os Frontends de Aplicações representam a “ponta do iceberg” de uma SOA. Eles são a interface dos serviços para os usuários finais. Portanto são de sua responsabilidade a iniciação e o controle da execução dos Serviços.
Os Serviços são componentes de software que representam um processo, entidade, atividade ou tarefa de negócio. É importante salientar que são componentes de alto nível, diferentes daqueles existentes em plataformas como o J2EE e o Microsoft .NET, que são muito granulares e mais orientados a tecnologia, não ao negócio. Existem quatro tipos de Serviços:
• Básicos: que representam os elementos básicos de um processo de negócio, como Entidades e Tarefas básicas de Negócios;
• Intermediários: são o único tipo de Serviço mais orientados a tecnologia em uma SOA. Fornecem pontes, conversores ou funcionalidades adicionais aos demais serviços;
• Processos: são os serviços que representam de forma direta um processo ou atividade de negócio, do início ao fim.
• Públicos: extensão aos serviços do tipo Processo que possibilita sua exposição para clientes (usuários) que estejam fora das fronteiras da organização.
Todo serviço, independente de seu tipo, é sempre composto por três partes principais, como ilustrado na Figura 1 acima. A primeira parte é um Contrato, um acordo que é fechado entre os consumidores de um serviço e seus provedores. Este documento explica os propósitos do serviço, contexto, regras de utilização, restrições, níveis de serviço esperados, além de apresentar uma definição formal da interface do serviço.
Interface esta que é implementada em separado, sendo o segundo elemento de construção de um serviço. Trata-se do único meio de comunicação com um serviço, seja seu cliente um frontend de uma aplicação ou outro serviço. A terceira e última parte de um Serviço é sua Implementação propriamente dita, através da realização da Lógica do Negócio e acesso e manutenção de seus Dados, de forma a atender todos os objetivos fixados no Contrato.
O Repositório armazena todos os Contratos dos Serviços disponíveis, o que o torna o ponto de partida para utilização destes. Além dos Contratos, o Repositório pode armazenar informações adicionais e mais específicas acerca dos serviços, como localização física, restrições de uso e segurança etc. Apesar de ser apresentado por alguns autores como um elemento opcional em uma SOA, o Repositório pode ser fator crítico de sucesso em grandes implementações, principalmente naquelas que envolverem a disponibilização de serviços do tipo Público.
Por fim temos o Mecanismo de Execução e Comunicação para os Serviços, ou simplesmente Bus, que interconecta todos os participantes de uma SOA, abstraindo a complexidade técnica que existe nas camadas inferiores. Um Bus pode ser constituído de várias tecnologias e/ou produtos, dependendo da infra-estrutura existente e dos requerimentos de distribuição dos serviços
Referência: FINITO
2 Comentários | Assine | Topo
Imagens e imagens com hiperlink Acessíveis
Por Felipe de Albuquerque na categoria Acessibilidade em 30 de outubro de 2009
Utilize texto alternativo
Nas imagens, utilize o atributo alt=”….” do elemento <img /> para dar uma descrição textual à imagem.
<img src="images/fuscaPreto.jpg" alt="Foto de um fusca preto" title="Foto de um fusca preto" />
Enquanto a imagem está sendo carregada ou quando por algum motivo a imagem não é exibida, o texto alternativo alt=”Foto de um fusca preto” é exibido.
O texto alternativo da imagem somente estará acessível a softwares de leitura de tela “Virtual Vision por exemplo” durante a leitura da página, pois uma imagem sem hiperlink não receberá foco através da navegação com a tecla TAB.
Ao mover o mouse por cima da imagem, o Virtual Vision irá ler o conteúdo do atributo alt=”Foto de um fusca preto”, mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado.
Descrição textual da imagem “d-link”
Para imagens mais complexas é aconselhável utilizar uma técnica chamada d-link, que consiste em criar uma pagina HTML para descrever a imagem em questão.
A técnica é colocar um link com a letra “D” ao lado da imagem, para quando a navegação por TAB encontrar o link e usuário poder chegar até a página com a descrição detalhada da imagem.
Para não mudar seu projeto visual, é possível esconder visualmente o link com a letra “D” e o desenvolvedor poderá utilizar várias maneiras para esconder visualmente este link, com CSS é uma boa uma alternativa.
<!-- É uma opação colocar a link direto na imagem -->
<a href="descricaoimagemcriancanap.html" title="ir a página da descrição textual da imagem, crianças brincando na praia">
<img src="images/criancasNaP.jpg" alt="Crianças brincando na praia" />
</a>
<!-- A técnica D-link, este link é para ficar ao lado da imagem -->
<a href="descricaoimagemcriancanap.html" title="ir a página da descrição textual da imagem, crianças brincando na praia">
[d]
</a>
Como a curiosidade é da natureza do homem e já que o deficiente visual não pode apreciar o conteúdo da imagem visualmente, seria interessante prover as imagens de um texto descritivo.
Um recurso utilizado é colocar, após a imagem, um link com a letra “d”, conhecido como “d-link”, o qual fará referência a uma página html com a descrição textual da imagem. Como outros links, este receberá o foco após o usuário pressionar a tecla TAB na imagem.
Para quem não deseja prejudicar o design da página, com uma letra “d” após as imagens, utilize o recurso de d-link invisível, ou seja, coloque uma pequena imagem transparente no lugar da letra “d”.
Este post foi inspirado na cartilha de acessibilidade e pode ser encontrado no site Lupa Digital, e a citação acima são palavras do autor e pode ser lido em: Lupa digital no item 7.2.
2 Comentários | Assine | Topo
Link Acessível
Por Felipe de Albuquerque na categoria Acessibilidade em 21 de outubro de 2009
Para fazer com que os links fiquem acessíveis “href acessível” para leitores de telas e usuários que usam o teclado para navegar na internet. É bem simples e vou descrever algumas técnicas, tentando ser mais claro e objetivo possível.
Adicionando o Atributo “title”
O atributo “title” é muito importante, é ele que vai dar a descrição do link e informar para onde ele vai levar o seu usuário.
<a href="acessibilidade.html" title="Ir a página de acessibilidade">
Acessibilidade
</a>
Facilite a vida dos seus usuários e escreva com um texto conciso, que faça sentido e que tenha relevância.
Adicione Teclas de Atalho
É uma boa idéia usar teclas de atalho na navegação principal, com isso você vai facilitar a vida de muita gente que tem dificuldade motora e não usa o mouse para acessar o seu conteúdo.
<a href="acessibilidade.html" accesskey="a">Acessibilidade</a>
Pular para o Conteúdo
Permita que o usuário possa ir direto ao conteúdo desejado.
Utilize um link com o atributo accesskey no topo do documento, faça com que ele seja o primeiro link do seu site. Com isso você evitará que o usuário percorra o site todo até chegar ao conteúdo desejado.
Caso você não queira que esse link apareça no topo, você poderá ocultar com CSS.
<div id="topo">
<h1>titulo do site</h1> <!-- "essa área é muito importante p/ SEO mas é assunto para outro post" -->
<a href="#conteudo" accesskey="p" title="ir ao conteúdo">Pular para o conteúdo</a>
</div>
<div id="menu">
<!-- os intens do menu -->
</div>
<div id="conteudo">
<!-- aqui é onde o usuário chegará, o conteúdo desejado -->
</div>
não que você vá colocar teclas de atalho em todos os links do seu site, mas pense nisso com carinho!
Navegando Através de Tab
Muitos usuários não podem ou não querem usar dispositivos como mouse para navegar em seu site.
Eles utilizam o teclado pra percorrer os links, geralmente usando a tecla “tab”.
Por este motivo seu código deve estar estruturado semanticamente, principalmente a estrutura de links, eles devem estar em uma ordem lógica de navegação, caso esteja, não é necessário usar o atributo “tabindex”.
Mas caso não esteja ou você queira conduzir seus usuários, use o atributo “tabindex” que permite definir a ordem de navegação dos links em seu sistema web.
<ul>
<li><a href="#" tabindex="3">Link 1</a></li>
<li><a href="#" tabindex="1">Link 2</a></li>
<li><a href="#" tabindex="2">Link 3</a></li>
<li><a href="#" tabindex="4">Link 4</a></li>
</ul>
Conduza seus usuários, dê a eles o que eles realmente precisam e querem ler
Menu Drop Down Acessível
Por Felipe de Albuquerque na categoria Acessibilidade em 19 de outubro de 2009
Soluções inclusivas, em minha opinião são vitais para profissionais não só da web.
Entre tanto o que se vê por ai não é exatamente isso, mas se você está lendo este texto é porque você está há vários passos na frente de outros profissionais, e está com o pensamento certo e inclusivo.
Esta solução de menu acessível é muito fácil e funciona bem em vários navegadores como no IE6 + e em todos os browsers que dão suporte a web Standards. Funciona com teclado e mouse, e se o JavaScript estiver desabilitado dá pra acessar todos os links, mas os subitens não aparecem visualmente.
Veja o menu funcionando e vamos aos detalhes:
XHTML
É o documento de marcação onde vamos criar os nós do menu.
Vamos criar uma lista não ordenada “ul” e seus respectivos filhos e adicionar id e classes para podermos manipular alguns elementos.
<!-- As tags como o DOCTYPE, head, body e demais não vou descrever aqui para o post ser mais objetivo -->
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li class="submenu"><a href="#" class="bullet">Portfólio</a>
<ul>
<li><a href="sites.html">Sites</a></li>
<li class="submenu"><a href="#" class="bullet">Interfaces</a>
<ul>
<li><a href="graficas.html">Gráficas</a></li>
<li><a href="digitais.html">Digitais</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="quemsomos.html">Quem Somos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
CSS
É o documento de apresentação, onde vamos posicionar e dar beleza ao nosso menu.
Aqui é onde você provavelmente ira mexer mais, para poder customizar seu menu acessível.
#nav, #nav ul {
width: 70em;
list-style: none;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
#nav li {
float: left;
}
#nav a {
display: block;
width: 10em;
height: 2em;
line-height: 2;
text-align: center;
text-decoration: none;
background-color: #69c; /* IE precisa desta declaração */
color: #fff;
border: 1px solid #ccc;
border-width: 0 1px 1px
}
#nav a:hover {
text-decoration: none;
background: #c7daec;
color:#69c;
}
#nav a.bullet {
background:#69c url(bullet.gif) no-repeat right;
}
#nav a.bullet:hover {
background: #c7daec url(bullet-over.gif) no-repeat right;
}
#nav li ul {
position: absolute;
left: -1000em;
width: 10em;
margin: 0;
}
#nav ul ul {
margin: -2.1em 0 0 10.1em;
}
#nav li:hover ul ul, #nav li.over ul ul {
left: -1000em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
left: auto;
}
JavaScript
O arquivo JavaScript é responsável pela ação.
É neste documento que vamos verificar os links e os subitens da lista e vamos fazer com que ele se encarregue em abrir os subitens.
<script type="text/javascript">
var dropdown_intervalId;
var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId;
var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;
function dropdown_init()
{
try
{
var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');
for (var a = 0; a < as.length; a++)
{
as[a].onfocus = function() { dropdown_expand(this) }
as[a].onmouseover = function() { dropdown_expand(this) }
as[a].onblur = function() { dropdown_colapse(dropdown_delay) }
as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }
}
dropdown_colapse(0);
} catch(e){}
}
function dropdown_expand(caller)
{
try
{
clearInterval(dropdown_intervalId);
var uls = caller.parentNode.parentNode.getElementsByTagName('ul');
for (var ul = 0; ul < uls.length; ul++)
uls[ul].style.left = "-1000em";
caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";
} catch(e){}
}
function dropdown_colapse(milliseconds)
{
try
{
clearInterval(dropdown_intervalId);
dropdown_intervalId = setInterval(function()
{
var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');
for (var ul = 0; ul < uls.length; ul++)
uls[ul].style.left = "-1000em";
clearInterval(dropdown_intervalId);
}, milliseconds, null);
} catch(e){}
}
window.onload = dropdown_init;
</script>
Esse menu foi tema de debate na lista Acesso Digital, e esse post foi baseado na resposta do Gil Porta membro da lista, e o menu foi desenvolvido por Alexandre Junqueira.
3 Comentários | Assine | Topo
Criador da www pede desculpas
Por Felipe de Albuquerque na categoria Cotidiano em 16 de outubro de 2009
Tim Berners-Lee disse que não imaginava o incômodo que teclar ‘//’ geraria.
O homem que inventou a World Wide Web (a WWW, que é a base da internet) pediu desculpas por ter colocado duas barras na frente dos endereços eletrônicos.
O cientista britânico Tim Berners-Lee, que criou a WWW há quase 30 anos, disse que o uso dos caracteres “//” após o “http:” é desnecessário.
Segundo o jornal britânico “The Times”, Berners-Lee disse em uma palestra em Washington que poderia ter criado os endereços sem as duas barras.
“Parecia uma boa ideia (usar o WWW) na época”, disse.
O cientista disse que, quando criou a world wide web, ele não imaginava que as barras causariam tanta irritação entre os usuários.
No entanto, ele brincou que ninguém calculou ainda a quantidade de terapeutas que conseguiram emprego para tratar pessoas com lesões de esforço repetitivo, de tanto usar a tecla w nos teclados de computador.
Na entrevista ao “The Times”, ele admite inclusive que o uso das barras é nocivo ao meio ambiente, já que desperdiça energia, papel e tinta.
Tim é diretor do World Wide Web Consortium, que trabalha com o governo britânico para aumentar o acesso das informações governamentais ao público.
fonte: G1
A diferença entre Arte e Design
Por Felipe de Albuquerque na categoria Design em 6 de outubro de 2009
Esse assunto é complicado e tem sido debatido há muito tempo.
Artistas e designers criam composições visuais usando a mesma base de conhecimento, mas as suas razões para fazê-lo são completamente diferentes.
Alguns designers se consideram artistas, mas poucos artistas se consideram designers.
E isso é exatamente a diferença entre arte e design?
Neste post, vamos analisar e comparar alguns dos princípios fundamentais de cada.
Este é um assunto que as pessoas têm opiniões fortes, e Este post não é um guia definitivo, mas sim o ponto de partida para uma conversa, por isso vamos ter a mente aberta!
Arte é inspiração, Design é motivo
Talvez a diferença mais fundamental entre arte e design, que todos podemos concordar é sobre seus propósitos. Normalmente, o processo de criação de uma obra de arte começa do nada, uma tela em branco. Uma obra de arte resulta de uma visão ou opinião ou sentimentos que o artista tem dentro de si.
Eles criam a arte de compartilhar esses sentimentos com os outros, para permitir que os telespectadores se relacionar com ela, aprender com ele ou ser inspirado por ela.
A mais famosa (e bem sucedida) das obras de arte hoje são aquelas que estabelecem o forte vínculo emocional entre o artista eo seu público.
Em contrapartida, quando um designer pretende criar uma nova peça, elas quase sempre têm um ponto fixo de partida, se uma mensagem, uma imagem, uma idéia ou uma ação.
O trabalho do designer não é inventar algo novo, mas de comunicar algo que já existe, para uma finalidade.
Esse objectivo é quase sempre para motivar o público a fazer alguma coisa: comprar um produto, usar um serviço, visitar o local, saber algumas informações.
Os projetos mais bem sucedidos são aqueles que transmite eficazmente sua mensagem e motiva os consumidores a realizar uma tarefa.
Arte é interpretada, Design é compreendido
Outra diferença entre arte e design é a forma como as mensagens de cada um são interpretados por seus respectivos públicos.
Apesar de um artista que se propor a transmitir um ponto de vista ou a emoção, que não quer dizer que o ponto de vista ou a emoção tenha um significado único.
Arte conecta com pessoas de maneiras diferentes, porque é interpretada de forma diferente.
Mona Lisa de Da Vinci tem sido interpretado e discutido por muitos anos. Apenas porque ela está sorrindo? Os cientistas dizem que é uma ilusão criada por sua visão periférica. Românticos dizem que ela está apaixonada. Céticos dizem que não há motivo.
Design é o oposto. Muitos dirão que, se um projeto pode ser “interpretado” em tudo, ele falhou em seu propósito.
O objetivo fundamental do projeto é o de comunicar uma mensagem e motivar o espectador a fazer alguma coisa.
Se o design transmite uma mensagem diferente do pretendido e seu espectador vai e faz alguma coisa com base na mensagem “mensagem incorreta”, então ela não cumpriu a sua obrigação.
Uma boa peça de design é quando a mensagem do designer é exatamente entendida pelo espectador.
Arte é gosto, Design é opinião
A arte é julgada pela opinião e a opinião é regido por gosto.
Para um entusiasta da arte moderna visão de futuro, um pedaço Tracey Emin “My Bed”, que foi indicado para o Prêmio Turner em 1999, pode ser a altura de expressão artística.
Para um seguidor da arte mais tradicional, pode ser um insulto para o meio.
Design tem um elemento de gosto, mas a diferença entre bom e mau design é essencialmente uma questão de opinião.
Uma boa peça de design pode ser bem sucedida sem ser a seu gosto.
Se ela cumpre seu objetivo de ser compreendida e motiva as pessoas a fazer algo, então se é bom ou não é uma questão de opinião. Poderíamos continuar a discutir este ponto específico, mas espero que o princípio subjacente é clara.
Arte é talento, Design é habilidade
E sobre as habilidades do Criador?
Mais frequentemente do que não, um artista tem a habilidades natural. Claro, desde tenra idade, o artista cresce desenhando, pintando, desenvolvendo suas habilidades.
Mas o verdadeiro valor de um artista é no talento (ou a habilidade natural) que nascemos. Há alguma sobreposição aqui: bons artistas certamente têm habilidade, mas sem habilidade artística talento é, provavelmente, inútil.
Design, porém, é realmente uma habilidade que é ensinado e aprendido. Você não tem que ser um grande artista para ser um grande designer, você só tem que ser capaz de alcançar os objetivos do projeto. Alguns dos estilistas mais respeitados no mundo são mais conhecidos por seu estilo minimalista. Eles não usam muita cor ou textura, mas eles prestam muita atenção ao tamanho, posicionamento e espaçamento, que pode ser aprendido sem talento.
Arte Envia uma mensagem diferente para Todos, Design envia a mesma mensagem para todos
Isso realmente cai sob o segundo ponto, sobre a interpretação e compreensão. Mas se você for recordar de apenas uma coisa deste artigo, lembrese deste ponto.
Muitos designers consideram-se artistas, porque criar algo visualmente atraente, algo que seria orgulho para as pessoas se pendurar em uma parede e admirar.
Mas uma composição visual destina-se a realizar uma tarefa específica ou comunicar uma mensagem especial, não importa o quão bonito, não é arte.
É uma forma de comunicação, apenas uma janela para a mensagem que ele contém.
Poucos artistas se autodenominam designers, porque eles parecem entender melhor a diferença. Artistas não criam os seus trabalhos para vender um produto ou promover um serviço. Criam unicamente como um meio de auto-expressão, de modo que possa ser visto e apreciado por outros. A mensagem, se é que podemos chamar assim, não é um fato, mas um sentimento.
Dependendo de como você olha para ele, a diferença entre a arte eo design pode ser clara ou turva.
O post original deste artigo está em web designer de pot vale conhecer o blog dos caras é leitura de boa qualidade.
4 Comentários | Assine | Topo