OnTheWall
From Labmm2
Distribuição de tarefas
O grupo decidiu que, visto o projecto ser constituído por cinco páginas principais, cada um dos elementos ficaria encarregue de tratar da realização de uma página bem como do respectivo relatório. Posto isto, a distribuição de tarefas fez-se da seguinte forma:
Estrutura geral do site- Raquel Dias
História - Raquel Dias
Materiais - Sandrine Pinto
Graffiters - Adriana Mendes
Gíria - Lara Morgado
Comentar - Alexandra Tavares
Apresentação e contextualização do tema do projecto
Graffiti é o nome dado às inscrições feitas em paredes que podem ser inscrições caligrafadas, um desenho pintado ou gravado sobre um suporte que não é normalmente previsto para esta finalidade. Hoje o Graffiti é considerado uma forma de expressão incluída no âmbito das artes visuais, mais especificamente, da arte urbana onde o artista aproveita os espaços públicos, para criar uma linguagem que intervém na cidade. Apresentar o Graffiti como uma forma de arte urbana. Educar e informar sobre o tema é o nosso principal objectivo num ambiente de entretinimento e interactividade. De modo a despertar a criatividade do utilizador, temos ainda uma pequena aplicação, onde o mesmo poderá criar o seu próprio Graffiti.
Layouts
O nosso ambiente gráfico consiste no intercalar de 4 metáforas: a metáfora rua/cidade, a metáfora placa de direcções/menu, latas de spray/aplicação interactiva e rádio de rua/sons da aplicação. Um de imagem com efeito cartonizado de forma a apelar ao estilo que é o Graffiti.
Estrutura XHTML implementada
Página Gíria
Todo o conteúdo desta página tem uma base comum a todas as outras. As alterações feitas foram apenas realizadas na div “conteúdo”. Foram implementadas divs para cada palavra (imagens), portanto cada palavra/conceito tem uma div associada, assim como, o texto das definições tem outra div.
Página Comentários
Esta página tem todo o seu código base comum e interligado com todas as outras. O código implementado foi escrito na div conteúdo. Para a realização do formulário foi construída uma tabela com uma linha e uma coluna. Foram utilizadas 2 textfields, uma para inserir nome e outra para inserir comentários. Para finalizar foram criados 2 botões, um de enviar e outro de limpar.
Página Materiais
Os ícones dos diversos materiais encontram-se todos dentro de uma div, chamada “materiais”. No ícone das caps, em particular, criou-se uma div para cada imagem das diferentes caps existentes. Por último, foi criado uma última div para o texto.
Folhas de estilos (CSS)
Página Gíria
Em CSS foi feita toda a formatação da página, utilizando posicionamentos, margens, altura, largura e um float das imagens de forma a obter o aspecto pretendido. Para cada imagem foi criado e formatado um id.
Página Comentários
Em css controlou-se posicionamento, altura, largura margem, alinhamento e formatação dos conteúdos. Aqui foi formatada as caixas de texto e os botoes com imagens de fundo de forma a dar o aspecto pretendido.
Página Materiais
Para que os ícones ficassem no sítio desejado, utilizou-se o position e margin, não esquecendo do float para que estas ficassem todas na horizontal. Para cada imagem das caps foi criado e formatado um id.
Principais scripts desenvolvidas (JavaScript)
Página Gíria
Em java scipt foi criada uma função para cada palavra/imagem, de forma a conseguir onclick para a passagem do aspecto normal da palavra para o aspecto seleccionado assim como o surgimento da definição de cada conceito. Foi ainda criada uma função clean que permite que ao clicar numa palavra as outras voltem ao aspecto base bem como a saída da sua respectiva definição.
Página Materiais
Em java scipt foi criada uma função para cada ícone, de forma a conseguir onclick a definição de cada material. Foi ainda criada uma função limpartexto para que as imagens das diferentes caps desapareçam quando o utilizador clicar noutro ícone.
Integração com outras tecnologias (frameworks, linguagens, etc...)
Soluções técnicas para problemas encontrados
Página Gíria
Inicialmente pensou-se implementar uma tabela para dispor os conceitos, visto que não se obteve resultado foi pensado criar as várias div de forma a controlar o posicionamento de cada palavra e como esta solução foi bem conseguida todo o processo foi desenvolvido a partir deste recurso.
Página Materiais
Encontrou-se alguns problemas no alinhamento das diferentes caps existentes no ícone deste material. Após alguma pesquisa chegou-se à conclusão de que estas tinham que ser formatadas em css através de ids para todas as caps. Após isto criou-se uma função para cada cap para que estas aparecessem onclick.
Melhoramentos futuros
Página Gíria
Talvez de futuro deva ser feita uma animação onmouseover criando assim outra dinâmica. E outros aspectos também podem ser melhorados como a sonorização de cada palavra ao clic e o tipo de letra.
Página Comentários
Inicialmente pensou-se que seria possível visualizar comentários já feitos mas isso não foi implementado, portanto será um aspecto a melhorar.
Página Materiais
Inicialmente pensou-se que seria possível a implementação de um vídeo com a explicação de diversas técnicas utilizadas pelos graffiters, como não foi implementado, poderá ser um aspecto a melhorar nesta página.
Conclusões
Página Gíria, Comentários e Materiais
O objectivo principal foi conseguido e as páginas estão funcionais, no entanto podia estar melhor mas o resultado está bem conseguido!
Referências bibliográficas
Página Gíria, Comentários e Materiais
PDF’s fornecidos e exercícios realizados nas aulas.
