Préprocessadores

Préprocessadores são ferramentas onde você escreve CSS de uma determinada forma, modificando sua sintaxe, fazendo com que na hora de sua utilização o código CSS precise ser préprocessado para que o código escrito seja transformado em código CSS puro e assim então os browsers consigam entender.

Existem muitos préprocessadores no mercado como Less, Sass, Turbine, Switch CSS e outros.

Particularmente eu não gosto de usar préprocessadores. Para começar é necessário que você aprenda a linguagem de cada um e a ideia de que seu CSS precisa ser compilado para poder funcionar não me agrada muito. O CSS é simples demais para complicarmos desse jeito. Entretanto, há uma série de coisas interessantes que podemos fazer com os préprocessadores como variáveis, funções, operações e etc que demorarão um pouco (ou não) para fazerem parte do core definitivo da linguagem. Mesmo assim, pessoalmente, para a maioria dos projetos, não vale a pena.

Frameworks

Frameworks são diferentes de préprocessadores mas são muito parecidos com Bibliotecas. Um Framework disponibiliza para o dev um conjunto de estilos e estruturas prontas para a utilização em projetos de forma escalável e uniforme. Normalmente os frameworks te dão uma coleção de componentes para que sejam usadas por todo o projeto. Esses componentes na maioria das vezes já vem com estilos visuais aplicados, bem como a estrutura. Veja por exemplo o Bootstrap ou o Blueprint.

Com o Bootstrap você consegue, rapidamente, fazer um protótipo simples ou uma estrutura básica de sistema. É o preferido dos programadores. Os elementos visuais já foram criados e desenhados. Talvez não seja uma boa ideia você utilizar um framework em um projeto cujo design já esteja aprovado. Você teria muito retrabalho para “zerar” o estilo visual de cada elemento para depois reconstruí-lo utilizando o seu design.

É muito importante que o uso de um framework CSS/Javascript seja aprovado no início de um grande projeto. Mesmo que você planeje criar um framework do zero, específico para seu projeto. O que na maioria das vezes não vale a pena.

Bibliotecas

Bibliotecas CSS geralmente não modificam o visual como os Frameworks fazem, mas eles disponibilizam uma coleção de classes, reutilizáveis e o melhor, combinatórias, para que se adeque a diversos cenários do seu projeto. Como essas classes não estão ligadas a nenhuma formatação visual, você consegue combinar sem grandes problemas com suas classes e IDs, modificando a hora que quiser a formatação visual dos elementos.

As bibliotecas são indicadas para projetos mais simples, sem grandes apetrechos técnicos, como um site ou algo parecido. Para fazer um sistema, as bibliotecas irão reforçar os Frameworks, facilitando a organização e formatação da estrutura do site. A biblioteca também ajuda na manipulação dos elementos via Javascript se baseando por estas classes prontas.

A verdade é que hoje é muito difícil diferenciar uma biblioteca de um framework.

Como todos eles trabalham juntos?

Você pode usar todos os três ao mesmo tempo em um projeto. Mas não é muito inteligente, já que se você estiver utilizando um framework, muito provavelmente ele terá uma “biblioteca” em sua base. Imagine que a biblioteca pode ser específica de estrutura ou formatação visual. O Framework, basicamente, junta os dois. Obviamente há mais coisas envolvidas. Mas para simplificarmos a explicação, imagine que um Framework é a mistura dessas duas bibliotecas.

O Preprocessador é independente do Framework e da Biblioteca. O seu ganho está ao escrever um código mais escalável, muitas vezes melhorando ou piorando a sintaxe do código. É pura sintaxe, não são classes prédefinidas. Mesmo assim você pode basear seu Framework/Biblioteca em um Préprocessador. O Bootstrap faz isso para facilitar features dinâmicas como grids, cores e etc.

Como eu disse, eu não gosto de misturar as coisas. Prefiro utilizar o Bootstrap puro, sem a interferência de nenhum préprocessador. Mas, há gosto para tudo.

Qual deles é melhor para o meu projeto

Eu não sugiro que você utilize um framework para criar websites institucionais. Websites geralmente não usam os mesmos elementos, nem as mesmas estruturas, nem o mesmo design. Logo, se você utilizasse um framework como o Bootstrap, ou o JQuery UI, você acabaria gastando mais tempo reestilizando e brigando com o CSS já criado dos frameworks do que fazendo o que realmente importa: o seu trabalho.
Logo, para projetos de pequeno porte eu sugiro que você utilize uma biblioteca simples. Sugiro ainda que essa biblioteca seja criada por você.

Não precisa de muito. Em uma biblioteca você só precisa ter algumas propriedades que fazem tarefas básicas, como fazer o elemento flutuar para a esquerda, para direita, clear, retirar margens e etc. Normalmente eu utilizo um reset chamado Normalize. Ele já reseta meu CSS inteiro e então eu me foco apenas nas propriedades que eu reutilizarei no resto do projeto.

Se seu projeto for médio ou grande, você já pode pensar em utilizar um Framework. Principalmente se seu projeto for um sistema. Você já vai ter à disposição estilos para formulários (que são um saco pra fazer), botões, grids, reset CSS e outras coisas. O trabalho fica mais fácil por que você tem menos arestas para acertar. Ainda mais se o designer aceitar utilizar alguns dos estilos já prontos do Framework, assim você não precisa reconfigurar formatações visuais e etc.

A utilização do Préprocessadores é totalmente opcional. Mas se você decidir utilizá-lo juntamente com algum Framework, procure saber se o Framework escolhido suporta algum tipo de préprocessador. O Bootstrap, por exemplo, tem uma versão para LESS.

No próximo artigo vou contar como estamos fazendo aqui na Locaweb. Estamos criando uma grande biblioteca visual e de front-end que será utilizado por todos os serviços. Os programadores conseguem subir um sistema sem precisar esperar um código HTML definitivo, utilizando os módulos dessa biblioteca. A galera de design faz todos os layouts padronizados visualmente, garantindo a uniformidade de todos os sistemas. E o pessoal de front? Bom o pessoal de front cuida para que tudo isso funcione.

