Ainda a Pensar

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

07 outubro, 2005

Web Standards em Portugal 2 - Escolas Secundárias

O maus estado de conformidade da Web Portuguesa - Parte 2

Após uma breve visita aos sites de media mais abaixo irá encontrar sites das escolas secundárias. Não encontrei nenhuma (página de abertura) conforme. Contudo há uma que está muito próximo disso: a Escola Secundaria Dr. João Carlos Celestino Gomes.

http://www.esrp.pt/

Escola Secundária de Raul Proença - Caldas da Rainha

Sem declaração DOCTYPE (É um frameset)

Frontpage 5.0

Páginas interiores com tabelas para disposição (arranjo) de elementos da página

http://www.esec-se-guarda.rcts.pt/

Escola Secundária da Sé - Guarda

Sem declaração DOCTYPE

 

Flash na primeira página para fazer uma animação quando o rato passa por cima

http://www.esab.pt/

Escola Secundária de Avelar Brotero  Coimbra

 

Frontpage 5.0

Frameset – se o seu navegador não suportar fique à porta

http://www.espaa.pt/

Escola Secundária Poeta António Aleixo – Portimão

Sem declaração DOCTYPE

DW?

Página graficamente apelativa mas muito muito mal organizada

http://www.esec-barcelos.rcts.pt/inicio.htm

Escola Secundária de Barcelos

Sem declaração de DOCTYPE

DW6

Página organizada mas com tabelas por todos os cantos

http://www.malhatlantica.pt/eslealdacamara/

Escola Secundária Leal da Câmara - Sintra

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

Sem frames fique à porta
p >http://www.esfga.pt/

Escola Secundária Frei Gonçalo de Azevedo

Sem declaração DOCTYPE

 

Página graficamente apelativa, não se deve espreita para o código

http://www.esec-emidio-navarro-alm.rcts.pt/

Escola Secundária Emídio Navarro

Sem declaração DOCTYPE

 

A página de entrada parece ser mais trabalhada que as restantes

http://www.esa.pt/

Escola Secundária de Albufeira

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

O serviço de validação validator.w3.org indica que a página tem 80 erros (é comum um erro factual produzir diversas mensagens de erro)

http://www.esec-bocage.rcts.pt/

Escola Secundária de Bocage – Setúbal

Sem declaração

 

 

http://www.esec-d-pedro-v.rcts.pt/

Escola Secundária D. Pedro V

Sem declaração

 

Página sem tabelas para posicionamento, mas estilo aplicado embebido e uso não semântico de alguns elementos

http://www.esec-alcacer-sal.rcts.pt/

Escola Secundária de Alcácer do Sal

Sem declaração DOCTYPE

 

É necessário um pouco mais de rigor, indicar devidamente o que se está a fazer.

http://www.esec-valongo.rcts.pt/

Escola Secundária de Valongo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Não valida mas esta só tem 8 erros, vejam lá se os corrigem porque a animação de entrada está bem feita. Já agora o link para a folha de estilo está ligado ao disco E de alguém

http://www.esec-alves-redol.rcts.pt/

Escola Secundária Alves Redol

 

 

Flash site

http://www.esec-ourem.rcts.pt/

Escola Secundária de Ourém

 

 

 

http://www.esec-gondomar.rcts.pt/

Escola Secundária de Gondomar

Sem declaração DOCTYPE, frameset

 

Grande animação

http://www.esec-alcanena.rcts.pt/

Escola Secundária de Alcanena

Sem declaração DOCTYPE, frameset

 

Frameset porque posso

http://www.esec-alfredo-silva.rcts.pt/

Escola Secundária Alfredo da Silva

Sem declaração DOCTYPE

FrontPage 5.0

Tabelas para disposição, esta página era muito fácil de transformar numa página strict e sem tabelas para disposição

http://www.esds.edu.pt/

Escola Secundária de Domingos Sequeira

Sem declaração DOCTYPE

Frontpage

Algo complicada com demasiadas opções na página inicial e com elementos demasiado próximos a mexer.

http://www.esec-f-rodrigues-lobo.rcts.pt/

Escola Secundária de Francisco Rodrigues Lobo

Sem declaração, mas aponta para HTML 4.0

 

A aplicação com que foi feito deixa passar demasiados erros (56) num documento HTML 4.01 Alguns serviços com eventual interesse. Extensibilidade por xml

http://www.esec-lousa.rcts.pt/

