PXtoEM.com

pxtoem

Em uma de minhas conversas com meu amigo Renan, ele me perguntou se eu já usei a unidade de medida “EM” para textos em meu CSS. Respondi que ultimamente tenho usado a unidade sim.

O “EM” é uma unidade derivada da porcentagem, ou seja, se você definir um tamanho em uma determinada região do código poderá fazer com que os textos que descendem dela tenham tamanhos relativos a uma determinada percentagem do valor definido nela.

Algumas pessoas costumam dizer que é uma medida de acessibilidade, conforme o próprio Renan me informou. Mas particularmente não vejo utilidade para o usuário pois cada browser trata isso da forma que acha melhor. Mas em nível de desenvolvimento com certeza é uma mão na roda pois os textos manterão sempre a mesma proporção, consequentemente o programador só precisará mudar um valor: O valor-base, que serve como base para os cálculos de proporção.

Particularmente costumo definir apenas o font-size da tag body, assim quando tiver que alterar os tamanhos da página inteira só preciso mexer no tamanho do body.

Para me ajudar nessa missão descobri um site bastante útil: PXtoEM.com. O site é totalmente auto-explicativo e ainda traz toda a teoria sobre as medidas e como usá-las. Como se não bastasse ainda traz um CSS Text Reset baseado na base que você escolher.

Variando um pouco…

Ilustração,Pessoal,Trabalho — Tags: , — Ney Ricardo @ 2:27 pm

laura_c

Há alguns dias meu amigo Leonardo Torres me passou o endereço do blog do ilustrador Céo Pontual. Achei demais o traço dele. E o melhor é que todas as ilustrações fazem uma referência a frases e citações de famosos e pensadores.

Longe de mim querer plagiar o trabalho dele. E mesmo que quisesse seria impossível competir com a criatividade e a boa sacada das ilustrações que ele faz. Então, na humildade de minhas limitações, eu andei brincando um pouco no Illustrator.

Pra quem não conhecia o Céo, fica a dica de um ótimo blog pra dar uma olhada pelo menos uma vez por dia: Frases Ilustradas.

Essa aí de cima é a Laura, minha namorada. Fazia tempo que ela tinha me pedido pra desenhá-la, mas eu só ficava enrolando. Espero que goste.

No restante do post algumas ilustrações que eu fiz com o traço “emprestado” do brilhante Céo Pontual. (Leia mais)

Grids, grids, grids!

Design,Tableless,Tecnologia,Web — Ney Ricardo @ 9:58 am

960Quem mexe com diagramação, principalmente de revistas, jornais e impressos em geral, sabe a importância de se usar um grid. O trabalho fica com uma aparência mais organizada e harmônica.

Não vou me aprofundar nesse assunto não quero demorar muito nessa história, mas em essência um bom grid é regular, ou seja, todas as linhas do têm a mesma altura, assim como todas as colunas têm a mesma largura. E nesse espaço você dispõe o conteúdo de forma que o mesmo respeite as delimitações de espaço definidas pelo grid.

Pensando nisso, o web designer Nathan Smith desenvolveu um framework em CSS chamado 960 Grid System, que nos possibilita economizar tempo escrevendo menos código. Não vou explicar como funciona, para isso basta ir ao site do grid ao site e dar uma lida.

Já o utilizei algumas vezes e fiquei satisfeito com o resultado, mas confesso que tive que fazer algumas gambiarras pois o grid é um tanto inflexível. Em compensação muitos problemas dos diferentes browsers são prevenidos direto no código.

No pacote está incluso ainda um CSS de reset que, aliás, é o mesmo que eu citei no post anterior.

Em geral o grid realmente economiza código, mas não é definitivo, quero testar outros frameworks pra ver qual é mais útil e, quem sabe, desenvolver meu próprio grid se necessário.

Visão Geral: HTML mais limpo e padronizado, menos linhas de CSS pra escrever, menos tempo de código, limitações no layout.

Reseta tudo aê!!!

Resources,Tableless,Tecnologia,Web — Tags: , — Ney Ricardo @ 11:35 pm

reset

Hoje, em uma conversa com meu ex colega de trabalho, Renan Teles, que comentou que gosta de ver dicas de desenvolvimento web aqui no blog, em especial técnicas de programação tableless.

Coincidentemente eu já vinha pensando em escrever algo sobre um assunto conhecido por poucos programadores e usado por menos desenvolvedores ainda: é o CSS Reset. Meu ex chefe, Carlos Gustavo (também conhecido como B1), foi quem me apresentou ao conceito, mas eu ainda não tinha tido tempo de estudar sobre o assunto e não utilizava. Depois, com mais tempo fui analizando e acabei montando um “pacote” que incluo em todos os sites que desenvolvo antes de começar a escrever os estilos.

Um CSS Reset é um documento CSS que pré define o comportamento e as propriedades de todos os elementos HTML a fim de que todos sejam renderizados de acordo com um só padrão, ao invés de deixá-los à mercê dos diferentes browsers.

A vantagem de ter um documento que ‘reseta’ todos os elementos é que você terá todos os objetos HTML se comportando da mesma forma em todos os browsers (ou pelo menos deveria). É como se todos os objetos fossem ‘zerados’ e estivessem prontos para receber suas instruções sobre como devem se comportar dali pra frente.

Consequentemente, você não precisa escrever tantos hacks pra ficar corrigindo akeles elementos rebeldes que aparecem de uma forma no IE e de outra no Firofox, por exemplo.

Agora vou me aprofundar e falar sobre este pacote que eu preparei e no final tem um link pra download do mesmo.

(Leia mais)

Férias lowtech (ou quase…)

Pessoal — Ney Ricardo @ 8:05 pm

webmaster display noneAntes de mais nada, queria me desculpar com meus amigos por ter sumido sem dar satisfações. E é exatamente sobre isso que vou falar agora.

Fim de ano, depois de cumpridas todas as obrigações com a faculdade e quase todas com o trabalho, decidir tirar 15 dias de folga de tudo, sem preocupações, sem falar nem pensar em trabalho, só curtindo a família e principalmente a Laura, minha companheira amada (ela gosta que puxe o saco dela).

Pois bem, nesse período eu não quis saber de computador nem internet, se alguém me viu no MSN é porque eu entrei pelo celular… Não dá né? Tem que entrar nem que seja pra ver os e-mails…

Mas enfim… ficamos só nos programinhas de gente normal: cineminha, jantar fora, essas coisas…

Depois do Natal fomos pra Corumbá pra passar o ano novo. Um calor de matar! Mas deu pra tirar algumas boas fotos que depois eu vou colocar no flickr.

É isso… no geral deu pra descansar bastante.