Depois de um bom tempo sem escrever aqui eu volto com uma notícia ótima (pelo menos pra mim…).

Fui convidado a ministrar uma Oficina sobre Adobe Illustrator no IV FURACOM – Festival Universitário de Comunicação, que vai ser realizado na Uniderp nos dias 20, 21 e 22 de maio.

Na oficina eu vou falar um pouco sobre essa maravilha da Adobe que, infelizmente ainda, poucas pessoas utilizam aqui em nossa cidade (Campo Grande – MS). E vou aproveitar pra mostrar de que forma é possível tirar melhor proveito usando o Illustrator em conjunto com os outros programas não menos fantásticos da família Adobe.

E como o tema do FURACOM esse ano é Mídias Digitais, nada melhor do que mostrar como eu faço a integração entre Illustrator – Photoshop e Illustrator – Flash, que é exatamente o que eu faço todo santo dia no trabalho.

Ah! Sem esquecer que vou falar um pouco sobre o Illustrator para mídias impressas, que vai ajudar aos que ainda utilizam o Corel a tomar jeito na vida e dar um passo à frente para a evolução.

Então, quem quiser participar do FURACOM pode clicar aqui e fazer o cadastro, já a oficina eu não sei ainda como está sendo feito o cadastro, mas assim que tiver mais informações eu aviso aqui.

E queria aproveitar pra puxar o saco agradecer à professora Vanessa que me indicou, ao pessoal do C.A. de publicidade (a Eline e o Luciano, até onde eu sei) e todo o pessoal da Unidéias que estão se matando pra realizar esse evento.

É isso aí… Participem!

Projeto novo! Nesse, aproveitei pra colocar em prática o meu 3D.

Um problema comum pra quem compõe um layout é encontrar imagens boas (de preferência free) que possam ajudar a compor o visual do site. E nesse caso, por ser um site de advocacia, achei interessante que tivesse uma balança, símbolo da área.

Depois de algumas horas procurando, eis que me vem num estalo: “Por que bão modelar uma balança???”. “Claro! Isso eu acho q consigo fazer…”.

E aí resultado final no site do cliente: Mascarenhas Barbosa & Advogados Associados.

A quem interessar, coloquei também algumas imagens do processo de modelagem, texturização e iluminação do objeto.

Há algum tempo, meu caro colega Carlos deu uma lida em alguns artigos sobre padrões web e me aconselhou a começar a escrever meu HTML usando o cabeçalho DTD (DocType Definition) Strict, pois isso tornaria meu HTML mais estável e teria que fazer menos gambiarras.

Sem questionar, alterei minha configuração do Dreamweaver pra que meus documentos HTML passassem a ser criados no modo Strict.

Se melhorou?! Claro que não. Na verdade não mudou nada, mas não por causa do Doctype e sim porque eu não me preocupava com a semântica correta.

Bem, um cabeçalho Doctype nada mais é do que um arquivo que contem as definições de todos os elementos HTML e informa ao browser a maneira que os elementos devem ser renderizados. Dá uma olhada na criança: DTD/xhtml1-strict.dtd. Dá pra até arriscar dizer que você pode desenvolver seu próprio DTD, mas pra quê? O deles já tá pronto…

Mas isso não vem ao caso. A questão é que há uma certa discussão sobre qual o melhor Doctype: Transitional ou Strict?

Pelo que andei lendo é melhor que você escreva seu código usando o modo Strict pois, segundo alguns especialistas, o futuro dos browsers caminha rumo a este padrão.

Qual a diferença?! Simples. No Transitional você pode usar tags e atributos depreciados (ou deprecated em inglês) em seu HTML, tais como a tag <font>. Já no modo Strict você tem que ficar esperto com as atualizações da W3C, pois na hora que ela achar melhor ela vai e deprecia alguma tag que você adora.

Foi o que aconteceu com tags como <center>, muito útil pra você não ter criar um estilo de centralizar, e com o atributo target da tag <a> de link. Pois é, agora não se pode nem criar um link que abra em outra janela pra não sair do seu site, pra isso muitos andam usando até jQuery só pra que o link funcione do jeito que você quer.

Evolução?! Acho que nesse caso foi o contrário, pois temos que escrever mais pra conseguir coisas simples.