Escola secundária da Lousã

Sem DOCTYPE, frameset

 

Gráficamente interessante

http://www.esec-rodo.rcts.pt/

Escola Secundária do Rodo

Sem DOCTYPE, frameset

 

Não percebo porque querem complicar

http://www.esec-j-gomes-ferreira.rcts.pt/

Escola Secundária J. Gomes Ferreira

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

 

13 erros

http://www.ga-esec-pinheiro-rosa.rcts.pt/

Clube de astronomia da Escola Secundária Pinheiro e Rosa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Página interessante, é pena não validar (>150 erros) embora muitos sejam de fácil solução (por exemplo a falta do atributo alt em elementos img)

http://www.es-pr.net/

Escola Secundária Pinheiro e Rosa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Página interessante, é pena não validar (>150 erros) embora muitos sejam de fácil solução (por exemplo a falta do atributo alt)

http://www.esec-amora.rcts.pt/

Escola Secundária da Amora

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

Não usa tabelas para posicionamento

http://www.esfa.pt/

Escola Secundária Felismina Alcântara – Mangualde

Sem declaração DOCTYPE

Frontpage 5.0

Tão pequena e já tão mal estruturada, não compreendo.

http://www.esec-maximinus.rcts.pt/

Escola Secundária de Maximinos

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

23 erros

http://www.esec-amarante.rcts.pt/

Escola Secundária de Amarante

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

32 erros

http://www.es-homemcristo.edu.pt/

Escola Secundária Homem Cristo

Sem Declaração

FrontPage 5.0

Falha na descarga de Applet Java

http://www.esec-amato-lusitano.rcts.pt/

Escola Secundária de Amato Lusitano

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

15 erros

http://www.esec-fonseca-benevides.rcts.pt/home.htm

Escola Secundária de Fonseca Benevides

Sem declaração DOCTYPE

FrontPage 6.0

 

http://www.esec-tondela.rcts.pt/

Escola Secundária com 3º ciclo do ensino básico de Tondela

Sem declaração DOCTYPE

FrontPage 4.0

 

http://www.esec-manuel-fonseca.rcts.pt/

Escola Secundária Manuel da Fonseca – Santiago do Cacém

Sem declaração DOCTYPE

MS Office

 

http://www.esec-tomaz-pelayo.rcts.pt/

Escola Secundária Tomaz Pelayo

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

FrontPage 5.0

240 erros

http://esgp.drealentejo.pt/

ESGP Escola Secundária Gabriel Pereira Évora

Sem declaração, frameset

 

 

http://www.esec-lousada.rcts.pt/

Escola Secundária de Lousada

Sem declaração, frameset

 

 

http://www.esec-amadora.rcts.pt/

Escola Secundária da Amadora

Sem declaração DOCTYPE

FrontPage 6.0

 

http://escola.franciscosimoes.weblog.com.pt/

Escola Secundária Francisco Simões

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Mesmo numa página essencialmente em branco há erros

http://www.esec-nuno-alvares.rcts.pt/

Escola Secundária Nuno Álvares

Sem declaração DOCTYPE

 

É muita pena pois é apelativa, código html + script + estilo tudo ó molho e fé em Deus

http://www.esec-rio-tinto.rcts.pt/

Escola Secundária de Rio Tinto

Sem declaração DOCTYPE

 

Se fosse HTML 4.01 teria 48 erros. Tabelas para posicionamento

http://www.esec-alves-martins.rcts.pt/

Escola Secundária Alves Martins - Viseu

Sem declaração DOCTYPE

 

Inútil

http://www.esidm.pt/

Escola Secundária Infanta D. Maria

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

9 Erros, dos melhores resultados tendo em conta o conteúdo

http://www.esec-jose-estevao.rcts.pt/

Escola Secundária José Estevão

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

66 Erros para uma página com uma desenho contido numa ligação e uma linha horizontal

http://www.esec-maia-n2.rcts.pt/

Escola Secundária do Castêlo da Maia

Sem declaração DOCTYPE

 

Nem numa página simples, embora bonita. Página não actualizada há um ano (cerca)

http://www.esec-eea-antonio-arroio.rcts.pt/

Escola António Arroio – Página Actual

Sem declaração DOCTYPE

 

Com uma declaração 4.01 e um atributo alt para a imagem passava a validar

http://www.antonioarroio.com/

Escola António Arroio – Página Antiga

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

4 erros, fáceis de corrigir

http://www.esec-d-dinis-lsb.rcts.pt/

Escola Secundária D. Dinis

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

40 erros, só que há um certo número que resulta da omissão de uma abertura ou de um fecho de um lista de definições. Só não vejo o que é que é definido. Parece que deviam aprender a usar listas não ordenadas e a aplicar uma bala gráfica

http://www.esec-jacome-ratton.rcts.pt/

Escola Secundária Jacôme Raton

 

FrontPage 6.0

 

http://www.esec-canecas.rcts.pt/

Escola Secundária de Caneças

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

69 Erros

http://www.esec-pde-antonio-vieira.rcts.pt/

Escola Secundária Padre António Vieria

Sem declaração DOCTYPE, frameset

 

5 erros se tivesse declaração frameset html

http://www.esec-d-manuel-martins.rcts.pt/

Escola Secundária D. Manuel Martins

Sem declaração DOCTYPE, frameset

 

11erros se tivesse declaração frameset html

http://www.esjf.interacesso.pt/

Escola Secundária José Falcão

Sem declaração DOCTYPE

 

 

http://www.esec-m-lamas.rcts.pt/index2.html

Escola Secundária Maria Lamas

Sem declaração DOCTYPE

FrontPage 6.0

 

http://www.esec-fernando-namora.rcts.pt/index1.htm

Escola Secundária Fernando Namora – Amadora

Sem declaração DOCTYPE, frameset

 

6 erros se tivesse declaração frameset html

http://www.esenviseu.net/

Escola Secundária Emídio Navarro

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

289 erros, Mas suspeito que sejam muitos menos de facto

http://esdjccg.prof2000.pt/

Escola Secundária Dr. João Carlos Celestino Gomes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

1 erro por falta de um atributo alt a num marcador img... Tabelas usadas como elementos de posicionamento

http://www.esportela.pt/

Escola Secundária da Porela

Sem declaração DOCTYPE

 

 

http://www.cfpjoaosoares.com.pt/index.htm

Centro de Formação Professor João Soares

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

24 Erros
Publicada por à(s) 1 comentário:

05 outubro, 2005

Web Standards em Portugal

Web Standards na web em Português

  1. Media:

    1. Notícias Lusófonas

      Sem declaração DOCTYPE, impossível validar

      Tabelas usadas em arranjos

      Estilos embebidos no html

      javascript embebido no hml

    2. Correio da Manhã

      Declaração !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"

      Tabelas usadas para arranjo da página

      Estilos embebidos e em ficheiro externo

      javascript embebido no html

    3. Diário digital

      Sem declaração DOCTYPE

      Tabelas usadas em arranjos

      Estilos na página e em ficheiro externo

      JavaScript por todo o lado

    4. Público

      Sem declaração DOCTYPE

      Tabelas usadas em arranjos

      Estilos na página e em ficheiro externo

      JavaScript em ficheiro externo

    5. Diário de Notícias

      Declaração !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

      Só que não se trata do primeiro elemento na página

      Tabelas usadas em arranjos

      Estilo essencialmente na secção HEAD

      JavaScript por todo o lado

    6. Portugal Diário

      Sem declaração !DOCTYPE

      Tabelas não são empregues para arranjos

      Estilo essencialmente em ficheiro css algum embebido

      JavaScript por todo o lado

    7. TVI

      Sem declaração !DOCTYPE

      Tabelas são empregues para arranjos

      Estilo essencialmente em ficheiro css algum embebido

      JavaScript por todo o lado

    8. Jornal de Notícias

      Sem Declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo essencialmente na secção HEAD

      JavaScript por todo o lado

    9. Expresso

      Sem Declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiro externo

      JavaScript essencialmente na secção HEAD e em dois ficheiros externos

    10. SIC

      Declaração !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

      Se conferida em validator.w3.org indica 154 erros

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiros externos

      JavaScript essencialmente na secção HEAD

    11. Visão

      Não consigo verificar pois ocorre um erro no VBScript

    12. TSF

      Sem Declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiro externo

      JavaScript essencialmente na secção HEAD

    13. Lusa

      Sem Declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiros externos

      JavaScript por todo o lado

    14. Jornal Digital

      Declaração !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'

      Se conferido em validator.w3.org temos 70 erros

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiros externos

      JavaScript espalhado por todo o lado

    15. O Independente

      Sem declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiro externo

      JavaScript espalhado por todo o lado

    16. O Primeiro de Janeiro

      Sem declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiro externo

      JavaScript Antes da e na secção HEAD

    17. O Primeiro de Janeiro

      Sem declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo essencialmente em ficheiro externo

      JavaScript Antes da e na secção HEAD

    18. Rádio Renascença

      Sem declaração !DOCTYPE

      Tabelas usadas em arranjos

      Estilo por todo o lado

      JavaScript por todo o lado

    19. Mais Autárquicas 2005

      Com declaração !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

      Não é possível validar pois alguns caracteres não pertencem aos caracteres UTF-8

      Tabelas usadas em arranjos

      Estilo por todo o lado

      JavaScript por todo o lado

  2. A continuar...

