Como dito no vídeo, por Lêda Lucia,  “Audição não é sintética como a Visão”, ou seja,  para aqueles que apenas escutam, as coisas não são muito simples quanto para aqueles que veem.

Outro item importante, ressaltado no vídeo, é a importância do link “Ir para o conteúdo” no início de todas as páginas. O mesmo, dá autonomia ao usuário de escolher se realmente é necessário escutar toda navegação antes de iniciar a leitura do conteúdo.

Além de se preocupar com a forma que o conteúdo será lido, deve-se ter uma preocupação maior com as funcionalidades que podem comprometer o acesso daqueles  que navegam apenas pelo teclado. Não visualizar itens de submenus, é um exemplo pratico de uma das dificuldades comuns existente em grandes portais na web, como citado no documentário.

Não quero me estender muito, pois o importante mesmo é que o vídeo seja assistido. Vejam-o e façam-se este questionamento: “Meu código é realmente acessível?”.

A idéia base do plugin é trabalhar com a sintaxe do css para criar os elementos do XHTML. Após a digitação da combinação de elementos é necessário apenas prescionar (ctrl + ,) que a expressão transforma-se em tags. Na prática você escreveria:

div#nav>ul>li*2>a

Que resultaria em:

<div id="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

Testando o plugin  deu para perceber que quem tem um bom conhecimento de DOM sentirá uma facilidade maior em trabalhar com o plugin, devido a lógica de ‘arvore’ que ele utiliza para criar os elementos.

É tudo muito simples, veja a demostração do poder do Zen Coding:

Além do vídeo o Smashing disponibilizou um demo onde ao prescionar  “Ctrl + ,“ você tem uma previsão de como o plugin funciona.

Lista de possíveis propriedades e seus resultados.

• (div, p) -> Nome do elemento;
• (div#sidebar, a#logo) -> Elemento mais id;
• (h1.vcard, p.entry.left) -> Emento mais classe ou combinações de classes;
• (div#header>h1>a) -> Indicando o elemento filho;
• (div#header+div#content+div#footer) -> Elementos irmãos;
• (ul#nav>li*5>a) -> Multiplicando elementos;
• (ul#nav>li.item-$*5) -> Numerando os itens;

Editores suportados

O Zen Coding foi produzido em JavaScript e Python para rodar na maior quantidade possível de plataformas. Porém alguns editores, como o TextMate, tem suporte apenas a função de expandir os termos abreviados (que pra mim já é muita coisa).

Os editores que tem suporte a todas funcionalidades do plugin são: Aptana(para Windowns), TEA for Coda e TEA for Espresso (para Mac).

O objetivo deste post é demonstrar um resumo do que é possível com esse maravilhoso plugin. Você pode se aprofundar no assunto visitando o post original. Lá você verá que existem outras funcionalidades inclusive a de acrescentar seus próprios trechos de códigos no arquivo fonte do plugin.

Espero que seja proveitoso para todos os leitores assim como esta sendo para mim. No próximo post explicarei como instalar o Zen no Aptana.

Personalização de inputs checkbox e radio (demo)

Para personalizar inputs do tipo checkbox e radio é muito simples, primeiro vamos utilizar a marcação abaixo:

<ol class="list_radio">
<li><input type="radio" id="rad1" name="exemplos" /> <label for="rad1">Label 1</label></li>
<li><input type="radio" id="rad2"  name="exemplos"  /> <label for="rad2">Label 2</label></li>
<li><input type="radio" id="rad3" name="exemplos"  /> <label for="rad3">Label 2</label></li>
</ol>

<ol class="list_check">
<li><input type="checkbox" id="chck1"  /> <label for="chck1">Label 1</label></li>
<li><input type="checkbox" id="chck2" /> <label for="chck2">Label 2</label></li>
<li><input type="checkbox" id="chck3" /> <label for="chck3">Label 3</label></li>
</ol>

No CSS vamos aproveitar a herança das classes (list_check e list_radio) para colocar os respectivos backgrounds nos labels.

/* Estilo para type='radio'*/
.list_radio li { float: left; margin-right: 15px}
.list_radio li label { background: url(radio_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_radio li label.ativo { background-position: 0 -25px}
/* Estilo para type='checkbox'*/
.list_check li { padding-bottom: 10px}
.list_check li label {  background: url(check_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_check li label.ativo { background-position: 0 -26px}

Pelo jQuery iremos controlar a adição e remoção da classe ativo no label.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//escondendo os inputs padrões
$(".rad, .chck").hide();
//verificando se exite inputs marcados
$("form input").each(function(i){
if($(this).is(':checked')) {
$(this).siblings('label').addClass("ativo");
}
});
// Radios estilizados
$(".list_radio label").click(function() {
$(this).parent().siblings().children("label").removeClass("ativo");
$(this).addClass("ativo");
$(this).siblings('input[type=radio]').attr("checked", "checked");
});
// Checkboxs estilizados
$(".list_check label").toggle(
function() {
$(this).siblings('input[type=checkbox]').attr("checked", "checked");
$(this).addClass("ativo");
},        function() {
$(this).siblings('input[type=checkbox]').attr("checked", "");
$(this).removeClass("ativo");
});
});
</script>

Outras customizações

• Customização de selects

  » www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/
  » info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/

• Personalização de input text

  É comum a utilização de cantos arrendodados em campos do tipo texto. As CSS3 já estão vindo com suporte a esta funcionalidade (ver código abaixo), porém para o Internet Explorer é necessário acrescentar um script.

  -moz-border-radius: 5px;/* Firefox */
border-radius: 5px; /* css3 */
-webkit-border-radius: 5px; /* Browsers webkit */

• Customização de input file

  » www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  » marcgrabanski.com/pages/code/style-file-input

É importante resaltar que fugir demais do padrão dos formulários do browser pode comprometer a usabilidade e performance do site. Desta forma o Designer tem que avaliar bem a experiência e limitações dos usuários antes de implementar essas inovações.

Junto ao portal também participei diretamente no desenvolvimento do InterEditor, produto criado pela SX Brasil, que será responsável por gerenciar o conteúdo da ASN e de outros grandes clientes da empresa.

Créditos ao @walmarandrade, @alemaorpm, @leomacedo, @talespereira e @ferrreira que participaram do esforço para que o portal ASN chegasse ao melhor resultado possível.

Para Designers estudar usabilidade é essencial, mas entender de acessibilidade acaba sendo um diferencial. Pois além de projetar algo fácil de usar o profissional estará disponibilizando seu projeto a diferentes plataformas e facilitando possíveis dificuldades do usuário.

Então quais tipos de funcionalidades, em questão de acessibilidade, o Designer poderia projetar?

Controlar o tamanho da fonte

Geralmente os Designers definem um tamanho padrão para a tipografia do site, mas aqueles que tem dificuldade na visão precisam de uma opção de aumentar esse tamanho. Pelo correto seria de total responsabilidade de quem faz o layout inserir ou não a opção de controle de tamanho, de acordo com a necessidade do projeto.

Uso de Ajax

Somente projetar a tela não vai dizer ao front-end se ele deve implementar determinado site com ajax ou não, para isso é necessário o Designer avaliar se é viável trabalhar com Ajax, sabendo que esta tecnologia tem suas vantagens e desvantagens.

Algumas limitações com questão de indexação, bem como as dificuldades em criar diferentes urls para cada página específica devem ser avaliadas na hora e optar ou não pelo uso da linguagem.

Usar flash ou não?

O uso de determinadas formas e a maneira como os elementos carregam no site são definidos pelo Designer e é a partir desta idéia que será definido se vai usar flash ou não. Desta forma o profissional precisa saber quais serão as dificuldades em relação a deficientes, indexação do google e diferentes dispositivos no caso da utilização do flash.

Esses são três das centenas de motivos para Designers incluir como uma das suas responsabilidades, durante o processo de criação, a autonomia de definir o que é mais viável para a acessibilidade do website.

Assim é necessário atentar para o fato de que o site com restrições de acessibilidade gera uma impossibilidade de alguns usuários visitá-lo e sabemos que perder acessos é a última coisa que o nosso cliente quer.

Listar páginas do mesmo nível da página visitada.

Quando precisei desta função achei que seria mais complicado de fazê-la, porém o wordpress já disponibiliza a função wp_list_pages que facilmente resolveu meu problema:

<?php
if($post->post_parent) {//se é uma página filha
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0&depth=1");
}
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>

• title_li= é passado sem parâmetro para não exibir a legenda padrão;
• child_of indica o ID da página pai da lista de pages que queremos exibir, neste caso usamos o $post->post_parent que resgata exatamente o ID da pagina pai
• depth com o parâmetro 1 indica que só será exibida as pages do nível filho, os níveis mais profundos(netos) são descartados.

Criando pages templates

Uma função muito útil do wordpress é a criação de pages templates, elas servem para criação de páginas que tem estrutura diferente das que são carregadas pelo page.php.
Para criar uma página de modelo específico é necessário apenas adicionar o comentário abaixo no início do seu novo page (ex.: page-portfolio.php):

<?php
/*
Template Name: Portfolio
*/ ?>

No gerenciador quando você for criar uma nova página já verá a opção ‘Portfolio’, no select Modelo (localizado na coluna direita) como mostra a imagem ao lado.

Criando diferentes sidebar’s

Quando o projeto possui diferentes modelos de páginas é recomendável que se utilize sidebar’s específicas para evitar o excesso de códigos condicionais na sua sidebar padrão.
Para criar sua sidebar específica é muito simples: Crie o novo arquivo php com o nome sidebar seguido do seu identificador, por exemplo: sidebar-portfolio.php.
Para chamar essa sidebar diferente é necessário apenas passar o parâmetro do identificador na função get_sidebar(). Como podemos ver abaixo.

<?php get_sidebar("portfolio"); ?>

Usando o query_posts()

A função query_post() nos dá diversas possibilidades de filtrar pages e posts restrigindo ou indicando categorias, ids, tags e etc.

Ela deve ser chamada antes do loop padrão do wordpress, como podemos observar abaixo:

<?php
query_posts('...');
while (have_posts()) : the_post();
...
endwhile;
?>

Exemplo de uso:

<?php
query_posts('page_id=7&cat=2&tag=jquery'); //Selecionando a pagina de ID 7 da categoria ID 2 que tenha a tag jquery
?>

Mais sobre o query_post() neste artigo do pinceladas da web.

O wordpress nos dá infinitas possibilidades de customizações, basta sabermos aproveitar os melhores recursos e fazer websites/blogs gerenciáveis de maneira profissional.

Visite o projeto online.

De início devemos entender o significado de semântica, “A semântica (do grego σημαντικός, derivado de sema, sinal) refere-se ao estudo do significado”. Semântica no HTML, nada mais é do que usar as tags para os devidos propósitos que foram criadas. Ou seja, usar <h1> – <h6> para representar títulos, <address> para endereços, <ol> <ul> <dl> para listas, <table> para dados tabulares e assim por diante.

Desenvolver um documento semanticamente correto é tornar o conteúdo acessível a humanos e máquinas. O que eu quis dizer com isso? É que não vai ser entendido apenas por pessoas, o conteúdo vai rodar em diversas plataformas,  além de ser melhor indexado pelos motores de busca.

Como as 77 tags do XHTML não foram suficientes para representar alguns tipos de dados específicos como datas, localizações, descrições de links e etc, surgiram os  microformatos (microformats), que através de atributos e classes predeterminados conseguem organizar pequenos formatos de dados. O objetivo do mesmo é justamente suprir as limitações das tags, acrescentando novas possibilidades de organizar essa imensa quantidade de informações que são disponibilizadas na web.

Ah! Entendi por que existem os microformatos, mais e esse tal de HTML5 porque surgiu? O HTML5 chegou com uma proposta de melhorar a implementação da semântica do seu antecessor HTML 4.01. Na nova versão o que precisávamos representar com ids e classes para definir seções do site (Ex.: #header, #sidebar, .post, #footer), ganharam um valor semântico muito maior, sendo representados agora por tags como: <header>, <article>, <section>, <aside> e <footer>.

Essa nova especificação do HTML vai proporcionar uma grande melhoria na organização do conteúdo na web. Motores de busca e leitores de tela, por exemplo, poderão detectar de maneira mais fácil o conteúdo de cada seção do site.

Browsers como Firefox , Opera, Safari e Chrome já estão dando suporte ao HMTL5, porém nenhuma versão do browser lider de mercado(Infelizmente) Intenet Explorer esta suportando a nova especificação. Alguns desenvolvedores estão resolvendo o problema do IE usando javascript. Outra solução, lançada a pouco, é o google chrome frame que quando instalado no IE ler mais rapidamente javascripts e consegue interpretar HTML5 e CSS3.

Em suma, o site pode ficar visualmente idêntico feito semanticamente correto ou não.  Porém implementar pensando em acessibilidade, SEO e aspectos que vão além do visual tem se tornado um diferencial no perfil dos profissionais procurados pelas grandes empresas de desenvolvimento web.

Veja o demo.

Sem muita conversa vamos ver como implementar três efeitos de animação em menus.

Animação 1

Essa é um efeito simples q movimenta o texto com a propriedade text-indent.

XHTML

<ul id="animation-1">
<li><a href="#">Inicio</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contato</a></li>
</ul>

CSS

#animation-1 li{
width: 200px;
}
#animation-1 li a {
display: block;
padding: 10px 5px;
width:190px;
background-color: #ccc
}

jQuery

<script type="text/javascript">
$(document).ready(function(){
$("#animation-1 li a").hover(
function(){
$(this).animate({ textIndent: "30px" }, 500 );
},function(){
$(this).animate({ textIndent: "0px" }, 500 );
});
});
</script>

Animação 2

Nesse exemplo vamos aumentar a largura do link selecionado e adicionar uma classe .off para para os demais links.

XHTML

<ul id="animation-2">
<li><a href="#">Inicio</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contato</a></li>
</ul>

CSS

#animation-2 li a {
display: block;
padding:  10px 5px;
width: 200px;
background-color: #ccc
}
#animation-2 .off a{
background-color: #e1e1e1
}

jQuery

<script type="text/javascript">
$(document).ready(function(){
$("#animation-2 li a").hover(
function(){
$(this).parent().parent().find("li").addClass("off");
$(this).parent().removeClass("off");
$(this).animate({ width: "250px" }, 500 );
},function(){
$(this).parent().parent().find("li").removeClass("off");
$(this).animate({ width: "200px" }, 500 );
});
});
</script>

Animação 3

Esse efeito é muito utilizado em flash. Em nosso caso conseguimos um efeito bem semelhante com apenas um <span> animado.

XHTML

<ul id="animation-3">
<li><a href="#">Inicio</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contato</a></li>
</ul>

CSS

#animation-3 {
width: 200px
}
#animation-3 li{
border: 1px solid #e1e1e1;
height: 32px;
overflow: hidden;
position: relative;
}
#animation-3 li a{
display: block;
padding:  7px 5px;
color: #6F6F6F
}
#animation-3 li span {
display: block;
height: 35px;
width: 200px;
background-color: #e1e1e1;
position: absolute;
top: 35px;
left: 0;
z-index: -1
}

