DESIGNLAB

Design, Tipografia e Multimédia.

Archive for Webdesign

Links do dia: alteração de estados com CSS

Há muito tempo que não faço esta rubrica aqui, mas com as aulas a acabar, posso dar-me ao luxo de voltar a ler as mais de 50 abas que tenho abertas no Firefox e descobrir coisas absolutamente deliciosas.

Uma destas coisas é este truque conseguido apenas com um pouco de imaginação e CSS: http://jsfiddle.net/DMNSn/

Simon Madine consegue mudar o aspeto (propriedades de CSS) recorrendo apenas a hiperligações, um pouco de lógica de Box model, e ao atributo “:target”. A solução é assustadoramente simples e absolutamente deliciosa! Permite inúmeras aplicações em layouts interativos, exploratórios, jogos… Ah!… já disse que ele não usa Javascript?…

Via Creative Bloq: http://www.creativebloq.com/css3/tips-breathe-new-life-your-css-61411880

Workshop Cidadão Senior e a Web

Banner da página do projeto SEDUCE no Facebook

Banner da página do projeto SEDUCE no Facebook

Nos últimos 3 anos tenho estado mais envolvido com a investigação, e um dos projetos em que estou envolvido é o SEDUCE – Utilização da comunicação e da informação mediada tecnologicamente em ecologias web pelo cidadão sénior. Durante este período participei em muitas reuniões e discussões. Como resultado, estive envolvido no desenvolvimento do protótipo de uma comunidade online que vai ser apresentada oficialmente na próxima quarta-feira dia 26 de Fevereiro (vejam a notícia do site da UA: https://uaonline.ua.pt/pub/detail.asp?c=37380&lg=pt).

Sob o pretexto da apresentação oficial do projeto, realiza-se um workshop internacional gratuito onde, entre mais temas e apresentações, vai apresentar-se o projeto, os resultados e processos que nos conduziram até aqui. Acima de tudo, vai-se apresentar e discutir o envolvimento dos utilizadores seniores no desenvolvimento de soluções tecnológicas. (mais detalhes na página do Facebook: www.facebook.com/projetoseduce)

Liliana C. com um dos seniores. Fotografia © Mário R.

Liliana C. com um dos seniores. Fotografia © Mário R.

Esta forma de desenvolvimento participativo, e especialmente este público-alvo, têm sido pouco explorados na nossa sociedade. Quem tem estado mais perto de mim, já sabe que é uma área muito difícil de “entrar”, pois, como dizia a Liliana C. há uns dias atrás, é uma área cheia de dogmas, onde geralmente as pessoas, marcas e instituições não investem—mas vão fazê-lo muito, muito em breve (toda a gente sabe o que está a acontecer à nossa sociedade…).

PROGRAMA WORKSHOP SEDUCE - v6 (CGD)-01

Programa do Workshop Internacional SEDUCE

Por isso, se estiverem a ler este post e são Designers (Gráficos, Web, Multimédia,…), Developers (Front/Back End, Web, Apps,…), ou Investigadores e querem apostar numa área para o futuro, recomendo vivamente que se juntem a nós na próxima quarta-feira para perceber um pouco do que é trabalhar para este público tão específico.

Consultem o programa da conferência e apareçam! A inscrição é gratuita (http://bit.ly/projetoseduce), mas já quase não temos lugares disponíveis…

A temática “O cidadão sénior e as ecologias web” vai estar em discussão no dia 26 de fevereiro, a partir das 09h00, no Auditório do Departamento de Comunicação e Arte, na Universidade de Aveiro. O workshop tem como objetivos apresentar, discutir e analisar as temáticas relacionadas com a utilização da comunicação e da informação mediada tecnologicamente, em ecologias web, pelo cidadão sénior.

O worshop realiza-se no âmbito do lançamento da comunidade online MIONE.PT desenvolvida pelo projeto SEDUCE.
A organização é da responsabilidade do projeto SEDUCE em colaboração com o projeto INEIGHBOUR TV.

A inscrição é gratuita, mas obrigatória para todos os participantes.
Pode ser efetuada online em:
http://bit.ly/projetoseduce

Serão entregues certificados de presença.
O programa do evento pode ser consultado aqui.

Informações adicionais:
projeto.seduce@gmail.com
www.facebook.com/projetoseduce
www.seduce.pt

Boas práticas para a edição de Blogs

Pormenor da estratégia editorial de publicação (in Tidwell, 2009: 416)

Este texto resume um conjunto de boas práticas para a redação de Blogs. Surge em resposta ao desafio do Prof. Hélder Caixinha, no âmbito das aulas de  Projeto, e em resposta às necessidades de outras disciplinas como Multimédia Editorial, onde parte do trabalho dos alunos passa por criar um blog de documentação de desenvolvimento e de acompanhamento dos projetos.

Por uma questão de conveniência, este resumo está organizado nos seguintes temas:

Deve ser usado como um manual de linhas orientadoras para a redação e manutenção de um Blog. Não como um manual de regras obrigatórias.

Cada autor deve refletir sobre estes princípios e adapta-los da melhor forma ao seu Blog.

Uma vez que se trata de um resumo, os assuntos podem ser consultados de forma mais completa e ilustrada nas referências fornecidas. Conhecem outras , ou melhores referências? Deixem-me um comentário.

Conteúdo

Anatomia de um Blog (About.com)

O conteúdo refere-se às entradas cronológicas (“posts”), páginas de informação estática, ou pequenas secções (como as “sidebars” do Blog).

As entradas devem fornecer o contexto necessário de forma curta. Devem filtrar a informação desnecessária e oferecer hiperligações para informação adicional (fontes originais, textos longos, outras entradas, sites, ou blogs com informação adicional).

Devem procurar uma redação correta, sem erros, com princípio, meio e fim.

Agrupar a informação semelhante em pequenos segmentos, grupos, ou unidades, com uma ou duas ideias por cada.

As entradas, ou secções, devem possuir títulos significativos, uma breve descrição (se possível), data (de redação e de atualização), autor(es), e estar categorizadas com etiquetas e categorias significativas.

Se o texto for longo, podem escrever um resumo prévio, ou dividir em múltiplas entradas.

As entradas mais antigas devem ser atualizadas, editando-as, comentando-as, ou ligando-as às entradas mais recentes, ou a outras fontes de informação (internas, ou externas).

Estrutura

Exemplo de um Feedreader (NetNewsWire)

A estrutura refere-se ao tipo de informação, a sua marcação, as suas funções e o uso pretendido (interação) no Blog.

Devem usar estilos (HTML) “standard” para hierarquizar a o texto (H1, H2, Parágrafo, etc.). Bem como estruturas formais de texto tradicional (itálicos para destacar, listas de balas, numeradas, etc.).

A formatação visual (tamanho, cor, etc) deve ficar a cargo do tema/CSS do Blog, ou do Feedreader do utilizador final.

Deve-se fornecer uma opção de pesquisa dentro do próprio Blog.

As hiperligações para os conteúdos devem ser simples, evitando alterações, ou ligações quebradas. Tentar fornecer as hiperligações por extenso, sempre que possível.

Verificar como os conteúdos estão a ser indexados nos motores de busca e corrigir a meta-informação de acordo.

Ritmo e edição

Exemplo de painel de objetivos editoriais (WordPress.com)

Um autor de um blog é um como um editor tradicional. Deve possuir uma agenda de edição e uma estratégia de publicação.

Deve-se optar por um mínimo de um entrada semanal, e um máximo de uma entrada diária. Publicar de forma regular, agendando as entradas, ou criando uma agenda de entradas temáticas, se possível.

Evitar o “overshare”.

Agilizar o ritmo e interligação das entradas do Blog com outros meios de publicação e partilha social como o Twitter, ou o Facebook, como formas complementares de publicação e atualização de conteúdos mais curtos e imediatos. Ou de conteúdos de outra natureza, como os canais de Vídeo, ou Podcasts.

Design e ilustração

Seleção de temas visuais (WordPress.com)

O Blog deve ter um tema visual apelativo, relacionado com o conteúdo do Blog, sem perder de vista a funcionalidade (design funcional, ou minimalista).

Sempre que possível, devem ilustrar as entradas com imagens, vídeos, ou outro elemento multimédia, mantendo a dimensão (Kb) da página baixa.

Créditos e hiperligações

Exemplo de licenciamento disponível (Creative Commons)

Todos os materiais utilizados (textos, imagens, vídeos, etc) devem ser identificados com legendas, referências no texto e creditados corretamente.

O Blog deve conter a informação de “copyright” sobre o conteúdo próprio.

A privacidade dos autores deve ser protegida, mas ao mesmo tempo fornecer o máximo de informação sobre o Blog, sobre os autores, ou sobre o conteúdo, de forma a obter credibilidade (tipicamente, na página “About”).

Deve-se fornecer uma forma de contacto (direto) com o(s) autor(es).

Deve-se fornecer formas de ligação social (“feeds”, subscrições por email, etc.) de forma a que seja fácil os leitores tornarem-se “seguidores”.

Aproveitar a natureza de rede da Web para embutir conteúdo no Blog, ou estabelecer hiperligações nos conteúdos utilizados, abreviando as entradas e fornecendo informação em profundidade.

Estabelecer um Blogroll que vos ajuda a identificar e a serem identificados pelos vossos pares.

Feedback e estatísticas

Exemplo de estatísticas fornecidas pelo WordPress.com

Os Blogs possuem vários mecanismos de validação social visível e invisível para os leitores. Enquanto autores, estes mecanismos são fundamentais para entender e fomentar a leitura do Blog.

Mecanismos de validação e partilha social

Encorajar a dinamização e participação no Blog (de amigos, colegas, docentes, orientadores, etc.), através da disponibilização e manutenção dos comentários, formas de avaliação (votação, “ratings”, “likes”, etc.) e de mecanismos de partilha social online.

Dispor de uma medição estatística que permita recolher dados sobre os utilizadores, sobre o conteúdo consultado e sobre a navegação. Melhorar o Blog com esta informação.

Referências

Referências adicionais "obrigatórias"

BARBOSA, E.; GRANADO, A. – Weblogs: Diário de bordo. Porto: Porto Editora, 2004.  ISBN 972-0-45252-8.

BLOOD, R. – The Weblog Handbook: Pratical advice on creating and maintaining your blog. Cambridge: Perseus Books, 2002.  ISBN 0-7382-0756-X.

BORDEAU, J. – Blogging For Web Designers: Editorial Calendars and Style Guides [em linha]. Smashing Magazine. [Consult. 2012-02-08]. Disponível na Internet: <URL: http://www.smashingmagazine.com/2010/08/30/the-importance-of-consistency-using-editorial-calendars-and-style-guides>.

CRUMLISH, C.; MALONE, E. – Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience. Sebastopol: O’Reilly Media, 2009.  ISBN 978-0596154929. Disponível na Internet: <URL: http://www.designingsocialinterfaces.com>.

FRANCO, G. – Como escrever para a Web [em linha]. S. l.: Knights Center fo Journalism, s. d. [Consult. 2012-02-08]. Disponível na Internet: <URL: http://knightcenter.utexas.edu/ebook/how-write-web>.

TIDWELL, J. – Designing Interfaces: Patterns for Effective Interaction Design. Sebastopol: O’Reilly, 2010.  ISBN 978-1-449-37970-4. Disponível na Internet: <URL: http://designinginterfaces.com>.

Bolsa de investigação SEDUCE

20120128-131052.jpg

À semelhança do que já anunciei em posts anteriores, o projeto de investigação SEDUCE, no qual estou envolvido, continua à procura de um Designer Multimédia: http://www.eracareers.pt/opportunities/index.aspx?task=global&jobId=27649&lang=pt

O candidato deve ter pelo menos a formação base correspondente ao 1º ciclo (licenciatura) na área das Tecnologias da Comunicação, ou em áreas afins, ou frequência do 2º ciclo (mestrado) em Comunicação Multimédia, ou em áreas afins, com média igual ou superior a 14 valores. O candidato deverá possuir competências ao nível de programação em tecnologias Web, design de interacção e design gráfico, complementarmente será fundamental possuir formação ao nível de métodos e técnicas para ciências sociais, bem como experiência no ensino das TIC com o público-alvo sénior.

Tal como já tive oportunidade de discutir com colegas e amigos, os requisitos são bastante específicos, mas não se deixem intimidar. O projeto está à procura de um designer motivado, que tenha vontade de se integrar num projeto de investigação intimamente ligado ao tecido social (instituições de apoio aos seniores) de Aveiro. Acima de tudo, alguém que consiga responder às necessidades técnicas, cientificas e académicas do desenho e implementação de um portal online.

Prazo de candidatura e forma de apresentação das candidaturas: O concurso encontra-se aberto no período de 18 de Janeiro de 2012 a 31 de Janeiro de 2012.
As candidaturas deverão ser entregues por correio electrónico para aiv@ua.pt indicando no assunto “candidatura a bolsa BI – PTDC/CCI-COM/111711/2009”, anexando:

- Carta de motivação com a referência da bolsa BIC – PTDC/CCI-COM/111711/2009

- Curriculum Vitae;
-  Certificado de habilitações;
-  Cópia do BI+Cartão de contribuinte/Cartão de Cidadão + NIB;

Dave Crossland @ Aveiro

Cartaz de divulgação @ DeCA

O Dave Crossland está em Portugal para ministrar um par de conferências e workshops nas Caldas da Rainha (ESAD.CR) e em Aveiro (DeCA). Vai passar no Departamento de Comunicação e Arte (DeCA) na próxima segunda-feira dia 9 de Janeiro para apresentar a conferência “Libre Fonts” às 11:30, e ministrar um workshop de desenho tipográfico “Type Sketching” às 14:30. Ambos irão decorrer na sala do Mestrado de Design (Catacumbas).

A assistência à conferência é livre a todos os interessados.

Workshop de Junho de 2010 @ Hacklaviva

A participação no workshop é livre e gratuita. Mas, como está limitada ao espaço disponível, os interessados devem inscrever-se, enviando-me um email, mencionando o nome, número mecanográfico e curso (alunos da UA). Ou com o nome, ocupação e filiação (se vierem de fora).

O workshop terá uma duração mínima de 2 horas e os participantes devem trazer consigo o seguinte material:
- papel de fotocópia (bastantes folhas);
- um par de lápis de grafite (B+) para esquissar;
- marcadores (pretos) finos para desenhar;
- marcadores de ponta larga (tipo edding) para preencher;

Não é obrigatório, mas pode ser útil trazer também:
- borracha;
- tesoura, ou x-ato;
- fita-cola de papel;
- duas esferográficas de cores diferentes (p. ex.: canetas bic verde e vermelha);
- aparos, pincéis espatulados, ou canetas caligráficas.

Mais informações sobre o Dave Crossland e sobre o workshop:
http://understandingfonts.com/
https://plus.google.com/107256173895795146408/about

Oferta de emprego: Bolsa de Investigação @ UA

Pormenor do cartaz de apresentação do Projeto SEDUCE

Não costumo fazer este tipo de divulgação no blog, mas pareceu-me apropriado face às circunstâncias atuais. Como estou envolvido no projeto, tenho um conhecimento básico sobre os requisitos necessários para a função – a oferta desta bolsa pretende encontrar um Designer Multimédia – programador com fortes competências gráficas, ou designer gráfico com competências fortes de programação (web).

Pessoalmente, acho a oferta bastante atrativa – o ambiente de trabalho do DeCA é porreiro, descontraído (e exigente!), mas para quem gosta de estudar, este é uma excelente oportunidade para investir num currículo de investigação!

Bolsa de Investigação no âmbito do projecto SEDUCE
Até 2 de Dezembro, está aberto concurso para a atribuição de uma Bolsa de Investigação (BI) no âmbito do projecto SEDUCE – utilização da comunicação e da informação mediada tecnologicamente em ecologias web pelo cidadão sénior (PTDC/CCI-COM/111711/2009), financiado por fundos nacionais através da FCT/MCTES (PIDDAC) e co-financiado pelo Fundo Europeu de Desenvolvimento Regional (FEDER) através do COMPETE – Programa Operacional Factores de Competitividade (POFC).

A bolsa terá a duração de 12 meses, com início previsto em 1 de janeiro de 2012.
O concurso encontra-se aberto no período de 17 Novembro de 2011 a 2 de Dezembro de 2011.

Mais informações:

 

Links do dia: Webfonts para que te quero…

Gerador de webfonts e tags css @font-face da Fontsquirrel

Esta semana foi marcada pela minha estreia a configurar e utilizar webfonts sem o Typekit, nem o Google Webfonts. Desta feita, experimentei o serviço de conversão FontSquirrel da Fontspring: http://www.fontsquirrel.com/. Vale a pena. É simples, rápido e muito eficaz. Funciona em Windows, em Mac, em iOS (ainda não experimentei o Symbian, nem o Android, mas tudo indica que sim…)

Mais serviços, plataformas, ou foundries de webfonts online para além da Fontsquirrel, Google e Typekit que aconselho experimentarem:

Mais (ou quase tudo sobre webfonts) aqui: http://webfonts.info/wiki/index.php?title=Main_Page

Pormenor do site FontFont

Já que estamos a falar de fontes e foundries, o novo site do catálogo digital da Fontshop: https://www.fontfont.com/
E experimentem o FontFonter… não há palavras. Um verdadeiro “provar antes de comprar!” Via Dexigner

Adobe Browser Lab

E para testar os sites, que tal a ferramenta da Adobe? Adobe Browser Lab: https://browserlab.adobe.com/ (foi só pena não ter feito render da webfont… parece que a equipa da Adobe ainda vai ter que trabalhar um mais neste produto)

SEDUCE: Bolsa de investigação

Pormenor do cartaz do projecto SEDUCE

O Projeto SEDUCE está à procura de dois bolseiros de investigação com um perfil específico, que costumo chamar New Media Designers, ou Digital Designers. Isto é, Designers com competências Web (publicação online, plataformas digitais e alguma programação), ou um licenciado noutra área como os nossos NTCs que têm fortes competências tecnológicas (Programação, Web, Mobile, Animação, AV, etc…) bem como uma sólida competência gráfica.

É um projeto de investigação financiado, em curso no Departamento de Comunicação e Arte da Universidade de Aveiro.  Segundo a investigadora principal do projeto (que também minha orientadora de doutoramento), o SEDUCE tem como objetivo principal avaliar o impacto dos efeitos não cognitivos mediante o uso das TIC entre cidadãos seniores em contexto de comunidade social online e construir uma comunidade social online com a participação do cidadão sénior: http://www.eracareers.pt/opportunities/index.aspx?task=global&jobId=22481&lang=pt

Confesso que até há bem pouco tempo não estava sensibilizado para esta área de investigação. Mas, tal como tivemos oportunidade de ouvir ontem pela voz de Pedro Lima na Prova Oral do Fernando Alvim, esta é um dos grandes motores de investigação científica e de aplicação tecnológica dos próximos anos. À medida que a população tende a envelhecer, o cidadão sénior representa um papel com cada vez mais importância na sociedade…

Por isso, não só é um projeto interessante, mas como também representa um investimento numa área de atividade profissional em crescimento. Do que estão à espera? Passo a transcrever a informação oficial divulgada:

Bolsa de Investigação (BI)

Até 4 de Abril, está aberto concurso para a atribuição de uma Bolsa de Investigação (BI) no âmbito do projecto SEDUCE – utilização da comunicação e da informação mediada tecnologicamente em ecologias web pelo cidadão sénior (PTDC/CCI-COM/111711/2009), financiado por fundos nacionais através da FCT/MCTES (PIDDAC) e co-financiado pelo Fundo Europeu de Desenvolvimento Regional (FEDER) através do COMPETE – Programa Operacional Factores de Competitividade (POFC). A bolsa terá a duração de 12 meses, com início previsto em 1 de Maio de 2011. O concurso encontra-se aberto no período de 21 de Março de 2011 a 4 de Abril de 2011. Mais informações: http://uaonline.ua.pt/detail.asp?lg=pt&c=20135&ct=48

Bolsa de Investigação Cientifica (BIC)

Até 4 de Abril, encontra-se aberto concurso para a atribuição de uma Bolsa de Investigação Cientifica (BIC) no âmbito do projecto SEDUCE – utilização da comunicação e da informação mediada tecnologicamente em ecologias web pelo cidadão sénior (PTDC/CCI-COM/111711/2009), financiado por fundos nacionais através da FCT/MCTES (PIDDAC) e co-financiado pelo Fundo Europeu de Desenvolvimento Regional (FEDER), através do COMPETE – Programa Operacional Factores de Competitividade (POFC). A bolsa terá a duração de 12 meses, com início previsto em 1 de Maio de 2011. O concurso encontra-se aberto no período de 21 de Março de 2011 a 4 de Abril de 2011. Mais informações: http://uaonline.ua.pt/detail.asp?lg=pt&c=20138&ct=48

By e Bliss na UA

Deixo aqui, muito rapidamente, um convite estendido pela Prof. Olinda Martins:

Na próxima sexta-feira, 18 de Março pelas 10h30 vai decorrer uma conferência no âmbito da UC de Gestão de Designno anfiteatro C.2.22 da Universidade de Aveiro (CIFOP, Edifício 5 do mapa do campus).

A conferência contará com a presença de dois convidados, André Gil, Managing Partner@BlissAplications (www.blissapplications.com) e Luís Oliveira e Silva, Director Criativo do Departamento Online da By (www.bycom.pt).

Pretende-se que esta conferência seja não só de partilha da experiência profissional por parte dos convidados, mas também uma oportunidade de contacto com profissionais da área da Gestão do Design e das novas tecnologias.

Por considerar que o tema será interessante e pertinente para todos os alunos, convido-vos a estarem presente com os vossos alunos.

Web Stencil Kit

UI Stencils, Web Stencil Kit

Há uns dias escrevi sobre a prenda perfeita para um tipófilo. Pois bem, aqui fica a prenda (geek) perfeita para um webdesigner. Definitivamente, quero um destes: http://www.uistencils.com/products/website-stencil-kit

(visto na última Computer Arts Projects, nº 144)

Follow

Get every new post delivered to your Inbox.

Join 129 other followers

%d bloggers like this: