Estrutura das Páginas

Aparentemente as páginas que constituem a aplicação welcomeUA seguem sempre a mesma estrutura. Esta é composta por uma barra superior que identifica o local da aplicação, sendo seguida pelo seu conteúdo. No entanto, ao observar com maior atenção é possível identificar três grupos distintos: as páginas que possuem meramente o conteúdo (as páginas iniciais da aplicação referentes à escolha do idioma assim como os processos de autenticação e registo); as páginas que são compostas por uma barra no cabeçalho e o conteúdo (as funcionalidades Notícias, Cursos, Contactos, Ementas, Senhas SA, Mapas e Agenda); e as páginas que além da barra superior e do conteúdo possuem ainda um local no rodapé utilizado ora por questões estéticas (menu principal), ora por questões de navegação (O meu curso, Anúncios e Horários). As diferenças entre cada um destes grupos de páginas são percetíveis na figura 12 abaixo.

Figura 12 - Tipos de estrutura das páginas da aplicação welcomeUA (Registo, Contactos e Anúncios).

De forma geral e ignorando o conteúdo e propósitos de cada página, o que as difere acima de tudo é o número de secções que possuem que pode variar entre apenas uma (ecrã de Registo) e, três (funcionalidade Anúncios). Esta composição das páginas foi uma das razões da escolha da framework jQuery Mobile. A estrutura de páginas desta framework é composta por três secções distintas: uma superior (header), uma central (content) e uma inferior (footer). Esta organização ajusta-se corretamente ao pretendido para páginas como as da funcionalidade Anúncios compostas por três secções (figura 13).

Figura 13 - Estrutura das páginas compostas por três secções (header, content e footer).

Contudo, esta estrutura necessita de ser adaptada para que possa ser utilizada nas outras páginas que requerem duas ou apenas uma secção. A estrutura base das páginas do jQuery Mobile é opcional podendo ser implementas apenas as secções que são necessárias. Deste modo, excluindo o footer é possível obter uma estrutura que corresponde às necessidades das páginas como a da funcionalidade Contactos (figura 14).

Figura 15 - Estrutura das páginas com uma área (content).

Esta lógica de divisão das páginas por áreas reflete-se no processo de implementação. Através de um pequeno conjunto de marcas HTML, e recorrendo a propriedades próprias da framework utilizada, obtém-se rapidamente uma página para a aplicação welcomeUA como é possível observar no excerto de código abaixo referente ao menu principal da aplicação.

As propriedades data-role definem a função das div às quais estão associadas. O valor page identifica uma página da aplicação, e os restantes três tipos de valores, header, content e footer, identificam as respetivas secções que a compõem. Relembrando que as secções são opcionais, a implementação da estrutura referente à página do Registo pode ser obtida incluindo apenas as marcas com a propriedade content como pode ser visto de seguida.

<divid="pagMenuPrincipal" data-role="page" >

<div id="divHeaderMenuPrincipal"data-role="header"> <!-- Header -->

</div>

<div id="divConteudoMenuPrincipal"data-role="content"> <!-- Content -->

</div>

<div id="divFooterMenuPrincipal"data-role="footer"> <!-- Footer -->

</div>

</div> _index.html

Assim, é possível perceber que as páginas da aplicação, tendo por base a estrutura do jQuery Mobile, são compostas por uma sequência lógica e hierarquizada de marcas HTML. A própria secção do header segue uma estrutura idêntica o que permite definir facilmente o título da página assim como os botões dos cantos superiores que, dependendo da página, fazem surgir o menu lateral, as definições da aplicação, ou o sistema de pesquisa. A implementação de um header recorrendo ao jQueryMobile pode ser escrita do seguinte modo.

No entanto, embora esta solução tenha sido facilmente aplicada nas páginas cujo header é composto por uma única barra (funcionalidade Senhas SA e Mapas), foi necessária uma adaptação de forma a corresponder às caraterísticas das restantes páginas. A maioria dos headers das páginas da aplicação welcomeUA possui uma barra adicional como se verifica no menu principal e nas funcionalidades Cursos, Contactos, Ementas, Anúncios e Agenda. Outras funcionalidades como as Notícias e Horários possuem mesmo uma terceira barra no header. A solução para estas páginas passou por implementar estas barras adicionais dentro do header, sendo feitos posteriormente ajustes a nível das CSS. Abaixo pode-se ver por exemplo a forma como foram implementadas as três barras do header da página referente à funcionalidade Notícias.

<divid="pagRegisto" data-role="page" >

<div id="divConteudoRegisto"data-role="content"> <!-- Content -->

</div> </div>

<div id="divHeader"data-role="header"> <h1>Título</h1> <aid="btnLateralEsquerdo"></a> <aid="btnLateralDireito"></a> </div> Index.html index.html

Abordados aspetos comuns entre as diferentes páginas da aplicação ao nível da sua estrutura, resta referir as áreas laterais que surgem ao interagir com os botões presentes no header de cada uma das páginas. Estas áreas laterais são atualmente muito comuns nas aplicações móveis sendo denominadas pelo Google por Navigation Drawer7 _{no âmbito do} desenvolvimento de aplicações para o sistema operativo Android (REF). A framework jQuery Mobile suporta de origem esta funcionalidade, denominando as áreas laterais de panels. Este aspeto reforça as razões de escolha desta framework tendo em vista a implementação da aplicação welcomeUA. Os panels são implementados após as secções header, content e footer de uma página, mas ainda dentro da marca div que a define (a marca que contém a propriedade data-role com o valor page). No exemplo seguinte é possível visualizar de que forma foram implementadas as áreas destinadas ao menu lateral e definições da aplicação no menu principal.

7 _{http://developer.android.com/design/patterns/navigation-drawer.html}

<div data-role="page"id="pagNoticias">

<!-- Header da página das Notícias -->

<divdata-role="header" data-position="fixed">

<!-- Barra do Título --> <h1>Notícias</h1>

<aid="btnMenuLateralNoticias"></a> <a id="btnPesquisaNoticias"></a>

<divid="divSubTituloNoticias" class="divSubTitulo"> <!-- Barra das Categorias -->

</div>

<div id="divAnexoNoticias" class="divAnexoNoticias"> <!-- Barra de Informações -->

</div> </div>

</div> _index.html

Departamento de Comunicação e Arte 81

Todas as páginas da aplicação welcomeUA obedecem a esta simples mas versátil estrutura o que resulta num código limpo, organizado e de fácil compreensão facilitando assim eventuais processos de edição que possam ser necessários futuramente.