Posts Relacionados

• Qualidade de Imagens e densidade de pixels
• GoMo – Teste seu site mobile
• Agora é a vez dos desenvolvedores
• ePub: Aprenda a criar um livro digital
• Introdução aos padrões de codificação

Sem frescura

O que eu amava quando no Editplus do Windows era a interface limpa. Não quero ver iconezinhos bonitinhos, eu quero uma tela branca, pronta pra escrever. O problema é que eu não sou sadomasoquista suficiente para ficar usando o VI. O Textmate é muito parecido com o Editplus nesse quesito, assim como o Sublime. O Sublime é limpo e o code highlight padrão é muito confortável. Confesso que nunca fui fã de editores com o fundo escuro. Comecei a gostar depois do Sublime.

Customização

A customização do Textmate é sensacional. As possibilidades são muito maiores que a do Coda. Mas o Sublime consegue superar o Textmate. Ele guarda as configurações personalizadas em um arquivo separado com a sintaxe parecida com JSON. Você pode colocar esse arquivo no seu Dropbox e criar um link simbólico para o diretório do Sublime. Assim as suas configurações ficam iguais no trabalho e em casa.

Nesse arquivo você pode configurar tudo, desde o thema que será usado até as definições de word-wrap, tabs e espaços, tamanho de fonte, algumas configurações de busca e etc. Sensacional. Nunca mais perca tempo reconfigurando seu editor quando reinstalar o sistema.

Como sou um cara solidário, coloquei meus arquivos de configuração do Sublime no Git. Assim você consegue pegar emprestado e eu não perco toda vez que eu reinstalar o sistema.

Plugins

Os plugins são o filé do Sublime Text. Para começar instale o Sublime Package Control. Este plugin te ajuda a descobrir, instalar e gerenciar pacotes e plugins do Sublime facilmente via comando de teclado.

Outro plugin muito útil é o SideBarEnhancements. Ele insere uma série de opções no menu contextual dos arquivos da sidebar. Você pode dizer: “O meu editor faz isso sem plugin”. Aí eu digo: “Você consegue customizar se quiser?”.

Existem outros plugins para integrar com o GIT, snippets para Bootstrap, SFTP, highlight, VI, SASS, LESS e outras coisas.

Descubra alguns plugins disponíveis para o Sublime aqui.

Você pode instalar esses plugins via o Package Control, que citamos anteriormente.

Tarefas com o Teclado

Quer encontrar uma função, classe ou id? Existe um atalho que se chama GoTo Anything. Aperte CMD+R ou CMD+P (CTRL+P), coloque um @ e comece a digitar o nome da função. Quer ir para uma linha? Digite CTLR+G ou CMD+P, coloque : e diga o número da linha.

Dá uma olhada nesses atalhos básicos e nesse Sublime Cheet Sheet.

Só o GoTo Anything quebra um galho danado.

A seleção por colunas funciona como no Textmate. E pra mim, uma novidade que eu só via no VI é a seleção por similaridade. Você consegue selecionar, via teclado mesmo, várias tags ou caractéres iguais. Por exemplo, suponha que você queira selecionar em um mesmo documento todas as tags <p>. Selecione primeiro a tag e depois aperte CMD+D.

Find and Replace

Find and Replace é coisa linda. Eu não vivo sem e provavelmente você também não. Você consegue procurar por arquivos e palavras em todos os documentos de uma pasta determinada, em arquivos abertos ou em pastas abertas. Aperte CMD+T e você consegue filtrar os arquivos que você precisa. Claro, que você também pode procurar arquivos via o GoTo Anything que já havíamos falado anteriormente via CMD+P.

SHIT+CMD+F você procura e substitui por arquivos dentro de uma determinada pasta.
Com ALT(option)+CMD+F você tem o find/replace tradicional.

Nem preciso dizer do suporte a expressões regulares, né?

Suporte

O Sublime tem versões para Windows, Linux e Mac.

Mais para ler

• Eclipse Color Themes
• Como criar snippets no Sublime Text 2
• Sublime Text 2 Tips and Tricks
• Sublime Text Workflow
• Nove razões para você instalar Sublime
• Migrando do Textmate para o Sublime

Posts Relacionados

• Dicas de sobrevivência em uma era pós o IE6
• Drops 7 – Você está fazendo errado
• Usando Meta Box em seu tema WordPress
• Introdução aos padrões de codificação
• Biblioteca CSS ou Framework?

Hoje surgiu um vídeo no Brain9, sobre uma iniciativa do Google para um óculos que usa a tecnologia ao nosso favor, em tarefas simples e diárias. É uma interação totalmente diferente. Veja abaixo:

Quantos browsers você viu ali? Se não viu nenhum browser, pergunte-se sobre HTML, o CSS e Javascript? Será que escreveremos CSS e HTML em tempos assim? E se escrevermos, como será? E se não escrevermos, o que estaremos fazendo? Designers, como vocês se encaixam nesse cenário? Programadores, como vocês se veem em um ambiente como este? Como vai ser programado?

Em um ambiente como esse não existe responsive web design. Não existe layout para mobiles. não existe ficar brigando se faz ou não faz sites para IE. Eu estou colocando aqui um pensamento muito, mas muito superficial. Algumas respostas são óbvias outras nem tanto. Mas são óbvias para quem?

Estou mudando muito o foco aqui do Tableless. Quero falar mais sobre comportamento e mercado do que tutoriaizinhos e truquezinhos com CSS. Você consegue encontrar isso fácil na web. O problema é que a grande maioria dos desenvolvedores brasileiro não tem base conceitual nenhuma. Muitos não entendem como funciona o negócio. Isso é sério. Para mim é mais importante que assuntos técnicos.
Tem designers trabalhando com web que não entendem HTML/CSS. Tem programadores que ainda insistem em aprender apenas a linguagem server-side e ficam se lixando para HTML. Tem desenvolvedores de interface que não estão nem aí pra semântica, css bem escrito e caem na bobeira de ficar discutindo assuntos superficiais como abordar ou não abordar determinado browser, ou o Flash é melhor que HTML e vice-versa.

