Actividades na Web

Nesta actividade vamos mostrar-vos como fazer uma pequena aplicação usando apenas o browser (i.e. Internet Explorer, Firefox, Chrome, Safari, etc.) tal como demonstrámos há pouco. Este tipo de aplicação divide-se em 3 partes: a estrutura da página, aspecto e comportamento.

Estrutura da Página

O ficheiro HTML define a estrutura da página através de blocos (ou tags). Esta estrutura é lida pelo browser (Internet Explorer, Firefox, Chrome) de modo a mostrar a página web. Um documento HTML está definido entre as tags <html></html>. No exemplo dado temos o cabeçalho da página definido entre as tags <head></head>. Nesta zona definimos o título da página entre as tags <title></title> e informamos o browser que a formatação dos blocos está presente num ficheiro CSS e o comportamento associado à página está contido num ficheiro JavaScript. A seguir ao cabeçalho indicamos o conteúdo da página entre as tags <body></body>, que neste exemplo dividimos em blocos através das tags <div></div>. Cada tag pode conter diversos atributos que dão informação adicional ao browser e que permitem a interligação entre o HTML, o CSS e o JavaScript. Neste exemplo usamos o atributo id para definir um identificador a alguns blocos no HTML.

Aspecto da Página

Os ficheiros CSS estão divididos em várias secções. No exemplo dado existem duas secções: #saltar {} e #texto {}. O nome das secções é o definido no HTML através do atributo id utilizado nas tag. A primeira secção define as propriedades do botão (<input>) existente no ficheiro HTML e a segunda secção formata o bloco <div> que contém o texto.

Comportamento da Página

O ficheiro Javascript permite definir comportamento de elementos HTML, do rato e teclado assim como comportamento do browser.

Mais Informação

No decorrer desta aplicação vamos desevnvolver duas aplicações. Nos links seguintes encontras todo o material necessário para o desenvolvimento das aplicações.

Posters

Uma pequena aplicação Web que permite a consulta de informações relativas a filmes. Podes ver como fazer esta aplicação aqui: Guião Posters.

Jumping Balls

Um simulador que aproxima a queda livre de bolas saltitonas, cujo guião pode ser encontrado no link seguinte: Guião Jumping Balls.

Os slides apresentados durante a actividade realizada na ExpoFCT encontram-se aqui.

Clica nos links abaixo para obter mais informação sobre:



Credits: