CSS Brasil

Existe muita gente usando e falando sobre Frameworks CSS ultimamente. Eu, sinceramente, acho que um framework é um certo exagero, falando-se em CSS.

Há certos tipos de coisas que podem ser padronizadas, como o CSS reset e estilos padrões para fontes, forms, e classes genéricas. Outra boa prática é a divisão de arquivos por tipo de midia (ex: print.css), e também divisão por tipo de conteúdo (reset.css, grid.css, etc). Nesse último caso acredito que vale usar o que fizer mais sentido para o projeto, ou seja, se for um hotsite com 3 páginas, vale até usar um arquivo css só (claro, bem comentado e dividido internamente).

Fora isso, acho que o tempo gasto em um site é muito maior com particularidades do layout do que definições genéricas que possam ser aplicadas a qualquer projeto. Mesmo assim, vou tentar listar os prós e contras de frameworks.

O que é bom (teoricamente) no uso de frameworks:

Os frameworks são bem feitos:
A inteção dos frameworks é boa e eles também resolvem alguns bugs conhecidos de CSS.

Agilizam o desenvolvimento:
Existe o tempo de aprendizado inicial, mas após este esse aprendizado acredito que agilize o processo de criar um template do zero. Até aí, como já comentei acima, ainda tem a parte de criar as peculiaridades do layout, o que acho que leva muito mais tempo.

O código fica normalizado:
Com frameworks você pode ter uma equipe inteira usando a mesma nomenclatura e estrutura de código, mas isso também pode ser resolvido com definições de regras (com bom senso).

O ruim:

Familiaridade com a estrutura do código:
Os frameworks usam nomes que não condizem com as áreas do site, são nomes genéricos que dificultam depois a manutenção do layout. Se você desenvolveu toda a folha de estilos, caso seja necessária uma mudança na estrutura do HTML, você saberá exatamente onde mexer.

Herdando bugs de outros
Se resolver seus próprios bugs já é difícil, imagina resolver bugs que não foram criados por você.

Não há aprendizado
Isso é válido para qualquer framework. Ou até mesmo editors WISIWYG. Se você sempre usa e não sabe como funciona “por baixo” nunca vai aprender realmente como funcionam as coisas.

Semanticidade:
Ao usar um framework você se verá obrigado a usar nomenclaturas que condizem com a posição e tamanho que eles ocupam, e não exatamente com a área do site. Além disso, acabam “sobrando” classes que nunca serão usadas.

Alguns frameworks:
http://code.google.com/p/blueprintcss/
http://www.yaml.de/en/home.html

Alguns resets:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://www.monc.se/tripoli/
http://developer.yahoo.com/yui/build/reset/reset.css

Claro, isso tudo é só minha humilde opinião. E você, o que acha do uso de frameworks CSS?

Tags: CSS, frameworks, padrões

A mais ou menos 1 ano atrás, estava analisando como as certificações são importantes para os desenvolvedroes Java, .Net, etc, e comecei a buscar para ver se existia algum tipo de certificação para desenvolvedores de interface, ou seja, HTML, XHTML e CSS.

É claro que acabei chegando no site da W3Schools! No mesmo momento enviei um e-mail pra eles pedindo mais informações sobre o processo de certificação que eles oferecem. Depois de um tempo eles responderam e abaixo repasso para os interessados o funcionamento da certificação.

1) Quanto custa?

O valor para fazer a prova é US$59,00 e pode ser pago através de PayPal, cartões de crédito (Visa, MasterCard, Discover e American Express) ou via cheque enviado pelo correio.

Depois de ter feito o registro, você tem um prazo de até 2 meses para fazer a prova.

2) Existe algum escritório da W3Schools no Brasil? Como faço a prova?

Não, não existe nenhum escritório deles no Brasil e a prova é feita pela internet através do próprio site da W3Schools. Você precisa também de um supervisor, que pode ser seu chefe ou seu professor. Ter um supervisor é muito importante para que seu certificado tenha total credibilidade. Vale lembrar que o nome do supervisor estará impresso no certificado.

3) Como é a prova?

A prova consiste em 70 questões de múltipla escolha ou questões de verdadeiro ou falso. O tempo limite, que será marcado pelo supervisor é de 70 minutos.

Assim que a prova for concluída, você já receberá o status se passou ou não. Para conseguir a certificação, você precisa acertar no mínimo 75% da prova, porém, se conseguir mais de 95% de acerto, você consegue o certificado com grau de excelência.

4) Pré-requisitos e recomendações

Para fazer a prova, é necessário que você tenha conhecimento fundamental nas seguintes linguagens:

• HTML 4.01
• XHTML 1.0
• CSS1 e CSS2

O próprio site recomenda que você estude bastante e faça o quiz para testar seus conhecimentos.

Qualquer dúvida deixe um comentário que responderei assim que possível.

Até a próxima!

[update]Muito bem lembrado pelo Marcelo Pedrosa, caso você passe na prova, o certificado é enviado pelo correio.[/update]

Tags: Certificação, Conhecimento, CSS, Desenvolvimento, Dicas, HTML, Padrões Web, W3Schools, XHTML

Não sei se você se lembra, mas não faz muito tempo que os sites das principais empresas que conhecemos eram feitos com tabelas, e mesmo depois do “boom” dos padrões web, continuaram firmes e fortes com as tabelas por um bom tempo. Na minha opinião isso colaborou muito para a criação da famosa seção de “convertidos” do Tableless, que consistia em pegar os sites com tabelas e refazê-los usando padrões web.

Assistindo a edição 2 do taligado? vi que essa seção do site ainda estava disponível, resolvi agregar ela como um exemplo sólido para poder mostrar a evolução e importância dos padrões web atualmente.

Basicamente acessei cada site que foi convertido na época para ver quais deles migraram para os padrões web e quais continuaram com tabelas. A notícia é boa! Praticamente todos migraram, poucos tem uma tabela ou outra, mas isso já significa muito.

Nesses anos de trabalho consegui entender um pouco melhor o lado das empresas e porque não é tão simples migrar um site. Acredito que um dos motivos seja o custo. Quase sempre esses sites estão dentro de médias ou grandes agências que fazem a manutenção dos mesmos e uma refação total do site com certeza não sairia barato para a empresa em questão. Claro que isso não é desculpa, tudo depende da visão e foco da empresa, e acredito que por esses motivos algumas migraram mais rápido que as outras.

Além dos fatores citados acima, outro ponto interessante é que saber XHTML, CSS e Javascript virou pré-requisito para um profissional ter oportunidade no mercado de trabalho, pelo menos no de São Paulo/SP. Isso significa que teremos cada vez mais profissionais desenvolvendo sites utilizando os padrões web.

Para finalizar o post, as empresas que desenvolvem soluções para internet e as que precisam dessas soluções, estão mais bem informadas e antenadas sobre a importância dos padrões o que acaba sendo muito bom para nós desenvolvedores.

Tags: Convertidos, CSS, Desenvolvimento, Dia-a-dia, Evolução, Javascript, Migração, Padrões Web, Tableless, XHTML

Acredito que todos os programadores concordam comigo quando digo que sempre temos problemas com PSDs e FLAs quando vamos programar uma interface/layout e acreditem, isso não é preconceito.

Parece que alguns criativos (não todos) tem problemas para organizar seus próprios fontes. Nós, programadores, ou pelo menos a maioria deles, sempre estamos em busca de melhores práticas de programação, para que nosso código fique melhor e mais limpo. Os criativos deveriam fazer o mesmo, procurar maneiras de como organizar seus fontes, nós agradecemos.

Abaixo citarei alguns problemas relacionados a PSDs, já que flash não é a minha área.

1) Samba do crioulo doido

Pois é, se você nunca ouviu essa expressão: “O layout está sambando!”, eu explico. Nossos amigos criativos começam a fazer um novo layout, fazem um template e começam a replicar os arquivos, porém, como num passe de mágica, o layout começa a ter variações no posicionamento dos objetos de um arquivo para o outro, causando o efeito samba. Dica: Escolha um PSD monte seu template e continue com ele até o final.

2) Incorporando o Horácio

Nosso amigo criativo recebe uma solicitação para atualizar um determinado site. Teoricamente o mesmo deveria procurar na rede os PSDs do projeto, mas nessa hora ele incorpora o Horácio e tem a brilhante idéia de tirar um print screen do site e fazer os ajustes baseado nesse print. Depois abrimos o PSD e vamos esconder as layers e praticamente todo o site some. Dica: Reclame com o Gerente de Projetos ou direto com o amigo criativo responsável.

3) Guides

O que dizer quando abrimos um PSD e vimos 1 milhão de guides totalmente sem sentido? Ou quando aquele guide não está nem num pixel, nem no outro? Pois é, isso acontece muito. Dica: Tire TODAS as guides e coloque as suas.

4) Layers e Grupos sem nomes

Layer 1? Group 5? Nomes pra que mesmo? Ainda mais quando temos muitos layers, a falta de nomes é marca registrada de alguns de nossos amigos.

Esses são apenas alguns exemplos e como disse, não são todos os criativos que fazem isso, alguns são mais organizados que os outros e por aí vai. Alguns criativos já até programaram no passado e tem mais noção das coisas quando estão fazendo um layout e isso ajuda muito mesmo.

Feliz devem ser as pessoas como o Diego Eis, que montam e programam o próprio layout.

Colaboraram com esse post: Marcelo Pedrosa e Lucas Pedroza.