jQuery

<script type="text/javascript">
$(document).ready(function(){
$("#animation-3 li").append("<span></span>");
$("#animation-3 li a").hover(
function(){
$(this).next("span").animate({ top: "0px" }, 500 );
},function(){
$(this).next("span").animate({ top: "45px" }, 500 );
});
});
</script>

Não esqueçam de adicionar os scripts abaixo do link para a biblioteca:

<script type="text/javascript" src="jquery.js"></script>

Obs.: foi testado no FireFox 3+, Internet Explorer 6+, Chrome, Opera e Safari.

Faça o download e ajuste às suas necessidades.

Demo da versão 1.0
Demo da versão 1.1

O que há de novo?

• 1. Opção de criar botão para restaurar o tamanho original.

  Essa opção foi solicitada por pessoas que estão utilizando o plugin. E para implementá-la é bastante simples, só precisamos declarar o novo parâmetro da seguinte maneira:

  opResetar: true

  Perceba no demo que foi acrescentado um novo link, entre o que aumenta e diminui, que tem a função de resetar a fonte para o seu tamanho inicial.

• 2. Inserir os links manualmente

  Antes só era possível inserir os links de controle pelo plugin, declarando o tipoPaiLink como ‘ul’ ou ‘p’. Agora o desenvolvedor tem a opção de inserir manualmente o seu código XHTML  para dar maior flexibilidade na customização. Observe o exemplo abaixo.

  XHTML

  <ul>
