Wide Angle
From Labmm2
(→Folhas de estilo CSS) |
(→Folhas de estilo CSS) |
||
| Line 214: | Line 214: | ||
'#'qqcoisa {<br> | '#'qqcoisa {<br> | ||
| - | qqcoisa { <br> | + | '#'qqcoisa { <br> |
-webkit-border-radius: 25px;<br> | -webkit-border-radius: 25px;<br> | ||
-moz-border-radius: 25px;<br> | -moz-border-radius: 25px;<br> | ||
Revision as of 01:21, 22 June 2011
Grupo:
- Anabela Casqueira - 59627
- Ana Rita Pinheiro - 60789
- Daniela Monteiro - 60811
- João Soares - 61925
- Telma Ferreira - 60360
Apresentação e contextualização do tema
Como projecto final da disciplina de Laboratório 2 foi proposto aos alunos o desenvolvimento de uma aplicação para a Web que fosse tecnicamente implementada com as linguagens aprendidas durante o 2º Semestre, nomeadamente HTML/XHTML, CSS E JAVASCRIPT.
Após a reunião de arranque, o grupo definiu como tema de projecto a fotografia. O que pretendemos com o nosso site é dar a conhecer mais um pouco da fotografia, em termos de técnica e evolução, aos mais experientes, mas também a quem é um principiante na actividade. Para isso definimos um público-alvo primário e um secundário.
Público-alvo primário:
Pessoas amantes da fotografia, com experiência e alguma conhecimento prévio. O nosso site vai permitir que estas pessoas aprofundam os seus conhecimentos.
Público-alvo secundário:
Aqui estabelecemos uma idade mínima de 16 anos. Não restringimos a idade máxima porque temos como objectivo proporcionar conhecimento e momentos lúdicos e educativos para utilizadores também mais inexperientes.
Assim, o conceito deste projecto multimédia baseia-se na promoção da fotografia e dos seus envolventes, nomeadamente técnicas, evolução dos dispositivos e história.
Objectivos gerais e específicos:
Temos como objectivo geral desta aplicação multimédia fornecer ao utilizador a hipótese de aprofundar conhecimentos sobre a fotografia, de forma a despertar interesse. Como objectivos específicos, pretendemos através do menu interactivo presente em todas as páginas redireccionar o utilizador para as páginas sobre a história da fotografia, para que o utilizador que não esteja familiarizado com os desenvolvimentos que ocorreram ao longo dos tempos; teremos também um menu interactivo com as opções viáveis relativamente á captação de fotografias - menu Techniques; um outro tópico que não poderia deixar de fazer parte é a evolução dos equipamentos fotográficos; um outro menu é o More, que se considera importante pois lá se encontram e, por fim, uma última opção referente a dicas que são propostas ao utilizador para melhorar a sua técnica. Uma outra especificidade, fora de todo o menu interactivo, é a possibilidade de visualização de fotografias já existentes no site, através de um slider de fotografias dinâmico que permite dar a conhecer ao utilizador alguns trabalhos de autores conhecidos e desconhecidos.
Brainstorming
No processo de brainstorming foram obtidas várias ideias. Como podíamos partir de temas como objectos artísticos, personalidades, e produtos, o grupo optou por trabalhar com o tema dos objectos artísticos, nomeadamente a fotografia. A escolha incidiu sobre a fotografia por não haver consenso relativamente às outras ideias e por ser um gosto comum. Contudo, tivemos uma diversidade de temas que foram sugeridas ao longo deste processo:
- Tim Burton - Site dedicado ao célebre cineasta, famoso pelas suas temáticas sombrias.
- Jazz - O objectivo seria fomentar o gosto por este género musical que não é tão popular entre os jovens, promovendo assim a sua descoberta.
- Arte - Site focalizado principalmente nos materiais usados nas Belas-Artes, mostrando a diversidade dos mesmos, bem como o uso que lhes podemos dar.
- Cerveja - Construir um site com conteúdos relacionados com a cerveja, como a diversidade de marcas e produtos existentes no mercado e as diferenças entre eles.
- Como usar um Mac? - Construção de um site informativo organizado, contendo informação relevante para os utilizadores de Mac, como o uso de atalhos. Teria algum interesse porque a maioria da informação encontra-se dispersa pela web, pelo que o objectivo seria concentrá-la e assim tornando-a mais acessível ao público.
- Origami – Construir um site dedicado à arte do papel, demonstrando técnicas com recurso a vídeo stop motion.
- Aplicação interactiva sobre a viagem entre Aveiro e Porto - O objectivo seria dar a conhecer todas as terras nas quais o comboio que efectua viagens do Porto para Aveiro e vice-versa faz paragens, explorando pontos de interesse cultural.
- Dicas;
- Materiais;
- Vermelho - Prioridade máxima
- Amarelo - Prioridade intermédia
- Verde - Prioridade mínima
Logótipo
Dentro das experiências que fizemos do logótipo escolhemos o que se situa dentro do pequeno quadrado na parte inferior da imagem. A palavra "wide" pretende sugerir uma informação vasta do tema da fotografia e a palavra "angle" faz referência aos ângulos, que estão fortemente relacionada com a fotografia.
Limites/características da nossa aplicação
Nesta aplicação pretendemos que não haja qualquer limite/barreira para o utilizador, ou seja, sempre que este necessitar poderá aceder ao site e a qualquer informação que este dispõe.
A nossa aplicação não abrange outros dispositivos como "print" ou "handheld", residindo aí uma das suas limitações. Isto deve-se ao facto de a maior parte dos conteúdos serem compostos por imagens: O utilizador não teria uma boa percepção delas num tamanho inferior ao original, pelo que a sua visualização em dispositivos com ecrãs relativamente menores não resultaria.
Relativamente ao tamanho da aplicação, iremos utilizar 980x768.
Quanto à aplicação em si, esta não envolve qualquer tipo de negócios (compra e/ou venda de produtos), visto que se trata meramente de um site informativo.
Layout
Layouts Iniciais
Nos layouts abaixo apresentados as imagens de fundo não serão as utilizadas para o projecto, servindo apenas como exemplo da estrutura dos layouts da aplicação.
Entretanto todos os layouts estão em remodelação, logo pode não ser exactamente esta a estrutura que iremos utilizar. No entanto, ficam aqui os nossos protótipos.
Menu inicial
History
Evolution
Gallery
O layout das Technics ainda se encontra em modelação. Ao contrário dos outros tópicos este terá sub-menus, em drop down.
Layouts finais
Estas foram as alterações que fizemos ao layout do site. Tornámo-lo um pouco mais dinâmico e organizado em termos de estruturas, visto que cada opção de escolha do utilizador parecia estar um pouco fora de todo o layout não se enquadrando da melhor maneira e a sua simplicidade não dar aspecto do conteúdo pormenorizado que queremos dar.
Contudo, esta é apenas uma remodelação. Os layouts finais são os seguintes:
Esta é a página inicial. Aqui teremos o menu superior (ao lado direito) que nos permite ter acesso a todas as páginas e este também estará presente em todos os níveis do site. No fundo temos o rodapé com a informação mais à direita (aqui seguimos o template de prioridades apresentado no tópico "Grafismo de layouts" através de cores). Ao centro estará uma imagem que irá alternando para outra de 5 em 5 segundos. Tudo isto está organizado em três div's principais que dentro terão mais div's com os respectivos conteúdos. É de referir, ainda, a presença de uma text box no Header, com ligação ao Google, assim, se o utilizador pretender fazer uma outra pesquisa, poderá fazê-lo a partir do próprio site. Esta opção encontra-se presente em toda a aplicação.
Este é o menu que contará a breve história da fotografia. Ao lado esquerdo terá o texto, isto por causa da forma de leitura da esquerda para a direita. Deste modo, o mais importante será visto em primeiro lugar.
Este será o layout onde teremos uma pequena galeria de fotos. Nesta galeria de fotos, o utilizador terá que seleccionar a imagem que quer visualizar, ou simplesmente optar pela navegação através das setas disponibilizadas na interface. Há, ainda, um botão de informação acerca de cada imagem sempre presente. basta clicar sobre ele para abrir, e no botão x para fechar.
Aqui teremos a timeline com a evolução da sua fotografia desde o seu nascimento até aos dias de hoje, à era digital. Aqui, o utilizador tem apenas que fazer scroll sobre a imagem ou clicando no scroll para ir vendo o desenvolvimento da história dos equipamentos fotográficos.
Esta será a página das técnicas a qual dará mais opções de escolha ao utilizador.
Esta página contém dicas para o utilizador (fotógrafo) puder melhorar as suas fotografias e técnica com pequenas instruções em relação ao foco, flash, enquadramento, entre outros aspectos importantes que possam tornar uma má fotografia numa obra de arte. Nesta página, encontramos uma div inicial com uma frase sugestiva; de seguida, já do lado esquerdo encontramos um menu vertical, desenvolvido com âncoras com ligações à div que apresenta os conteúdos.
Esta página contém os equipamentos e acessórios para fotógrafos mais experientes. Tal como na página das tips, é constituído por um menu vertical, situado à esquerda, onde, através de âncoras o utilizador poderá ir navegando.
Esta página é constituída por um acordeão que é o Faq e por uma imagem que dá vida à página..
Nesta página podemos encontrar as informações do grupo, nomeadamente os contactos e nomes. A imagem ilustra algumas pessoas em momento de trabalho.
Nesta página final, o utilizador, através do preenchimento de um formulário pode contactar a equipa, com qualquer possível dúvida que tenha.
Grafismo dos layouts
Os layouts da nossa aplicação multimédia são sobretudo minimalistas. Isto porque são simples, dedicados a linhas suaves, contudo algumas arredondadas e algumas transparências que dão subtileza e algum realce no conteúdo ao centro do site. Esta nossa aplicação tem como destino a população das áreas ocidentais, ou seja, com leitura da esquerda para a direita, por isso colocámos as zonas mais importantes nessas áreas (ex. layout da History o texto situa-se a esquerda por ser a informação mais relevante e que queremos que sobressaia). O menu principal, contraria um pouco este "template" situando-se mais à direita, com o intuito de chamar a atenção do utilizador para outras zonas, porque tal como comprovado em estudos de Eye Tracking, uma das formas de leitura de uma aplicação multimédia é em Z, ou seja, da esquerda para a direita. Com isso utilizamos também o esquema de leitura de sites da imagem abaixo apresentada. Aqui mostra como é que as pessoas visualizam o site segundo prioridade de campos:
Estrutura XHTML
Para a estrutura xhtml utilizamos essencialmente divs para dividir os conteúdos e menus atribuindo id's a cada div para a sua formatação em CSS.
Estrutura do menu inicial:
File:Estrutura xhtml wide angle.pdf
Div id="container" - que contém todo o conteúdo, ou seja é a div "mãe".
Div id="header" style="height:139px; - este é o cabeçalho que contém a div id="logo" (cujo conteúdo é o logótipo) e a div id="menu" (onde tem as opções no menu distribuído pelas tags ul (id="lista") e li que permitem uma melhor organização e visualização ao utilizador. Nessee menu teremos as opções: History | Evolution | Gallery | Techniques | More
Dentro da tag li da opção Techniques colocamos outro ul que dará lugar aos sub-menus dessa opção: Tips | Notions | Materials |Try it yourself
Para a ligação da páginas utilizámos a tag <a href=""></a>.
Em termos de estrutura xhtml as estruturas são idênticas em todas as páginas dado que o header, que contém o menu principal, e o footer
estão presentes em todas as páginas. Em xhtml utilizámos as divs para todo o conteúdo, incluindo a timeline, onde inserimos uma imagem
numa div com uma largura maior que a largura da div, de modo a fazer o scroll na horizontal.
A div content (do conteúdo) é a única que se altera porque é lá que vão estar os conteúdos das páginas.
No canto superior direito dentro da div header colocámos uma tag form com action="http://www.google.com/search", um input de type="text" e
o botão para submeter e o utilizador puder realizar pesquisas em necessidade de sair do site.
Folhas de estilo CSS
Como é perceptível, os menus (incluindo rodapé) estão sempre presentes em qualquer nível do site. Para uma melhor organização decidimos utilizar somente uma folha css implementada em todas as páginas, com a mesma estrutura para todas. Isto permite-nos uma maior limpeza em termos de documentos e mais organização.
As formatações são feitas através de id's e classes.
O header que tem o menu, logótipo e o google search tem 170px de altura.
O logótipo está alinhado horizontalmente à esquerda dentro do header que tem 170px de altura. O menu e o form de pesquisa do google search
estão ambos alinhados à direita, tal como o footer (rodapé).
O menu é constituído por listas não ordenadas, mas utilizando o list-style:none para tirar os simbolos pré-definidos das tags. Para
definirmos a forma rectangular obtida utilizámos o border e o padding. A tag ul que possui todos as opções do menu tem como posição absolute,
ou seja, a posição em relação o elemento pai que neste caso será na mesma estático.
Como referido anteriormente o conteúdo é que varia, ou seja, a mesma página css é utilizada para todas as páginas porque têm em igualdade
os menus, mas o conteúdo varia de página para página. Todas as caixas de texto inseridas ns páginas têm o mesmo tamanho entre 450px e 470px
consoante está à direita ou à esquerda.
Recorremos à nova linguagem de estilo CSS3 para obter o efeito de border arredondados (border-radius).
No código:
'#'qqcoisa {
'#'qqcoisa {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
}
as secções "moz" e "webkit" asseguram a compatibilidade entre os diversos browsers, para que as formatações realizadas com recurso a CSS3 possam ser visíveis por todos os utilizadores.
File:Styles.css wide angle.pdf
Este ficheiro, ou seja, esta folha de estilos apresentada nessa página representa todos os estilos aplicados.
File:Superfish.css menu wide angle.pdf
Nesta folha de estilos, estão atribuídos todos os estilos aplicados no Menu, constituído não só por CSS, mas como também por jQuery.
Principais scripts implementadas
Os scripts principais utilizados foi mesmo a validação do formulário, isto sem contar com o jQuery, onde utilizamos scripts para a construção do menu, do slide inicial, da galeria de fotos e do acordeão das FAQ.
No formulário, foram desenvolvidos scripts e funções para avisar o utilizador que alguns campos são de preenchimento obrigatório e, quando inválido/não preenchido, o fundo desse campo de texto preenche-se com uma cor, neste caso, avermelhada, que automaticamente denota no utilizador a obrigatoriedade do preenchimento.
Este script é chamado através das funções function validacampoobrigatorio(valor, tipovalidacao);
O mesmo se passa no campo da idade, restringido a três caracteres, chamado pela função function validanumero(valor, tipovalidacao);
Já na validação do email, a função function validaemail(valor, tipovalidacao); restringe o campo para email’s válidos, ou seja, quer existam quer não existam, o campo só é validado caso o utilizador utilize o símbolo @, caso contrário, não poderá submeter a mensagem.
Há ainda, neste formulário, através da função function contacaract(numcaract, campovalor, idvalor); a contagem de caracteres que o utilizador já utilizou.
Para complementar o preenchimento deste formulário, há ainda uma função que escreve na própria página uma pequena ajuda, caso o utilizador não esteja a compreender o que é pedido no campo. Esse implemento é chamado através da função function ajuda(campo); , contudo, a função function limpaajuda(), é accionada quando o utilizador clica no botão reset.
Para finalizar, como não poderia deixar de ser, a função que valida o formulário e o envia é chamada através da função function validacaoglobal();.
Todo o script implementado encontra-se no documento a seguir:
File:JavaScript validacao form wide angle.pdf
Todos os outros scripts dizem respeito ao menu, à galeria de fotos, e ao slider inicial, criados em jQuery.
Integração com outras tecnologias
Além da utilização do Dreamweaver CS5 para a implementação do código para a realização do site utilizámos outros programas para a edição de alguns elementos da aplicação nomeadamente o Ilustrator CS5 para desenhar o logótipo e o Photoshop CS5 para o tratamento de imagens.
Em termos de programação utilizámos o HTML/XHTML, CSS e CSS3 , nomeadamente nas 'border-radius', Javascript e jQuery para assistir ao javacscript, mais concretamente na criação do menu, do slider inicial, e da galeria de fotos.
Soluções técnicas para problemas encontrados
Ao longo do decorrer do trabalho foram encontrados alguns problemas, principalmente técnicos quanto às compatibilidades dos browsers. Este devia-se à aplicação de CSS3 onde a versão 3.6 do Mozzila Firefox não admitia muito bem e, também, na página inicial o slider não se integrava na Div com bordas arredondadas, ou seja, não ficava por dentro, ficando o as imagens aí embutidas. Na versão 4 do Mozzila Firefox, este mesmo problema já está resolvido; nos outros browsers (versões recentes) já funciona.
Para facilitar a implementação de animações (slide), decidimos utilizar ferramentas do jQuery de modo a ajudar-nos na concretização de algumas ideias dado que no JavaScript iria ser necessário código demasiado complexo e/ou extenso.
A ideia de modificar a aparência do scroll lateral das Divs onde era requerido o Scroll teve de ser posta de lado, pois dava problemas nos outros browsers com a excepção do Firefox4.
Relativamente ao formulário criado baseamo-nos no exercício dado na aula prática de laboratório. Uma das dificuldades foi o texto que aparecia fora do formulário (a dizer inválido), ou seja, fora da div. Para que tal não acontecesse diminuímos o tamanho da tabela que continha o formulário. A nível desse mesmo código foi feita uma reestruturação nas cores, conteúdos obrigatórios e limitação da idade para menores de 100 anos, ou seja, de um valor não superior a três caracteres.
É, ainda, de referir que a nossa aplicação, neste momento, encontra-se optimizado tanto para Firefox, Chrome, IE9, os principais, contudo, na página Gallery é possível verificar que o background da div que contém a galeria de fotos (a cor mais escura), encontra-se dentro da div, embora as margens do background se encontrem fora. Quanto a esse problema, não o conseguimos resolver.
Melhoramentos futuros
Um aspecto que gostaríamos de melhorar é sem dúvida a implementação de um sistema de perfil e de registo/login para utilizadores que gostassem/quissem partilhar informação para outros possíveis utilizadores.
Pensamos, também, em futuramente melhorar a estrutura do site para algo um pouco mais dinâmico e interactivo. Um outro melhoramento seria a implementação de mais animações e de um scroll diferente daquele usado.
Outra possível solução futura seria a integração de música e mais respectivo conteúdo, de forma dinâmica e de botões mais sugestivos.
Conclusões
Wide Angle foi um site realizado no âmbito da disciplina de Laboratório Multimédia 2 aplicando os conhecimentos obtidos nas aulas práticas
e teóricas dos seguintes módulos: xhtml, css e javascript. Depois da realização desta aplicação o grupo conclui que conseguimos
um bom trabalho e adquirimos mais conhecimentos com as pesquisas realizadas, conseguindo também pôr em prática os conhecimentos obtidos
na disciplina .
Através de sites e blogs obtivemos acesso a variados códigos e outros tipos de programação oferecendo-nos mais oportunidades de
projectos no site e tornando-o mais dinâmico e objectivo aos objectivos que tinhamos. No entanto, deprámo-nos com algumas dificuldades.
Alguns códigos de css3 utilizados para as borders radius (arredondadas) variavam de browser para browser; o scroll feito em JQuery
também teve vários resultados no diferentes browsers, nomeadamente no Chrome e no IE 9 que deixavam o scroll no sítio, contudo o texto
ficava no fundo da página sem ter qualquer reacção quando moviamos o scroll. Aqui só obtivemos o resultado pretendido no mozilla
firefox.
Em relação ao conteúdo ganhámos alguns novos conhecimentos em relação à fotografia no seguimento das pesquisas e na implementação do conteúdo. Após a pequena reflexão podemos afirmar que concretizámos o projecto de acordo com as nossas expectativas e conhecimentos das aulas dando-nos ainda hipótese de maior pesquisa, beneficiando o nosso carácter auto-didacta.
Referências Webliográficas
IMPORTANTE:
Anexos
Fluxograma final
Foram feita algumas alterações ao fluxograma, nomeadamente na parte das técnicas que tem quatro sub-menus. No entanto, achámos desnecessários pois tinham informação repetida de outras páginas.
