História do Sítio carlosmota.eu
Introdução
Tudo começou no dia 11-12-2004, pois foi esta a data de criação do ficheiro do Word onde comecei a escrever as ideias iniciais para a elaboração deste projecto.
Quanto ao domínio carlosmota.eu, este está registado desde 31-08-2007, portanto foi por esta altura que comecei a pensar mais seriamente neste projecto.
Isto significa que entre a ideia inicial e o lançamento deste sítio passaram mais de 9 anos.
Mas se considerarmos a data de registo do domínio a 31-08-2007, então passaram apenas pouco mais de 6 anitos entre o momento da génese do projecto e o seu lançamento efectivo, portanto até nem foi mui... (suspiro)
Durante este período existiu apenas uma página simples com a informação mínima neste endereço, onde constava pouco mais do que o contacto de e-mail, e nem sequer divulguei o sítio.
Apesar de ir actualizando ao longo dos anos o referido documento do Word com ideias que ia tendo e ter efectuado muita pesquisa na Internet para este projecto antes de iniciar a sua produção propriamente dita, o trabalho no Photoshop começou a 25-04-2012 e a produção do sítio no Dreamweaver começou a 11-06-2012.
Registei também o domínio carlosmota.pt em 01-05-2012, portanto podemos considerar Maio de 2012 como a data em que arregacei as mangas da camisa e comecei efectivamente a suar as estopinhas com este projecto.
Assim, bem vistas as coisas, só demorei 22 meses na produção efectiva deste projecto e se tivesse sido tempo integral de trabalho não teria passado de 12 meses, o que não é mui... (enorme suspiro)
Este intróito serviu fundamentalmente para dizer que este projecto deu-me uma enorme trabalheira.
Brainstorming
Como surgiu a ideia do conceito para este sítio?
Num momento de inspiração genial! Ficava bonito responder assim, mas na realidade só o poderia ser se considerassemos que o momento se estendeu por 9 anos. Faço minhas as palavras de Thomas Edison: "o génio são 10% de inspiração e 90% de transpiração".
O Brainstorming não ocorreu apenas num momento, mas ao longo de um período longo de tempo, principalmente nos últimos dois anos, quando me comecei a concentrar mais neste projecto.
Ainda assim, posso enunciar um momento Eureka, em que várias dúvidas relativas á escolha do estilo e elementos do design, e de qual o caminho a seguir, encontraram uma resposta, quando me surgiu a ideia do conceito principal que podemos associar ao sítio: o sítio/cartão online deveria ser igual ao cartão de visita em papel.
Conceito
Este sítio Web é do estilo Cartão de Visita e o cartão online é igual ao cartão em papel, mas o cartão digital mostra vários menus com conteúdos e funcionalidades, que no cartão em papel (ainda) não são possíveis de exibir.
Este tipo de design está relacionado com um conceito de nome estranho, designado por Skeuomorfismo (Skeuomorph ou Skeuomorphism em Inglês).
Penso ter conseguido um sítio criativo e original, pois não conheço nenhum igual, mas em milhões de sítios existentes na Web é possível que me tenha escapado um ou outro.
Conheço uma dezena de sítios muito bons do estilo Cartão de Visita, mas nenhum em que a imagem do cartão online seja igual á do cartão em papel.
Adoro o baixo-relevo da impressão tipográfica no cartão em papel e procurei reproduzi-lo no cartão online, mas foi um enorme desafio criar esse efeito online, pois a opção monocromática (preto e branco) do meu tema principal, tornou muito difícil criar o efeito de impressão tipográfica.
Além disso fui criando simultaneamente o cartão online e o cartão em papel, pois não podia finalizar o design do cartão em papel e imprimir os cartões sem terminar o cartão digital, de modo a ter a certeza que conseguiria que os dois ficassem iguais.
Para complicar ainda mais as coisas eu decidira que iria usar o menor número possível de imagens, substituindo-as por ícones de texto e procurando criar o cartão online essencialmente recorrendo a HTML5 e CSS3. Portanto foi necessário converter quase todo o trabalho de Photoshop para código, e as CSS3 ainda não possuem a flexibilidade do Photoshop.
Método de Trabalho
Foram precisas centenas de horas para criar este sítio, desde a primeira descrição conceptual, até á sua finalização. Os documentos do Word em que fui elaborando a descrição do projecto tiveram 460 revisões e um tempo total de edição de 177h. Isto apenas relativo á descrição do projecto, sem ter qualquer linha de HTML escrita.
O trabalho propriamente dito de criação do sítio é de várias centenas de horas e contabilizar todo o tempo com exactidão é impossível, pois muita reflexão sobre ele e algumas ideias surgiram-me em tempo não-laboral, ou seja, no tempo em que deveria estar a fazer outras coisas, como por exemplo... dormir. Dito de outro modo, significa que perdi muitas horas de sono na cama a pensar no projecto, procurando visualizar mentalmente soluções estéticas e funcionais, muito tempo antes de começar a construir o sítio. O momento Eureka que referi anteriormente surgiu-me precisamente numa destas noites. Testei dezenas de soluções diferentes no papel e mentalmente, antes de começar propriamente a construir o sítio.
No mencionado documento do Word descrevi todos os constituintes deste projecto: Descrição Geral, Funcionalidades, Linguagens e Frameworks, Aplicações Web, SEO, Redes Sociais, Trabalho Preliminar, Menus, Design, Pré-lançamento, Lançamento, Pós-lançamento, Objectivos.
Além disso também fui redigindo um Diário pormenorizado das tarefas que ia executando (em que normalmente uma tarefa se dividia em várias outras tarefas mais específicas), dos problemas e soluções encontradas e de novas ideias e funcionalidades que ia decidindo implementar.
Apesar de ter equacionado a hipótese de usar uma aplicação Web de Project Management e outra de Debugging/Issue Tracker para gerir este projecto (e outros no futuro), e de ter inclusive pesquisado, estudado e testado algumas aplicações para o efeito, eu acabei por me manter com o velho e simples doc do Word (um documento para a descrição do projecto e outro para o Diário) para o Project Management e com os navegadores (e suas ferramentas) para o Debugging.
Penso que este tipo de aplicações de Project Management e Debugging/Issue Tracker é fundamental para trabalho colaborativo, mas no caso do trabalho a só, o doc vai dando conta do recado, embora no futuro talvez eu venha a usar esse tipo de aplicações.
Photoshop
No Photoshop comecei o trabalho pela criação das imagens de fundo. Pesquisei texturas de mármore e de madeira para usar nos fundos. Mais tarde decidi usar uma imagem de secretária em vez de usar apenas uma textura de madeira e aí a solução foi fotografar uma secretária minha, que eu próprio tinha desenhado e mandado fazer, e que possuo há varios anos.
O conceito de integração dos elementos físicos com os digitais subiu mais um nível com esta opção, pois assim a secretária e o cartão que se vê no sítio online correspondem á imagem da secretária e cartão que uso no mundo real.
Fiz 40 fotografias do tampo da secretária para escolher uma, que ainda assim teve imenso trabalho de Photoshop para a recortar, tratar, testar e aplicar os efeitos que pretendia.
A criação do logótipo que me identifica foi muito demorada, pois estendeu-se por vários meses e analisei dezenas de fotos, tendo testado no Photoshop 12 fotos de períodos diferentes. A primeira foto que testei resultou bem, pois a iluminação da fotografia permitia criar o efeito que eu pretendia no logótipo. O problema dessa foto é que já tinha cerca de 7 anos e eu queria usar uma foto mais recente. Então iniciei uma pesquisa nas minhas fotos para encontrar uma que pudesse proporcionar o mesmo efeito, mas que fosse mais recente (de preferência de 2012). Nenhuma serviu e então fiz novas fotos de retrato apenas para este fim, mas verifiquei que a iluminação da foto tinha de ser muito precisa para conseguir o efeito que pretendia, por isso esta primeira série de fotos também não serviu. Mais tarde efectuei uma nova série de fotos e fui ajustando gradualmente a iluminação artificial até descobrir o ângulo exacto da luz que se assemelhava ao da primeira foto testada. Mas nessa primeira foto a luz era natural e resultava melhor, além de que verifiquei que depois de rapar o cabelo (o que aconteceu nesta série de fotos) já não era possível conseguir o efeito que pretendia, pois ao aplicar o efeito no Photoshop a área da cabeça desaparecia. Por isso mais tarde efectuei uma nova série de retratos com luz natural e ocorreu-me usar uma boina para poder definir o contorno da cabeça. A escolha recaiu numa boina basca que eu já possuia há algum tempo. Nesta última série, que se prolongou por 2 dias, efectuei 56 fotos, tendo sido a penúltima destas a eleita para usar na criação do logótipo, pois era a que reunia as melhores condições de luz (luminosidade, contraste, ângulo de incidência) e expressão facial. Há um pormenor curioso relativamente á data em que foi tirada esta foto que serviu de base ao logótipo: efectuei a foto no dia 12-12-12.
Concebi o design do cartão em papel e do cartão online também no Photoshop. Primeiro concentrei-me no cartão em papel e depois de uma longa pesquisa e análise decidi que o cartão em papel seria do tipo impressão tipográfica a uma cor (preto), com aplicação de baixo-relevo na zona de impressão, no formato 85x55mm, em papel 100% algodão e com cantos arredondados.
O cartão digital teria agora de procurar mimetizar a forma, cor, textura e efeito deste cartão em papel, que concebi no Photoshop. Mas antes de dar como completamente terminado o design do cartão no Photoshop decidi criá-lo em HTML5 e CSS3, para ter a certeza que conseguia reproduzir todo o efeito visual em código e poder no fim voltar ao Photoshop e efectuar alguns eventuais ajustes e então dá-lo como terminado.
Um dos maiores desafios foi procurar reproduzir no cartão digital o baixo-relevo da impressão tipográfica do cartão em papel, pois criar esse efeito digitalmente é muito difícil quando uso apenas preto sobre a textura branca do papel 100% algodão.
Ainda há que ressalvar um pormenor importante - eu tive de criar dois cartões digitais: um que serviu de base á criação do cartão online e outro para efectuar a impressão tipográfica dos cartões em papel. No primeiro tive de criar efeitos de relevo que no segundo não eram necessários, pois o objectivo era a impressão, onde o papel e a própria impressão originavam esses efeitos. Além disso o tamanho e a resolução também é diferente.
Por estranho que pareça foi muito difícil encontrar uma boa textura de papel 100% algodão para usar como fundo do cartão online. As fotos de cartão em papel 100% algodão normalmente não tinham área branca suficiente para as poder usar e o efeito da textura não era o melhor. Depois de uma longa pesquisa lá consegui encontrar uma textura que me satisfez, mas no fim acabei por usar uma foto minha do papel 100% algodão que entretanto comprei.
Antes de me surgir a ideia do conceito do cartão online ser igual ao cartão em papel, eu planeava criar um cartão online em plástico e já tinha uma descrição avançada deste design. Não querendo deitar completamente fora este trabalho e como eu tinha decidido desde o início que o conteúdo textual do sítio existiria em 3 línguas, decidi então que o design também teria 3 temas á escolha, sendo o tema principal em papel, mas tendo também á disposição os temas alternativos em plástico e translúcido. Portanto pesquisei também texturas de plástico para usar nestes temas alternativos, embora no fim eu tenha criado a própria textura de plástico no Photoshop.
Produção
A partir daqui passei para o desenvolvimento do sítio propriamente dito, tendo de converter para código HTML5 e CSS3 todo o design criado no Photoshop.
Eu decidira não usar Flash e usar o menor número possível de imagens, criando as funcionalidades com Javascript e procurando substituir ícones de ficheiros de imagem por ícones de imagem de tipo de letra (dingbats) e criar o cartão online essencialmente recorrendo a HTML5 e CSS3.
Consegui este objectivo pois uso muito poucos ficheiros de imagem no sítio, embora use bastantes imagens, nomeadamente nos ícones.
Tal como aconteceu no Photoshop, um dos maiores desafios foi procurar reproduzir no cartão online o baixo-relevo da impressão tipográfica do cartão em papel. Foram necessárias dezenas de testes com CSS3 para encontrar os valores exactos para as propriedades de CSS que se aproximavam mais dos efeitos criados no Photoshop. Para conseguir efeitos o mais realistas possíveis, tive de fazer ajustamentos ao pixel, chegando em alguns casos ao meio pixel (renderização de subpixeis).
Tive também de pesquisar longamente para encontrar os componentes de javascript que me permitissem obter o dinamismo e funcionalidades que idealizei, e tive de procurar componentes alternativos a meio do percurso, devido a incompatibilidades com alguns navegadores (principalmente com o IE), além de ter de os adaptar ao que pretendia e efectuar algumas correcções de bugs.
A criação dos dois temas alternativos ao tema principal também implicou bastante pesquisa e sobretudo muitos testes até encontrar os efeitos de materiais e cores que pretendia, num resultado com equilíbrio entre os 3 temas (Papel, Plástico, Translúcido).
Além destes 3 temas existe um 4º tema (que não está disponível na barra dos temas) designado por 'Transparente'. Na janela 'Ajuda do Sítio' informo sobre este tema, mas apenas aqui forneço a localização da hiperligação que activa este tema: para activar o tema 'Transparente' basta clicar no meu nome existente no fundo do cartão, na indicação de copyright.
Procurei que este sítio pudesse ser visualizado em diferentes dispositivos de tamanhos variados, sem perder qualidade ou legibilidade, desde um smartphone até um monitor de secretária, passando pelos tablets. A nível de resoluções isto significa abranger desde as resoluções mais comuns de um smartphone - 320x480px, até ao Full HD - 1920x1080px, ou mesmo resoluções superiores como 2048x1536px.
E como a tendência tecnológica é a de um aumento contínuo das resoluções - até várias vezes Full HD (já existem protótipos de sistemas vídeo com resoluções de 8xfull-HD, ou seja 7680x4320px, designada sinteticamente por 8k4k) - criar designs para o futuro significa utilizar técnicas que respondam a este cenário.
É aqui que entra o conceito de Responsive Design, que adapta o layout a diferentes plataformas e resoluções, recorrendo a CSS3 e a um design flexível. A aplicação do conceito de Responsive Design não é apenas uma questão de escala, mas também de legibilidade, de peso relativo de imagens e vídeo (volume de tráfego e velocidade), e de flexibilidade do layout para se ajustar ás limitações da janela do navegador ou do dispositivo usado, mas mantendo a mesma identidade visual.
A tradução de todo o texto do sítio nas 3 línguas que disponibilizei (Inglês, Espanhol, Português) foi sobretudo um trabalho de paciência. Ao proporcionar aos visitantes a leitura nestas 3 línguas significa que cerca de 25% da população mundial (e cerca de 40% da população Internauta) poderão ler directamente o conteúdo do meu sítio, sem necessitarem das traduções automáticas que ainda deixam muito a desejar.
Mesmo a partir do momento em que estava tudo definido de qual seria o layout e aspecto visual de todo o sítio, quais as funcionalidades que teria, e de ter encontrado as soluções para concretizar o que pretendia, ainda assim existiram muitas alterações e melhorias até chegar ao produto final, que foi fruto de uma longa maturação e depuração.