Web,ruby, Ajax ou qualquer outra coisa que me venha a cabeça (com prioridade para esta última)

30 setembro, 2005

Curiosidades

sabia que no Outlook 2000 só pode ter até 16.383 mensagens por pasta.

Susan Kare é a mulher por trás de muitos dos ícones que vemos nos nossos computadores como por exemplo o sorriso do Mac.

Pode ver, ouvir ou lêr as entrevistas com luminárias da informática na NeRDTV.

Na 4ª entrevista Brewster diz que está a fornecer petabox a uma série de bibliotecas nacionais (incluindo as bibliotecas do Congresso, a Nacional Francesa, Britânica, etc) e que se está agora a preparar para arquivar os livros, filmes e música. Brewster é quem manda no Internet Archive.

O Lycos mantêm um rating de pesquisas aqui. Adivinhe qual a busca mais popular. Não entendo porquê? Gosto muito mais do segundo ou terceiro lugar.

Uma casa para jogos de nicho e já agora um concurso para logomarca dessa casa até 15 de Outubro. (Está em jogo uma xbox 360).

Bill Joy co-fundador da SUN Microsystems na entrevista que deu à NerdTV diz algo muito interessante sobre educação But we just don't take education as seriously. We don't pay our teachers well. «Não levamos a séria a educação. Não pagamos aos nossos professores bem. Não investimos em educação pública». E acrescenta na mesma entrevista que julga que têm (os americanos) de deixar de gastar dinheiro que não têm. Nã faz lembrar algum outro país?

A colheita de hoje

Coisas básicas

Mas apresentadas com capa cartonada.

Como comparar tipos de letra diferentes, em diferentes tamanhos, com cores diferentes, com espacejamento diferente: usar typetester

Como criar arranjos de páginas web sem grande esforço da sua parte usar: o criador de layout.

Para quem quer perceber porque é que um site pode aparecer diferente no IE e no Firefox (ou outro qualquer) e queira saber o que é isso do modelo base da caixa nas regras CSS veja-o aqui.

No mezzoblue podemos ver um artigo sobre optimização de CSS. Não sei quantas pessoas poderiam tirar partido disto (tendo em conta que continuam a usar os estilos embebidos nos documentos mas parece-me que deve estar aqui embora não o dirija para a página final.

Coisas com um pouco mais de profundidade para que gosta de explorar os assuntos.

Tantek Çelik na sua apresentação dos elementos de xhtml com significado faz uma apresentação que mataria 9x% dos sites em Portugual. Temos um longo caminho a percorrer.

Para quem gosta do Zeldman eis a página que nas palavras dele o podem ajudar a salvar-se de um aneurisma: Holy CSS ZeldMan.

Para quem gosta de soluções práticas, e não pode (nunca quer) de momento investir tempo na aprendizagem das coisas básicas eis uma capa que necessita de ler.

Na mesma onda para quem necessite de algo sobre acessibilidade eis um site a ser vesitado para pistas sobre o assunto: deixe-se submergir.

Como criar um arranjo de página na Web - o que normalmente fica nos bastidores: o redesenhar do site da cebola. Já agora veja os artigos similares (mais básicos) do mark boulton.

Há cerca de 6 meses Jason Santa Maria falava de trabalho como profissional liberal e de como manter a motivação nessa situação.

Andy Budd, no seu Blogography fala da nova face do flash, ajax, mxml e de como tinha abandonado a utilização de flash e porquê.

O «boxesandarrows» é um site intelectualmente estimulante para não só o designer de web, como talvez até mais, para o arquitecto de informação. Os textos podem não ter uma visão com a qual se concorde mas mesmo que se descorde são muito bons. Por exemplo um texto sobre utilização de dispositivos móveis para controlar os nossos arquivos de media é fora do vulgar. Este site não é de digestão rápida pode levar algum tempo até encontrar um artigo que lhe interesse. Mas valerá a pena manter debaixo de olho.

Agora que o Opera deixou ser pago (é pago indirectamente por um motor de busca) pode aproveitar para ver o que é que o chunkysoup tem a dizer sobre as melhores práticas para desenvolvimento de websites. Este é o sítio ideal para lêr uma Introdução à Programação Orientada para Objectos em JavaScript.

Matias Willerich fala de um problema relativo aos parâmetros de segurança para cookies no seu a to z(ee) com opp - Orientações de Privacidade da Plataforma (p3p). Começando com uma breve introdução parte para um artigo de fundo.

29 setembro, 2005

Risco no uso de Multi-Colunas CSS3

Num artigo recente da A List Apart, introduzindo um módulo multi-colunar CSS3, explica como é que funciona o módulo multi-colunar CSS3, e dá código JavaScript para contornar o problema levantado por navegadores que não o suportem.

“Uau, colunas múltiplas em CSS!”, pode pensar no início. Bem sim, uau de facto, mas por favor pense novamente. Já tentou ler um artigo mostrado num arranjo em várias colunas no ecrã? Eu já e na minha opinião é péssimo. Especialmente se o artigo é mais longo do que meia dúzia de parágrafos.

Contudo repartir um artigo em várias colunas pode não ser mau se:

  • não houver necessidade de rolar para cima e para baixo enquanto o seu foco de leitura passa de uma coluna para outra
  • não haja necessidade de rolar na horizontal,
  • não haja paginação - prefiro tudo numa única folha, e também torna mais fácil a impressão (este defeito pode ser aliviado com uma CSS para impressão) e
  • tal não torne as colunas demasiado pequenas para leitura confortável.
  • o texto não seja justificado

O módulo de arranjo multi-colunas não é novo, está por cá desde 1999. Tanto quanto sei o suporte nos navegadores só ocorre nas versões mais recentes do Mozilla e Firefox. E esperemos que pare por aqui.

Haverá sempre designer que irão tirar partido incorrecto de arranjos multi-colunas, repartindo artigos longos em várias colunas, ignorando que tal poderá forçar os leitores a rolarem para cima e para baixo e a lutar contra comprimentos de linha excessiva mente curtos para serem confortáveis?

Ou pior, alguns poderão simplesmente ultrapassar-se a eles mesmos e implementarem algo semelhante às páginas usadas no International Herald Tribune?

O risco de isto suceder é óbvio. Demasiados designers valorizam a “criatividade” acima da facilidade de leitura, utilidade e acessibilidade.

O uso de várias colunas numa folha de estilo de impressão pode ser útil, mas no ecrã para artigos longos? Não. Encare o facto de a web não ser uma revista impressa.

Mas como sempre uma ferramenta só deve ser usada se for a adequada.

Multi Colunas CSS3

Tradução do artigo no ALA 204 Introducing the CSS3 Multi-Column Module

Embora na maior parte dos casos os ecrãs de computador sejam mais largos do que altos, a maior parte dos websites são exactamente ao contrário: mais compridos do que largos. Na economia do espaço do ecrã, o espaço vertical é caro. Se fosse um componente de conteúdo, gostaria que fosse colocado na parte de cima do ecrã (antes da dobra), não é? por outro lado o espaço horizontal é bastante mais barato, por vezes nem sabemos o que fazer com ele.

Na resolução de ecrã agora mais comum 1024×768, a generalidade dos websites de arranjo fixo não usam a totalidade do espaço disponível à esquerda ou direita do conteúdo. Os arranjos flexíveis tiram melhor partido do espaço horizontal mas lutam para manter os comprimentos de linha utilizáveis. Os perítos em utilidade dizem-nos que há tantas palavras que devamos colocar numa linha. Entre 8 e 12 palavras parece ser o comprimento ideak para uma linha. Os media impressos, em especial os jornais não hexitam usar linhas ainda mais pequenas. Porquê? Porque podem, ao fazerem um arranjo com várias colunas de texto.

Como web designer, você pode arrumar um texto de forma a que flua para várias colunas bem equilibradas. Ou pelo menos pode tentar. Mas como sabe a web não é um meio que lhe dê controlo absoluto sobre a apresentação final da informação. A sua marcação feita cuidadosamente à mão poderá surgir muito má se os seus visitantes por exemplo, usarem um tamanho de letra diferente ou desligarem as imagens. Igualmente quando muda de páginas estáticas em HTML para conteúdo gerido por base de dados, perde algumas poucas capacidades que tinha de estruturar o seu texto. A sua marcação necessita acomudar conteúdo de tamanho desconhecido.

Claro que este problema não é novo. Muitas pessoas já pensaram sobre este problema incluindo os membros do W3C.

O módulo multi-colunas CSS3

O módulo multi-colunas CSS3 é um documento de trabalho de nível três de CSS proposto pelo W3C para amplicar o actual modelo de caixas CSS . O objectivo do módulo é permitir que o conteúdo flua para várias colunas dentro de um elemento. Dá novas propriedades CSS que permitem aos designers especificar quantas colunas um elemento pode reproduzir. O navegador trata de formatar o texto de forma a que as colunas fiquem equilibradas.

diagrama que contrai um modelo de só uma coluna num arranjo CSS3 a duas colunas

As novas propriedades propostas CSS são:

  • ‘column-count’, para determinar o número de colunas para o qual o conteúdo do elemento irá fluir.
  • ‘column-width’, para descrever a largura óptima de cada coluna.
  • ‘column-gap’, para indicar uma separação entre as colunas.
  • ‘column-rule’, para definir limites entre colunas.

Pode aprender mais sobre estas e mais algumas novas propriedades em W3C working draft.

Implementações de multi-colunas

Embora o documento de trabalho tenha sido publicado em 2001, ainda está longe de ser uma recomendação final, e claro ainda menos ter sido implementado, ou não?

Implementações no navegador

Os programadores que trabalham no Gecko 1.8 (Mozilla & Co.) anunciaram a primeira implementação nativa do módulo em Abril deste ano, e a versão Firefox 1.5 beta (basiada no Gecko 1.8) de facto suporta parte do módulo multi-colunas da CSS3 .

Esperemos que mais navegadores se sigam.

Implementações por Scripting

Outros programadores da web engenhosos silenciosamente foram contornando os limites do modelo de caixa da CSS já há algum tempo. O International Herald Tribune, por exemplo, usa um arranjo multi-colunas usando JavaScript nas suas notícias. Michael van Ouwerkerk, em 2002, escreveu um "programa" em JavaScript que reparte o conteúdo de um elemento e o rearranja em várias colunas. (não haja dúvidas que há mais exemplos similares.)

Uma pessoa pode certamente fazer coisas espantosas com JavaScript (e o modelo de objecto do documento [DOM]), e refazer marcação para alcançar um arranjo multi-colunar é uma delas.

Com isto em pensamento foque essas novas propriedades CSS3 da especificação W3C:

  • Column-count: É o número de vezes que um JavaScript necessita repartir o conteúdo em elementos que flutuem para a esquerda.
  • Column-width: É a largura de cada novo elemento criado.
  • Column-gap: É a separação à esquerda (ou à direita) desses elementos.
  • Column-rule: É o limite esquerdo (ou direito).

Visto tal JavaScript processar a página após esta ser reproduzida, cada factor, que costumava ser um problema, tamanho dos tipos, imagens ligadas ou desligadas, é levado em conta. Também se o JavaScript não estiver disponível o arranjo não será alterado, (por outras palavras a degradação será agradável).

Uma medida experimental interina

Visto poder ser feito, e que não teria escrito este artigo se não tivesse nada para mostrar eis uma implementação JavaScript, que pode ser usada em vários navegadores, do módulo multi-colunas CSS3 . (Ver exemplo.)

A implementação é uma implementação não é obstrutiva, constituída por uma peça de código separada que funciona como parser em JavaScript para esta extensão CSS3. Não necessita de nenhum conhecimento de JavaScript para a usar basta carregar o ficheiro no seu site e ligá-lo à sua página:

<script type="text/JavaScript" src="css3-multi-column.js"></script>

Pode começar a usar as propriedades CSS3 nas suas folhas de estilo tal como faz com qualquer outro CSS.

Precauções

Há algumas limitações que deve compreender. Primeiro um parser CSS baseado no navegador está concebido para ignorar propriedades que não suporte. Para previnir tal, esta implementação depende de um parser simples escrito em JavaScript. Este parser não é capaz de tratar coisas complesas, tais como regras em cascata que cruzem diferentes selectores. Mantenha as coisas simples. Por exemplo os estilos que se seguem são aceitáveis:

.article {
  column-count: 2;
  column-gap: 20px;
}

Em segundo lugar o JavaScript corta e cola conteúdo de uma coluna na outra. Há um certo número de elementos que naturalmente não podem nem devem ser divididos: imagens por exemplo e também tabelas, cabeçalhos, etc. O algoritmo tenta acomodar estes conteúdos mas pode quebrar e trazer resultados inesperados em algumas circunstâncias. São bem vindas notas sobre qualquer problema de reprodução de arranjo e tentarei melhorar à medida que formos andando.

Navegadores

O script foi testado em IE6, Firefox 1.0.4, Netscape 7.1, Safari 1.2 e 2.0, e Opera 8 (embora o Opera tenha mostrado tendência para provocar problemas).

Rollyo

Arrole o seu próprio motor de busca

Rollyo está a desenvolver uma nova ferramenta de pesquisa que permite aos seus utilizadores criarem o seu próprio motor de busca. Os utilizadores podem seleccionar blogs e websites que queiram incluir no Rollyo e o Rollyo irá pesquisar esses websites. De momento o site está só em teste beta (mais um). Claro que cada rol tem um limite e neste caso são 20 websites (por agora pelo menos).

De facto ainda há algumas arestas a resolver em especial quando as pesquisas não têm resultados.

O criador do Rollyo foi o Dave Pell e o designer foi Dan Cederholm. Como irão ver este é um site AJAX. Sobre este tema poderão ler uma introdução de Jesse James Garret.

Ainda são descoberta pequenas grandes ideias.

28 setembro, 2005

Direcção Artística e a Web (Tradução)

Pode ler o original em: aqui

Em matemática, o todo é sempre iguam à soma das suas partes; dois e dois são invariavelmente exactamente iguais a quatro. Na arte, contudo, o todo pode ser muito mais do que a soma das partes ou muito menos... Vários dramas foram arruinados por actores a tentarem aliviar cenas sérias sendo engraçadinhos. Os espetadores podem até rir da comédia mas aborrecem-se com a peça.

– Henning Nelms, Magia e Teatralidade

Este comentário do livro clássico de Henning Nelms sobre teatralidade para o ilusionista pode ser adequadamente aplicado a design de web. Designers, programadores, e outros especialistas criam elementos primordiais de um todo. Mas o director artístico está numa posição de aglutinar todas as peças para extrair delas o máximo efeito e optimização de resultados.

A finalidade deste artigo é introduzir os nossos leitores aos princípios e técnicas de um director artístico — relativamente ao web design — e mostrar como podem influenciar o efeito geral de um website.

O que é isso de direcção artística?

É uma pergunta difícil de responder. Nos filmes, os directores artísticos são normalmente responsáveis pelo “aspecto geral” do filme. Na publicidade e trabalho impresso os directores artísticos (normalmente em equipa com um copywriter) trazem os “conceitos,” as ideias criativas que comunicam connosco ao nível das nossas entranhas através de dispositivos como tema, metáfora e simbolísmo. Alguns directores artísticos fazem pouco mais do que sonhar com estas ideias e apresentá-las aos clientes, enquanto outros supervisionam todos os aspectos do design e produção. Surpreendemente a direcção artística raramente é ensinada nas escolas e há pouca literatura informação formal sobre o assunto; é frequentemente aprendida na prática.

Ainda soa a vago, não? Algumas pessoas podem afirmar que a direcção artística é algo que não se pode explicar. Mas pode senti-la estudando-a. Zeldman publicou um exemplo perfeito, e descreve com precisão as diferenças entre direcção artística e design. Observe capas de revistas de notícias (na minha opinião, capas da The Economist são um exemplo efectivo de consistência na direcção artística), as características de várias secções de jornais, todos os tipos de publicidade impressa. Veja anúncios de televisão, e pergunte-se que dispositivos ou elementos fazem trabalhar esses anúncios enquanto outros não.

Como é que isto se aplica à web?

Suponha que uma companhia de pasta de dentes lhe pede para criar um site destinado a todos os grupos etários. Alguém puramente interessado em design pode criar uma proposta que usa tipos de letra muito belos, azul como fundo porque é ’s “fresca,” e algumas fotografias de agência de bocas e dentes ou familias sorridentes modelo. Irá gastar tempo a pensar em linhas e sombras, se o arranjo da página será a duas ou três colunas. Podem mesmo ter um tubo de pasta de dentes a ser exprimido no ecrã e usar a linha recta da pasta exprimida como barra de navegação. Pode parecer bonito, mas será o sem final.

Um director artística poderia eventualmente trazer um conceito que comunicace a importância do sorriso. O que é que um sorriso comunica? Poder? Confiança? Alegria? Divertimento? Tudo isto junto? O director artístico podia escolher mergular no sorriso como símbolo de dentes e gengivas sãs. Poderia mesmo escolher classificar tipos de sorricos e relacioná-los com tipos de pasta de dentes, exagerando as imagens usadas para ilustrar os tipos de pastas de dentes:

  • Mentol Fresco: o sorriso do escalador do Monte Everest.
  • Sensível Extra: sorriso do Dr. Phil.
  • Força Extra: sorriso do Drácula.

Sorrisos de “pessoas importantes” emparilhadas com histórias de sucesso. Sorrisos de comediantes — o sorriso é o melhor fármaco. O sorriso como língua internacional da amizade. Porque não desenvolver os seus próprios “smilies” or ícones de emoção? Percebe a ideia. Não faça “só” design frequentemente aborrecido quando comparado com um conceito bem desenvolvido.

As grandes ideias não sucedem por acaso

O aspecto mais importante da direcção artística é o “conceito.” Claro que o talento poderá ser um caso quando se trata de gerar grandes conceitos, e a sua ideia — ou a do seu director artístico — pode não lhe trazer nenhum prémio, mas você pode desenvolver boas ideias. A criatividade é um processo e tem que descobrir a sua. Eis algumas ideias para começar:

  1. Objectivos, objectivos, objectivos. Já o ouviu anteriormente, mas há uma razão já ouviu tudo anteriomente. Bons conceitos alcançam algo. E esse algo deve ser o objectivo que você e o seu cliente acordaram. Pergunte-se sempre, “esta ideia vai ajudar-nos a atingir o nosso objectivo?”
  2. Usar técnicas de estimulação de ideias. Só a alguns é que sucede aparecerem ideias fantásticas no banho, nós (os restantes) podemos ser ajudados usando técnicas como o debate. Há muitos livros sobre geração de ideias e as regras de debate são bem conhecidas. Inicialmente deve gerar uma grande quantidade de ideias. A possibilidade de obter uma boa ideias é normalmente directamente proporcional ao numero de ideias por si gerado. Pode usar o método que achar melhor. Uma técnica eficiente, em especial se trabalhar sozinho é numa folha de papel escrever o problema ou objectivo no topo. Depois force-se a escrever/esboçar rapidamente vinte ideias diferentes e não pare enquanto não tiver 20. Vai ser difícil, mas se fosse fácil não lhe chamariamos trabalho. Eis algumas orientações:
    • Não se censuref. Faça-o mais tarde. Todas as ideias são bem vindas neste momento, mesmo (e por vezes em especial) as mais malucas.
    • Esboce rapidamente, escreva rapidamente. Poderá dar-lhes conteúdo às ideias melhores mais tarde.
    • Use símbolos, metáforas ou tema. Alguns dos melhores conceitos usam simbolos reconhecíveis, como no exemplo do Zeldmen. Use a sua experiência de vida. Para sentir isto veja o teste de criatividade no site do Ron Reason e estude os exemplos de teste.
    • Não faça design. Irá fazê-lo mais tarde.
  3. Uma vez postas as ideias no papel, ponha o chapéu de crítico. Escolha as duas ou três melhores ideias e trate de lhes dar mais algum conteúdo. Agora já se pode permitir a pensar no design, tipos, cores e arranjo gráfico. Teste as suas ideias confrontando-as com o seu objectivo. A melhor ideia deve ganhar, mas mantenha-se flexível. As boas ideias podem ser sempre melhoradas.
  4. Mantenha a visão panorâmica Não se perca em detalhes. Trabalhe como um escultor. Comece com uma grande quantidade de ideias e vá refinando a partir daí, mas continue a observar o todo ao longo de todas as fases do projecto. Deixe os especialistas tratarem dos pequenos detalhes, e oriente-os de forma subtil quando necessário para se manter tudo na linha.

Dirija a arte

Bom, apresentou a sua ideia e o seu cliente adorou (e você também). Agora o site necessita ser produzido. O seu trabalho como director artístico acabou de começar, agora tem que tratar com o cliente, os programadores, os designers, o gestor de projecto e com todas as pessoas envolvidas no projecto. Todas estas pessoas podem contribuir com a sua visão e talento e o seu trabalho é assegurar que o resultado final seja tão próximo quanto possível do seu conceito. Eis algumas pistas para a fase da produção:

  1. Saber aquilo que lhe concerne. Como director artístico, necessita conhecer as tecnologias e como são usadas. Tem que saber o que é que cada pessoa da sua equipa faz, e porquê. Deixe-lhes os detalhes mas asseguere-se que sabe o que está envolvido. Tal irá permitir ganhar o respeito da sua equipa quando perceberem que não trabalha no vácuo e também o ajuda a ser realista.
  2. Mantenha os especialistas em alerta. Ser um jogador de equipa é bom, mas por causa do João prima-dona gosta de botões em baixo relevo e sombras de 20-pixel não quer dizer que você lhe autorize esses desejos.
  3. Seja aberto aos “sábios.” O João designer prima-dona pode ter razão (neste caso talvez não). Teste as sugestões dos membros da sua equipa contra o seu objectivo e o seu conceito. Se se encaixar tratar orçamentar tal, e deixe-os fazê-lo. Eles também sabem do metier deles.

É só isto?

Dificilmente. A parte mais difícil da direcção artística é razoavelmente o desenvolvimento de um conceito criativo e que faça sentido. Isto leva literalmente anos de prática na maior parte dos casos. Descobrir uma técnica de geração de ideias que se ajuste à sua personalidade pode demorar tanto ou mais. Mas os resultados podem ser de facto compensadores. Bom design é bonito, mas bom design baseado num conceito sólido irá ajudar a tornar os seus sites muito mais eficazes e importantes especialmente quando comparados com os da concorrência. Irá tornar os seus clientes muito contentes. Garantidamente.

E sendo optimista você irá gostar do processo.

Saiu o número 204 da A List Apart

Como devoto da «A List Apart» vou tentar estar atento aos novos números da A List Apart e irei juntando neste site as respectivas traduções das introduções dos diversos artigos.

204

Número dedicado a técnicas sobre colunas:

  • CSS Swag: Listas multicolunares de Paul Novitski Listas multicolunas: não podemos viver sem elas, não conseguimos atingir a verdadeira felicidade sem elas. Paul Novitski dá um conjunto espantoso de seis métodos para atingir este arranjo (desenho de página) muito requisitado. Examine as suas opções e escolha com sageza
  • Introdução ao módulo multi-colunas da CSS3 de Cédric Savarese Cédric Savareve gostaria de lhe apresentar o módulo de multi-colunas da CSS3. Pode ainda não ter suporte de navegadores, por enquanto, mas este método semanticamente correcto de divisão de conteúdo em colunas pode ser mais importante do que possa julgar à primeira vista.
  • Direcção artística e a Web de Stephen Hay Se o design se encontra nos detalhes, o pão com manteiga da direcção artística é a Grande Ideia. Stephen Hay introduz os princípios e técnicas de um director de arte, e mostra como conceitos de direcção artística podem transformar experiência de utilizador em experiências marcantes.

26 setembro, 2005

Breves

Para esta semana tenho reservada uma primeira abordagem ao website da Paróquia de Santo António dos Cavaleiros. Além disso irei tentar expôr técnicas HTML+CSS+JavaScript que poderiam melhorar o acesso à página. Hoje foi um dia preenchido.

24 setembro, 2005

Comprimento da linha e facilidade de leitura no ecrã

Um tema que parece nunca desaparecer é o do tipo de arranjo CSS: fixo, fluído, elástico ou gelatina.

Estou cansado disto tudo. Um arranjo que não use como unidades in, cm, m, pt está de acordo com a orientação WCAG 1.0 3.4 ("Utilizar unidades relativas em vez de unidades absolutas"). Tal significa que pode usar px o que parece que o WAI não sabe, visto não saber ler as especificações do próprio W3C, px é uma unidade relativa.

De qualquer modo, os proponentes re arranjos fixos dizem que para tamanhos de tipos de letra típicos o arranjo fixo pelo menos regula a altura da linha, que como toda a gente sabe, funciona melhor com cerca de 72 caracteres. (De facto, mesmo o número é debatido e contingente.) Proponentes de arranjos fluídos dizem que podem usar max-width em navegadores reais para se assegurarem que os comprimentos da linhas se mantém sãos, a dizem que tamanhos de tipos de letra muito grandes produzem linhas demasiado curtas (e também mão espacejamento entre linhas) em arranjos fixos.

Bem, esperem, pois linhas compridas poderá não ser tão mal como isso. Um documento feito por Mary C. Dyson, "Como o arranjo físico do texto afecta a leitura de texto no ecrã", resume muita da pesquisa disponível sobre comprimentos de linha, em particular estudos que observam só leitura em ecrã mas também estudos que aplicam incorrectamente leitura de documentos impressos ao ecrã.

Dyson explica que a maior parte dos estudos está mal concebida, com muitos factores "confundidos" que os investigadores não anteciparam. Não pode ser estudado o comprimento da linha, por exemplo (que poucos estudos fizerem de qualquer modo); tem também que consideram a modalidade (impresso versus ecrã), tipo de letra, espacejamento e resolução. (Ela esquece-se de mencionar a acuidade visual.) Contudo, a tendência nas pesquisas por sí citadas é razoavelmente clara:

A maior parte dos estudos sobre comprimento da linha relatam leitura mais rápida com linhas mais compridas... O aumento de caracteres por linha, mas mantendo um ângulo visual constante [outro modo de medir o comprimento da linha], pode resultar numa leitura mais rápida... enquanto diferenças no ângulo visual têm um efeito pequeno na velocidade de leitura no intervalo médio aplicável à maior parte dos ecrãs.

Isto não significa que as pessoas gostem de linhas mais compridas:

Em geral, as opiniões subjectivas de variáveis relacionadas com o formato do texto no ecrã não estão de acordo com as medidas de performance objectivas, tais como velocidade de leitura e compreensão. Embora linhas mais compridas possam ser lidas mais rapidamente, as pessoas preferem comprimentos mais moderados. Com colunas, uma coluna única mais larga é lida mais rapidamente, mas colunas mais estreitas são preferidas.

(Na leitura no ecrã, as pessoas acabam por dizer que preferem coisas que de facto são más para elas.)

A investigação de Dyson não é uma justificação para comprimentos da linha maratónicos. Só indica que o tema é mais complexo que na tipografia impressa e, julgo, que declarações categóricas são difíceis de defender com provas.

23 setembro, 2005

Enviar ficheiros grandes

Um dos problemas que pode surgir quando se trabalha fora de um escritório é a partilha de ficheiros com dimensões avantajadas.

Uma forma de os partilhar de modo assíncrono é usar um serviço gratuito como o www.yousendit.com ou outro similar.

Tenho que admitir que fiquei fan.

Antes de Fazer Pense

Que fazer antes de criar algo

  1. A concepção é a parte fácil
  2. Aprende com os seus
    • clientes
    • patrões
    • chefias
    • colaboradores
    • e colegas
  3. O conteúdo é rei
  4. Ler. Ler. Ler.
  5. Pensar primeiro, depois conceber
  6. Nunca esquecer que se é um surtudo. Goste de si.

Isto foi dito por Michael Bierut.

Escrever mensagens de e-mail internas

Escrever mensagens de e-mail que fazem sentido

Manter de baixo de controlo o correio electrónico que nos é enviado pode permitir um aumento da produtividade, mas o que sucede com o correio electrónico que enviamos?

Primeiro passo: Compreender o porquê da escrita da mensagem

Antes de escrever qualquer nova mensagem, trate de explicitar a resposta a duas questões:

  1. Porque é que estou a escrever isto?
  2. Qual é exactamente o resultado que pretendo obter com esta mensagem?

Se não conseguir responder de forma sucinta a estas questões, deverá pensar um pouco mais antes de enviar a sua mensagem. As pessoas recebem dezenas, centenas e mesmo milhares de mensagens todos os dias e assim é natural seleccionarem as que estão mais bem deliniadas e que respeitam claramente a atenção e o pouco tempo disponível para as ler. Mensagens pouco cuidadosas normalmente evitam ser respondidas.

Pense na mensagem do ponto de vista do receptor, e assegure-se que fez tudo o que é possível para se ajudar a si mesmo antes de contactar outra pessoa. Se a mensagem tem valor, trate-a como tal e leve o tempo necessário para que cada palavra conte.

Obtenha o que necessita

Embora os tópicos possíveis e o conteúdo sevam teoricamente sem fim, julgo que de facto há essencialmente três tipos de cartas comerciais.

  1. Dar informação - "A Paula Rego inaugura uma exposição em Serralves amanhã"
  2. Pedir informação - "Onde é que está a ficha da Paula Rego?"
  3. Requerer uma acção - "Vai falar com o curador para confirmar a reunião de segunda-feira?"

Deve ser claro para com o seu receptor com o tipo de mensagem que lhe envia; não enterre o assunto. Coloque os detalhes e contexto na primeira frase ou nas primeira duas frases sempre que puder. Não tenha medo de escrever uma "frase tópico" que clarifique sobre o assunto que o leva a escrever e que resposta ou acção precisa que o recipiente faça.

Visto que a reunião com o Sr. curador passou para a sala XPTO, pode por favor verificar se a Marisa reservou o projector grande e se o catering foi avisado da alteração do local? Por favor manda-me um IM, hoje, até às 17h 35m.

Aqui não é o lugar para argumentar. Mantenha a mensagem clara e presuma que ninguém nunca irá ler mais do que a primeira frase daquilo que escreva. Fazer a primeira frase forte e clara é o caminho mais fácil para que o seu receptor se interesse pelas frases seguintes.

Escreva uma linha boa sobre o assunto

Pode ainda tornar mais fácil para o seu receptor compreenda imediatamente porque é que lhe está a enviar uma mensagem e para rapidamente determinar que tipo de resposta ou acção está a pedir. Escreva um linha sobre o "Assunto:" que toque os pontos fortes ou que resuma o poder da mensagem. Evite os cumprimentos ou o "mais uma coisa...", a favor de escrever um breve resumo dos pontos mais importantes da mensagem:

  • Almoço remarcado para Sexta-Feira às 14h
  • Nota: Segunda-feira é feriado - não há sessões de formação
  • PEDIDO: Volta a mandar-me a ficha da Paula Rego
  • AJUDA: Podes arrumar-me o meu disco

Se está, de facto, a relatar só um assunto, pode pensar em escrever a linha sobre o assunto relativo à sua mensagem. Em algumas organizações tais mensagens são identificadas por terem no final um EOM (fim da mensagem). Tal permite aos receptores verificarem não necessitar lerem o corpo (não existente nesse caso). As pessoas que recebem muito correio agradecem, pois tal permite triar rapidamente a sua mensagem sem necessitarem de efectuarem um exame completo.

Infelizmente, assuntos bem definidos passou a ser uma arte perdida. É uma pena, pois irá obter uma mensagem mais positiva de uma pessoa ocupada quando ela poder ficar rapidamente com o cerne da sua mensagem.

A brevidade é a alma de ...obter uma resposta

É completamente depressivo verificar o seu email às 17h 55m para descobrir que se encontra uma mensagem extensa escrita à Natália Correia a sua espera, com meia dúzia de páginas. É aquilo que normalmente não o excita a responder.

Contudo, não tenho nenhuma métrica, para provar este ponto isto é só um palpite. Há um truque quanto ao tamanho das mensagens que deverá assegurar o sucesso da sua mensagem que é: não ultrapassar um ecrã. Há uma razão para que os anúncios colocados abaixo da dobra custarem menos dos que ficam a cima da dobra de um jornal, pois a parte de cima irá ser vista por toda a gente.

Sempre que possível tente destilar a sua bela epístola a um ou dois pontos sobre um dado tópico, e depois escalpelize esse ponto onde haja muito espaço em branco antes de fechar a mensagem. Tem mais alguma coisa a dizer? Coloque-a em mensagens separadas - novamente - linha sobre o assunto bem concebida e uma abertura concisa e descritiva.

O que é que se passa aqui?

Se a sua mensagem inclui qualquer tipo de pedido - seja para uma reunião, seja para a evolução que determinado assunto esteja a ter, seja uma corrida a cavalo ou seja o que for - coloque o pedido no início da mensagens e esclaraça claramente quando necessita que tal seja feito. Nunca, em nenhuma circunstância, presuma que o receptor assobarbado irá ter tempo de ler ao longo da sua prosa cor-de-rosa para pistas sobre o que é que é suposto ele fazer, para si.

Dependendo do estilo da sua equipa e do volume de correio por ela gerado, pode ainda pensar em adicionar cabeçalhos de texto funcional no topo do corpo do resumo da natureza exacta da mensagem.

 Esta mensagem é:       [x] informativa  [ ] acção       [ ] social
        É necessária resposta: [ ] sim             [x] se desejar [ ] não
 Tempo de Resposta:    [ ] imediato      [ ] rápido       [x] não

Claro que pode parecer demais, mas quanto tempo já perdeu numa "actualização do projecto" mal feita onde não se apercebeu da mudança de datas de forma imediata ou alterações de trabalhos que só apareceram no último parágrafo da mensagem.

Tire todas as adivinhas das suas mensagens, pensando nelas como "instruções para militares", não deve ter medo de pedir aquilo que quer, em especial quando queira que o receptor lhe dê aquilo que quer.

Mais boas ideias

  • Torne a mensagem fácil de ser citada - os receptores irám citá-lo e responder a secções específicas ou a frases específicas das suas mensagens. Pode facilitar tal prática mantendo os sem parágrafos curtos, tornando a sua mensagem facilmente repartível.
  • Não encha o cesto - Mensagens relativas a uma corrente de artigos são como comentários a uma reunião; pense em ambos como tempo de posse da bola. Não use a rede para cada pequena alteração. Pense e veja como pode ser útil. Minimize o ruído
  • Um lembrete não magoa - Se está a fazer um seguimento ou a responder a uma mensagem que já tenha alguns dias, dê contexto logo na abertura. Por exemplo, "Escreveu-nos em Fevereiro a pedir para ser avisado da recepção de novos inaladores para a asma...; eis aqui uma ligação para esses itens disponibilizados nas nossas páginas web..."
  • nunca misture - Excepto no caso da sua equipa gostar realmente de trabalhar dessa forma, evite misturar tópicos, projectos, ou domínios de vida numa dada mensagem. Informe a toda a gente sobre as diabruras da sua criancinha numa mensagem diferente daquela a que se refer a boatos sobre despedimentos em massa.
  • Não obrigado - Não me reconheço nesta mas muito gente diz que é verdadeira. Em ambientes mais informais e em ambientes com grandes volumes de correio, não é necessário responder com uma mensagem de agradecimento, sempre que alguém faça o que se lhes pede. Guarde a sua gratidão para quando se encontrar face a face. Contudo no caso de alguém lhe ter resolvido um problema difícil e que lhe tenha ocupado muito tempo, então talvez deva agradecer em conformidade.

Parece que chega de observações.

22 setembro, 2005

A Maleta Teclado

Sempre que vejo algo de diferente nos meus feed que envolvam portugal trato de olhar com um pouco mais de atenção. E hoje recebi uma prenda o engadget fala de João Sabino e de uma sua criação, no mínimo curiosa.

Os Novos Estilos de Impressão do ALA

À medida que as coisas se foram juntando para o lançamento do ALA 4.0 entendemos que os estilos de impressão não estavam ao nível que necessitávamos. Devido a comportamentos malucos de alguns navegadores, os artigos eram impressos parcialmente ou com um arranjo grandemente alterado. Não era só num navegador. Isto era algo que necessitava de tempo e energia para ser tratado e todo o nosso tempo e energia estava a ser dirigido para um lançamento tão suave quanto possível. Mas podíamos efectuar o lançamento sem estilos de impressão? Após alguma discussão decidimos que a resposta era positiva. Dada a baixa consciência da existência de estilos de impressão e de a maior parte das pessoas não estar inclinada para a impressão de páginas web, achamos que podíamos esperar para depois do lançamento para corrigir e lançar os estilos de impressão, com pouco impacto nem ninguém se aperceber. Bem, estávamos errados. Os tempos são de mudança! De facto a grande questão era se os estilos de impressão eram ou não realmente úteis, não se eram de facto usados por alguém. Claro que aqui no ALA já usamos estilos de impressão à bastante tempo e o meu artigo no ALA «Ir Para Impressão» teve alguma atenção. Concedemos-lhe isso. Mesmo assim, ficamos surpreendidos com o número de pessoas que nos perguntavam pelos estilos de impressão. Algumas das pessoas pouco faltava para os exigirem. Os tempos mudaram de facto. Na semana passada, passámos a ter estilos de impressão para os nossos artigos. Aqui, desejava dar uma visão panorâmica de como os estilos de impressão foram organizados e revelar como é que uma pequena omissão provocou uma série de problemas e vários navegadores.

Os estilos que são importantes retirar

O primeiro passo era o mais fácil: «desligar» os elementos de apresentação que eram inúteis ou confusos impressos. Por exemplo, a barra lateral está perto de ser inútil impressa. Também a barra de navegação no topo da página. Deixa-las imprimir significa desperdiçar papel, tinta e tempo do leitor. Igualmente, não há necessidade real para as peças relativas à discussão da página. E finalmente, decidimos poupar um pouco mais de tinta para despachar o logótipo do ALA no canto superior esquerdo do documento. Tudo isto foi facilmente atingido com uma só regra:
#masthead, #navbar, #sidebar,
#metastuff b,
#metastuff .discuss,
div.discuss { display: none !important;}
Porquê fazer a declaração !important? Porque, é importante que esses elementos não apareçam impressos. Eu sou conhecido por dizer que deixar !important numa folha de estilo distribuída publicamente era normalmente um sinal de preguiça, mas gostaria de aqui oferecer uma alteração a esta máxima. Passei a acreditar que é verdade num determinado meio; isto é, se estiver a deixar directivas !important em estilos para o ecrã para ultrapassar outros estilos de ecrã então é provável que esteja a ser preguiçoso. (Claro, que há excepções, mas são raras.) Quando mistura media, contudo, o uso de !important torna-se mais defensável. Tome os estilos ALA: todos os estilos usados num navegador da rede vêm através de um único elemento link e esses estilos são aplicados a todos os media. Em artigos, por exemplo, temos isto: <link rel="”stylesheet”"> <link rel="”stylesheet”">href=”/css/article.css”Type=”text/css” media=”all” /> Isto foi feito de forma a que o arranjo geral do ALA fosse transportado para media tais como os media impressos. A alternativa seria restringir estes estilos ao ecrã, e depois recriar parte ou todos eles para impressão. A aproximação que tomei foi muito mais eficiente, em termos de autoria de folha de estilo. Agora, era de facto verdadeiramente necessário usar !important nos estilos de impressão? Não, poderia levantar a especificidade de cada selector na regra e ter quase a certeza que teriam o efeito pretendido. A regra seria algo semelhante a: html #mastehead, html #navbar, html #sidebar, html #metastuff b, html #metastuff .discuss, html div.discuss { display: none;} Melhor? Não, nem necessariamente pior. Somente diferente, mas, para o meu olhar, menos eficiente, para não mencionar menos legível. Assim fiquem com !important. (E sim, o utilizador pode estabelecer uma folha de estilos de utilizador com as suas próprias directivas !important para fazer reaparecer esses elementos. A questão importante é, quantas pessoas se iram preocupar em o fazer, e porque é que me devo preocupar se o fizerem? Derrubar as colunas Outro lugar onde usei !important foi na regra imediatamente seguinte na folha de estilo: body, #main, #content, .column, #articletext, #footer { width: auto !important; margin: 0 !important; padding: 0 !important;} O objectivo aqui era fazer com que os componentes do arranjo que persistem se tornassem tão largos como a área de impressão da página. No arranjo de ecrã, o conteúdo da coluna tem uma largura específica. Essa largura pode ser mais estreita ou larga do que a área onde se pode imprimir na página. Para me assegurar do que sucederia, coloquei a zero as margens e o enchimento (padding) dos elementos em questão. Depois estabeleci que as larguras seriam auto. Porquê não 100%? Porque ao longo dos anos, fiquei com medo de indicar como largura de um elemento 100%. Porque a forma como o algoritmo de arranjo do CSS está escrito me parecer sempre que estou a jogar na lotaria um pouco com a width: 100%;. Neste caso, se a margem e o enchimento de alguma forma deslizarem para dentro, então um elemento pode facilmente tornar-se mais largo do que a área de impressão. Ao declarar expressamente auto neste caso, estou a dizer “fique com todo o espaço disponível sem empurrar o elemento para fora da área de impressão, mesmo se houver de alguma forma margens e enchimento. Dados os estilos que temos aqui, o resultado final de usar 100% ou auto é o mesmo. auto é ligeiramente mais à prova do futuro, e assim ficámos com ele. Um erro de número novamente produzido Quando voltei ao topo da primeira página enfrentei algumas escolhas interessantes. O número do magazine, por exemplo, é criado usando texto com estilo XHTML sobre a imagem de fundo. Como muitos de vocês sabem, por omissão os navegadores não imprimem fundos, e não há nenhuma forma do autor os activar. No final, a solução foi voltar a reestilizar o número do magazine e a data de publicação e colocá-los nos “cantos superiores” do documento. Pode parecer simples, mas levou a que alguns estilos que parecem, à primeira vista, ser, a não simples. html body #ish {position: Static; width: auto; height: auto; margin: 1em 0 0; padding: 0; border-top: none; Font-size: 0.9em; text-align: Right; Background: none;} html body #ish a:link, html body #ish a:visited, html body #ish a em { Position: static; display: inline; font-size: 1em; font-weight: normal; width: auto; height: auto; margin: 0; padding: 0; background: none; color: #555;} O que é isto tudo? A maior porte é desfazer o que os estilos para todos os media estão a fazer. Vejamos os estilos #ish da base.css. #ish {position: relative; z-index: 10; border-top: 1px solid #666; font: bold 10px Arial, sans-serif; letter-spacing: 1px;} #ish a:link, #ish a:visited {position: absolute; top: -33px; left: 150px; width: 65px; height: 52px; padding-top: 13px; text-align; center; background: url(/pix/ishbug.gif) top left no-repeat; color: #FFF;} #ish a:hover {background-position: bottom right;} #ish a em {display: block; margin-top: -0.2em; font: 2.33em Georgia, Times, serif; letter-spacing: 0;} Há uma série de posicionamento e dimensionação que tem que ser ultrapassada para criar um número de magazine que seja simples e não obstrutivo. Eis aqui os estilos de impressão novamente, excepto de desta vez enfatizei as partes que existem principalmente ou totalmente para desfazer os estilos para todos os media. html body #ish {position: static; width: auto; height: auto; margin: 1em 0 0; padding: 0; border-top: none; font-size: 0.9em; text-align: right; background: none;} html body #ish a:link, html body #ish a:visited, html body #ish a em { position: static; display: inline; font-size: 1em; font-weight: normal; width: auto; height: auto; margin: 0; padding: 0; background: none; color: #555;} Além destes, os estilos são muito simples. Alinhar o número do magazine à direita, tornar o seu tipo de letra um pouco mais pequeno do que o do seu parente e aligeirar a cor do texto. É mais ou menos isto. Trabalhar novamente a data Depois disto, o estilo da data de publicação do número é praticamente trivial. Como o número do magazine foi colocada à direita a data é colocada à esquerda. Para os colocar na “mesma linha”, falando visualmente, simplesmente subi a data 1.5em. Uma margem de fundo de 2.0em assegurou que o conteúdo após a data fosse empurrado suficientemente para baixo e está tudo preparado. html body #content .ishinfo {padding: 0 0 0.5em; margin: -1.5em 0 2em; text-align; left; background: none; position: relative;} A única coisa que destoa aqui é position: relative. Incluí isto porque o IE/Win tem a tendência de fazer desaparecer elementos se os puxar para cima como ali especificado. A cura é posicioná-los, que suspeito dispare a bandeira hasLayout. Não tenho a pretensão de compreender todas as nuances de hasLayout, mas informação recente da Microsoft e de terceiros deitou alguma luz sobre o assunto – parece que alguns dos problemas com arranjos que nos confundem no IE/Win são o resultado de um elemento não ter hasLayout. Limpeza variada Tendo tratado do problema do número e da data, tudo o que falta é fazer uma limpeza de vários bocadinhos aqui e ali. Por exemplo, a linha «metastuff» no início de cada artigo necessita de perder o seu fundo, e o limite da secção "Learn More" tem que ser ligeiramente ajustada porque já não é seguida da caixa "Discuss". html body #metastuff {background: none;} html body #learnmore {border-top: 0; border-bottom: 1px dashed #999;} Igualmente, o rodapé necessita de ser novamente trabalhado. A frase “From pixels to prose, coding to content” foi de facto deita como uma imagem de fundo de maneira a preservar a tipografia, e assim sabemos que não será impressa por praticamente ninguém. Para ter a certeza, deixei-a cair e mudei o parágrafo do rodapé de forma a preencher completamente a toda a largura do rodapé e não deixei um limite. Neste momento, centrar o texto parece uma boa medida também. html body #footer {background: none;} html body #footer p {border-left: none; margin-left: 0; text-align: center;} Finalmente, adicionei alguns estilos para auto-inserir os URL das ligações que aparecem no texto do artigo, uma nota biográfica do autor e o próprio rodapé. #articletext a[href]:after, #authorbio a[href]:after, #footer a[href]:after { content: “ (“ attr(href) “) “; font-size: 90%;} #articletext a[href^=”/”]:after, #authorbio a[href^=”/”]:after, #footer a[href^=”/”]:after { content: “ (http://alisapart.com” attr(href) “) “;} Em vez de tentar explicar isto tudo aqui, permitam-me remete-los para o meu artigo «Ir Para Impressão», o qual tem uma explicação detalhada. A chave para a iluminação Tudo isto está bem e recomenda-se, e funciona bem em artigos curtos. Se um artigo atingir mais do que três páginas, contudo, as margens nas páginas quatro e seguintes ficam malucas em Firefox. Normalmente o conteúdo só terá cerca de um terço da largura da área de impressão da página, e o terço ocupado irá mudar de página para página. Para minha frustração, o IE/Win não imprimia o rodapé de todo em vários casos. Com um conjunto de experiências, consegui que o rodapé reaparece-se em IE/Win usando alguns limites e posicionamento, mas o problema do Firefox não desaparecia. Frustrado, coloquei uma chamada no meu sítio da rede e Dan Wilkinson apresentou-se com a resposta. Um só acrescento resolveu ambos os problemas: body, #main, #content, .column, #articletext, #footer { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;} Tão simples e contudo tão poderoso. Eu tinha negligenciado fazer com que o conteúdo que resta não flutuasse, e tal estava a provocar todos os problemas. Uma vez tendo adicionado essa declaração, pude remover os truques para o IE/Win relativos ao rodapé e o Firefox deixou de enlouquecer o arranjo das página quatro e seguintes. Deixe que o meu erro seja uma lição para todos: Em impressão, todos os elementos grandes ou que podem crescer devem sempre ser não flutuantes, em especial elementos que contenham coisas como texto de artigos. Como regra geral, quando um flutuante cobre várias páginas, está a pedir chatices. Ignore esta regra se desejar correr o risco. (E julgo que o Safari também não estava livre de erros de impressão. A única razão para os não colocar neste artigo é que os seus erros só ocorreram em estilos que foram deitados fora à medida que refinávamos o design de impressão. Por outras palavras, teve sorte.) Colação É esta a última palavra sobre estilos de impressão do ALA? Não inteiramente. Em primeiro lugar, podemos ajustar um pouco os estilos de impressão ao longo do tempo. Em segundo lugar, estes estilos de impressão só são usados em artigos, que são as páginas que são mais provavelmente impressas. Outras páginas, como a página de entrada ou outras páginas de alto nível não têm presentemente estilos de impressão. Virão a ter É uma questão interessante…e uma que podemos levar em linha de conta algum dia. Por agora, espero que os estilos de impressão para o ALA 4.0 vão de encontro aos objectivos de design que o ALA tem e também tornar o processo de impressão de um artigo mais agradável. Obrigado a todos os que nos deram feedback sobre a falta de estilos de impressão – demonstrou de forma viva que as coisas mudaram nos últimos anos e que o estilo de impressão é algo valioso e importante no design da web. O original deste artigo encontra-se aqui em AlistAPart e é de Eric Meyer

21 setembro, 2005

Escreva à mão as suas (pelo menos as) primeiras páginas web

Codificar à mão

Em primeiro lugar quero dizer que não lhes vou dizer se devem ou não usar um editor WYSIWYG. Vou dizer o que penso sobre porque é que devemos codificar à mão as nossas páginas.

Para aprender a saber como as coisas funcionam neste mundo, a maior parte do tempo ,temos que as esventrar e pesquisar no seu âmago. Não se pode sentar e com um simples olhar perceber como que pequenas coisas intrínsecas o fazem pulsar. Não posso olhar para um computador e dizer-lhe como funciona. Posso ler um livro e depois dizer-lhe, mas como é que lhe podia dizer quanta massa térmica aplicar ao CPU/dissipador de calor sem o ter feito eu mesmo? Se deseja compreender a sua página então tem que a produzir...à mão.

Pintar com uma finalidade

Cada artista tem uma história nos bastidores da sua pintura. Podem dizer-lhe que cada pincelada tem uma finalidade. Nada é feito só por fazer. Quando codifica as suas páginas à mão cada elemento que adiciona é adicionado por alguma razão. Obtém-se um maior sentido sobre o que se faz e temos uma melhor compreensão das nossas próprias páginas. O seu trabalho deve ser mesmo sey e se não o compreender então ele não se torna seu de facto.

As máquinas de escrever são o diabo

Tenho uma teoria sobre literatura clássica. Acredito que haja mais clássicos e que sempre haverá mais clássicos escritos antes da máquina de escrever do que depois do seu aparecimento. A razão para eu acreditar nisto é que os escritores tinham que ter mais cuidado com o que punham no papel antes do aparecimento da máquina de escrever. Não podiam desperdiçar demasiados recursos em palavras desnecessárias. Quando escreviam o primeiro “O” em "O" para iniciarem o romance sabiam porque o faziam. Sentiam o “O” a ser escrito e assim imergiam nos seus próprios romances. Os seus documentos eram verdadeiramente deles. Não o consegue fazer com um editor WYSIWYG.

Poder e Controlo

Codificar à unha as suas páginas dá-lhe um controle sem precedentes sobre cada elemento que aparece na página. Controlamos como o nosso código é formatado. Codificar à unha as suas páginas dá-lhe um controle sem precedentes sobre cada elemento que aparece na página. Temos o poder.

Há um tempo e um lugar

Não estou a dizer que deva escrever cada uma das páginas XHTML do seu site. Seria estúpido escrever centenas de cabeçalhos quando só necessita escrever um e incluí-lo em todos os seus ficheiros. Eu codifiquei à mão o meu cabeçalho e a barra de navegação lateral deste sítio. Codifiquem à mão os modelos de cada página e sei pois o que faz este site funcionar. Não codifico à mão as minhas entradas pois são não ser necessário. MoveableType faz isso por mim. Este site é codificado e agora automatizado para mim de forma a que possa focar-me no conteúdo que escrevo (através de um teclado). As minhas entradas normalmente consistem num <p> aqui e uns <h2> ali.

Nunca percebi porque é que as escolas deixam/obrigam os seus alunos a desenhar as páginas com editores WYSIWYG. Tenho a certeza de que há razões, mas para mim é como ensinar alguém a pintar com números. Se realmente deseja ser bom e obter a apreciação pelo seu trabalho árduo então tem que codificar à mão. Quando já souber bem XHTML/CSS então estará preparado para encontrar a melhor ferramenta para produção.

O Site da Paróquia de S. Pedro de Alverca

Uma visão diferente de um site http://www.paroquiadealverca.org/home2.htm Já há algum tempo andava a tactear a ver se me resolvia a escrever um blog. Um blog que fosse simultaneamente um blog para utilizadores correntes da web e para utilizadores mais especializados: aqueles que fazem websites. Ainda não encontrei o tom mais adequado para aquilo que pretendo. No entanto neste primeiro blog vou apresentar algumas ideias sobre construção de sites. Para que haja um fio condutor, vou debruçar-me sobre websites de Paróquias. Irei apresentar uma série de sites, como é que eles se apresentam em diversos navegadores, como foram construídos, como os alterar para que funcionem um pouco melhor. O primeiro site que vou apresentar é o da Paróquia de S. Pedro de Alverca. Este site começa por nos perguntar a nós utilizadores qual o formato do nosso ecrã (o 1º erro, nós utilizadores nunca sabemos qual o formato). Se indicarmos um formato mais pequeno do que o real sucede o ilustrado na figura acima. As imagens do cabeçalho e da barra de navegação são parcial ou totalmente repetidas. Ao fundo e do lado esquerdo podem verificar que a imagem que compõe o fundo do menu é repetida (inclui a palavra Paróquia). Surgem ainda as opções do menu Paróquia (não percebi porquê?) Fiquei intrigado porque seria? Fui ver o código fonte do site... Comecei a entender. A página não tem DOCTYPE (ou seja nunca poderá ser validada contra nada) e é feita com esquadrias (frames). As esquadrias estão delimitadas com percentagens (um erro num arranjo fixo), as imagens de fundo nos diversos documentos são de dimensões fixas e são repetíveis (de onde resulta a repetição quando as dimensões não são as correctas). Bom o que é que eu faria de diferente nesta página, talvez começa-se por colocar um DOCTYPE, e talvez fizesse uma alteração ao título para poder destinguir esta página de outras do mesmo site no histórico, melhorar um pouco a utilidade da página não custa assim tanto. Depois e visto estar em Portugal alteraria o texto do parágrafo <p>Esta página usa esquadrias, mas o seu navegador não as suporta e eu estou a mando-lo embora </p>. É mais o menos isto que está em inglês. Ou seja ninguém com telemóveis deve aceder a este sítio. Se calhar usar esquadrias talvez não seja o melhor, bom mas por agora passa. Depois comecei a analisar com mais detalhe as páginas carregadas para cada posição no conjunto das esquadrias. A esquadria de cabeçalho inclui uma imagem a data, obtida de forma dinâmica. Aqui o que faria era mover o javascript para um ficheiro próprio, e o estilo da data para ficheiro próprio. Claro que este ficheiro poderia eventualmente ser integrado num ficheiro de estilo mais alargado. Como estou a partir do princípio que o utilizador tem um navegador com javascript activo então poderia optar por colocar um menu dinâmico com forte presença de CSS, ou mesmo só presença de CSS, se calhar ficaria bem ver o que Eric Meyer diz sobre o assunto. Como é de esperar como o menú é de facto constituído por várias imagens grandes de fundo e algum texto, as opções surgem por vezes sem fundo e sem indicação do menú respectivo pois este faz parte da imagem. O menu Home, eu gosto de lhe chamar Entrada mas é só uma questão de detalhe (sou conhecido por ser piquinhas). Agora passemos ao que eu gosto neste site. Uma das coisas banais no site deve ser ver horários de eventos e da secretaria da Paróquia (como gostaria de conhecer as estatísticas), por alguma coisa não gosto de sites com esquadrias e gosto de títulos que me indiquem em que página estou, o acesso a estas funcionalidades passaria a ser directo (a partir dos marcadores de favoritos). A organização e focalização das coisas. O aspecto cuidado e moderno do site. É pena que os conhecimentos de design não tenham também como contrapartida um conhecimento de código html e css e da sua aplicação. Mesmo com os «problemas» levantados acima darei nota positiva ao site. Julgo que seja escusado dizer que estou disposto a gratuitamente ajudar a melhorar qualquer site que não tenha fins lucrativos (como os das paróquias).