O DTD do meu blog é Transitional… mas não por incapacidade de escrever meu HTML no modo Strict e sim porque prefiro usar um target do que uma função inteira que vai fazer a mesma coisa.

Quanto à semântica, permanece a mesma. Valem as mesmas regras pra ambos. Com a diferença de se ter mais tags e atributos disponíveis em um dos DTD’s.

Não te acrescentou em nada? Então leia de quem entende:

• Doctype – A list apart
• XHTML 1.0 Elements Attributes by DTD
• Transition vs Strict Markup
• Quirks Mode
• Doctype – DTD – Document Type Definition

Lançamos (nós da dothCom) hoje o site da Biz Mídia Inteligente. Esse projeto é o primeiro de uma série de projetos novos que receberão um tratamento especial em SEO e semântica de HTML e CSS válidos, em outras palavras, mais capricho na hora de escreve o código.

Comecei a prestar mais atenção nesse detalhe da semântica depois que passei a me aprofundar mais ainda nas questões do crossbrowsing, que nada mais é do que a possibilidade de visualização do site nos mais variados browsers e sistemas.

Já que não tenho como testar os códigos em outros sistemas (até tenho, mas me falta saco pra isso), faço o possível pra manter um código simples e semanticamente correto (vou falar mais sobre isso no futuro).

Fruto dessa nova forma de pensar, lhes apresento o site (no ar) validado diretamente no site da W3C:

• HTML válido
• CSS válido

Ouso até em dizer que além de tudo ficou bonitinho (ou no mínimo honesto).

Obrigado pela atenção e um abraço pro gaitêro!

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.

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.

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.

O problema dos browsers

Em primeiro lugar vem, obviamente, o CSS Reset desenvolvido e gentilmente cedido à comunidade pelo americano Eric Meyer, um dos mestres do CSS, ex Standards Evangelist da Netscape Communications. Observe o código:

Compactei o código, tirando todos os comentários, quebras de linha e espaços inúteis a fim de minimizar o tamanho do arquivo, e também pelo fato de ser um arquivo que eu não precisarei alterar nunca mais, e salvei como reset.css.

O problema do PNG transparente

Resolvido o problema dos browsers agreguei ao pacote a solução para um problema antigo do Internet Explorer 6: a correta renderização de imagens PNG com transparência. Como todos já devem saber o IE6 não renderiza um PNG transparente com transparência, ao invés disso ele renderiza a imagem com um background cinza. Como este é um problema específico do IE6, não há necessidade de sujar o código com um hack para IE, então criei um documento CSS específico para ele chamado: iehacks.css, onde devem ser agrupados todos os hacks para IE. Mais tarde eu explico como deve ser feita a inclusão deste documento no HTML. Voltando ao PNG… a melhor solução para este problema vem de uma experiência antiga minha com arquivos do tipo HTC (HTML Component), dos quais eu usava bastante quando trabalhava na Yotsuba. O HTC nada mais é que um código escrito em JavaScript que funciona como componente do browser pra qualquer funcionalidade que você determinar. Para usá-lo basta referenciar o caminho do arquivo com a propriedade de CSS behavior, que só funciona no IE. Detalhe: já vou adiantando que os HTC também só são interpretados pelo IE, o que é uma pena pois seria ótimo desenvolver componentes em JS e escondê-los no meio do CSS, não é mesmo? Pois bem adaptei o JS que corrige o problema do PNG a este HTC, salvei como pngfix.htc e referenciei-o dentro do arquivo iehacks.css. E o iehacks.css ficou assim:

Ok, feito isso agrupamos tudo e fechamos o pacote pra ser usado em todos os projetos antes de começar a escrever os estilos da página. Logo, temos:

• reset.css
• iehacks.css
• pngfix.htc
• blank.gif

Como você deve ter percebido eu citei o arquivo blank.gif mas não disse pra que serve. O GIF serve simplesmente pro bom funcionamento da função JS que regulariza os PNGs e nada mais é que um gif transparente de 1x1px, ou seja, quase não ocupa espaço no servidor.

Como usar o pacote

Descompacte a pasta css contida no arquivo css_hack_pack.rar que você baixou e copie para a raiz do projeto. É muito importante que todos os arquivos estejam dentro da pasta css, ou o pacote não vai funcionar muito bem, a menos que você entenda o que cada um faz e altere o que for necessário, caso contrário não é preciso mudar nada.

No cabeçalho do HTML você deve incluir os arquivos exatamente na ordem que é mostrado no código abaixo (já explico o motivo):

Na linha 1 temos o CSS Reset abrindo caminho para os novos estilos que você vai escrever.

Na linha 2, padrao.css, mas pode levar o nome que você preferir, é chamado o documento com os estilos que modelam a página de acordo com seu layout e que você mesmo vai escrever.

Nas linhas 3 a 5 acontece a inclusão do documento que contém os hacks de IE, iehacks.css, e vem por último justamente pra corrigir o que ficou errado no IE. Deve ser incluído da forma que está aí mesmo, pois tudo que vier dentro deste comentario só será interpretado pelo Internet Explorer e desta forma seu CSS não ficará inválido. Mais informações sobre esta sintaxe e como usá-la aqui: Tutorial CSS – IE7 e Hacks CSS.

Bom, espero que isso tudo tenha sido útil assim como está sendo pra mim.

Isso foi o que Rachel Andrew, uma colunista britânica do site Digital Web Magazine “cuspiu” (acho que o melhor termo seria “vomitou”, ou daí pra baixo…) em seu artigo Everything You Know About CSS Is Wrong para o site.

Tudo se baseia na propriedade de CSS display de um elemento que for atribuído o valor table ou derivados.

A regra é a seguinte:

• O elemento-pai deve ser do tipo display: table;
• os filhos devem ser display: table-row, para linhas da tabela;
• e dentro dos filhos display: table-cell, para se comportar como uma coluna da tabela.

Veja o código abaixo:

CSS

#main {
	display: table;
	border-collapse: collapse;}
#nav {
	display: table-cell;
	width: 180px;
	background-color: #e7dbcd;}
#extras {
	display: table-cell;
	width: 180px;
	padding-left: 10px;
	border-right: 1px dotted #d7ad7b;}
#content {
	display: table-cell;
	width: 380px;
	padding-left: 10px;}

HTML

 ⋮ navigation column content…
 ⋮ news headlines column content…
 ⋮ main article content…

Na teoria, isso deveria funcionar como uma tabela, o que resolveria 90% dos nossos problemas pois economizaríamos um bom tempo deixando de fazer validações pra corrigir erros de posicionamento e altura de uma coluna de conteúdo.

Eu, como bom “desenvolvedor Client-side” (aprendi essa esses dias num e-mail sobre padrões da W3C, com o Bruno Dulcetti – que, por acaso é desenvolvedor client-side da Globo.com), fui verificar a notícia, e tive duas surpresas.

A primeira é que: na arquitetura de um site com estrutura Tableless você pode fazer com que suas DIV’s se comportem como células de uma tabela, e esse comportamento inclui: alinhamento vertical e horizontal (maravilha!!!) e controle de altura, ou seja, no fim das contas você faz uma tabela sem usar tabelas… E, segundo os testes que eu fiz funciona realmente! Fantástico…

A segunda surpresa (mas nem é tão surpresa assim, pois já era de se esperar…) é que essa façanha funciona em todos os browsers ‘alternativos’, com exceção para, óbviamente quem?! Quem?! Quem?!?!?!?! Internet Explorer!!! Como não poderia deixar de ser…

Então a incoerente Rachel ‘sei lá o quê’ esqueceu de mencionar que a tal propriedade só passará a funcionar a partir do Internet Explorer 8!!! Vejam só que absurdo!!!

Alguém aí usa, conhece agluém que usa, ou simplesmente já ouviu alguma lenda sobre alguém que já testou o Internet Explorer 8?!

Pois eu conheço!!!

Meu colega de trabalho Shiguenori (acho que é assim que se escreve), vulgo Japonês, já testou a versão BETA do tal IE8, e constatou que o IE8 não dá conta de renderizar sequer o site da própria Microsoft.

Mas nós, esforçados desenvolvedores de web, que prezamos pela boa qualidade e funcionalidade de nossos sites temos esperança de que algum dia, em um futuro breve, a Microsoft vai abolir essa filosfia babaca de desenvolver um browser exclusivo para interesses dela própria e coloque no mercado um browser que atenda às exigências da W3C e facilite nossas vidas.

Mas isso só vai acontecer quando o IE6, que vem na instalação do Windows XP, e o IE7, na atualização do XP e instalação do Windows Vista, forem abolidos completamente da face da Terra (o que, ao meu ver, está longe de acontecer), ainda mais em um país como o Brasil.

Quem me mandou o link foi meu grande amigo Johni Ecco, um dia desses, via MSN…

Carbonmade é um daqueles “sites-portfolio” pra quem precisa ter seus trabalhos on-line. É rápido, fácil de usar e o mais importante: É Limpo! Ideal pra quem precisa montar um portfolio rápido.

Achei a idéia fantástica, pois o site é bem focado na usabilidade das ferramentas disponíveis, e tem um layout que não fica competindo com os trabalhos do artista, além de não possuir aquelas propagandas e banners que poluem o portfolio.

Você pode, também, usar o serviço do Google Analytics pra ter um controle da popularidade do seu potfolio. Pode também customizar a sua página com fundo preto ou branco e as fontes com ou sem serifa. Além da possibilidade de ordenar seus álbuns apenas arrastando-os pela tela, deixando na ordem que achar melhor. Você ainda tem a opção de escolher seu endereço, tipo: seunome.carbonmade.com.

Agora vem a parte ruim, mas nem tão ruim assim: Na conta FREE, você só pode mandar 35 imagens, o que vai fazer com que os seu portfolio seja extremamente selecionado. E se quiser mais espaço deve pargar US$ 12 mensais por uma conta com capacidade pra 500 imagens (haja trampo pra encher isso…).

Como eu havia pré-anunciado antes, foi lançada do dia 23 de setembro a nova suíte de aplicativos fantásticos da Adobe: A ‘Creative Suite 4′. Mas desta vez muito mais integrada e com recursos revolucionários em alguns casos.

Algumas coisas óbvias foram consertadas. E alguns recursos de tirar o chapéu foram inseridos só pra gente ter a obrigação de dizer: “Puxa, por que foi que eu não pensei nisso antes?”.

A começar pelo Fireworks, que ainda hoje é o preferido entre os programadores, acaba de receber recursos como: Exportar um layout em tableless, exportar arquivos em PDF, ou ainda transformar um layout em um aplicativo em AIR (Adobe Integrated Runtime), em outras palavras, você poderá pegar um layout feito no fireworks e transformá-lo facilmente em um aplicativo desktop.

Na seqüência temos o Flash, que, na minha opinião, foi um dos que mais mudou em termos de interface. O Flash CS4 sofreu um aprimoramento na parte de 3D. Com esse aprimoramento a favor do eixo Z da animação o Flash ganhou também o Vanishing point, o que nos possibilita maior realismo nas animações, já que temos uma sensação de profundidade. Este recursos é muito parecido com o que já existia no After Effects, e ainda falando das semelhanças com o After, o Flash ganhou um editor de motion muito semelhante ao do After, que facilita (e muito) o controle dos efeitos pela timeline. Ganhou também um suporte a BONES que uma mão na roda pra quem gosta de animar personagens.

O Illustrator agora oferece a possibilidade de criar vários artboards no mesmo documento, e exportar tudo em um só PDF paginado (Isso é uma bronca antigo que tínhamos com o programa). Outro recurso é a transparência em gradientes, que antes era necessário criar uma máscara de opacidade em escala de cinza, e não era compatível com o flash, mas agora pode-se setar a transparência em qualquer ponto do gradiente, sem falar que agora o gradiente não precisa ser um radial perfeito (pode ser ovalado, isso era quase impossível de se fazer até a versão 13).

No Photoshop, acho que o recurso mais revolucionário é o chamado: Content-Aware Scaling. Este recurso simplesmente permite que você possa redimensionar uma imagem em qualquer sentido sem que ela fique com uma aparência espichada, pois ele identifica os elementos que podem ser espichados e os que não devem ser alterados. Não acredita? Dê uma olhada.

Mas isso tudo são apenas alguns dos recursos novos da suíte, pra quem estiver curioso vejam tudo na íntegra no site da Adobe.