Case da Organização Pan-americana de Saúde

Rafael Berlanda Case da organização pan-americana de saúde ‒ Escritório Brasil

Case de Intranet Corporativa da

Organização Pan-americana de Saúde - Escritório Brasil

Joomla Day Brasil 2011 – Florianópolis, 2 e 3 de setembro de 2011

Rafael Berlanda Membro da Comunidade Joomla Calango


Quem? Rafael Berlanda Atuando no Ministério da Educação desde 2007 e trabalhando com Web desde 2001. Um dos responsáveis técnicos do projeto Intranet Corporativa OPAS.

•  Membro comunidade:

•  Joomla desde 2007 •  Layout da versão anterior do Portal do MEC •  Desenvolvedor do Portal CNJ entregue em 2009 •  Membro da comissão organizadora do JDBR10 •  “Membro não praticante” do JCoderBR


•  A Organização Pan-‐americana de Saúde (OPAS ou PAHO) é o escritório regional para as Américas da Organização Mundial de Saúde.

•  Sediada em Washington, também faz parte da ONU e da OEA, Organização dos Estados

Americanos. •  "A Organização exerce um papel fundamental na melhoria de políLcas e serviços públicos de

saúde, por meio da transferência de tecnologia e da difusão do conhecimento acumulado por meio de experiências produzidas nos Países-‐Membros [...]" (hQp://new.paho.org/)

O cliente


O cenário

•  Intranet atualmente em operação não atende a requisitos de: – Usabilidade – Funcionalidade – Gerenciamento de conteúdo

•  Pouco uLlizada, passava em branco •  (elefante em branco) •  A intranet citada ainda não está em produção? Está em homologação


Nova intranet corporativa

• Obje&vo: criar uma mesa de trabalho do usuário, onde ele tem acesso, avalia e controla suas aLvidades dentro da organização.

•  O conceito básico do projeto da Intranet OPAS gira em torno da transformação de uma ferramenta atualmente pouco uLlizada (a intranet atual) para uma ferramenta de trabalho que concentre as ferramentas principais do dia-‐a-‐dia dos colaboradores, transformando-‐a em ponto chave para interação entre colaboradores e para obtenção de informações insLtucionais.

•  Em uma abordagem contemporânea do desenvolvimento sites, intranets ou portais, a melhor forma de transformar as diversas funcionalidades levantadas em um modelo gráfico palpável, é a aplicação da Arquitetura da Informação para a criação dos documentos chamados de wireframes.


E por que o Joomla? Veja a seguir as jusLficaLvas de escolha do Joomla mencionadas por um dos dirigentes da OPAS em reunião em Washington…


Estrutura Conceitual

•  O piloto da intranet apresentado consLtui em um modelo final navegável, que orientou o fluxo de navegação dentro do site tanto para os envolvidos no projeto

•  Alinhamento com diretrizes de gestão do conhecimento, uLlizando a ferramenta Open Source Joomla (Content Management System), uma das que mais

crescem no mundo, no âmbito de usuários e extensões. Sua imensa comunidade garante mão-‐de-‐obra especializada e extensões que aceleram o desenvolvimento e diminuem custos. Diversos sites e portais governamentais no Brasil uLlizam a ferramenta. Dentre os exemplos de maior notoriedade temos o Ministério da Educação (www.mec.gov.br) e o Conselho Nacional de JusLça (www.cnj.jus.br).

•  O Joomla foi desenvolvido em PHP/MySQL. As duas tecnologias são open source e dispõem de número bastante extenso de profissionais qualificados no mercado brasileiro. Tais fatores somados à existência de documentações on-‐line disponíveis para o CMS e seus solwares de infra-‐estrutura garantem a conLnuidade do projeto, simplificando a fase de manutenção evoluLva.







ferramenta Open Source Joomla (Content Management System), uma das que mais crescem no mundo, no âmbito de usuários e extensões. Sua imensa comunidade garante mão-‐de-‐obra especializada e extensões que aceleram o desenvolvimento e diminuem custos







Joomla foi desenvolvido em PHP/MySQL. As duas tecnologias são open source e dispõem de número bastante extenso de profissionais qualificados no mercado brasileiro. Tais fatores somados à existência de documentações on-‐line disponíveis para o CMS e seus solwares de infra-‐estrutura garantem a conLnuidade do projeto, simplificando a fase de manutenção evoluLva.


O projeto


Concepção e de!nição



Recursos de Reunião




Delegação/ Substituição de

Colaboradores


Concepção e de!nição Agenda de Compromissos



Colaboradores





Colaboradores





Colaboradores

Leitor de RSS de sites selecionados

DEZENAS DE SITES





Colaboradores


DEZENAS DE SITES Resumos

executivos





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :)





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo

multicategori-zado, multi-idioma, multi!

Vídeo

Galerias

imagem

“contenidos Relacionados”





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem






Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem


Mas tem que ser legal para

o usuário… Músicas? PODCASTS





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem

“contenidos Relacionados” Twitter MICROBLOG!







Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem


Workflow de processos:

Usuário

precisa saber

quando um

processo

precisa de sua

ação. (Process Maker)







Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua




Blog do representante





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua


Pessoal do RH: “Seria muito bom ter o organograma na intranet… em: FLASH Navegável Automático

INTERATIVO.”








Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua



INTERATIVO.”




Seria

interessan

te,

TEM QUE SER

WEB 2.0





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua



INTERATIVO.”




Seria

interessan

te,

TEM QUE SER

WEB 2.0

MUITOS BANNERS ROTATIVoS





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua



INTERATIVO.”




Seria

interessan

te,

TEM QUE SER

WEB 2.0


CHAT





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua



INTERATIVO.”




Seria

interessan

te,

TEM QUE SER

WEB 2.0


CHAT

Autenticar Via LDAP





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua



INTERATIVO.”




Seria

interessan

te,

TEM QUE SER

WEB 2.0


CHAT

Autenticar Via LDAP

Para ficar mais legal, o

usuário teria

que personalizar sua página...





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua



INTERATIVO.”




Seria

interessan

te,

TEM QUE SER

WEB 2.0


CHAT

Autenticar Via LDAP


usuário teria


Mais de 125 itens, entre links, funcionalidades e interações (post-‐its ficqcios não refletem anotações e documentação reais do cliente)





Colaboradores



executivos

Integraç

ão

webcalend

ar e

Outlook.

..

Exch

ange :) Conteúdo


Vídeo

Galerias

imagem



Usuário

precisa saber

quando um

processo

precisa de sua



INTERATIVO.”




Seria

interessan

te,

TEM QUE SER

WEB 2.0


CHAT

Autenticar Via LDAP


usuário teria


Muitas idéias, poucas prioridades.


Impasse!


Solução adotada: PermiLr que o cliente decida o que é mais importante por

intermédio da Arquitetura da Informação. Saiba+: hQp://pt.wikipedia.org/wiki/Arquitetura_de_informação

Planejar telas

Definir prioridades Criar mapas

de navegação


Exemplo de wireframe de saída do solware Axure. Itens em vermelho sugerem interação. Versão final do wireframe: 4.2.










Wireframes que foram detalhados.


Layout vr. 1.0


Layout vr. 6.0


Layout vr. 6.0 Exemplo de wireframe de página interna. Esta não foi a única página interna a ser detalhada em layout: todos os wireframes Lveram modelos em psd aprovados.


Ok, ok… mas cadê o Joomla?!

Até então o projeto era independente de CMS ou linguagem

de programação. Testes e aprovações foram feitas em

wireframe. Refações de layout ficaram para o PSD.

•  Horas de desenvolvimento economizadas •  Horas de reuniões economizadas •  Vidas economizadas…

•  A dedicação do cliente no planejamento conjunto dará a medida do quanto ele pretende invesLr, e quais são as chances do projeto vingar de verdade. O fato da Opas ter comprado a proposta de uma fase de planejamento mais longa contou muito para a qualidade do projeto.


Planejamento de módulos, plugins, componentes e interações envolvidas através do “fateamento” do wireframe.


Planejamento de módulos, plugins, componentes e interações envolvidas através do “fateamento” do wireframe.


1. Concepção e Definição

2. Arquitetura da informação*

Aprovação

4. Layout (PSDs)

3.Levantamento de requisitos*

Aprovação

Aprovação

Aprovação

5. Interface*

Aprovação

6. Template Joomla

Homologação

7. Desenvolvimento

8. Integrações*

9. MulL-‐idiomas

10. Manual do usuário

Homologação

11. Deploy

12. Manutenção evoluLva

Seq

uen

cia

de a

tiv

idad

es:


Detalhamento de soluções

•  Dupla autenLcação •  Emails e compromissos do Outlook Exchange •  Estrutura organizacional •  Microblog •  LDAP •  K2 •  Podcasts •  Chat •  Painel de avisos •  Outras integrações •  Documentação


Resultado Parcial


Dupla autenticação •  Plugin que permite a autenLcação no frontend e no backend do Joomla da Intranet, a parLr de uma autenLcação comum no frontend.

•  ULlizado em conjunto com um plugin que bloqueia o acesso ao frontend a menos que o usuário esteja autenLcado.

Acesso à intranet Plugin 1 (system): Se não esLver autenLcado vai para página de autenLcação

AutenLcação LDAP – plugin naLvo

Plugin 2 (user): Criação de session em frontend e backend.

Acesso à intranet

Plugin de du

pla autenL

cação

Caso usuário tenha acesso administraLvo

Usuário é redirecionado a uma task da com_login (hack)


Webmail e integração com agenda de contatos

Plugin 2 (user)

Senha é capturada e gravada no objeto registry da session. Nome da variável é vinculado ao ID da session e o valor da variável é codificado.

Classe Exchange hQp://webmail.lalala.com

class_hQp

class_xml

Autor: Troy Wolf

Autor: Troy Wolf

hQp://www.troywolf.com/arLcles/php/exchange_webdav_examples.php


Plugin 2 (user)

Senha é capturada e gravada no objeto registry da session. Nome da variável é vinculado ao ID da session e o valor da variável é codificado. Acesso na classe exchange é direto, já que está dentro do contexto do joomla.

Classe Exchange

class_hQp

class_xml

com_integraLons

Responde a integrações Ajax diversas


INTRANET com_integraLons

Requisição ajax




exchange class_xml class_hQp

Requisição ajax Requisição hQp


Oulook Exchange Server 2003





Resposta HTML







Resposta HTML Resposta JSON







Resposta HTML Resposta JSON


•  QuanLdade e-‐mails não lidos. •  Compromissos de acordo com a data



Microblog, chat, painel de avisos

com_integraLons

Controllers: Microblog

Chat Panel

mod_microblog mod_chat

mod_panel com_microblog

Requisição ajax

Resposta json

Requisição ajax

Resposta json

Requisição ajax

Resposta json

Requisição ajax

Resposta json

Jquery + ajax + json + setInterval


Estrutura organizacional





Janela esLlo ‘lightbox’ com a estrutura organizacional da Opas. Desenvolvimento em Flex. Permite interações de clique e movimentação dos itens disponíveis.


Página de estrutura organizacional

Arquivo Flex Arquivo xml

.swf .xml


Podcasts

com_podcasts (administrator)

mod_podcastcontroller (html + js)

mod_podcastwindow (jwplayer + js)

+ +

+

Template (js principal)


K2

•  Agrega conjunto de funcionalidades úteis ao projeto como: avaliação de conteúdo, comentários, itens relacionados, divulgação em redes sociais e galeria de imagens.

•  Não possui limite de níveis de categorias. •  Agregou ao Joomla 1.5 as funcionalidades necessárias ao projeto


Joomla 1.5 ?

•  Obje&vo – Evitar alterações frequentes – Versão 1.5 foi testada e aperfeiçoada por longo período

•  Com exceção do novo ACL, k2 agregou ao 1.5 o que nos seria úLl na 1.6

•  Domínio do código


Miscelânea


Do

cu

men

tação


Organ

ização

de

arq

uiv

os Template

•  Framework js: jquery •  intranet1.0 – template principal •  intranet1.0_login – tela de login •  iframe •  Todos os arquivos de layout na pasta do template

•  Classes criadas ficam em diretório na library, que pode ser instanciado por meio de: jinclude(‘opas.php.nomeclasse’);

•  Importante: uLlizar ambientes versionados não somente para desenvolvimento mas também para o deploy.


•  O Joomla pode ser bem aplicado em Intranets corporaLvas, diminuindo custos. Essa possibilidade é ignorada pelos usuários da maioria dos CMSs proprietários

•  Quando uma organização desse porte adota o Joomla, todos ganham: – Mais confiabilidade – Novas oportunidades

Co

nclu

sõ

es


Créd

ito

s d

o p

ro

jeto

•  Joomla Open Source MaQers, desenvolvedores do core e do K2

•  Conceito e gestão na Opas Pedro Clé e Júlio Mariano

•  Arquitetura da Informação João Francisco Sebben

•  Responsável técnico da fase de desenvolvimento Rafael Berlanda

•  Requisitos e mapeamento de funcionalidades Rafael Berlanda

•  Layout Raphael Sampaio e Flávio Dias

•  Interface base Daniel Marques Silva

•  Detalhamento de interface e integração com Joomla Rafael Berlanda

•  Desenvolvimento Joomla Rafael Berlanda e Leonardo Lucas

•  Desenvolvimento Flex Antônio Cesar

•  Pesquisa Antônio Cesar e Rafael Berlanda

•  Documentação Antônio Ricardo e Flávio Dias


Ob

rig

ad

o! •  A Deus.

•  Aos presentes na palestra •  À organização do JDBR11 •  Aos colegas de trabalho •  À OPAS. •  Ao desenvolvedor Troy Wolf

•  Rafael de Souza Berlanda •  @berlanda •  [email protected]

Technology

Case da Organização Pan-americana de Saúde