OnTheWall
From Labmm2
(→Estrutura XHTML implementada) |
(→Folhas de estilos (CSS)) |
||
| Line 49: | Line 49: | ||
Em css controlou-se posicionamento, altura, largura margem, alinhamento e formatação dos conteúdos. | 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. | 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)= | = Principais scripts desenvolvidas (JavaScript)= | ||
Revision as of 18:39, 21 June 2011
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.
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.
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.
Conclusões
Página Gíria e Comentários
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 e Comentários
PDF’s fornecidos e exercícios realizados nas aulas.