Mas esse post não é sobre isso. Aproveite o vídeo e pense nisso!

Posts Relacionados

• Schema – Marcação de dados estruturados
• WebIntents – Framework para WebApps
• Mobile First – A arte de pensar com foco
• Experiência deve ter começo, meio e fim
• Manipulando a metatag Viewport

Recentemente os principais buscadores se reuniram novamente, só que agora com a participação do Yandex um novo buscador russo que afirma ser melhor que o Google. Os buscadores se uniram para definir uma nova marcação de dados estruturados, trata-se do Schema.

Historicamente, o Google tem apoiado três padrões diferentes para dados estruturados, (microdados, microformat e RDFa) com a vinda do Schema as coisas irão mudar já que é proposto por três dos mais influentes players da web.

O projeto Schema vem basicamente para ser uma central de recursos para desenvolvedores, para auxiliar e apoiar o vocabulário de marcação de dados estruturados nas páginas web. Para conferir o novo projeto ele está disponível no endereço schema.org.

Navegando na web você já deve ter visto em um resultado de busca algumas snippets mais interessantes, que mostram reviews de usuários, preços de produtos.

Com uma snippet assim você acaba chamando mais atenção na SERP do Google conseguindo assim mais cliques e consequentemente mais visitantes, essa é uma das vantagens de utilizar a marcação de dados estruturados mais conhecida como Rich Snippets (Trechos ricos de informação).

Introdução de como implementar

Para implementar o Schema em seu site é muito simples, em uma marcação HTML adicione a tag itemscope essa tag é responsável por identificar a seção da página que é sobre um determinado “assunto”, após especificar o itemscope é necessário atribuir o tipo desse “assunto”, para tal utilize a tag itemtype.

No Schema para determinados assuntos temos várias propriedades, por exemplo em um filme temos atores, diretor, preço, trailer, avaliações. Para atribuir essas informações para os motores de buscas  utilize a tag itemprop, veja um exemplo:

No código acima o “assunto” é o novo filme do Anderson Silva (Como Água) dirigido pelo diretor Pablo Croce com um link para um trailer do filme, por isso foi utilizado o itemtype “Movie”.

Desde 2004 o Google vem dando fortes sinais em relação a semântica e trechos ricos de informação, em meados de 2009 lançou uma ferramenta chamada Rich Snippets Testing Tool que tem como finalidade trazer uma amostra de como os Rich Snippets aparecereia nos resultados das buscas do Google.

Recentemente um executivo do Google anunciou uma das maiores renovações em seu algoritmo de busca, a ideia dessa atualização é que o buscador entenda da mesma forma que nós humanos entendemos o mundo, mais uma vez ressalto a importância de se ter um site semântico e bem estruturado.

Posts Relacionados

• Responsive Web Design – focando a coisa certa
• Seu lugar ao sol
• WebIntents – Framework para WebApps
• Utilizando APPs em vez de browsers
• Mobilidade na cabeça

O tema é Acessibilidade na Web. Trata-se de, ao construir um site, fazê-lo para que seja acessível para qualquer pessoa, em qualquer dispositivo, em qualquer conexão. Trata-se de fazer o site acessível para você mesmo quando estiver navegando no celular, ou sem óculos, ou de uma conexão lenta, ou dirigindo. Ou dirigindo ao celular sem óculos numa conexão lenta (cuidado!) Também, é claro, esse trabalho vai tornar o site acessível para portadores de deficiência.

Acessibilidade não deveria ser um extra, mas uma obrigação básica em projetos web. Não simplesmente porque é politicamente correto, mas porque é muito mais barato pensar em acessibilidade desde o princípio. Se você deixa para pensar em acessibilidade depois que o site já foi desenhado, isso é caro e trabalhoso. Mas se a preocupação com acessibilidade está presente desde o início do projeto, conduzindo o desenho, o custo de criar sites acessíveis é muito pequeno.

Apesar disso, vemos o tempo todo agências e produtoras web construindo sites inacessíveis. E aqui eu gostaria de sua ajuda. O que podemos fazer para mudar isso? Como conscientizar os clientes e as agências da importância da acessibilidade? O que podemos fazer para que os novos sites sejam construídos tendo essa preocupação? Que tipo de ações, campanhas, conteúdos, eventos, iniciativas deveríamos nós, a comunidade brasileira de desenvolvedores web, promover para mudar essa realidade?

Por favor, comentários.

Mais comentados

• Editores
• Quer testar o Google Analytics?
• O Chrome não quer dizer muita coisa
• Desenvolvedor analfabeto (sim, é sobre WYSIWYG)
• Não “otimize” seu código

Agora, a bola da vez é criar designs responsivos como se não houvesse o amanhã. É aí que entra a pergunta: você precisa de um design responsivo?

A maioria dos browsers para dispositivos móveis fazem um bom trabalho em websites que não tem versão específica para mobiles. Desde a vinda do iPhone, todos os browsers para mobiles se adequaram de uma forma que antes apenas o Opera abordava. Hoje, quando navegamos em qualquer website, tendo ou não versão para mobile, temos uma boa experiência. Aí vem o ponto: será que criar um site responsivo é o mais importante para o negócio do seu cliente? Produzir um website mobile friendly não é apenas modificar sua carinha, colocar ícones bonitinhos e pronto. Há outros pontos a serem abordados que são tão ou mais importantes que este.

Veja um comentário do Brad Frost em seu artigo:

Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done. They do give a shit when your site takes 20 seconds to load. They do care when interactions are awkward and broken.