<li>tamanho da fonte:</li>
<li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
<li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
<li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
</ul>
  Perceba que é preciso manter o nome das classes que controlam o tamanho: menos, resetar e mais.

  Na chamada da função teremos que modificar algumas coisas: iremos deixar o parâmetro principal vazio (já que não vamos inserir via DOM os links); não devemos declarar mais o tipoPaiLink e opResetar. Vejo o exemplo:

  <script type="text/javascript">
$(document).ready(function() {
$().fontSize({
alvo: '#content',
setCookie: true
});
});
</script>

• 3. Classe “desabilitar” para quando o link chegar ao limite

  Nessa nova opção você precisa configurar apenas o CSS dando estilo a classe desabilitar, que será adicionada no link quando ele não estiver mais mudando o tamanho do texto.

  CSS

  #font_size li .disabilitar {
color: #AFAFAF;
background-color: #DFDFDF
}

Resumidamente temos duas opções:

Inserir manualmente os links de controle.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().fontSize({
alvo: '#content',
setCookie: true
});
});
</script>
XHTML

<ul>
<li>tamanho da fonte:</li>
<li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
<li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
<li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
</ul>

Ou deixar o script fazer tudo sozinho.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#font_size').fontSize({
alvo: '#content',
setCookie: true,
opResetar: true,
tipoPaiLink: 'ul'
});
});
</script>

XHTML

<div id="font_size"></div>

Faça o download do Plugin Font Size 1.1 ou leia o post da primeira versão para entender melhor o funcionamento.