Arquivo de etiquetas: webdesign

Web Designer: dar ou não dar o benefício da dúvida

Publicado a por

Comprei o nº 1 da nova revista da Enjoy (editora da iCreate), de seu nome Web Designer. Já a devem ter visto nas bancas: é aquela que tem um grande destaque ao YouTube na capa.

Como a iCreate está mesmo a demorar algum tempo a convencer-me (os atrasos nesta última edição não ajudaram), posso ter abordado esta nova publicação com alguma desconfiança. Mas há algumas coisas que parecem mesmo mal:

  1. em www.web-designer.pt, onde deviam estar conteúdos acessórios à revista (anunciados na capa), ainda não há nada
    Site da Web Designer off-line?
    Num “whois”, temos como resultado da pesquisa por: web-designer.pt

    Data Submissão: 07/12/2007 (um bocado em cima da hora, não?)
    Estado: RESERVED (não devia ser ACTIVE?)

    Titular: Enjoy,SA

    Nameserver Information:  (está mesmo em branco)

  2. Este número da revista concentra-se em vídeo e Flash, e não se nota grande esforço de pensar um primeiro número português, de carácter introdutório, que acautele uma possível visão abrangente do Web Design
  3. Os ícones das aplicações da Adobe (Dreamweaver, Flash e Photoshop) na capa e partes do miolo sugerem uma abordagem muito centrada em (determinadas) ferramentas e muito pouco em processos
  4. Numa primeira leitura rápida deparei-me com algumas falhas de tradução e/ou revisão e acho que algumas imagens estão fora do sítio (repetidas em artigos a despropósito)

Podia continuar a apontar defeitos e, provavelmente deveria apontar algumas virtudes, para ser justo, mas acho que este primeiro número da revista é mesmo um acto falhado. A questão do site bastava, na minha opinião, para exigir um pedido de desculpas e querer o dinheiro de volta.

Provavelmente aparecerá alguém a jogar a cartada do “é melhor que nada e, se não apoiarmos, depois não nos podemos queixar da pobreza do universo editorial”. Desculpem lá, mas para esse peditório já dei. Várias vezes.

I love typography too!

Publicado a por
9

I Love Typography, cabeçalho do site

Foi através do blog do Jeffrey Zeldman (e viva os feeds!) que conheci o I Love Typography.

O site é muito bom, a escolha dos 15 exemplos de uso excelente de tipografia em websites é muito boa e é claramente um sítio que vale a pena guardar e visitar regularmente (e viva os feeds outra vez!).

E é especialmente engraçado encontrar esta referência no mesmo dia em que conheci o Typography Kicks Ass e falei de coincidências tipográficas. :)

Sobre processo de design colaborativo: integrar o cliente

Publicado a por
Comentar

A List ApartAs web designers (and developers and information architects, and so on), we have a lot more to offer than making pretty pictures or giant red buttons. Take the reins and change the relationship you have with your clients—become a partner, not a vendor. Including clients in your work can do more to build great working relationships than you might imagine.

É comum ter referências a artigos publicados no A List Apart, ali na barra do lado direito do blog, onde uso o del.icio.us para marcar leituras recentes. Mas, nem sempre os artigos que me marcam mais ficam convenientemente destacados.

Senti isso com a questão da escrita na web, a que dei destaque num post, e acho que este artigo da Sarah B. Nelson sobre o papel dos clientes nos processos de design e sobre as formas de gerir processos colaborativos merece também algum destaque.

O artigo em si não apresenta nada de verdadeiramente explosivo ou revolucionário, mas como é comum dar por mim em situações em que há uma grande confusão acerca de como se articula a relação entre um designer-projectista e um cliente e como já senti na pele as vantagens e as desvantagens da aposta na ideia da parceria, acho que vale a pena para ler, reflectir e adaptar às várias realidades em que nos vamos mexendo.

Conservatório de Música de Aveiro de Calouste Gulbenkian online

Publicado a por
3

visite o site do Conservatório de Música de Aveiro de Calouste Gulkbenkian

A entropiadesign foi convidada para encontrar uma solução adequada para o site do Conservatório de Música de Aveiro de Calouste Gulbenkian (onde estudei durante 6 anos). Os princípios base da intervenção passaram pela implementação de um sistema de gestão de conteúdos (CMS) intuitivo, flexível e eficaz, e pela criação de um template simples, mas eficaz, centrado na apresentação clara dos conteúdos relevantes

A escolha recaiu sobre o Joomla! que nos é bastante familiar e ao qual os professores responsáveis aderiram rapidamente. Configurámos igualmente as GoogleApps for Your Domain, por forma a ser mais fácil o contacto entre todos os professores, funcionários e alunos e a publicação e partilha de eventos através do Google Calendars.

Apesar do site estar ainda em fase clara de construção, a decisão de o colocar online foi tomada ontem com o claro objectivo de motivar a adesão de um maior número de colaboradores para a equipa editorial. Uma estratégia que permitirá igualmente a recolha de opiniões, sugestões e críticas quase transformando esta versão num lançamento “alpha”.

O processo de construção de uma solução completa para uma instituição deste tipo e com as limitações próprias de não ter ninguém especializado em Tecnologias de Informação ou sequer funções atribuídas nesta área, contando apenas com a boa vontade e disponibilidade para aprender de alguns dos seus professores ensina muita coisa acerca da importância vital de se ser pragmático.

Quem ajuda a Skoda?

Publicado a por
3

Há muitas coisas engraçadas (ou nem por isso) que acontecem quando se decide que os standards web não são importantes.
Eu, pessoalmente, acho que exemplos práticos são muito mais eficazes do que grandes discursos teóricos.

Cá está um:

Screenshot site Skoda Portugal

Este é o aspecto do site da Skoda Portugal visto em Firefox (um browser inteligente, standard-compliant, moderno e comum) em Mac OS X (um sistema operativo igualmente moderno e também comum).

Giro para quem se diverte com as desgraças dos outros… menos engraçado para quem quiser usar o site.

Este pode bem ser um pontapé de saída para uma série de artigos ilustrados acerca de acessibilidade e usabilidade básica na web portuguesa.

Alguém tem sugestões?

Saber escrever não é coisa do passado

Publicado a por
6

A última edição do A List Apart é dedicada às questões da escrita para a web [artigo 1] [artigo 2]. Numa altura em que é cada vez mais comum chegarem-nos às mãos projectos de web design em que ninguém se parece preocupar com o conteúdo (ninguém ainda percebeu o que quer dizer “content is king?”), ao mesmo tempo que é por demais evidente que a visibilidade e eficácia dum site depende não só da quantidade e validade do conteúdo, mas também da sua qualidade (sem esquecer nem sintaxe, nem semântica), estes artigos são mais uma razão para que, antes de “cuspir” layouts, templates e módulos de PHP e similares, apareça alguém capaz de perguntar: e os conteúdos? e o texto? quem é que escreve?

A minha experiência diz-me que uma das únicas formas de convencer um cliente ansioso de que a estruturação e escrita correcta de conteúdos relevante (que consome tempo e dinheiro) é uma fase fundamental dum processo de criação dum site é tentar explicar que o Google e os restantes motores de busca não passam de leitores “compulsivos”, que lêem na diagonal, parando brevemente nos títulos, sub-títulos e destaques e digerindo rapidamente tudo o que se lhes apresenta como texto*.

Quem percebe isto, está disponível para o processo de análise, composição e depuração exigível. Mas é mesmo muito raro.

* – estou perfeitamente consciente de que “content is king, but linking is queen” e que, quase tão relevante como o conteúdo propriamente dito é o número e qualidade das hiperligações estabelecidas para a página em apreciação. Mas o que podemos fazer pela qualidade e relevância estrutural do conteúdo das nossa páginas é muito mais do que o que podemos fazer pelo número inbound-links relevantes… aliás a melhor coisa que podemos fazer pelos inbound-links é garantir a qualidade e relevância estrutural do nosso conteúdo, certo?

Ser solidário (update)

Publicado a por
3

Os utilizadores de Internet Explorer 5 e 6 terão reparado que o “selo” que pus no blog não funcionava como era suposto. Ou melhor, o IE não é capaz de ler correctamente os estilos CSS usados para fazer esse efeito. E, mais uma vez, obriga a um “work-around” que só serve para complicar.

Assim, o selo fica com várias versões possíveis, todas elas com código válido, mas com comportamento diferente de acordo com os browsers usados:

Versão 1:

