Celso Bessa (sɛwsʊ bɛ:sa)

Prefiro construir pontes a muros

webdesign

ComicA11y: An accessible and inclusive web comics experiment

por

This is so cool. An accessible comics library experiment using basic web technology.

ComicA11y is an experiment that aims to achieve an all-inclusive online comic reading experience. Because comics should be universal.

https://comica11y.humaan.com/
  • A webpages with comics with closed captions. Characters are highlighted and descriptions appear below.
  • comic panels in vertical orientation
  • Uma página da web com quadrinhos em um modo de alto contraste em preto e branco

Created by Paul Spencer, aside the more “standard” comic script format, it allows navigation using tab, reading by using screen readers, high contrast mode, change the strip to vertical orientation, translations, text selection and even closed caption.

Mapas na nova versão do Fotografias Aéreas

por

Desculpem faltar com a modéstia, mas preciso dizer que acho muito legal o trabalho que a 2Aces fez nesta nova versão do banco de imagens Fotografias Aéreas onde você vê a foto aérea e o mapa (satélite) do local onde foi feita logo ali do lado.

Foto aérea e mapa via satélite do Forte de São Marcelo no site Fotografias Aéreas
Foto aérea e mapa via satélite do Forte de São Marcelo no site Fotografias Aéreas

De webdesigneres e desenvolvedores, arquitetos e pedreiros

por

Wireframe. De webdesigneres e desenvolvedores, arquitetos e pedreiros
Wireframe. De webdesigneres e desenvolvedores, arquitetos e pedreiros
Me incomodam profissionais criativos que não conhecem os processos produtivos e, principalmente, o suporte de suas criações. Sendo mais específico, webdesigner que tem medo de código HTML ou CSS.

Ontem abrimos uma vaga na 2ACES: webdesigner com tempero de desenvolvedor front-end e um tiquinho de carimbó. Teve gente que achou que era só uma piadinha com um vídeo do Hermes e Renato, mas não é. É uma declaração de valores e também registra algumas das questões mais sensíveis de quem trabalha com web, talvez de qualquer trabalho:

Onde começa e termina as tarefas de um profissional com um cargo específico? Existe um profissional específico, com nome específico para as demandas e atividades que fazemos neste meio? E por aí vai.

E hoje, passeando pelo Google+, vi um post do Diego Eis, do Tableless, que toca justamente no caso do Designer / Desenvolvedor e resolvi dar meus 2 centavos sobre o assunto.

Para facilitar o debate estou generalizando: o Webdesigner faz o visual e diagramação de um site ou serviço, e desenvolvedor front-end pega o que o designer fez e transforma aquilo numa página web, codificando HTML, CSS e Javascript.

Não é exatamente assim, aqui já poderíamos colocar em debate também outros nomes como UX Designer (User eXperience Designer), que seria responsável por pensar toda a experiência do usuário (incluindo o fluxo de uso, organização, etc), back-end developer, etc. Também tem as questões de prazo, processo e estruturas mal ajeitados nas empresas e projetos, mas para o debate andar, vamos deixar desta forma superficial.

Na 2Aces, acreditamos que as fronteiras entre as pessoas e profissões são cada vez mais difusas. Não apenas o nosso trabalho com web, mas trabalhos fora da web, seja numa empresa de tecidos ou uma loja de fotografias.

Aliás, a própria definição do que é dentro ou fora da web é difusa, visto que passamos o tempo todo com uma telinha próxima, fazendo alguma coisa no Facebook, no e-mail, no Paqt, no LinkedIn ou no Podio, entrelaçando vida pessoal e trabalho, profissões e cargos neste mundo líquido.

Então, como disse, acho incômodo qualquer criativo não conhecer os processos produtivos e, principalmente, entender o suporte de suas criações e toda vez que ouço/leio esta discussão, eu penso casos similares e fora do webdesign:

  1. Existe designer gráfico (e diria que é um número bem grande) que não se importa em fechar arquivo. E não entender o processo de impressão é um pecado para um designer gráfico da era pré-digital (olha eu entregando a idade). Mesmo os que não faziam toda a arte-final e produção gráfica do past up no dia à dia se envolvia o suficiente e tinham o conhecimento de como fazer. Faz parte do aprendizado.
  2. Um arquiteto, em tese, não precisa saber engenharia tampouco como assentar tijolo, telhas, pintar paredes, colocar esquadrias, etc. Mas todo arquiteto decente tem conhecimento razoável do processo, muitas vezes, acompanhando de perto estes outros dois estágios do processo e desenvolveu suas habilidades com estudos práticos análogos.
  3. A experiência prática (ou entendimento profundo) com fotos feitas em filmes e especialmente do processo de revelação e ampliação com químicos em laboratórios frequentemente leva à trabalhos melhores na fotografia digital. Até o uso de filtros de correção e camadas no Photoshop ganha outra dimensão quando se tem experiência com fotografia “analógica” e revelação de filmes.
  4. A melhor aula que tive em Design Gráfico foi esculpir argila. Mesmo não tendo esculpido nada de bonito, me deu uma noção de luz e sombras e volume/tridimensionalidade que foi muito útil fazendo ilustrações e outras coisas no computador.

Ter um entendimento prático do suporte, do meio e dos processos leva não só a uma melhor compreensão das restrições, mas também o entendimento necessário para vislumbrar mais e melhores possibilidades, fazer todo mundo perder menos tempo na execução e entregar um trabalho mais bem-feito.

Por conta disto, considero sim ser parte do trabalho do pintor entender as diferenças de como a tela ou o tecido absorvem diferentes tipos de tinta. É do escultor estudar a diferença entre madeiras, mármore, resina odontológica (já atendi uma escultura que usa em suas obras!). É parte do trabalho do designer de embalagens entender os diferentes processos e materiais. Deve ser parte do trabalho do designer web entender o processo e ferramentas front-end. Isto quando não souber, de fato fazer.

E você, o que acha?

WordPress 10 anos: 10 temas/templates de WordPress

por

Selo Especial 10 anos de WordPress
10 anos de WordPress

Este post é parte da série WordPress 10 anos, composta de 10 posts que serão publicados ao longo do dia, homenageando os 10 anos de lançamento do revolucionário gerenciador de blog e de conteúdo para sites:

Os temas, ou templates, estão para o visual do WordPress como os plugins estão para as funcionalidades e são os principais elementos de diferenciação entre sites e blogs, além do conteúdo.

Um dica que tenho é: pense no visual apenas depois que pensar no que o seu blog tem a dizer e no como. Se você escreve bastante, talvez o seu tema não precise ter galerias elaborados, já se você quer mostrar seu portifólio, um tema com imagens pode ser mais indicado. Mas, mesmo que seja um fotógrafo, pense em como pretende apresentar seu trabalho e nunca deixe de ter páginas individuais para suas imagens. Assim, elas podem ser linkadas direto.

Além disso, tenha um pouco de desapego e pense no seu usuário: o tema oferece uma forma fácil de achar conteúdos que ELE/A procura, e não apenas o que você quer mostrar? Ele se move facilmente entre as seções, tem busca?

Outro ponto importante é performance. É comum encontrar temas bonitos e cheios de firulas que enchem os olhos, mas que deixam o site lento. Problema que aumenta proporcionalmente à quantidade de plugins que você instala.

Dito isto, vamos à lista.

Selecionei 2 temas de 5 tipos básicos possíveis: blog tradicional / pessoal, revista, e-commerce, portfólio (para fotógrafos, ilustradores e designers) e profissional/corporativo, todos responsivos (ou seja, se adaptam ao tamanho de tela que você usa, inclusive tablets e celulares).

9 dos 10 temas são temas premium e pagos da Woothemes ou da Theme Forest, reconhecidos por sua qualidade e que oferecem um nível melhor de suporte. A única excessão é o excelente tema Twenty Twelve, gratuito, que vem com a versão atual do WordPress e é criado pela WordPress Foundation.