O que sei até agora

Nenhum dos meios visitados tem páginas válidas. Quase 70% não tem declaração DOCTYPE, 1 (5%) tem declaração indicando HTML 3.2 o que parece um pouco datado de mais. Três dizem aplicar a versão 4.0 de transição, 1 indica a versão 4.01 e finalmente 1 não faço a mais pequena ideia.

Não encontro em nenhum uma separação clara de conteúdo, apresentação e comportamento.

O conteúdo não está marcado de forma semântica, havendo geralmente um excesso de uso de tabelas como artefactos de posicionamento. Um, Portugal Diário, parece estar em fase de transição. Não usa tabelas para posicionamento na maior parte dos casos, contudo o JS está disperso.

Em relação ao JavaScript aparece por todo o lado, 2 dos sites conseguiram colocar JS em ficheiros separados, mas na maior parte dos casos está espalhado por todo o lado, verdadeiro lixo.

A utilização de tabelas parece ser devida ao desejo de controlo total por parte dos artistas gráficos sobre posicionamento (ou simplesmente desleixo). Não percebo porque não tentam validar as páginas para verem o tipo de asneiras mais frequentes.

Nem sequer me vou preocupar com pormenores mais avançados.

Para a semana há mais.

Publicada por à(s) 3 comentários:

04 outubro, 2005

Processadores de Texto Colaborativos na Web

Novos na cena da colaboração encontramos três novas ferramentas baseadas na web com a finalidade de fornecerem um serviço que permite a várias pessoas alterar um documento a partir de um navegador da web. Estas ferramentas são writely, JotSpot Live e writeboard. Eis uma primeira impressão de todos os três.