Tags: Arquivos fonte, Criativos, Dia-a-dia, Flash, Photoshop, Problemas, Programadores

Validação! Um ponto muito importante para aqueles que desenvolvem seguindo os padrões web.

Como uma coisa leva a outra, acredito que todos que seguem os padrões web, usam Firefox com pelo menos duas extensões, são elas: Web Developer e HTML Validator. Claro que existem muitas outras, mas essas duas são as fundamentais. Caso não use, instale o mais rápido possível, elas são uma mão na roda na hora do desenvolvimento.

Voltando ao assunto, não sei de vocês, mas quando termino de montar um site, tento sempre fazer alguns pequenos ajustes para ver essa imagem no meu HTML Validator: e a seguinte mensagem na validação da W3C: “This Page Is Valid XHTML 1.0 Transitional!”. Pode até ser um pouco de perfeccionismo, mas comece a reparar nos sites que não validam, a maioria são problemas de fácil resolução, seja uma imagem ou um BR sem fechar, uso incorreto de alguma tag ou algo do tipo, nesses casos, faça alguns ajustes e deixe seu site válido, não custa nada.

Mas como nem tudo é perfeito, as vezes acontece de você fazer um site 100% válido na W3C, mas na última hora você precisa inserir aquela tag para que o cliente possa tirar as métricas do site, e para sua tristeza não é o Google Analytics. Você coloca a tag no include, já que a mesma precisa estar em todas as páginas, logo depois dá um F5 e se depara com isso em todas as páginas do site: , pois é, desanima um pouco, mas acontece.

A mesma coisa costuma acontecer em formulários com muitos campos, pois para facilitar a nossa vida, e não termos que fazer uma validação nova a cada site novo que aparece, costumamos usar um validator que faz a validação automática, só depende de inserir alguns parâmetros nos campos, e são esses parâmetros, que nesse caso, estragam sua validação.

Com certeza existem outros casos como esses, onde sua validação fica comprometida e você de mãos atadas, sem poder fazer nada. Mas a idéia é simples, só abra mão da validação se realmente não tiver jeito.

Quando entro em um site e vejo que ele é válido, o site já ganha uma atenção especial, pois alguém se dedicou naquele site! Claro que isso não garante que o site tenha uma boa acessibilidade e usabilidade, mas isso já é outra história, o ideal é juntar o útil ao agradável.

Até a próxima!

Tags: Desenvolvimento, Dicas, Padrões Web, validação, W3C, XHTML

Esse primeiro post é relacionado aos programadores web “mal amados”. Quem já trabalhou em agência web, por exemplo, sabe do que estou falando. Nem sempre você faz os jobs mais legais, ou trabalha só com os clientes “filés”, onde pode usar aquele XHTML/CSS esperto ou aquele framework que permite você fazer uma infinidade de efeitos legais usando javascript.

Eu já trabalhei com manutenção e sei bem como é isso, ter que alterar aquele código ultrapassado, cheio de tabelas, com um monte de código repetido, ou seja, um código cuspido por um editor WYSIWYG qualquer.

O problema é que muitas pessoas que estão nessa situação gostam de reclamar, mas não fazem nada para evoluir. Talvez não passe pela cabeças dessas pessoas que essa evolução pode ser o passo que falta para que elas comecem a fazer jobs mais legais dentro da empresa.

Seja pró ativo, afinal de contas, isso só vai melhorar o seu currículo. Se seu trabalho/job atual não permite usar novas tecnologias, aplique as mesmas nos seus sites pessoais ou nos freelas que você faz. Já vi pessoas fazendo XHTML exclusivamente porque eram obrigadas a seguir um padrão de desenvolvimento dentro da agência e só, não estavam interessadas em evoluir ou entender mais profundamente como as coisas funcionam. No final das contas, é isso que vai diferenciar você de outros programadores.

Fica a dica! Pense duas vezes antes de reclamar, veja se você está fazendo algo para evoluir e merecer fazer trabalhos mais legais dentro do seu trabalho!

Tags: CSS, Desenvolvimento, Dicas, Javascript, Padrões Web, XHTML

Nesse primeiro post farei uma apresentação do site e falarei um pouco sobre a idéia/propósito do mesmo.

Primeiramente, esse não é um site de códigos prontos, pois sites desse tipo, já existem muitos na internet e um a mais ou a menos não iria fazer diferença.

A idéia do site é gerar um conteúdo próprio e único, mais voltado as opiniões e pontos de vista dos escritores. É claro que eventualmente poderemos colocar um exemplo ou outro de código, algo que seja pertinente e interessante, mas o objetivo realmente não é esse.

Em breve os primeiros posts começarão a aparecer, portanto, assine nosso feed e acompanhe nosso site.

Até mais!

Tags: CSS, cssbrasil, Padrões Web, XHTML