Topo
27/03/07
Após certo tempo de aprendizado, conhecendo novas técnicas e, claro, experięncia adquirida em trabalhos de pequeno e grande porte, podemos perceber diferenças entre um [tag]CSS[/tag] bem feito, formatado e prático para manutenção, comparando-o com um CSS feito sem tanta experięncia e, até mesmo, sem aquela “malandragem” na escrita.
Um exemplo de CSS simples, que não foi planejado para atender as necessidades de qualquer tipo de trabalho, em sua manutenção principalmente:
#menu {
float: left;
width: 120px;
background: #cacaca;
margin-left: 10px;
margin-bottom: 20px;
}
p {
margin-bottom: 5px;
text-indent: 10px;
}
a {
text-decoration: none;
}
#header {
background-image: url(../imagens/header.jpg);
background-repeat: no-repeat;
background-color: #000;
}
Este é um pequeno exemplo que já pode ilustrar muita coisa. Vou listar algumas “ingenuidades” do código acima, para elucidar o que pode ser feito para deixar o código menor, mais limpo e prático para manutenção.
Abreviação
Podemos pegar o último item do exemplo acima, para entendermos melhor a questão da abreviação no CSS.
#header {
background-image: url(../imagens/header.jpg);
background-repeat: no-repeat;
background-color: #000;
}
Ao invés de escrevermos desta maneira, poderíamos escrever tudo em uma linha só. Isso não é uma coisa óbvia, portanto tem que ser aprendido através de leitura e bastante prática, com certeza.
Abreviando, esta regra poderia ser re-escrita da forma abaixo:
#header {
background: url(../imagens/header.jpg) #000 no-repeat;
}
Simples, não? Assim podemos proceder em diversos casos, tanto em background, como margin, padding, font, e outras propriedades no CSS.
Formatação
Essa é mais uma questão pessoal do que realmente um padrão para escrita do código. Como se pode observar nos códigos acima, cada regra CSS foi escrita em várias linhas, reservando cada linha para uma propriedade, ficando mais fácil de ler. Porém, há uma outra maneira de escrever (a qual utilizo há um bom tempo), que é utilizar uma linha para cada regra inteira, mantendo todas as propriedades juntas, por exemplo:
#menu { float: left; width: 120px; margin: 0 0 20px 10px; background: #cacaca; }
No exemplo acima, apliquei a prática da abreviação do código, juntando as medidas de margin, além de manter a regra inteira em apenas uma linha. No começo é um pouco complicado, mas essa prática diminui muito o tamanho do arquivo e facilita a busca de determinada parte de seu código, mostrando mais regras de uma vez só em sua tela.
Aqui termina a primeira parte da série de posts sobre as melhorias que podemos fazer em nosso CSS. Algumas são utilizadas por preferęncia pessoal, mas outras realmente fazem diferença tanto para produção como a manutenção de qualquer projeto, seja de pequeno, médio ou grande porte.
Topo
25/03/07
Como vocęs devem ter reparado, as seçőes Curriculum e Portfolio voltaram ao ar, com algumas novas características, além de manter a estrutura antiga, pois satisfaziam as necessidades a que foram propostas.
Quanto a seção Curriculum, as novidades ficaram por conta de alguns dados novos no texto e inserção de uma foto ao lado, no topo do conteúdo.
Já a seção Portfolio conta com novidades em relação a novos trabalhos, como a descrição do desenvolvimento do novo layout do project.47, uma foto tirada há alguns dias atrás (inaugurando a “subdivisão” de fotografias no portfolio), além da lista de sites na qual meu trabalho foi referenciado, muito interessante dar uma olhada neles.
E, com a aplicação da seção Portfolio, coloquei em prática a última parte que estava faltando para a finalização do novo layout do site, ou seja, foi inserido o “bloco” dos Projetos Recentes na coluna da direita, mostrando os últimos trabalhos cadastrados.
Topo
20/03/07
Ao escrever este artigo, pretendo demonstrar quais etapas costumo percorrer para desenvolver um site, procurando ajudar aqueles que estão iniciando nesta prática. Utilizarei, como estudo de caso, o desenvolvimento do novo layout do project.47.
Problematização
Primeiramente, detectei a necessidade de construir um novo site, mas para poder fazę-lo, deveria saber o motivo para tal modificação, com relação ŕs versőes anteriores.
Após um estudo de novas possibilidades e viabilidade de implantação, descobri que deveria haver mais enfoque ao conteúdo do blog, deixando de lado o conceito de um site meramente pessoal, para servir como apresentação de trabalhos e auxiliar quem se interessa pelos assuntos aqui tratados (iniciantes e profissionais da área de desenvolvimento Web).
Sabendo o que pretendia atingir com o desenvolvimento de um novo conceito para o site, além do público-alvo, iniciei as tentativas de um novo layout para o mesmo. Continuar lendo…
Topo
16/03/07
A equipe do [tag]Wordpress[/tag] acaba de lançar um diretório contendo milhares de [tag]plugins[/tag], mostrando todo o potencial da plataforma.
Os benefícios, segundo este post no blog oficial da plataforma, são os seguintes:
- Maneira mais fácil e rápida de encontrar seus plugins, pois estão localizados num lugar só;
- Poderá saber da qualidade do plugin e sua compatibilidade através do site;
- No futuro, vocę poderá ser notificado, pelo WordPress, sobre atualizaçőes dos plugins utilizados.
É importante termos iniciativas como esta, pois tornará o caminho mais fácil, quando a intenção for encontrar recursos de qualidade para seu blog.
Topo
14/03/07
O [tag]Web Standards[/tag] Project, famoso projeto que tem como intuito a evangelização dos padrőes para desenvolvimento de sites, ou seja, o desenvolvimento de maneira correta dos mesmos, anunciou o lançamento do WaSP Street Team, visando atingir locais do nosso cotidiano, contando com a ajuda de todos para isso.
Ou seja, o propósito dessa equipe, composta por pessoas como eu ou vocę, seria a difusão dos Web Standards para pessoas que nunca tiveram contato com eles, seja em nosso trabalho, instituiçőes educacionais, etc., instituindo certos objetivos ou desafios a realizar. Como eles mesmos dizem no site do projeto, para atingir pessoas desta maneira, nada melhor do que reunindo todos, tendo maior eficácia, em prol de uma boa causa como esta.
Para ficar por dentro das novidades e início das atividades do grupo, basta participar da newsletter, preenchendo um formulário de cadastro presente no site do [tag]WaSP[/tag] Street Team.
Vamos ver se essa idéia irá vingar.
Topo
12/03/07
Novo site da agęncia Mídia Digital
É com muito orgulho que anuncio o lançamento do novo site da Mídia Digital, agęncia na qual trabalho. Para quem já havia visitado a versão anterior, pode notar grande diferença para a versão atual do mesmo.
Infelizmente o prazo para desenvolvę-lo foi muito curto, mas com certeza o resultado ficou acima do esperado. Fiquei encarregado pelo desenvolvimento de todo HTML (com auxílio do Lincoln) e CSS do site, aplicando microformats em certas seçőes do site, como já venho fazendo em meus últimos trabalhos. A equipe conseguiu finalizar todo o processo, incluindo o funcionamento do blog propriamente dito, dentro do WordPress, em quatro dias.
Mas, com certeza, o que mais chama atenção é o topo do site, um belo exemplo de utilização do Flash! Belos efeitos, mas nada absurdo, pois não tira a atenção do usuário com relação ao conteúdo. Desta forma, ao carregá-lo, o usuário se sente atraído pela animação, mas com certeza a relevância para o conteúdo não foi perdida, o que é extremamente essencial num blog.
E é essa a grande novidade do site. Claro, houve mudanças significativas na arquitetura da informação, com uma grande preocupação em mostrar os clientes e, conseqüentemente, o potencial da agęncia, mas a principal novidade é o sistema de blog, fazendo com que os usuários se sintam mais ŕ vontade ao navegar no site e, claro, atraindo mais visitantes para leitura constante, assinando os feeds etc.
Espero que vocęs gostem e, como já disse em outra ocasião, me sinto orgulhoso por fazer parte deste grupo.
Parabéns a todos que participaram do projeto!
[tags]Wordpress, blog, web design[/tags]
Topo
10/03/07
Há algum tempo, iniciei uma série de posts (que desejo continuar) sobre exemplos práticos de [tag]Microformats[/tag], para incentivar aqueles que nunca utilizaram ou não possuem interesse. No primeiro post, citei o hCard, situação na qual acredito que os Microformats são mais utilizados atualmente.
Agora meu objetivo é falar de outra prática comum no mundo dos Microformats: [tag]hCalendar[/tag]. Como em todo microformat, para aplicá-lo, basta seguir as classes pré-definidas e começar a utilizá-lo em seus projetos. Aliás, não há empecilhos em utilizá-lo num sistema totalmente dinamizado, por exemplo.
Na prática, o hCalendar pode ser utilizado como um simples calendário ou até uma agenda de eventos que, inclusive, venho utilizando em meus últimos trabalhos, tanto pessoais como na agęncia na qual trabalho. Este método se destina a ser aplicado em [tag]XHTML[/tag], Atom, RSS e XML.
Para facilitar a nossa vida, assim como no hCard, foi desenvolvido um gerador de hCalendar, visando deixar mais prático o processo de aplicação deste padrão.
Topo
05/03/07
Novo painel de controle do Dreamhost
Segundo este post no blog oficial do [tag]DreamHost[/tag], acaba de ser inaugurado o novo painel de controle do servidor, após 6 anos de utilização do modelo antigo.
Os benefícios são percebidos logo na primeira visita, e o que chama atenção é a drástica mudança nas cores, utilizando tons mais leves, seguindo os padrőes dos painéis atuais.
Entre as mudanças entram as seguintes:
- Aparęncia “Web 2.0″, ou seja, cores claras, degradęs, sombras, etc.;
- Layout completamente feito em CSS;
- E, claro, utilização de Ajax.
Podemos perceber que os benefícios trazidos com certeza acarretam numa melhora na velocidade de acesso e manuseio do serviço.
Topo
04/03/07
Pouco tempo após o lançamento da versão 2.1.1, a equipe do [tag]Wordpress[/tag] liberou uma nova atualização para a plataforma.
Trata-se, segundo eles neste post do [tag]blog[/tag] oficial, de uma atualização de suma importância pois, houve uma invasão de hackers em seus servidores, que acabaram danificando o arquivo original da versão 2.1.1 do WordPress, possibilitando acesso remoto via php.
Portanto, baixe esta nova atualização para ficar livre (pelo menor por enquanto) de maiores preocupaçőes.