Entende o que eu quero dizer? Um dispositivo móvel já é mais dinâmico por natureza que os desktops. Os aparelhos móveis de hoje em dia nos fazem querer os resultados mais rapidamente. Se você tiver um website desenhado apenas para desktops, mas mesmo assim ele é rápido, os usuários de mobile vão agradecer. Já vi muitos websites mobiles que foram apenas adequados… Isso não é produzir um site mobile. Se seu site é bem desenhado e sua usabilidade impecável, ter um design responsivo passa a ser secundário e você passa a dar atenção coisas mais importantes, por que mesmo sendo uma versão desktop, o usuário conseguirá navegar sem muitos problemas.

Mas você quer dizer que sites mobile não importam?

Não, não quero dizer isso. Pelo contrário, eles importam e muito. A experiência do usuário é muito melhor se houver uma versão mobile, sem sombra de dúvida. Mas do que adianta ter uma versão mobile se o site demora 20 segundos para carregar? O dev cria a versão mobile, mas ele não faz adaptação nenhuma nas imagens (e não estou falando apenas de mudar a dimensão dela), não usa com inteligência o font-face, que embora seja maravilhoso, come muita banda… Acontece que ter carinha bonita não quer dizer que é fácil de usar.

Experiência de usuário é o foco

O foco é buscar a melhor experiência possível que o usuário pode ter em seu dispositivo. Nós usamos responsive web design para levar a experiência do usuário para outro nível. Não apenas por que está todo mundo fazendo. Você não precisa fazer seu site se adequar ao redimensionar a janela. É bonito? Sim, claro, mas só pra impressionar, porque não é muito útil se você parar para pensar.

No front-end, a experiência do usuário vai muito além do design. Responsive web design não é uma modinha é mais uma ferramenta para usarmos em pról da boa experiência do usuário. É por isso que na construção dos nossos projetos, podemos iniciar o trabalho pensando primeiramente nos mobiles e depois nos desktops. Isso nos faz mirar em objetivos mais importantes, não apenas para mobiles, mas para os desktops também, bem como tablets, tvs e todo o resto que vem por aí.

Alguns artigos para você dar uma olhada:

• Why is Responsive Web Design Such A Big Deal? Seriously…You Tell Me
• responsive web design: missing the point
• Which One: Responsive Design, Device Experiences, or RESS?
• Mobile First – A arte de pensar com foco
• A usabilidade deve ser pensada por todos

Posts Relacionados

• Qualidade de Imagens e densidade de pixels
• Utilizando APPs em vez de browsers
• Mobile First – A arte de pensar com foco
• Sites para Dispositivos Móveis – MediaType
• Sobre Internet Explorer para Mobile – Breve impressão

2003

2004

2005

2006

É humilde, mas é nosso!

Posts Relacionados

• Estruturação de Client-side – Parte 2: Designers e Programadores
• Adobe: The Expressive Web
• Drops 9 – Préprocessadores, frameworks e bibliotecas
• Estruturação de Client-side – Parte 1: Préprocessadores, Framewoks e Bibliotecas
• Adobe e os Padrões Web

Cada um destes personagens tem papéis importantes para que a evolução da web possa se tornar forte, traçando novos caminhos, cobrindo as necessidades atuais dos usuários e prevendo necessidades e soluções futuras. Há um ciclo para que estes personagens possam cumprir com seus objetivos.

O W3C cuida dos padrões. Ele tem ideias, ele prevê problemas e tenta solucioná-los. O W3C não aplica, ele apenas planeja. É um trabalho difícil, por que é necessário uma visão muito apurada do cenário da web para saber quais caminhos ela deverá tomar. Uma decisão errada, pode acarretar problemas que levarão anos para serem solucionados por completo. Vide o desenvolvimento com tabelas. Por isso esse trabalho de planejamento deve ser meticuloso. Devo confessar que em muitos casos o W3C não supera as expectativas e faz com que iniciativas paralelas surjam e direcionem a Web para um caminha mais correto. Foi o que aconteceu com o HTML5.

Os browsers, por sua vez, precisam entender e adotar as idéias do W3C, absorvendo as soluções e criando suporte nos seus softwares. Esse trabalho também tem seus perigos. Os browsers precisam pesquisar quais das necessidades dos desenvolvedores é mais importante e assim implementá-la para que a utilização de projetos seja executada. Obviamente que alguns decidem suportar aquelas soluções que darão mais pontos estratégicos contra o concorrente.

Finalizando o ciclo, os desenvolvedores aplicam tudo o W3C define, mas apenas aquilo que os browsers “querem” ou podem suportar. E isso, claro, faz com que o desenvolvedor se depare com problemas na ponta produção. Vide o IE6/7/8 e nossos problemas de cada dia.

Durante muito tempo, esse ciclo não era afinado. Havia uma certa confusão e um jogo de interesses próprios envolvendo principalmente os browsers. O W3C estava apenas pensando em como resolver problemas que talvez existiriam daqui longos anos. Os browsers estavam apenas interessados em criar uma massa de usuários suficiente para ser o primeiro no ranking. Os desenvolvedores, por sua vez, queriam ganhar seu dinheirinho, fazer o trabalho, entregar pro cliente e acabar com o problema.
Ninguém deu atenção quando começamos a desenvolver com tabelas, fazendo com que os sites ficassem mais pesados, aumentando o tempo de desenvolvimento e o custo do projeto.

Este ciclo defeituoso foi praticado durante muito tempo. Por incrível que pareça, foram os Desenvolvedores que começaram a fazer o ciclo funcionar novamente como deveria. Eles acordaram os fabricantes de browsers e também o W3C.

O W3C passou a pensar mais em problemas presentes. Solucionou problemas iminentes e que entregavam valor para os projetos.

Os browsers suportaram o mais rápido possível essas mudanças, atualizando seus engines, e fortalecendo as bases para novas soluções e flexibilizações posteriores.

Já os desenvolvedores estagnaram. Desculpe-me, serei um pouco revoltado daqui para frente. Os desenvolvedores dormiram. Quando o W3C e os browsers apresentaram soluções para problemas como transparência, bordas arredondadas, backgrounds inteligentes, utilização de fonts remotas e etc, os desenvolvedores resolveram que não era a hora dessas soluções por causa da retrocompatibilidade com browsers antigos, como o IE6. Na verdade estou sendo meio injusto aqui. Não foram todos os desenvolvedores que criaram caso com a retrocompatibilidade, foram somente os idiotas.

Nós reclamávamos que precisávamos de recursos mais inteligentes para trabalhar. Que precisávamos de idéias realmente inovadoras, que transformassem os projetos e facilitassem o desenvolvimento. Protestamos, escrevemos manifestos, postamos em nossos blogs revoltados com a falta de visão do W3C e com a pobreza do suporte dos browsers. E quando conseguimos o que queríamos, demos para trás. Amarelamos. Pedimos arrego.

Infelizmente, via-se muito disso aqui no Brasil do que no resto do mundo. Ouvi muitas desculpas como: – “Mas meu cliente usa IE6.” ou “Mas isso não funciona em IE6.” Você é desenvolvedor. Você trata com seu cliente todos os dias. Você tem o poder de educar e convencer. E se você acha que não tem poder nenhum, por que ainda trabalha com web?

Talvez isso seja trauma do passado. Talvez não. O fato é que não podemos mais nivelar por baixo. Isso é atrasar uma “evolução” inteira.

Tenho incansavelmente falado sobre Graceful Degradation, Enhanced Progressive, HTML 5, as maravilhas do CSS 3 e etc, pois esse é o assunto que rola lá fora. Há desenvolvedores e empresas, que acham que devemos ter uma autorização especial dos gringos para utilizarmos novas tecnologias e principalmente para deixar os browsers antigos no passado.

Esse assunto me faz pensar em outra pergunta: Estamos (você está?) preparados para o ritmo alucinante do W3C e dos browsers?
Até a Microsoft está cumprindo com a palavra de ter um browser atualizado. Eles já anunciaram o novíssimo Internet Explorer 10, com uma série de atualizações que promete trazer o IE para o patamar de browsers atuais.

O mercado de client-side se transformará rapidamente nos próximos anos. Muitas mudanças no HTML e no CSS serão publicadas com o intuito de tornar a web mais homogênea, flexível, portável. O HTML 5 não é só uma coleção de novas tags e APIs. O CSS 3 não ganhou só bordas arredondadas. E nem só de iPhone vive o homem. Existem milhares de Nokias, Blackberrys, Windows Phones e Androids por aí.

Os desenvolvedores precisam acordar.

Artigo originalmente publicado em Nov/2009 na revista TI Digital.

Posts Relacionados

• GoMo – Teste seu site mobile
• Introdução aos padrões de codificação
• Estruturação de Client-side – Parte 1: Préprocessadores, Framewoks e Bibliotecas
• Seu lugar ao sol
• ePub: Aprenda a criar um livro digital

Com a crescente popularização de tablets e leitores digitais não há dúvida de que os livros eletrônicos vieram para ficar. O formato ePub vem cada vez mais se consolidando como o padrão definitivo para eBooks. As editoras procuram profissionais especializados, mas, aqui no Brasil não existem muitos que de fato possuem o know-how necessário para desenvolver livros no padrão. Na verdade o que acontece é que as editoras estão alocando o tipo de profissional errado para a função. Um diagramador padrão, acostumado com editoração impressa via softwares visuais como Indesign vai ter problemas ao tentar lidar com linhas de código. Já um desenvolvedor front-end vai se sentir em casa já que criar e editar um livro digital é basicamente lidar com XHTML e folhas de estilo em CSS. Neste artigo vou comentar sobre as vantagens (e desvantagens) deste padrão e como com algumas poucas dicas você poderá editar um livro digital.

Por que não usar PDF?

O PDF tem muitas vantagens. Até a sua tia que te liga toda semana para perguntar de novo como faz para ler o resultado da Megasena na internet sabe como abrir um PDF. E do ponto de vista do design é ótimo. Hey, você tem muito mais controle do layout! Você pode colocar imagens e textos como quiser sem se preocupar com nada. Exceto… Você já tentou ler um PDF em um smartphone? É simplesmente agonizante. É necessário dar zoom in e out a cada frase diferente. Ou tentar ler tudo em um tamanho de letra absurdamente pequeno…

Isto acontece por que o PDF é baseado no suporte físico de uma folha, o que simplesmente não faz sentido no mundo digital. Vou explicar: um artista que pretende pintar uma nova obra de arte precisa saber o tamanho da tela. Da mesma maneira, ao editar um livro, ou qualquer outro tipo de documento para a impressão, é necessário saber o tamanho da folha para aí então fazermos toda a diagramação. O problema é que em um ambiente digital não existe uma folha. Existe um viewport (ou seja, área de visualização) que pode ser, bem, do tamanho que o usuário quiser! Se ele for ler o seu livro no browser pode aumentar e diminuir o tamanho da janela até a resolução máxima do monitor. Ou pode optar por ler em um tablet, smartphone, eReader… Enfim, a questão é que não temos como determinar a medida de altura e largura da mesma maneira que fazíamos com o papel. E o PDF, como foi pensado para ser impresso, precisa desta medida fixa.

Sobre o ePub

ePub é abreviação de Eletronic Publication, ou seja, Publicação Eletrônica. É um formato de livro aberto e gratuito criado pelo IDPF, um fórum internacional de publicação digital. Os livros deste formato são fluidos, o que permite que a experiência de leitura seja legal em qualquer tamanho da tela, sistema operacional ou dispositivo que você escolher. Desde que você tenha um app para isto, é claro. Mas isto não é muita preocupação. Existem leitores gratuitos para quase todos os aparelhos e sistemas operacionais (se você não conhece nenhum dê uma olhadinha no final do texto). Outro aspecto bacana do ePub é o controle que ele dá ao usuário. É possível realizar buscas, navegar através de links, aumentar e diminuir o tamanho da letra, trocar as fontes, a paleta de cores, etc. Sim, isto significa que se o cara quiser ler o livro inteiro em Comics Sans ele pode! Mas se isto deixar o usuário feliz quem somos nós para dizer não?

Como editar

Bem, agora que você já sabe como ler e por que usar, vamos descobrir como é um livro digital por dentro! Criei um livro de exemplo para utilizar neste tutorial. Você pode baixa-lo aqui. Mas qualquer outro livro que você tiver neste formato vai servir para o nosso experimento.

A extensão ePub é um formato de livros compactado. Faça um teste: renomeie o arquivo deste tutorial de meulivro.epub para meulivro.zip ou meulivro.rar que você poderá ver o conteúdo do pacote. No entanto, uma coisa importante de se ter em mente é que não são todos os softwares editores que estão preparados para salvar neste formato. Até dá para ler os arquivos XHTML separados, mas você teria que abrir manualmente, editar e recompactar a cada mudança de volta para ePub o que não seria nada prático. Felizmente existem alguns softwares como Sigil que são específicos para a edição de código de ePubs. Eles não tem um visual muito bonito mas cumprem com a função direitinho. Bem, vamos explorar os arquivos…

Obs. Existem outras especificações opcionais, mas vou me manter dentro do fundamental.
Obs.2 Os nomes dos arquivos são case sensitive.

A Estrutura

Vamos voltar ao nosso ePub! Ao descompactar a pasta você vai ter o seguinte:

arquivo mimetype
pasta META-INF

• container.xml

pasta OEBPS

• content.opf
• toc.ncx
• style.css
• titulo.html
• capitulo1.html
• capitulo2.html

Para que serve tudo isso e como eu crio sozinho?

Mimetype

A função do mimetype é informar ao sistema operacional qual é o tipo do arquivo. O mimetype é um simples arquivo de texto ASCII.  Para criar um mimetype basta abrir qualquer editor (ou até mesmo o bloco de notas) e escrever esta linha de código:

Salve como mimetype (sem nenhuma extensão) e pronto. Está feito! O mimetype é igual para qualquer ePub. Então copiar de um outro ePub da certo também.

Container.xml

Deve ficar dentro da pasta  META-INF. A função deste arquivo é agregar todos os outros. Bora criar um!

Content.opf

Descreve o conteúdo de todos os arquivos. Apesar da extensão esquisita é só criar um xml e depois salvar como .opf É composto das seguintes partes: metadata, manifest e spine. O esqueleto dele é assim:

Metadata

Não tem muito segredo aqui. São as informações do seu livro.

Itens obrigatórios:

• title - O título do seu livro.
• language - A Lingua utilizada. Como o livro está em português eu escolhi pt-br.
• identifier - Um código único para o seu livro. Pode ser o ISBN, por exemplo.

Itens opcionais:

• creator – O criador. No caso, você.
• contributor – Contribuidor
• publisher - Editora
• subject - Assunto
• description – Descrição do livro
• date - Data
• type - Tipo
• format – Formato
• source – Fonte
• relation – Relação
• coverage – Cobertura
• rights – O tipo de licença. Creative Commons, por exemplo.

Bem, vamos preencher nossas metadatas. Eu inseri o seguinte entre as tags package:

Manifest

É um manifesto mesmo. Deve conter (em qualquer ordem) a lista de todos os arquivos da sua publicação. Exceto mimetype, container.xml e content.opf É necessário especificar uma ID única para cada arquivo. Você pode nserir estas informações antes ou depois da metadata. O importante é que esteja também dentro da tag package. No caso do nosso livro-tutorial ficou assim:

Spine

A espinha do livro, ou seja, a ordem de leitura. Aqui você deve colocar apenas os arquivos tipo HTML na ordem que você deseja que apareça no livro, chamando cada um pelo ID que você definiu no manifesto. Tome cuidado para não duplicar nenhum arquivo ou ID. Como você já adivinhou, deve ser inserido entre as tags package também.

toc.ncx

TOC é uma sigla para Table of Contents, ou seja, o indice do livro. Também é um arquivo xml salvo com a terminação .ncx Possui a seguinte estrutura:

#head

• uid — o identificador único em content.opf
• depth — níveis do sumário >= 1
• totalPageCount — to 0
• maxPageNumber — to 0

#navMap

O sumário em si

#navPoint

• id — único do arquivo
• playOrder —ordem de navegação (iniciando em 1)

O nosso índice ficou assim então:

Os capítulos

É aqui que entra o livro em si. Cada capitulo deve ficar em um HTML separado. Estes arquivos não são nada diferentes de HTMLs comuns:

Outros tipos de arquivos:

CSS – Uma folha de estilos normal.
Pasta images – Aqui devem ficar as imagens do livro. Formatos permitidos: jpeg, png, gif e svg+xml
Pasta fonts – Utilize esta pasta se você quiser embedar algum arquivo de fonte no seu documento. Lembre-se de utilizar sempre o formato Open Type pois alguns aplicativos de leitura não suportam True Type.

E agora basta compactar!

Selecione todos os arquivos e crie um arquivo compactado (pode ser .zip ou .rar). Depois é só renomear para .epub e ler no seu dispositivo favorito. Pronto! Você tem um livro digital!

Dicas importantes para editar um ePub

Semântica é sua amiga

Bem, se você é leitor do Tableless provavelmente não preciso dizer isso, mas vou dizer mesmo assim! É muito importante utilizar uma estrutura semântica aqui. Tags h1 a h6 para títulos, p para parágrafos… O que você já está mais do que cansado de saber a esta altura. Evite usar br para quebrar a linhas por que sem ter o tamanho de um container é difícil determinar quando de fato vai ser necessário quebrar a linha.

Evite seletores complexos

Leitores digitais não são tão sofisticados quanto browsers. Mantenha o seu CSS o mais simples possível.

Use tamanhos relativos

Como as “páginas” do seu livro vão aumentar e diminuir de acordo com o tamanho da tela do dispositivo não utilize pixels como medida para nada. Lembre-se: EM para texto e margens, porcentagens para figura. Isto vai garantir que o seu livro continue proporcional e escalável. E o seu leitor feliz!

Tamanho é Documento

Não use apenas um documento XHTML para o livro todo. A recomendação é que os capítulos tenham menos de 300k cada. Mais do que isto pode deixar alguns leitores, como o iBooks por exemplo, muito lentos! A razão é que estes apps consideram cada capítulo como um bloco de texto diferente. Se você colocar tudo em um documento só o aplicativo vai carregar tudo de uma vez a cada acesso.

Outra dica é tentar usar sempre imagens otimizadas para a web e com uma resolução não maior do que 1200 x 1600px.

Não pire muito na escolha de fontes

Evite usar fontes fora do padrão websafe. Você pode embedar fontes Open Type utilizando a propriedade @font-face mas isto não significa que voce deve. Para começar não são todos os leitores que aceitam isto e no final o seu arquivo pode ficar pesado demais e travar. E muitas vezes pode ser um trabalho extra inútil já que o seu usuário pode muito facilmente trocar de fonte. Se mesmo assim você quiser usar não escolha mais do que dois ou três tipos.

Edição visual

Sim. Existem alguns softwares que podem gerar o livro para você. O Adobe InDesign faz isto, o Pages do Mac… Mas falando sério: não vale a pena. O código vai ficar sujo e no final você vai ter que corrigir vários bugs. É como se você estivesse utilizando um editor “What you see is what you get” para fazer um site. Acho que vocês entendem o drama. Mas… se você for realmente caminhar por esta estrada escura tenha algumas coisas em mente:

• Se você está acostumado com editoração nestes programas é preciso mudar alguns paradigmas. Esqueça páginas mestras, hifenização, numeração, pé de página… você não precisa se preocupar mais com estas coisas em um formato digital.
• Crie estilos específicos para o que é título, parágrafo, etc e não esqueça de importa-los na hora de salvar o arquivo.
• Cuidado ao gerar o TOC (table of contents, ou seja, o índice). Se você colocar mais de dois subniveis pode dar problemas de compatibilidade com alguns programas e o seu livro simplesmente não abrir.
• Lembre-se que todas as imagens precisam estar ancoradas para que fluam juntamente com o texto.
• Determine quebras de capítulos. No caso do InDesign, salve cada parte do livro em um arquivo diferente. Depois junte todos os arquivos em um formato “book”.

E quanto ao formato iBook da Apple?

A Apple lançou recentemente um software gratuito chamado iBooks Autor para a criação visual de livros digitais. Os livros no formato iBook são bem interativos, permitindo a implementação de elementos multimidia como videos (coisa que ainda está engatinhando no formato ePub). Com um “pequeno” porém. Sem muito alarde nos termos de serviço a Apple colocou uma clausula de exclusividade para livros comerciais. Ou seja, se você utilizar o software e vender o seu livro através da iBook Store não poderá vender em mais nenhum lugar. Sem contar que o programa é exclusivo para Mac.

Fique longe dos conversores automáticos!

Existem alguns softwares ainda que prometem converter de PDF para ePub. Fique longe deles! Sério. Eles são ainda piores que os editores visuais. Um software não consegue interpretar um livro da mesma maneira que um ser humano a menos que você diga a ele o que fazer. Se você não determinar “ei, isto é um título” ele não tem como fazer este tipo de decisão por você.

Os PDFs estão presos a um tamanho fixo, lembra? O que significa que as palavras precisam ser hifenizadas. Se você converter automaticamente (além do seu código ser a coisa menos semântica desde os sites feitos em tabelas) os hífens vão continuar lá, criando divisões no me-io das pala-vras on-de não pre-cisava! Pense nos números das páginas… se o texto flui isso significa que um mesmo livro pode (e vai) ter uma numeração diferente de acordo com o aparelho utilizado. Mas no caso da conversão automática os números no pdf vão continuar lá. Os títulos provavelmente vão estar errados também. Fora que muitos deixam marcas como “convertido pelo programa XYZ” em todas as páginas do livro.

Links úteis

• IDPF - A organização responsável pela criação do ePub. O site deles é meio confuso, mas contém bastante informação a respeito do formato.
• ePub Chech – Validação de ePub
• Epub Format Construction Guide – Um meta-livro bem completo sobre o assunto.

Bibliotecas gratuitas

• Google Books
• ePub Bud

Aplicativos para a Leitura

Mac & PC

• Adobe Digital Editions
• Nook

Linux

• FB Reader

iOS

• iBooks
• Stanza

Android

• Aldiko

Leitura no Browser

• Magic Scroll - Google Chrome
• ePub Read – Firefox

Posts Relacionados

• Qualidade de Imagens e densidade de pixels
• GoMo – Teste seu site mobile
• Introdução ao CSS 3D – Flip Card
• Experiência deve ter começo, meio e fim
• Vote no Especialista em Usabilidade para Presidente

Empresário? Empreendedor? WTF?

Nos últimos três meses a minha vida profissional mudou da água para o vinho.
Eu era sócio de uma pequena empresa de web, com uma visão de desenvolvimento web diferente das demais “agencias”. Tirando o primeiro registro da minha carteira que marca uma passagem de 6 meses em uma agência de design, como assistente de Web Designer, eu nunca trabalhei como empregado. Fiquei durante 5 anos da minha vida ajudando dois amigos a erguer uma outra empresa de internet, com ideais também inovadores e uma vontade enorme de mudar a forma com que o desenvolvimento web era feito. Um desses amigos acabou se tornando meu sócio em uma segunda empresa e a partir daí foram 6 anos, erguendo uma empresa e construindo uma comunidade em volta.
Até 2 semanas atrás eu não sabia o que era receber salário, mas sabia o que era pagar vários salários. Eu não tinha que marcar ponto, eu tinha que controlar o ponto. Erguer uma empresa dá trabalho, mas é bom. Você não precisa ter faculdade para isso. Você precisa apenas ter coragem.