Os meus objectivos chave era começar a trabalhar rapidamente (de forma a que a ferramenta não se intrometesse no caminha para a tarefa) e ser capaz de partilhar e colaborar no documento com um pequeno grupo de amigos conhecedores da web. Assim fácil não era o tão importante quanto simples - se percebe o que estou a dizer. Eis então as minhas observações:

  • writeboard

    Tendo visto que tinha ocorrido o lançamento do writeboard, saltei directamente para lá e assinei. Criar um novo documento foi assunto para poucos segundos de trabalho, assim recebe uma nota elevada para instalar e começar a trabalhar rapidamente. É algo que pode fazer de passagem sem ter uma série de pessoas à espera. Fui também capaz de convidar amigos inserindo os respectivos endereços, de uma lista de correio, outro ponto para poupar tempo. Detesto ter de escavar para encontrar todos estes endereços de correio electrónico.

    Editar um documento cria uma nova versão - tal como num wiki. De facto (e ao contrário dos protestos da 37signals do contrário) é só um wiki de uma página. Seleccionar duas versões permite fazer a diferença entre as duas de forma fácil, embora não haja maneira de juntar várias alterações. Tal pode tornar-se um problema quando toda a gente marca o ponto e começa a alterar o documento. Acabámos de nos sobrepor uns aos outros tendo-se o documento tornado um lixo total. Embora pudesse ver versões anteriores, não há nenhuma maneira de juntar alterações.

    Assim, sem bloqueio de ficheiro (como um wiki real) e nenhum modo de juntar alterações, writeboard é fácil e rápido para começar a trabalhar, mas praticamente inútil para colaboração. É uma pena pois promete. Com um pouco de sorte 37signals irá introduzir quer o bloqueio de ficheiro (para evitar que várias pessoas o alterem ao mesmo tempo) ou fornecer um meio para juntar diferentes versões. Até lá de pouco me serve.

  • JotSpot Live

    Após o interface de utilizador subtil e elegante o JotSpot Live pesa muito com a sua marca destintiva e feia. Mas não se preocupe com o aspecto, é mais importante que funcione.

    O processo de assinatura foi fácil, embora não tão rápido como o do writeboard. A conta gratuita permite documentos até 5 páginas, mas com um número ilimitado de utilizadores. O foco do JotSpot Live é mais o de colaboração em tempo-real, mais próximo de algo como o SubEthaEdit. Ou algo assim.

    Criar um documento foi fácil, e o processo de edição leva uma aproximação de linha a linha em micro-campo. Julgo que possa fazer mais sentido repartir um documento em muitos pequenos bocados de forma a tornar possível a alteração por vários autores. Algo a partir do qual o writeboard pode aprender. A navegação de teclado é boa (as setas para cima e para baixo navegam entre linhas alteráveis, Enter para alterar) e assim as suas mãos não necessitam de sair do teclado.

    Quando chega o momento de convidar os meus amigos inseri os endereços de e-mail na lista de correio e carregue em «convidar». É aqui que o JotSpot Live deixa a desejar - o convite enviado só pode ser respondido uma vez, por uma só pessoa. Assim, só um dos amigos conseguir inserir algo e os restantes receberam um famoso 404. Não muito bom.

    Se deseja-se usar isto na realidade, teria de voltar a inserir uma nova série de endereços de coreio e copiá-los e colá-los um a um, no campo para convites. É demasiado trabalho e pouco instrutiva na necessidade de fazer as coisas. A aplicação é demasiado intrusiva e assim dispensei-o.

  • writely

    writely deve ser a primeira aplicação web que vi escrita em ASP.NET. As pessoas começam a construir coisas com ASP.NET! Quem sabia disto? Ouvi falar muito bem deste serviço (julgo) que no Web 2.0 Show e assim desejava experimentar.

    O primeiro problema é não suportarem Safari. Embora tal não deva ser um problema para alguém que faça desenvolvimento de web com meia dúzia de navegadores disponíveis, seria problemático para muita gente com quem trabalho no dia a dia - todos trabalham em Mac com Safari. Não têm o Firefox porque não necessitam dele. Ter de descarregar e instalar um novo navegador oficialmente é qualificado como criar obstáculos no caminho, mas desculpo e passo à frente. O Safari pode ser muito chato no desenvolvimento do lado do cliente, por vezes.

    Assinar uma nova conta não apresentou problema, embora ache uma certa falta de confiança de algum modo, e assim usei um e-mail para deitar fora. Julgo que se deveu à inexistência de uma indicação explicita quanto ao uso da informação que estavam a solicitar. O writeboard é quanto a isto claro e senti-me mais seguro por causa disto.

    Criar um novo documento gera uma janela que não pode ser alterada em dimensões e sem barras de rolamento. Normalmente não é problema, excepto que a página contida se estendia muito, mas mesmo muito para lá da janelinha. As minhas boas competência de utilização do teclado permitiram-me atravessar este formulário praticamente cego, incluindo a inserção de endereços de email para convites. Tanto quanto sei essas mensagens nunca foram enviadas.

    Após ter dado o Ok a esta janela a página principal apresentava agora uma mensagem dizendo que tinha bloqueado janelas popup e que era necessário alterar esse estado. Desesti demasiado esforço.

  • Conclusão

    A finalidade deste teste era encontrar uma ferramenta para colaboração que pudesse usar com o mínimo de esforço. Necessita de algo que me deixasse colaborar. Por essa razão desisti de usar o writely e o JotSpot Live. Não estou a dizer que sejam mais serviços, mas parecem serviços que necessitam de ser melhorados e que necessitam de demasiado esforço em relação aos meus critérios de avaliação.

    writeboard, por outro lado não se intrometia demasiado e deixava os meus amigos entrarem facilmente. Se conseguirem resolver os problemas que tornam a colaboração impossível podem tornar-se um serviço útil.

    Provavelmente irei continuar a usar um simples blocos de notas por enquanto.

Publicada por à(s) Sem comentários:

03 outubro, 2005

Web Essentials 2005

PodCasts na WE05 - Tradução para Português

Nota de Abertura: O Estado da Web 2005
Molly Holzschlag
29-Setembro-2005 09:15
Duração: 1:04:43 - Tamanho do ficheiro: 14.81 MB
A paixão pela Web reacendeu, com esta nova energia vem também uma compreensão mais profunda das pessoas, ferramentas e tecnologias que consituem a industria de desenvolvimento e design da Web. Desta compreensão mais profunda emergiram aplicações fantásticas como Google Maps, Flickr e Skype, cada uma contribuindo para um fenómeno que foi cunhado como "Web 2.0." Na sua nota de abertura, Molly irá apresentar as mudanças na nossa indústria e como é que estão directamente relacionadas com o trabalho que fazemos actualmente - e como iremos trabalhar no futuro.

Os Elementos XHTML com Significado
Tantek Çelik
29-Setembro-2005 10:30
Duração: 31:56 - Tamanho do ficheiro: 7.31 MB
Os designers modernos da Web estão a usar XHTML e CSS para de forma eficiente e bela separarem a marcação da apresentação. Aprenda como o XHTML pode ser usado para expressar semêntica amiga da apresentação a partir de elementos básicos até compostos semânticos construídos com esses tijolos.

Para lá da Facilidade de Utilização: Conceber a Experiência Total do Utilizador
Jeffrey Veen
29-Setembro-2005 11:30
Duração: 49:26 - Tamanho do ficheiro: 11.32 MB
O Design é difícil (duro). A Web é complicada. Como fazemos coisas para pessoas quando tudo o que temos é uma compreensão do mais básico daquilo que elas desejam? Junte-se a Jeffrey Veen pois ele irá apresentar um largo espectro de desafios que os designers enfrentam actualmente, e como todos estamos a resolver esses problemas com novas perspectivas sobre pesquisa de utilizador, design de interacção e arquitectura de informação.

Da Composição ao Código: Criando «A List Apart»
Eric Meyer
29-Setembro-2005 11:30
Duração: 46:12 - Tamanho do ficheiro: 10.58 MB
É-lhe entregue uma imagem gráfica da composição e dizem-lhe para a transformar numa página web viva. E agora? Como é que trata de criar uma aproximação, que técnicas usar, e que tipo de marcação irá aparecer na página final? Nesta sessão Eric faz uma volta pelo seu processo de tomada de decisão quando tratou do um novo design de A List Apart - como analisou os requisitos, as perguntas que teve de fazer, os balanceamentos que fez, as razões por trás das suas decisões.

Painel: Normalizar a sua organização
Brett Jackson, John Horner and David McDonald (John Allsopp chair)
30-Setembro-2005 14:43
Duração: 42:34 - Tamanho do ficheiro: 9.75 MB
Três líderes da indústria, Brett Jackson, John Horner e David McDonald, esboçam como ajudaram a orientar as suas organizações para uma web de padrões.

SVG -O poder e a paixão
Dean Jackson
30-Setembro-2005 15:04
Duração: 9:18 - Tamanho do ficheiro: 2.13 MB
SVG é o padrão W3C para gráficos. O suporte de SVG está finalmente a aparecer nos navegadores actuais permitindo aos designers embeberem, diagramas ilustrações e animações directamente nas páginas Web. Os programadores podem usar também SVG para codificarem uma aplicação gráfica Web. Nesta conversa irá obter uma introdução ao SVG e irá ver como pode usar várias tecnologias do mundo HTML em conteúdo SVG, incluindo JavaScript, DOM e CSS (ao usar estas palavras chave ganhei dois pontos extra no medidor Geekesa). O SVG é uma mistura interessante para designer e louquinhos.

Redesenhar a Web: Redefenir o Fluxo de Trabalho
Kelly Goto
30-Setembro-2005 16:08
Duração: 51:15 - Tamanho do ficheiro: 11.73 MB
Orçamentos enxutos e calendários reduzidos criaram a necessidade de fluxos de trabalho mais flexíveis e orientados para resultados. Com o aumento das expectativas da audiência é obrigatório focar-se a experiência de utilização. Aprenda como integrar uma estratégia de desenvolvimento iterativo no seu fluxo de trabalho existente e veja como criar uma orientação estratégica e usar ferramentas on-line para o auxiliarem a medir o sucesso. Niguém sabe mais sobre fluxos de trabalho e gestão de projectos Web do que Kelly Goto, autora do best-seller: «Web Redesign: Workflow that Works», agora na segunda edição.

Sair das trincheiras
Douglas Bowman
30-Setembro-2005 16:15
Duração: 48.28 - Tamanho do ficheiro: 11.10 MB
Como profissionais da Web, tendemos a ser enredados nos detalhes do dia a dia - obcecados em pequenos detalhes. Cada um de nós está tão rodeado pelas nossas tarefas imediatas, que raramente temos a sorte de parar, andar para trás e avaliar o panorâma à nossa frente. Deixemos por momentos os pixel e os selectores e vejamos a imagem mais geral. Deixemos os limites do nosso próprio pensamento, examinemos vários cenários do futuro não tão distante assim, comecemos a perguntarmo-nos como é que o nosso trabalho actual será afectado pelo potencial de amanhã.

Fluxo de Trabalho padrão Web
Molly Holzschlag
30-Setembro-2005 14:17
Duração: 48:05 - Tamanho do ficheiro: 11.01 MB
Bem, trabalha actualmente com Web standards, mas os métodos nos quais trabalhamos ainda não são claros.Esta sessão olha para o fluxo de trabalho no design de Web como o faziamos, como o fazemos e como podemos tomar o conhecimento tanto passado como presente e aplicá-lo a um fluxo de trabalho simplificado, consciente das normas que reduza o tempo de produção, reduza o cansaço e de que resultem designs acessíveis, flexíveis e bonitos.

Prototipagem Rápida de Design com os padrões web
Eric Meyer
30-Setembro-2005 16:39
Duração: 48:42 - Tamanho do ficheiro: 11.15 MB
Já sabemos que o conjunto XHTML+CSS é uma forma muito boa de trazermos os nossos designs à vida, mas que dizem de os usarmos também no processo de design? Acreditem ou não, esta combinação pode melhorar radicalmente a velocidade do processo de design, teste de utilizador, e calendário de instalação. Eric irá falar-nos sobre como tornar isto uma realidade sem sacrificar nada em termos de compatibilidade de navegador uma vez tendo sido feito o lançamento.

Conceber para Acessibilidade: Para além dos fundamentos
Derek Featherstone
30-Setembro-2005 16:48
Duração: 48:42 - Tamanho do ficheiro: 11.11 MB
Resolver problemas difíceis de acessibilidade requer alguns ingredientes chave: conhecimentos dos problemas de acessibilidade, pensamento criativo e uma estratégia sólida de concepção. Nesta sessão iremos percorrer problemas de acessibilidade difíceis e soluções a partir de web sites reais. Ao fazê-lo, iremos estabelecer uma estratégia global para tornar as coisas acessíveis e iremos desafiar alguns dos pressupostos comuns sobre acessibilidade.

Já chegamos? Melhores práticas em desenvolvimento web na Austrália - uma análise
John Allsopp
30-Setembro-2005 16:56
Duração: 49:38 - Tamanho do ficheiro: 11.36 MB
Como é que estão os sites das maiores companhias australianas quando se trata de desenvolvimento de web baseados em normas, HTML estrutural e semântico, CSS e acessibilidade? John Allsopp estabelece uma metodologia objectiva para avaliar qual a aderência dos sites às melhores práticas de desenvolvimento e apresenta o que descubriu sobre a o estado dos maiores websites australianos.

Arranjos líquidos usando CSS - A alegria, a dor e as lágrimas
Russ Weakley
30-Setembro-2005 17:45
Duração: 28:55 - Tamanho do ficheiro: 6.62 MB
Russ Weakley irá explorar os arranjos líquidos geridos por CSS e demonstrar um certo número de modos pelos quais podem ser alcançados. Experimente a alegria, a dor e as lágrimas à medida que um largo espectro de assuntos são apresentados tais como: comprimento de linha, modelo de caixa, colunas a colapsar, navegação líquida, ementos e imagens de formulários.

Microformatos: Web evolutíva
Tantek Çelik
30-Setembro-2005 17:54
Duração: 31:56 - Tamanho do ficheiro: 7.31 MB
À medida que as comunidades de web design, desenvolvimento, IA, e blogging forem adoptando mais e mais (X)HTML semântico e válido, surgiram duas ideias: há necessidade de exprimir de forma comum tijolos de informação nas páginas tais como pessoas, endereços, eventos, revisões, etc e que o (X)HTML não tinha semântica para o fazer. Microformatos são um conjunto de formatos de dados abertos e simples que permitem uma aproximação evolutiva para exprimirmos de forma fácil esse tipo de tijolos comuns na Web actual. Em contraste com esquemas XML dedicados, os microformatos para eventos ou informação de contacto são familiares ao XHTML com classes, tornando-os triviais para embeber em conteúdo existente, dar-lhes estilo com CSS, e interoperarem com aplicações de secretária.

Original em: Web Essentials

Publicada por à(s) Sem comentários:

