PALAVRAS-CHAVE Código, tecnologias, web

126 DESIGNA2013 - INTERFACE - INTERNATIONAL CONFERENCE ON DESIGN RESEARCH - UNIVERSIDADE DA BEIRA INTERIOR

A apresentação foi dividida em três partes: na primeira foi feita uma análise do cenário atual e identificação do problema, seguida de exemplos práticos terminando na conclusão. Aquando da apresentação os exemplos de código apresentados corriam diretamente no documento de forma a mostrar o dinamismo das linguagens web.

INTRODUÇÃO

Na apresentação do trabalho é feita, através de um gráfico, uma analogia entre os mundos criativo e técnico. Denota ‐se que alguém dedicado a programar módulos de Node.js dificilmente estará familiarizado com os princípios de

design de Dieter Rams.

Sendo que o problema exposto é a brecha entre o digital e a criatividade

as linguagens de marcação surgem como uma solução que permite ao utilizador criar provas de conceito interativas das suas ideias.

Embora a tecnologia esteja simplificada é necessário planear bem o objetivo, forma e resultado do que se pretende. Para contextualizar melhor esta ideia foi partilhada uma história de Mike Evangelist cuja empresa foi comprada pela Apple para fazer o desenvolvimento do IDVD, que é um programa de gravação de ficheiros para os Macintosh. Na primeira reunião os empregados da empresa de design apareceram com diversos esboços e wireframes para explicar o funcionamento e estética do programa, Steve Jobs simplesmente ignorou a papelada. Dirigiu- se a um quadro branco onde desenhou um retângulo e explicou que o utilizador arrasta os ficheiros para dentro deste quadrado. Aí, surge um botão onde o utilizador clica e grava os ficheiros. O Design de praticamente qualquer produto tem que ser funcional e focado para o utilizador pois a Internet encontra ‐se cada vez mais em toda a parte: desde os telemóveis, passando pelos televisores até à realidade aumentada. Pelo que é importante pensar primeiro na função e interface de uma solução, responder ao problema e posteriormente criar o conceito gráfico e elaborar a interface.

DESIGNA2013 - PROCEEDINGS - CÓDIGO PARA CRIATIVOS 127

DESENVOLVIMENTO

Um projeto web é normalmente constituído por três linguagens: o HTML estrutura o documento, o CSS formata e personaliza os elementos e o Jquery permite a interatividade e manipulação dos mesmos. As três são as tecnologias base e podem ser desenvolvidas em diferentes IDEs como o Dreamweaver ou TextMate. Começando pelo HTML, uma das características da atual evolução para a Internet três ou Semântica passa pelo facto de os computadores interpretarem o sentido e conteúdo dos documentos disponibilizados na Rede. Estas novas normas sugerem que os documentos sejam estruturados usando tags ou marcadores que para além de marcarem o início de um novo elemento, indicam também qual é a sua categoria: por exemplo se é um menu, cabeçalho ou rodapé. Desta forma a Internet irá conseguir processar melhor o documento e torná- lo mais humanamente

acessível.

Antes da evolução para o HTML 5 as alternativas que existiam para colocar um vídeo online seriam usar o programa Flash da Adobe ou outros plugins. Atualmente não são precisos mais do que três linhas de código para um vídeo correr diretamente no documento. A agilização deste processo veio dar origem a novas abordagens e estilos de sites mais dinâmicos e interativos.

Convém perceber que as novas tecnologias web não são uma forma diferente de fazer sites, mas antes novas ferramentas que permitem incidir mais sobre o conceito, imagem e interatividade dos projetos. Uma das novidades do HTML 5 é a possibilidade de gerar elementos dinâmicos que correm diretamente no browser como widgets ou aplicações. Existe o Canvas que funciona numa base de pixel a pixel e no qual a interação é feita através de Javascript. O WebGL, disponível a partir do Canvas, permite usar diretamente a placa gráfica do computador conseguindo importar modelos 3D para o documento fazendo- ‐os render em tempo real. Apesar de serem elementos que exigem algum código existem cada vez mais frameworks que agilizam a parte técnica facilitando o trabalho ao designer.

128 DESIGNA2013 - INTERFACE - INTERNATIONAL CONFERENCE ON DESIGN RESEARCH - UNIVERSIDADE DA BEIRA INTERIOR

As CSS ou folhas de estilo servem para atribuir características visuais aos elementos do documento. A evolução para o CSS3 veio permitir novos modos de seleção e propriedades visuais como caixas redondas, fundos transparentes e animações. Estas características já podiam de certa forma ser usadas ou simuladas. Contudo agora tornam ‐se nativas do browser permitindo um melhor desempenho e facilitando a sua implementação.

Nas versões anteriores do CSS os designers eram praticamente obrigados a usar fontes que fossem seguras para a web, ou seja, fontes como a Arial ou Verdana uma vez que estas são fontes que existem por defeito na grande maioria das máquinas. Atualmente é possível carregar fontes que estejam alojadas local ou remotamente usando o marcador font- ‐face. Esta nova propriedade veio dar maior liberdade aos designers, embora seja necessário escolher bem a fonte, ter em conta o kerning e a consciência que um ficheiro externo acaba por sobrecarregar os recursos de rede. A Internet começa cada vez mais a fazer parte de diferentes dispositivos e de acordo com o site Mobify nenhum tamanho de ecrã tem mais de 20% de quota de mercado. Pelo que para além de um site ter que ser adaptativo tem em primeiro lugar que detetar qual o dispositivo que o utilizador está a usar. A tag media‐queries permite‐nos definir regras de acordo com o tamanho do ecrã do dispositivo. O Jquery é uma biblioteca baseada em Javascript que agiliza a

manipulação dos elementos no documento, permite definir animações e simplifica alguns processos. Ao contrário de outras tecnologias o Jquery não é suportado nativamente pelos browsers pelo que é necessário existir uma ligação para o ficheiro que o contém. O conceito base do Jquery é escrever menos e fazer mais. Uma das grandes vantagens em relação ao Flash ou outras tecnologias proprietárias é o fato do Jquery ser de código aberto o que permite ser personalizado até ao mais pequeno detalhe.

Enquanto o Jquery incide na manipulação dos elementos e simplificação das funções o Jquery UI foca-‐se diretamente na interface do utilizador permitindo usar efeitos, widgets e interações fáceis de personalizar. É importante referir que existe a framework Jquery Mobile que usa o mesmo conceito de “fazer mais com menos” facilitado o desenvolvimento de projetos web em diferentes dispositivos móveis.Tendo o site ou app preparados para implementar o serviço Phonegapp permite encapsular um projeto web em ficheiros de configuração para diferentes plataformas móveis com os sistemas operativos IOS, Android, Windows Phone entre outros.

DESIGNA2013 - PROCEEDINGS - CÓDIGO PARA CRIATIVOS 129

EPÍLOGO

Seguindo o método empírico e não pensando apenas na imagem ou características de um resultado mas em toda a sua maneira de funcionar os criativos dotados de alguns conhecimentos técnicos dão respostas a um mercado que procura mais do que soluções limitadas a resultados pré- ‐formatados. Assim que aliando a criatividade à tecnologia, são estes que têm os conhecimentos e capacidades para dar respostas aos novos desafios e ajudar a construir uma internet melhor.

CONCLUSÃO

Praticamente tudo o que existe está ou é referenciado na Internet sendo que esta expansão do mundo real para o binário é baseada em diversas tecnologias que tornam toda a estrutura possível. Parte fundamental da mesma são as linguagens de marcação que processam, formatam e apresentam os dados digitais ao utilizador final. Existindo a tecnologia são necessários profissionais que projetem soluções com uma interface intuitiva, visualmente apelativas e que retornem/processem dados através do menor número de interações possiveis.

Devido à sua capacidade de abstração, planeamento e gestão de recursos os designers são uns dos profissionais indicados para desenvolverem este tipo de soluções informáticas. A ambição deste trabalho foca- ‐se em transmitir alguns conhecimentos e despertar a curiosidade para as linguagens de marcação que são uma nova tela digital para qualquer criativo e que vão ter cada vez mais um papel relevante no dia‐a- dia dos utilizadores.

130 DESIGNA2013 - INTERFACE - INTERNATIONAL CONFERENCE ON DESIGN RESEARCH - UNIVERSIDADE DA BEIRA INTERIOR