Aí você descobre que ter coragem é a parte fácil. O difícil é você pagar imposto, salário, gerenciar expectativas de clientes, se preocupar com a vida dos seus funcionários, entender como a carreira deles pode melhorar, saber movimentar a empresa para o lugar correto no mercado e além de tudo isso não tirar os olhos do fluxo de caixa. É aí que você aprende a diferença entre ser empreendedor e ser empresário. Eu achava isso o máximo. O seu ego vai lá pra cima. É gostoso responder quando alguém te pergunta o que você faz ou no que você trabalha. A resposta vem pronta e ensaiada: “Sou empresário. Tenho uma empresa de desenvolvimento de Internet. Atendo clientes como XKPPYZ, XPTO e etc…” Coisa linda, sabe?

Algo de estranho acontece

Mas teve um dia que algo mudou. O problema é que quando você tem uma empresa e tem contas a pagar, é difícil perceber quando “algo” muda. Esse “algo” pode ser o movimento do mercado ou pior, pode ser você mesmo – como aconteceu comigo. Ninguém vai avisar quando essa mundaça acontecer… O segredo é quanto tempo você demora para descobrir.

Esse “tic” me aconteceu em um momento nada oportuno. Mesmo assim fui em frente. Sempre, sempre, sempre com uma dúvida atrás da orelha para atrapalhar. Mas nesse caso, meu caro, minha dica é siga em frente. Minha decisão já estava tomada. Saí da empresa. Foi algo realmente duro. É difícil você tomar a decisão de deixar para trás algo que você construiu, do nada. Do nada mesmo. Nós NUNCA recebemos nenhum aporte financeiro de NENHUMA empresa. Pelo contrário, tivemos que nos virar, pedir alguns mangalotes na fábrica de dinheiro em momentos difíceis e caminhar com mais uma parcela no bolso. Ah, quem dera ter recebido um aporte financeiro. Mas não. Eu tinha uma empresa que faturava pouco mais de 1 milhão/ano sem a ajuda de ninguém. Isso sim é algo para se orgulhar. Não é coisa de moleque. Mas é óbvio que um aporte financeiro não mata ninguém, né?

Falou demais, cara. Onde quer chegar?

Eu sei que falei demais e provavelmente você ainda não sacou onde eu quero chegar. Aí está o “x” da questão. Onde você quer chegar? Eu não tenho faculdade e nunca fui empregado. Decidi sair da minha empresa para aprender algo novo, realmente. Obviamente havia outros motivos mais específicos e menos “romanceados” como este. Decidi pagar para ver e aprender algo que eu nunca tive. Sabe quando você se alista pra virar soldado e descobre que outro cara também se alistou só que ele fez aquele cursinho e virou sargento direto? Pois é. Eu tinha feito o cursinho de empresário/empreendedor, nunca fui soldado. Como o cara pode se sargento se nunca foi soldado? Por causa disso eu cometi muitos erros. Eu também deixei que outros cometessem erros. O que é muito ruim também já que o erro dos outros, na sua empresa, afeta você diretamente.

Aí você fala: “Espera, você deixou de ser empresário, onde você poderia ficar rico e ganhar dinheiro, pra ser empregado?” Eu respondo: Você está com o mesmo pensamento que eu estava nas primeiras semanas do meu “primeiro” emprego depois de sair da minha principal empresa (sim, eu tenho mais duas). Eu quase pirei nas primeiras semanas. Essa é uma outra história. — Em duas semanas aprendi mais coisas do que em muitos anos da minha vida. Posso falar mais aqui depois, se estiverem interessados. — Mas se você acha que só pode ser rico sendo empresário, nem abra uma empresa. Dinheiro é consequencia, sendo empresário, empreendedor ou empregado. E sim, eu sei que lá no fundo é o dinheiro que importa. Mas ele não vem só porque você decidiu abrir uma empresa. Ele vem porque você é bom no que faz. Você tem que pensar sobre dinheiro de forma estratégica e não como objetivo final. Isso em qualquer área e em qualquer cenário que você se encontra. Decidir abrir ou não uma empresa é também uma decisão estratégica, mas da sua vida. E no final, tudo se resume ao seu comportamento diante de decisões simples na frente da batalha.

A ideia é que você deve seguir seu instinto. Se você for empresário, não seja demasiadamente estúpido e dizer que NUNCA mais trabalhará como empregado na vida. E se você é empregado, meu caro, não diga que abrir empresa é algo difícil. Você pode estar com medo.

Talvez eu nem saiba o que eu esteja dizendo agora. Mas eu já estive dos dois lados da fronteira. Hoje eu sou empregado em uma das maiores empresas de hospedagem do Brasil, tenho uma startup e cuido de um portal. Sou empresário ou empregado? Quem tem que definir é você.
Ter uma empresa ou ser empregado é uma decisão sua e para ambas decisões é necessário ter coragem. Existem vantagens e desvantagens dos dois lados. Como eu disse anteriormente, ganhar dinheiro é possível em qualquer um dos dois cenários, então esse não é o problema. Os passos em cada um dos caminhos são diferentes em diversos pontos, mas se você reparar bem, são mais parecidos do que aparentam.

Posts Relacionados

• Estruturação de Client-side – Parte 1: Préprocessadores, Framewoks e Bibliotecas
• Adobe e os Padrões Web
• Dicas de sobrevivência em uma era pós o IE6
• Qualidade de Imagens e densidade de pixels
• GoMo – Teste seu site mobile