selo fixo no canto superior direito da janela do browser, funciona em browsers modernos e inteligentes (exclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:fixed; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 2:

selo fixo no canto superior direito da página (desaparece com o scroll), funciona em todos os browsers modernos e mesmo nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:absolute; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 3 (a que está em uso neste site):

selo fixo no canto superior da janela do browsers modernos e inteligentes e no canto superior da página nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<style type=”text/css”>
body>div.selo {position: fixed;}
div.selo{
margin: 0 -100px -100px -100px;
text-align: right;
position: absolute;
top: 0px;
left: 100%;
width: 100px;
right: 100px;
z-index:1000;
}
</style>
<div class="selo">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Claro que os experts de CSS me dirão que há outras formas de resolver isto e que até há formas que servem para ter um comportamento uniforme em todas as plataformas, mas como não gosto de arriscar demasiado ficar com CSS inválido e acho que deve haver um mínimo de proporcionalidade entre o tempo que se perde e o ganho que se tem, fico-me por esta solução.

Depois de mais um bocado de volta destas trapalhadas do comportamento do CSS em IE, até dá vontade de sugerir que se usem estes selos colocando apenas a imagem num sítio do site ou blog como o topo da barra lateral ou assim. Essa solução, tão simples, passa apenas por colar no sítio onde se quer a imagem esta linhazita de código:

<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>

Ser solidário

Publicado a por
1

Este blog apoia a Associação Portuguesa de Deficientes Um amigo pediu-me uma ajuda para poder pôr no blog dele uma espécie de selo a afirmar o seu apoio à Associação Portuguesa de Deficientes.

É sempre bom saber que algumas das minhas habilidades podem ser úteis.

O “selo”, cá está, disponível para ele e para quem mais o quiser usar.

Para usarem o selo no canto superior direito dos vossos blogs ou sites (como tenho no meu, agora), só precisam de adicionar este bocado de código aos vossos sites/templates:

<div id="selo" style="position:fixed; left:100%; top:0px; height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia a Associação Portuguesa de Deficientes">
<img src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif" width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

A ideia e o código (pouco original, simples, acessível e standard) pode ser reciclada para outras entidades e causas.
Se tiverem sugestões ou precisarem de apoio para implementar variações, a caixa de comentários está aqui para isso.

Uma variação óbvia é usar position:absolute; em vez de position:relative; e assim o “selo” fica preso no topo do site em vez de ficar preso no canto da janela do browser. Com essa variação, o código tem que ser colocado no início da página, a seguir a <body>.

Skitch extended…

Publicado a por
3

Skitch + Paparazzi = ??No meio de toda esta agitação à volta do Skitch, fui pensando em funcionalidades que podiam melhorar a aplicação e ser úteis em alguns cenários específicos. Uma dessas funcionalidades seria a captura duma página web completa, independentemente da área visível num monitor, para analisar elementos de interface, áreas de maior ou menor destaque, etc.
Essa possibilidade poderia tornar o Skitch numa ferramenta bastante útil para fazer análise de interfaces, por exemplo, anotando a totalidade da página/layout graficamente.

Curiosamente, andava a pensar nisto e tropecei nesta apresentação do Paparazzi!, feita pela Paula Simões, no Blog do Felisberto. O Paparazzi! permite a captura como imagem duma página web, independentemente da área visível no monitor: insere-se o endereço a capturar, a área mínima e pode até refazer-se o enquadramento e programar um atraso, para que a captura seja feita alguns segundos depois da página carregar (útil se houver animações ou coisas assim).

Juntos, o Skitch e o Paparazzi! complementam-se de formas bem interessantes.

Outras coisas que eu gostava de ver no Skitch eram:

  • possibilidade de fazer um zoom a algumas áreas da imagem
  • possibilidade de fazer cortes parciais e juntar áreas distintas, talvez pela utilização de layers
    exemplo: captura de janela da aplicação, omissão do “miolo” e exibição das ferramentas/menus todas juntas
  • ampliação da área de trabalho para anotações não sobrepostas
  • …

Era giro, não era?

(não me chateiem com o óbvio: eu sei que com todas estas coisas, o que eu estou a descrever mais parece uma ferramenta completa de edição bitmap— Photoshop, Gimp, Fireworks…— com um interface mais “giro” e a integração de screenshot e de exportação/partilha web)

Pornografia, ou a arte de ser explícito

Publicado a por
Comentar

Uma visita rápida ao site do Correio da Manhã, para completar o post anterior, mostrou-me o que tenho andado a perder no que diz respeito ao carácter explícito do tipo de informação que por ali se pratica:


Correio da Manhã noticia possibilidade de pais bloquearem sexo na net

Para quem for notícia o facto de se poder bloquear ou controlar informaticamente o acesso a conteúdos online de carácter explícito, talvez interesse perceber qual a utilidade de o fazer. Nada melhor, portanto, do que pôr dois bons exemplos na mesma página (a de entrada no site do jornal): a notícia de um crime sexual numa cavalariça da GNR e um anúncio a uma sex shop de nome irrepetível, ilustrado com imagens “picantes”.  Isto sim, é informação útil para todos os pais e encarregados de educação preocupados com os hábitos de navegação das suas crianças!
Não é claro se os filtros que fazem a notícia do Correio da Manhã bloqueariam ou não a página do próprio jornal, mas parece-me óbvio que a sex shop está a fazer um grande negócio, anunciando a um preço normal (presumo), numa página que responde a pesquisas tão apetecíveis como “sexo na net”+”soldado da Guarda Nacional Republicana”+cavalariças… e isto é só um exemplo, sem entrar em detalhe nos resumos das notícias.

Ou será que o Correio da Manhã online está “tão à frente” que os anúncios são colocados por relevância contextual? ;)