Implementação do novo layout

Para resolver os problemas de layout do CAFE Mobile 2.3 foi decidido que um novo layout tinha de ser desenvolvido, para dar um aspeto mais apelativo à aplicação, uma organização mais clara e coerente aos conteúdos e uma navegação intuitiva.

Com a colaboração da Designer da IPBrick, Nádia Neves, a base do layout foi concebida. Foi decidido que existiriam quatro páginas de maior relevo: a página de feeds (inicial), UCoIP, WebPhone e notificações. Para navegar entre estas páginas seria implementado uma nova barra de navegação no topo da aplicação (a baixo da barra onde se encontra o logótipo da empresa e o botão para abrir o menu lateral) onde seria claro a página onde o utilizador se encontra. Esta nova

Figura 4.6: screenshot do novo layout feedde notícias do CAFE Mobile

Figura 4.7: screenshot do novo layout da página UCoIP do CAFE Mobile

Figura 4.8: screenshot do novo layout da página do WebPhone do CAFE Mo- bile

Figura 4.9: screenshot do novo layout da página de notificações do CAFE Mobile

4.2 Novo layout 41

barra de navegação permite também que o utilizador navegue facilmente entre qualquer uma das páginas iniciais.

As figuras4.6,4.7,4.8e4.9mostram as quatro principais páginas do novo layout implemen- tado no CAFE Mobile 2.4 e a figura4.10mostra a nova barra de navegação.

Para a nova barra de navegação foi usada a classe da framework Bootstrap "navbar". Esta classe tem como propósito criar barras de navegação sendo que é possível ser usada com diversas características como posicionamento e expansível [101].

Figura 4.10: Barra de navegação no CAFE Mobile 2.4

1 < u l c l a s s =" nav n a v b a r −nav "> 2 < l i i d =" s h o w _ f e e d s " 3 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 4 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 5 / / e e s t i l i z a ç ã o do í c o n e bem como 6 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 7 </ l i > 8 < l i i d =" s h o w _ u c o i p " 9 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 10 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 11 / / e e s t i l i z a ç ã o do í c o n e bem como 12 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 13 </ l i > 14 < l i i d =" show_phone " 15 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 16 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 17 / / e e s t i l i z a ç ã o do í c o n e bem como 18 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 19 </ l i > 20 < l i i d =" s h o w _ n o t i f i c a t i o n s " 21 c l a s s =" v i s i b l e −xs−i n l i n e −b l o c k v i s i b l e −sm−i n l i n e −b l o c k "> 22 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 23 / / e e s t i l i z a ç ã o do í c o n e bem como 24 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 25 </ l i > 26 </ u l >

Algoritmo 4.2: Estrutura do código de implementação da barra de navegação

Na listagem de código4.2podemos ver a estrutura da nova barra de navegação. Foi implemen- tada com base nas instruções dadas na página correspondente da framework Bootstrap [101]. A classe "navbar" é criada com a tag de HTML "ul" (unordered list). As várias opções de navegação são criadas dentro de tags HTML "li" (list item).

Como podemos verificar, ainda na listagem de código4.2, cada botão de navegação tem duas classes: "visible-xs-inline-block" e "visible-sm-inline-block". Estas classes são, à semelhança da

class "navbar", do Bootstrap e têm como função dar características específicas ao elemento. Em cada uma destas classes, a característica "inline-block" pretende atribuir ao elemento a propriedade de CSS "display : inline-block;". Esta propriedade permite aos elementos ficarem na mesma linha [102]. As classes "visible-xs" e "visible-sm" têm como objetivo definir as circuns- tâncias em que o elemento vai estar visível [25]. A tabela4.1mostra as várias classes "visible" existentes e os tamanhos dos ecrãs em que os elementos correspondentes vão estar visíveis. Como se pode verificar, nos casos descritos em4.2, os elementos vão estar visíveis em dispositivos muito pequenos e pequenos (<992).

Tabela 4.1: Classe visible do Bootstrap [25] Dispositivos muito pequenos Telemóveis (<768px) dispositivos pequenos Tablets (> 768px) Dispositivos Médios Desktops (> 992px) Dispositivos Grandes Desktops (> 1200px) .visible-xs-* Visível Escondido Escondido Escondido

.visible-sm-* Escondido Visível Escondido Escondido

.visible-md-* Escondido Escondido Visível Escondido

.visible-lg-* Escondido Escondido Escondido Visível

De seguida, depois da componente estética ser trabalhada através de CSS e de ter sido obtido uma barra de navegação como a da figura4.10, foi necessário encontrar uma forma de mostrar o conteúdo necessário, isto é, se o utilizador clicar no botão mais à direita da barra de navegação, a aplicação deve mostrar as suas notificações.

Para resolver este problema foi utilizada uma função em javascript que com uma estrutura explicada em 4.3. Esta função é sempre chamada quando o utilizador clica num dos botões da barra de navegação através do evento "onclick" em javascript utilizando sempre um argumento correspondente à página de destino (ex: "ShowHide(showfeeds)").

Sempre que a função é chamada, uma série de ações são executadas com o intuito de mostrar o conteúdo da página de destino e esconder o conteúdo da página de origem. Isto é feito utilizando JQuery, mais especificamente os métodos "show()" e "hide()" nos elementos em causa.

Além disto, é também necessário atualizar a barra de navegação de forma a que o utilizador perceba a página que está ativa. Para isso, a barra de navegação tem uma pequena borda a baixo do ícone correspondente à página ativa. Quando o utilizador muda de página, a função descrita em 4.3 executa o código necessário a fazer mostrar a borda na página de destino e esconder a borda na página de origem. Para isso é utilizado o método JQuery "css()" com o objetivo de mudar o atributo CSS "border-bottom-style" para "solid" ou "none".

Com a função de seleção de conteúdo e a barra de navegação implementadas, foi necessário alguns ajustes de propriedades CSS de vários elementos. Isto deve-se à altura do ecrã disponível para mostrar conteúdo no novo layout ter reduzido em relação ao CAFE Mobile 2.3 para compen- sar a altura da barra de navegação.

4.2 Novo layout 43 1 f u n c t i o n ShowHide ( show ) { 2 i f ( show == ’ s h o w f e e d s ’) { 3 $ (" # s h o w _ a r e a 2 ") . c s s (’ b o r d e r −b o t t o m − s t y l e ’, ’ s o l i d ’) ; 4 $ (" # s h o w _ u c o i p b a r ") . c s s (’ b o r d e r −b o t t o m − s t y l e ’, ’ n o n e ’) ; 5 $ (" # phone−a r e a ") . h i d e ( ) ; 6 $ (" # s h o w _ p h o n e t a b ") . c s s (’ b o r d e r −b o t t o m − s t y l e ’, ’ n o n e ’) ; 7 $ (" # s h o w _ n o t i f i c a t i o n s ") . c s s (’ b o r d e r −b o t t o m − s t y l e ’, ’ n o n e ’) ; 8 $ (" . n o t i f i c a t i o n s t a b ") . h i d e ( ) ; 9 / ∗ESCONDER OU MOSTRAR 10 OUTROS ELEMENTOS∗ / 11 } 12 i f ( show == ’ s h o w u c o i p ’) { 13 / ∗AÇÕES SEMELHANTES

14 PARA A PAGINA UCOIP ∗ /

15 } 16 i f ( show == ’ s h o w u c o i p ’) { 17 / ∗AÇÕES SEMELHANTES 18 PARA A PAGINA DO 19 WEBPHONE∗ / 20 } 21 i f ( show == ’ s h o w u c o i p ’) { 22 / ∗AÇÕES SEMELHANTES 23 PARA A PAGINA 24 DE NOTIFICAÇÕES ∗ / 25 } 26 }

Algoritmo 4.3: Estrutura do código da função de seleção de conteúdo a mostrar (javascript) Depois dos passos descritos anteriormente terem ficado implementados, a navegação entre as quatro páginas principais fica resolvida. É necessário agora implementar a navegação entre uma página secundária (definições de perfil, álbuns, notícias da empresa ou inquéritos) e a página inicial, situação descrita em4.2.2. Como foi concluído, as opções para voltar à página inicial, nesta situação, são pouco intuitivas para o utilizador e é essencial implementar uma forma mais clara de obter o mesmo resultado.

A figura4.11mostra a página de Inquéritos no CAFE Mobile 2.4. Nesta página e nas restantes páginas secundárias existe agora um botão, claramente visível para o utilizador, que permite voltar à página inicial (figura4.12).

A implementação do botão4.12está descrita no excerto de código apresentado em4.4. Como se pode verificar, o botão faz parte da barra de navegação, juntamente com os botões das quatro páginas principais. A principal diferença é que as classes "visible" do Bootstrap não são declaradas e a sua propriedade "display" está declarada no ficheiro CSS como "none". Isto permite que o botão não seja mostrado inicialmente. Quando o utilizador abre o menu da figura 3.3 e navega para uma das páginas secundárias, a função descrita em4.3vai executar sem um argumento, o que permite à aplicação saber que o utilizador pretende navegar para uma página secundária. Neste caso a função vai executar as ações necessárias para mostrar o botão da figura4.12. Para isso é

Figura 4.11: Página de Inquéritos no CAFE Mobile 2.4

Figura 4.12: Botão para voltar à página inicial no CAFE Mobile 2.4

usado o método JQuery "addClass()" adicionando as classes "visible-xs-inline-block" e "visible- sm-inline-block" ao elemento do botão, tornando-o visível.

Quando o botão é clicado, é executado o evento javascript "onclick" a ele associado e a apli- cação volta à página inicial. Isto executa novamente a função em4.3com o argumento correspon- dente à página inicial o que implica a execução do método JQuery "removeClass()" para remover as classes "visible-xs-inline-block" e "visible-sm-inline-block" ao elemento do botão e do método "hide()" para o esconder. O inverso acontece para os ícones iniciais, isto é, quando o utilizador navega para uma página secundária, a função executa métodos JQuery para os esconder, quando volta para a página inicial, são novamente mostrados.

1 < u l c l a s s =" nav n a v b a r −nav "> 2 / ∗ 3 RESTANTES BOTÕES 4 ∗ / 5 < l i i d =" g o b a c k _ l i "> 6 / / R e s t a n t e s e l e m e n t o s p a r a c r i a ç ã o 7 / / e e s t i l i z a ç ã o do í c o n e bem como 8 / / d e f i n i ç ã o do s e u e v e n t o de c l i q u e ( j a v a c r i p t o n c l i c k ) 9 </ l i > 10 </ u l >

Algoritmo 4.4: Estrutura do código de implementação do botão de voltar à página inicial Com o botão implementado, foi necessário corrigir o problema relativo ao botão de publicar

4.2 Novo layout 45

descrito em4.2.3. Na figura4.6encontra-se a página de feeds do CAFE Mobile 2.4 em que pode ser visto o novo botão para abrir a área de publicação de novos posts. Este botão pode ser visto com mais pormenor na figura4.15. As figuras4.13e4.14mostram a área de publicação de posts, sem conteúdo e pronta a publicar, respetivamente.

Figura 4.13: Área de publicação de postsno CAFE Mobile 2.4

Figura 4.14: Área de publicação de posts, pronta a publicar, no CAFE Mo- bile 2.4

Figura 4.15: Botão para mostra a área de publicação de um novo post no CAFE Mobile 2.4 Como se pode verificar, houve uma mudança estética com o objetivo de tornar o design mais apelativo para o utilizador e mudanças funcionais para resolver os problemas explicados em4.2.3. No excerto de código 4.5 está a estrutura de implementação destas mudanças. Como se pode verificar, foi utilizado a propriedade do Bootstrap "collapse". Esta propriedade permite esconder ou mostrar um elemento [103].

No exemplo descrito em 4.5, a classe "postfeed_btn" refere-se ao botão 4.15. Esta classe tem o atributo "data-toggle" com o valor "collapse" para o motor de renderização perceber que o elemento em causa, quando clicado, pretende mostrar ou esconder outro elemento. O atributo "href" refere-se ao elemento alvo da propriedade "collapse", neste caso, para o elemento de classe "postfeed_btn" tem o valor "postfeed_area" (área de publicação de feeds).

Para voltar a esconder a área, é usado um elemento com um "X" com a classe de Bootstrap "pull-left", usada para manter um elemento à esquerda do elemento acima na hierarquia [25]. Neste caso é também usado os atributos "href" e "data-toggle" com os valores "postfeed_area" e "collapse" respetivamente, para obter os efeitos explicados anteriormente.

1 < d i v c l a s s =" p o s t f e e d ">

2 < a c l a s s =" p o s t f e e d _ b t n " h r e f =" # p o s t f e e d _ a r e a " d a t a −t o g g l e =" c o l l a p s e "> 3 " . Y i i : : t ( ’ app ’ , ’ What \ ’ s new ? ’ ) . "

4 </ a > 5 < a c l a s s =" p o s t f e e d _ u p l o a d p i c "> 6 < i c l a s s =" f a f a −p i c t u r e −o " a r i a −h i d d e n =" t r u e "> </ i > 7 </ a > 8 </ d i v > 9 10 < d i v i d =" p o s t f e e d _ a r e a " c l a s s =" c o l l a p s e i n "> 11 < d i v c l a s s =" p o s t f e e d t o g g l e d "> 12 < a c l a s s =" p u l l − l e f t " h r e f =" # p o s t f e e d _ a r e a " d a t a −t o g g l e =" c o l l a p s e ">x < / a > 13 < d i v c l a s s =" p o s t f e e d s e n d "> 14 < a c l a s s =" g l y p h −i c o n f l a t i c o n −s e n d −b u t t o n n e w p o s t b u t t o n " 15 o n c l i c k =" submitNewFeed ( ) ; "> </ a > 16 </ d i v > 17 </ d i v > 18 </ d i v >

Algoritmo 4.5: Estrutura do código de implementação do botão para mostrar a área de publicação de novos posts

Além disso, o botão para abrir a área de feeds é escondido quando esta área é mostrada. Desta maneira o espaço para mostrar informação, que num dispositivo móvel é limitado, aumenta sem impactos negativos para o utilizador pois a partir do momento que a área de publicação é mostrada, o botão já não traz informação útil. Isto é conseguido utilizando os eventos javascript "onclick" com os métodos JQuery "show()" e "hide()".

Figura 4.16: Botão de publicação de um novo post no CAFE Mobile 2.4

Figura 4.17: Botão para inserir uma imagem no novo post

Para o utilizador publicar o seu novo post foi criado o elemento com o botão da figura4.16por ser simples e intuitivo. Este botão tem cinza como cor de defeito (figura4.13) para indicar que o postestá vazio e, por isso, o botão não está ativo. Quando o utilizador escreve texto para publicar, a cor do botão muda para a cor definida pelo utilizador (azul na figura4.15ou4.16) indicando o estado ativo. Para obter este resultado foi utilizado o método JQuery "keyup()", como mostra o código em4.6, que indica quado o utilizador acaba de pressionar uma tecla do teclado (virtual ou físico) [104].

4.2 Novo layout 47

Outra alteração à forma como o utilizador pode publicar feeds foi a adição do botão da figura 4.17. Desta maneira, se o utilizador quiser publicar uma imagem tem uma opção rápida, clicando neste botão, enquanto que no CAFE Mobile 2.3 só é possível escolher a imagem a publicar depois de abrir a área de publicação de novos posts (figura3.8).

1 $ (’ . N e w s f e e d _ m e s s a g e ’) . k e y u p ( f u n c t i o n ( ) {

2 / ∗ CONDIÇÃO PARA VERIFICAÇÃO SE EXISTE TEXTO ∗ /{ 3 $ (" . n e w p o s t b u t t o n ") . a d d C l a s s (" a c t i v e ") ; 4 } 5 e l s e{ 6 $ (" . n e w p o s t b u t t o n ") . r e m o v e C l a s s (" a c t i v e ") ; 7 } 8 } ) ;

Algoritmo 4.6: Estrutura do código de implementação da mudança de estado do botão de publicação de posts

Para completar a implementação do novo layout foi necessário implementar a funcionalidade de pesquisa de hashtags, descrita em4.2.3. No estado inicial, a barra de cabeçalho (Header) do CAFE Mobile 2.4 encontra-se como mostra a figura4.18. Quando o utilizador clica no ícone de pesquisa (lupa), o header passa para o estado da figura4.19. O logótipo da empresa é substituído por uma caixa de texto onde o utilizador pode escrever a hashtag a pesquisar, o botão para abrir o menu é substituído por um "X" e a cor do Header baixa de tonalidade para informar o utilizador que pode começar a pesquisa. Se o utilizador quiser pesquisar, pode inserir o texto em causa e clicar no ícone de pesquisa. A aplicação filtrará os posts segundo a palavra que o utilizador inseriu. Se quiser voltar ao estado inicial, basta clicar no "X".

Figura 4.18: Header do CAFE Mobile 2.4 com a pesquisa por hashtags

Figura 4.19: Header do CAFE Mobile 2.4 com a pesquisa por hashtags ativa

A implementação desta funcionalidade passou pela criação dos elementos em HTML e a sua estilização em CSS. Para mostrar ou esconder os elementos necessários foi utilizado os métodos JQuery"show()" ou "hide()" respetivamente. Para baixar a tonalidade da cor do Header é exe- cutada a função descrita em4.7com os argumentos "color", correspondente à cor do Header, e "percent", correspondente à percentagem de tonalidade a baixar. A cor do Header não é igual para todos os utilizadores, é definida pelo utilizador nas suas definições de perfil, ou seja, a função em 4.7tem que funcionar para uma vasta gama de cores.

1 f u n c t i o n s h a d e C o l o r ( c o l o r , p e r c e n t ) { 2 c o l o r = r g b 2 h e x ( c o l o r ) ; 3 v a r R = p a r s e I n t ( c o l o r . s u b s t r i n g ( 1 , 3 ) , 1 6 ) ; 4 v a r G = p a r s e I n t ( c o l o r . s u b s t r i n g ( 3 , 5 ) , 1 6 ) ; 5 v a r B = p a r s e I n t ( c o l o r . s u b s t r i n g ( 5 , 7 ) , 1 6 ) ; 6 7 R = p a r s e I n t ( R ∗ ( 1 0 0 + p e r c e n t ) / 1 0 0 ) ; 8 G = p a r s e I n t (G ∗ ( 1 0 0 + p e r c e n t ) / 1 0 0 ) ; 9 B = p a r s e I n t ( B ∗ ( 1 0 0 + p e r c e n t ) / 1 0 0 ) ; 10 11 R = ( R< 2 5 5 ) ?R : 2 5 5 ; 12 G = ( G< 2 5 5 ) ?G : 2 5 5 ; 13 B = ( B< 2 5 5 ) ?B : 2 5 5 ; 14 15 v a r RR = ( ( R . t o S t r i n g ( 1 6 ) . l e n g t h ==1) ?" 0 "+R . t o S t r i n g ( 1 6 ) : R . t o S t r i n g ( 1 6 ) ) ; 16 v a r GG = ( ( G . t o S t r i n g ( 1 6 ) . l e n g t h ==1) ?" 0 "+G . t o S t r i n g ( 1 6 ) : G . t o S t r i n g ( 1 6 ) ) ; 17 v a r BB = ( ( B . t o S t r i n g ( 1 6 ) . l e n g t h ==1) ?" 0 "+B . t o S t r i n g ( 1 6 ) : B . t o S t r i n g ( 1 6 ) ) ; 18 19 v a r f i n a l c o l o r = hexToRgbA (" # "+RR+GG+BB) ; 20 r e t u r n f i n a l c o l o r ; 21 }

Algoritmo 4.7: Função usada para baixar a tonalidade da cor do Header

Quando a função executa começa por converter a cor do Header para hexadecimal utilizando outra função auxiliar. Posteriormente são retirados os valores hexadecimais correspondentes a cada argumento do formato RGB (Red, Green e Blue). Cada um destes valores é aumentado no valor do argumento "percent" (atualmente o valor usado é 20%) e é verificado se é superior a 255 (valor máximo de um argumento RGB), se sim, é-lhe atribuído 255. Finalmente, os valores R, G e B são verificados quanto à sua validade e convertidos novamente para RGB.

Concluída a implementação do novo layout, verificou-se que, relativamente às funcionalidades do layout do CAFE Mobile 2.3 descritas anteriormente na forma de user stories, foram acrescen- tadas novas funcionalidades que podem ser descritas como:

11. Como utilizador posso navegar entre as páginas: feeds, UCoIP, webphone e notificações. 12. Como utilizador posso efetuar pesquisas por hashtags de forma a permitir ao utilizador

filtrar as publicações.

13. Como utilizador posso navegar de volta para a página inicial a partir das páginas secundárias utilizando o ícone de retroceder.

Além destas novas user stories, com o novo layout, as restantes foram melhoradas tornando as funcionalidades e modos de navegação mais claros e intuitivos.