Ramon Victor

Projeto Leandrão

ramonvictor — Fri, 18 Jun 2010 16:20:30 +0000

O website de Leandão, jogador que atualmente faz parte do elenco do Sport Clube do Recife, foi desenvolvido em parceria com a DesignGraff (responsáveis pelo levantamento do conteúdo e criação do design). Participei da implementação do XHTML, CSS e Javascript, bem como da customização do CMS Wordpress.

Visitar o site do jogador Leandrão.

Herança, especificidade e efeito cascata na CSS: Como funciona?

ramonvictor — Mon, 26 Apr 2010 13:24:03 +0000

Esse assunto novamente? É pessoal, mesmo isto não sendo uma novidade, ainda é um dos problemas que continua atrapalhando a vida de muitos desenvolvedores. Não apenas os iniciantes, mas os experientes também. Por isso decidi ser um pouquinho ‘chato’ e explicar, mais uma vez, como os browser’s entendem as declarações CSS que nós escrevemos.

O que veremos?

“Árvore genealógica” do documento HTML
Cálculo de especifidade
Herança
Conclusão

“Árvore genealógica” do documento HTML

Inicialmente, veremos como funciona o modelo de árvore genealógica de todo documento HTML. Esta, conhecida também por árvore de nós (tree of node) . Observemos o código abaixo:




	
	Document Title


	
		...
		
			...

Como poderíamos ilustrá-lo numa árvore de nós (tree of node)? É simples:

Onde:

é pai dos elementos
e
;
é pai do
e
;
é pai do
;
Por último, o é avô do
, e
;

Entender essa idéia, nas tags do documento HTML, é um pré-requisito importante para extraímos o máximo de performance na hora de escrevermos nossas folhas de estilo. Se você pretende estudar javascript, esse conhecimento servirá também como base essencial para trabalhar com DOM (Document Object Model).

Cálculo de especifidade

O cálculo de especificidade, nada mais é, do que o “peso” que a CSS dá a cada tipo de declaração. Entenderemos melhor visualizando o exemplo:

p { color: #000 }
p.azul { color: blue }

Se declararmos um

, em nosso HTML, veremos que a cor considerada, neste caso, será o azul. Até que foi fácil identificar, não é? Pois, sabemos que a classe declarada, na folha de estilo, tem especificidade maior em relação ao elemento sem nenhum atributo adicional.

Porém, existem casos que a coisa fica um pouco mais complicada, vejamos este exemplo:

div p.entry { font-size: 15px }
#conten p { font-size: 12px }

E agora? Quem é mais específico? Para identificar com segurança, essas ocasiões duvidosas, precisamos entender como é dado o “peso” para cada uma das regras de estilo declarada.

Elemento (p), Pseudo elemento (p:first-letter)	d = 1	(0,0,0,1)
Classe (.minhaClasse), Pseudo classe (a:hover), Attributo (a[rel=externo])	c = 1	(0,0,1,0)
Id (#meuId)	b = 1	(0,1,0,0)
Style inline (< p style=”color: #ccc”> )	a = 1	(1,0,0,0)

Mesmo que pareçam chatas, são regras que devem ser entendidas para que tenhamos facilidade de identificar quais são as declarações mais específicas.

E, finalmente, como ficou o exemplo anterior?

div p.entry { font-size: 15px } /* (0,0,1,2) */
#conten p { font-size: 12px } /* (0,1,0,1) */

No exemplo acima, a segunda declaração é mais específica por ter um id declarado (b = 1). Porém, se a nossa marcação fosse da seguinte forma:


Lorem ipsum dolor sit amet

A especificidade do style inline(1,0,0,0) seria maior do que as mostradas nos exemplos anteriores, logo o texto seria exibido com font-size igual a 18px.

!important

Como toda regra, normalmente, tem suas exceções, essa não deixou de ter a sua. A declaração !important foi um hack criado para tornar a especificidade do elemento maior do que qualquer outra declaração dentro do documento CSS.

p.first { margin-left: 0 !important }

Então podemos usá-lo toda vez que as declarações, por algum motivo, não estiverem funcionando? Não! O !important é indicado apenas naquelas situações onde o código já chegou às suas mãos super mal estruturado e você precisa de uma solução imediata. Caso contrário, devemos usar o próprio conceito de especificidade e herança da CSS, evitando assim “sujeiras” no código.

Herança

O conceito de herança não tem complicação para ser entendido. Simplesmente, os elementos filhos herdam declarações do elemento pai. Só isso? Isso mesmo! Porém, devemos ficar atento, pois não são herdadas declarações relativas a posicionamento e tamanho (ex.: width, height, margin, padding, float, border e etc).

Para que o elemento filho herde valores como os citados acima é necessário declarar o valor da propriedade desejada como inherit. Por exemplo:

HTML


    Lorem ipsum dolor sit amet

CSS

div {
    padding: 10px;
    border: 1px solid #ccc
}
p {
    padding: inherit;
}

Certo, mas como faço para que uma declaração seja herdada sem ter que declarar explicitamente o valor inherit?

Como tínhamos visto anteriormente, basta aplicar regras que não sejam referentes a posicionamento e tamanho, ou seja, se declararmos algo como o exemplo abaixo, todos os descendentes, neste caso da tag , herdaram automaticamente as mesmas regras de estilo.

body {
    font-family: Arial, Sans-serif;
    font-size: 12px;
    color: #ccc
}

Efeito Cascata

Sabemos que podem existir duas, três ou até mais declarações direcionadas ao mesmo elemento. É aí onde atua o efeito cascata, que envolve tudo o que já vimos neste post e mais um conjunto de outros fatores que influenciam na hora de se definir qual regra de estilo será a exibida pelo browser.

Para entendermos quais seriam todos esses fatores e suas respectivas prioridades, em ordem crescente, observemos essa lista disponibilizada pelo site do maujor:

folha de estilo padrão do navegador do usuário;

folha de estilo do usuário;

folha de estilo do desenvolvedor;

estilo externo (importado ou linkado).

estilo incorporado (definido na seção head do documento);

estilo inline (dentro de um elemento HTML);

declarações do desenvolvedor com !important;

declarações do usuário com !important;

Pode parecer um pouco complicado, porém essa parte teórica é essencial para que tenhamos menos dificuldade na hora de resolver bugs que surgem durante o desenvolvimento dos projetos.

Aproveitando o assunto de efeito cascata, abrirei um parêntese para falar, resumidamente, sobre a ferramenta FireBug. Atualmente utilizada por muitos profissionais da área, este plugin do Firefox surgiu para, dentre outras centenas de funcionalidades, facilitar a identificar qual regra de estilo está sendo aplicada a cada elemento. Não entrarei em maiores detalhes, mas fica a dica para aqueles que ainda não o conheciam.

Conclusão

O que ganho se começar a aplicar todos esses conceitos?

Escrever menos linhas de código;
Facilitar futuras manutenções;
Evitar hacks, que dificultam a correção de bugs;
Gerar melhoria de performance com soluções bem elaboradas (ex.: css sprites);

Referências

Dicas, sugestões, acréscimos, críticas (construtivas)? Comente!

Projeto Urbana-PE

ramonvictor — Mon, 12 Apr 2010 16:19:10 +0000

O site da Urbana-PE (antiga SETRANS-PE) foi uma ótima experiência para aplicar os conhecimentos que vinha adquirindo na área de customização com o cms wordpress. O projeto foi desenvolvido pela Wenetus e fiquei com a responsabilidade de produzir a integração do wordpress e implementar também o XHTML, CSS e Javascript. O website precisou atender a pré-requisitos como: Soluções acessíveis com jQuery; Funcionar bem em todos os browsers atuais; Otimização de código e performance;

Photoshop para desenvolvedores web

ramonvictor — Wed, 07 Apr 2010 15:51:25 +0000

Como 90% (ou mais) dos layouts que chegam em nossas mãos são produzidos no Photoshop é importante que tenhamos conhecimento de algumas facilidades que este software nos oferece. Funcionalidades como: medir espessura de elementos, fatiar imagens, consultar tamanho de texto são algumas das atividades rotineiras que podem ser otimizadas.

Ajustar medida de régua e tipografia

Para que possamos visualizar as medidas da tipografia e régua em pixel, precisamos acessar o painel “preferences” (Edit > Preferences > Units & Rulers) e configurá-lo da seguinte forma:

Ajustar unidade de medida: Ferramenta seleção

No painel “info” (exibido via Window > info), é interessante que sejam configuradas as medidas para pixels também. Assim quando selecionarmos qualquer elemento veremos suas medidas exatas nesse painel.
Acesse: Info > Panel Options > Ruler Units

Exportação de imagens

Para exportação de imagens existem basicamente duas soluções. A primeira seria criar um novo arquivo colando nele apenas a layer que deseja exportar a outra seria utilizando a ferramenta slice tool. Adotei a segunda solução pois acredito ser bem mais eficiente. Vejamos como utilizar cada uma delas:

Slice tool

Atalho: ‘C’ na versão CS4 e ‘K’ na CS3.

Com essa ferramenta podemos criar diversas fatias com diferentes dimensões. Além disso é possível predefinir o nome que as imagens terão quando exportadas. Para acessar as propriedades da fatia precisamos acionar dois cliques em cima da mesma. Vejamos o painel abaixo.

Agora estamos com as informações da fatia configurada. Normalmente precisamos esconder as demais layers que não serão exportadas, para fazer isso existe uma maneira muito simples: basta pressionar “Alt + icone olho” (ver imagem abaixo) que o próprio PS se encarrega de esconder as demais layers. Para retornar a exibição basta acionar o mesmo atalho.

Criando um novo arquivo

Uma outra solução adotada por muitos, para exportar imagens, é colar a layer em um novo arquivo. É comum fazer isso de duas formas:

A primeira seria utilizando a ferramenta de seleção(M) e acionando o seguinte atalho “Ctrl + Shift + C”. Depois da cópia feita só é acessar “File > New” e deixar a opção de Clipboard marcada, feito isso só colar (Ctrl + V).

A outra forma seria utilizando a função de duplicar layer (Acessando “Layer > Duplicate layer …”). Com essa função podemos criar um novo arquivo com a layer desejada.

E você conhece mais algum “macete”?

Meu código é realmente acessível?

ramonvictor — Mon, 01 Mar 2010 17:16:57 +0000

Assistir ao vídeo “Acessibilidade Web: Custo ou Benefício?”, publicado pelo acessodigital, nos faz questionar se realmente estamos construindo códigos acessivéis, visto que detalhes importantes, muitas vezes, passam despercebidos e acabam comprometendo o acesso de usuários deficientes.

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?”.

Zen Coding: simplificando a vida do desenvolvedor XHTML

ramonvictor — Wed, 25 Nov 2009 01:36:27 +0000

Hoje se espalhou pelo twitter a notícia do novo plugin que visa otimizar o tempo na codificação XHTML e CSS. O plugin Zen Coding, desenvolvido por Sergey Chikuyonok do Smashing Magazine.

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:

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.

Dicas de como customizar formulários com jquey

ramonvictor — Tue, 17 Nov 2009 13:39:25 +0000

Esta se tornando cada vez mais comum a pratica de Designers projetar formulários com visual diferente do padrão exibido pelos browsers. Para implementar tal inovação, os desenvolvedores vem buscado soluções de scripts que não comprometam a acessibilidade e a performance do website.

Neste post irei demostrar uma solução que criei para personalizar inputs do tipo checkbox e radio, também listarei algumas referências de plugins muito úteis para customizar outros elementos do seu form.

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:


    Label 1
    Label 2
    Label 2


    Label 1
    Label 2
    Label 3

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.

$(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");
  });
});

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.

Projeto Agência Sebrae de Notícias

ramonvictor — Fri, 06 Nov 2009 13:05:37 +0000

A pouco foi lançado o projeto de redesign do portal Agência Sebrae de Notícias. Esse projeto proporcionou diversos aprendizados na implementação de codificação XHTML e CSS cross-browser, bem como na aplicação de varias funcionalidades da jQuery.

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.

Designers também devem entender de acessibilidade na web

ramonvictor — Tue, 27 Oct 2009 14:32:38 +0000

A participação do Designer no processo de criação de um site tem o foco principal no desenvolvimento do layout, porém o que muitos não sabem é que ele é responsável (ou pelo menos deveria ser) por determinar interações de interface e até mesmo definir o tipo de linguagem que o site deverá ser implementado (Se deve ser usado Ajax, Flash, CSS e etc).

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.

Dicas rápidas de wordpress

ramonvictor — Mon, 19 Oct 2009 16:37:45 +0000

Depois de retornar a estudar wordpress, decidi postar aqui no blog algumas funcionalidades legais que precisei utilizar e que pode servir para muitos também. Algumas coisas são bem simples, porém acredito que sejam muito úteis, principalmente para quem esta iniciando.

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:

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

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):

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.

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:

Exemplo de uso:

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.