RSS 2.0

Como cozinhar um alimento RSS 2.0

Se consegue aprender HTML, pode aprender facilmente a construir os seus alementos/feed RSS 2.0. Vou levá-lo através dos passos necessários à criação de alimento RSS de raíz.

  1. Declaração XML

    Visto o RSS 2.0 tem que ser válido como XML, a primeira linha do feed RSS tem que ser a declaração XML.

    <?xml version="1.0" encoding="utf-8"?>

    A codificação é opcional mas recomendada. Se estiver a usar algo que não UTF-8 trate de alterar a linha acima.

    Nota: Se estiver a usar o CFML e tiver espaço em branco devido ao ficheiro tem que reiniciar a memória tampão de saída em uso

  2. Canal RSS

    Neste passo necessitamos abrir um marcador rss, e o marcador canal, todo o conteúdo do feed ficará dentro destes marcadores.

    
  &t;rss version="2.0">
  <channel>
  3. Informação do alimento RSS

    Seguidamente coloca informação sobre o seu alimento RSS tal como o seu título, uma descrição e uma ligação ao site. 

    
  <title>O título do meu Alimento RSS 2.0</title>
  <link>http://www.exemplo.com/</link>
  <description>Esta é a descrição do meu alimento rss 2</description>
  <lastBuildDate>Mon, 12 Sep 2005 18:37:00 GMT</lastBuildDate>
  <language>pt-pt</language>

    lastBuildDate deve ser a data e hora da última alteração ao feed. As datas em alimentos RSS devem ser conforme o RFC 822. Em CFML a márcara de DateFormat seria ddd, dd mmm yyyy e o TimeFormat seria HH:mm:ss. As datas devem expressar o deslocamento em relação a GMT. O marcador lastBuildDate não é exigido mas recomendado.

  4. Itens RSS

    Seguidamente enumeramos cada item RSS, cada item tem um título, ligação, descrição, data de publicação e guid.

    
  <item>
  <title>Título de um item</title>
  <link>http://exemplo.com/item/123</link>
  <guid>http://exemplo.com/item/123</guid>
  <pubDate>Mon, 12 Sep 2005 18:37:00 GMT</pubDate>
  <description>[CDATA[ Isto é uma descrição. ]]</description>
  </item>
  <!-- colocar aqui mais itens -->

    Trate de assegurar-se que escapou qualquer caracter que possa o XML ficar inválido, esses caracteres incluem < > & Gosto de inserir qualquer conteúdo que possa conter HTML numa secção CDATA.

    Nota: Em CFML pode usar a função XmlFormat para escapar caracteres especiais em XML.

  5. Fechar os marcadores de Channel e RSS 
    
  </channel>
  </rss>
  6. Validar o alimento

    Valide o seu alimento usando FeedValidator.org.

Outras coisas de nota

  • Tipo de conteúdo - ver as minhas notas sobre tipos de conteúdo para alimentos RSS.
  • Codificação - Deve incluir a codificação no cabeçalho de tipo de conteúdo HTTP e numa declaração XML.
  • Estilo - Se desejar pode fazer o seu alimento RSS parecer mais bonito usando folhas de estilo CSS para o seu alimento RSS.
  • Categorias - É boa ideia incluir marcadores de categoria nos seus alimentos RSS também, este marcador é colocado dentro do marcador item. Pode dar várias categorias a um item adicionando um marcador para cada uma delas.

Só arranhei a superfície sobre o que pode fazer com alimentos RSS, verifique a especificação RSS 2.0 para mais informação.

Percebe-a?

Publicada por à(s) Sem comentários:

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?

Publicada por à(s) 1 comentário:

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.

Publicada por à(s) Sem comentários:

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.

Publicada por à(s) Sem comentários:

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).

Publicada por à(s) 2 comentários:

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.

Publicada por à(s) Sem comentários:

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.

Publicada por à(s) Sem comentários:

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.
Publicada por à(s) Sem comentários:

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.
Publicada por à(s) Sem comentários:

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.

Publicada por à(s) 1 comentário:

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.

Publicada por à(s) Sem comentários:

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.

Publicada por à(s) Sem comentários:

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 só 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.

Publicada por à(s) 1 comentário:

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.
Publicada por à(s) Sem comentários:

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
Publicada por à(s) Sem comentários:

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.

Publicada por à(s) Sem comentários:
Etiquetas:
Subscrever: Mensagens (Atom)