Temas WordPress – Blog tradicional ou pessoal

Twenty Twelve

Os temas básicos que já vêm instalado com WordPress são tradicionalmente versáteis e muito bem diagramados e programados, já que servem para mostrar as funcionalidades e possibilidades da plataforma. Desde 2010, mudam o template anualmente, batizando com o ano em questão, como Twenty Ten, Twenty Eleven. E o mais recente é o de 2012, Twenty Twelve.

Wordpress 10 anos - 10 temas/templates de WordPress: Twenty Twelve.
Download do tema Twenty Twelve: clique aqui

Basic

Um tema elegante e funcional, com tipografia e diagramação clara e confortável. Excelente para quem gosta de escrever.

Wordpress 10 anos - 10 temas/templates de WordPress: Basic
Download do tema Basic: clique aqui

Temas WordPress – Revistas

Compasso

Um tema elegante e moderno, com funcionalidades com diagramação em grid, clareza, sistema de pontuação dos posts (1 a 5 estrelas), diversas opções de esquema de cores e lay-outs.

Wordpress 10 anos - 10 temas/templates de WordPress: Compasso
Download do tema Compasso: clique aqui

Teamster

Um tema focado em times, para sites com vários colaboradores. Com lay-out equilibrando bem imagens e texto.

Wordpress 10 anos - 10 temas/templates de WordPress: Teamster
Download do tema Teamster: clique aqui

Temas WordPress – E-commerce

Room 09

Diversas funcionalidades bacanas para uma loja: lista de desejos, comparação de produtos, zoom na fotografia do produto e várias outras.

Wordpress 10 anos - 10 temas/templates de WordPress: Room 09
Download do tema Room 09: clique aqui

The Retailer

Elegante sem afetação, tem um carrossel bacana logo na entrada e é otimizada para ser visualizado em iPads e Macbooks com tela retina, de alta resolução.

Wordpress 10 anos - 10 temas/templates de WordPress: The Retailer
Download do tema The Retailer: clique aqui

Temas WordPress Portfólios

Snapcase

Direto ao ponto, Snapcase segue o formato tradicional de blog (posts abaixo de posts), mas com a diferença que dá um senhor às imagens.

Wordpress 10 anos - 10 temas/templates de WordPress: Snapcase
Download do tema Snapcase : clique aqui

Fashion9

Imagens de fundo tem tela cheia, carrossel de imagens efeitos e um lay-out em grid evoca páginas de revistas de moda.

Wordpress 10 anos - 10 temas/templates de WordPress: Fashion 9
Download do tema Fashion9: clique aqui

Temas Negócios e Profissionais

Nine

Um tema para negócios sem complicações e pensado em mostrar os produtos e serviços de uma empresa com elegância.

Wordpress 10 anos - 10 temas/templates de WordPress: Nine
Download do tema Nine: clique aqui

The Professional

Um tema elegante e minimalista, voltado para profissionais independentes e freelancers em aéreas criativas. Sua diagramação é direta ao ponto, destacando o trabalho em grandes imagens.

Wordpress 10 anos - 10 temas/templates de WordPress: The Professional
Download do tema The Professional: clique aqui

Deixe sua opinião

Qual seu tema preferido? Algum que você queira destacar? Deixe sua sugestão nos comentários abaixo.

Para comemorar os 10 anos de WordPress, criei um código promocional que dá 10% de desconto na hospedagem na Dreamhost ( http://bit.ly/goodhost ). Basta usar o código WP10ANOS na formulário de cadastro.
Para comemorar os 10 anos de WordPress, criei um código promocional que dá 10% de desconto na hospedagem na Dreamhost. Basta usar o código WP10ANOS na formulário de cadastro.

Este post é parte da série WordPress 10 anos, composta de 10 posts que serão publicados ao longo do dia, homenageando os 10 anos de lançamento do revolucionário gerenciador de blog e de conteúdo para sites: