In response to the government websites standardization ordered by the Brazilian Federal Government, a group of users, developers and designers from different agencies situated at Brasília* joined forces to develop a Joomla! version of the Government Default Web Portal Project, capable of facing up the unique option available, developed at another CMS. Rafael Berlanda was one of those involved in this initiative, as developer and coordinator. This presentation aims to introduce the project history, the choices made in order to comply with the project objectives and also to show few solutions adopted with the purpose of earning development time. It still intends to alert the community to the upcoming challenges of Joomla! usage in Government.

1. Rafael Berlanda | @berlanda
http://goo.gl/X5JNEM
Short link of this translation:
JoomlaDay Brazil 2014
Government Standard Web Portal developed at CMS Joomla
São Paulo, Brazil 1st
and 2nd
May
Original presentation link:
http://goo.gl/4K2b7R
In response to the government websites standardization ordered by the Brazilian Federal
Government, a group of users, developers and designers from different agencies situated
at Brasília* joined forces to develop a Joomla! version of the Government Default Web
Portal Project, capable of facing up the unique option available, developed at another
CMS. Rafael Berlanda was one of those involved in this initiative, as developer and
coordinator.
This presentation aims to introduce the project history, the choices made in order to
comply with the project objectives and also to show few solutions adopted with the
purpose of earning development time. It still intends to alert the community to the
upcoming challenges of Joomla! usage in Government.
* Brazil's Capital

2. About the speaker
@berlanda
● Project coordinator and one of Joomla! Standard
Government Portal developers
● Fan and participant of Joomla Days since 2008;
Member of #JDBR10 organizing group;
● System Analyst specialized in web development and PMP
certified
● Consultant at Brazilian Ministry of Education, has worked
there for seven years
@berlanda | #JDBR14

3. About the Government Portal Standard
It is an initiative of Brazilian Federal
Government to standardize layout, information
architecture and some services of sites and
portals of the Government. It is a project. It is
not a CMS Distribution.
At first, the change was not mandatory. The first project phase
aim at reaching 33 agencies.
source: secom.gov.br

4. About this presentation
1. I do not represent the Secretariat of
Communication of Brazilian Presidency
(SECOM), the Ministry of Education (MEC) or
other government agency neither;
2. The SECOM data showed here are public;
3. All we have done in this project has the
intention of mutual support and promotion of the
Joomla! CMS. No money earned. @berlanda | #JDBR14

5. Topics covered in this presentation
1. Reasons for standardization
2. General characteristics
3. Historical data
4. The Joomla distribution project
5. The Joomla distribution case
6. New challenges and important
notices
@berlanda | #JDBR14

6. Reasons for standardization
(and initiative communication pillars)
@berlanda | #JDBR14

7. source: secom.gov.br
= information architecture
= simpler language
= government news repository
1. Focus on the audience
The content provided at the portal is focused at the main audience. Joined
at a multimedia language of easy understanding, the portal will become
accessible for all. The goal is let the citizen achieve the knowledge and the
understanding about the wanted information.

8. 2. Common digital experience
In order to become easy the identification of Federal
Government related web portals, the Standard Portal
was developed by balancing the established default
structure and each agency singularities. Always focused
on the audience, the standardization was intentional in
order that the citizen does not encounter difficulties to
reach the information by accessing other government
portal. Besides the easy navigation, it is believed that
the Standard Portal will generate more credibility and
positioning to the government itself by creating a digital
identity for the government portals available for the
population.
source: secom.gov.br
= institutional identity
= usability (you have to learn only once)

9. 3. Accessibility e responsive design
According to the Brazilian Law number 5.296 of 2004, that
becomes mandatory the implementation of accessibility criteria
at web portals in order to assist citizens with disability, it was
set in the Standard Portal Home a place (module) dedicated to
the accessibility that lets introduce this audience at the actions
developed and worked by the Brazilian Federal Government. In
the view of the internet access by mobile devices, the Standard
Portal construction occurred based on responsive design, i.e.
the portal is ready to adapt itself to different screen sizes and
keeping the content management organized and effective. In
that way, the access is guaranteed in several platforms.
source: secom.gov.br
= compatible with e-mag 3 *
= adaptable to different
devices
* Accessibility primer of Brazilian Government, third edition

10. 4. Economic Efficiency
The Government Standard Portal was developed under a reusable
structure, that is to say, it can be applied to different agencies. That way
there is no need to invest into new architecture nor into new layouts
because it is possible to use tools that have been already organized and
preformatted. This portal is constituted by ready to use modules, what
might reduces material and human costs.
source: secom.gov.br
= no new layout spendings
= no custom CMS development spendings

11. General characteristics
Standardized C Structure
source: secom.gov.br
Header
Column
footer

12. Header
source: secom.gov.br
Designation
Keyboard shortcuts Accessibility bar Language bar
Portal name
Subordination
Service bar
Search field
Social media and RSS links

13. Header
source: secom.gov.br
Designation
Keyboard shortcuts Accessibility bar Language bar
Portal name
Subordination
Service bar
Search field
Social media and RSS links
standardized place for
FAQ and contact

14. Column
source: secom.gov.br
1
2
1
2
3
4
Header
Column
footer
Header
Up to four items that need to be
featured
Main menu
"Hat"
Menu main subject
Opened menu item
Tree structure that support up to 4
hierarchical levels
Menu item
Link may have an hierarchical level
or not

15. The equivalent term for hat in
Portuguese is a journalistic jargon used
as the main keyword or as the main
subject of a journalistic article. It is
different of a tag, that can be applied
one or more for each article item.
What means "hat" in this context?

16. Side column
source: secom.gov.br
3 4
1
2
3
4
About menu
Formerly known as Law of
Information Access Menu, it is a
mandatory menu of Federal
Government websites. It aims to
provide administrative transparency.
The mandatory menu items are:
institutional information, Programs
and Government Actions, Auditings,
Arrangements, Invitations for Bid
and Contracts, Civil Servants list and
fees, Classified Information and
Center for Communication with the
Citizen.
Content center
List of rich content organized by
type: images, videos, audios,
publications and apps.

17. Footer
fonte: secom.gov.br
First and second columns
They should contain, respectively, all first level items of "hats" (except About Menu and Content
Center) and the service bar.
Third and fourth columns
They provide, respectively, like "hats": social
media list of the agency, RSS (what is it? and
Subscribe) and Navigation (accessibility and
language bars)
Government brand
Brand that represents the visual identity of
President Dilma Roussef Government
Copyrights and development
Content rights information and CMS used for
development. This last information is not
mandatory.
Information access stamp
Related with the Law of Information
Access, this digital stamp has a link for
www.acessoainformacao.gov.br

18. Colors
fonte: secom.gov.br

19. 1 2 3 4

21. Some Historical dataFrom crisis to opportunity
@berlanda | #JDBR14

22. May June August September
Prospect
meetings
Researches
Pinnacle of
the Popular
Manifestations*
* The Brazilian Government had considered the Portal Standardization a piece of the communication strategy to respond to the Brazilian Citizens Claims
Release of the
Plone Version at
the International
Conference of
free software and
Electronic
Government
Oficial Presentation of
the Project of
Standardization (and the
Plone Version) for all
involved agencies
by SECOM
Deadline:
December 31st

23. May June August September
Prospect
meetings
Researches
Pinnacle of
the Popular
Manifestations*
* The Brazilian Government had considered the Portal Standardization a piece of the communication strategy to respond to the Brazilian Citizens Claims
Release of the
Plone Version at
the International
Conference of
free software and
Electronic
Government
Oficial Presentation of
the Project of
Standardization (and the
Plone Version) for all
involved agencies
by SECOM
Deadline:
December 31st

24. 1. There was only the Plone Distribution ready to
use, what could come to mass CMS migration;
2. Potential Market Reduction;
3. Working teams would be changed;
4. New infrastructure services would must be hired
5. Important Joomla Government cases would be
lost.
Risks
@berlanda | #JDBR14

25. Some guys
reacted that way:

26. But me and other
guys reacted this
way:

27. Fortunately, it would be avoided
● We noticed that the specific CMS
development contract of SECOM did not
restrain a…
● … CMS Joomla Distribution independent
development.
@berlanda | #JDBR14

28. So "Everythings
gonna be
alright"

29. "Então
tá beleza"

30. October November December
Meetings and Presentations: SECOM
and each Agency Team
Requirements detailment
Joomla Development team
recruitment
J!Calango and SECOM coordinators
meeting
New HTML interface required
HTML interface
Joomla 3.x Distribution
Joomla 2.5.x Distribution

31. Problems
@berlanda | #JDBR14
● Short time (nobody was able to develop fulltime)
● How to deliver the project and change their own
agency websites with the same deadline?
● Free labor and possible negative exposition,
according to the results. "Why should I involve
myself?"
● Less people appeared than the expected.

33. there must be enough time
Chucky Norris is
watching

34. The Joomla distribution project
@berlanda | #JDBR14

35. Stakeholders identification
● To whom to communicate
(and how to)
● On whom we can count
● With whom we should concern ourselves
This list let us know:
Identification Impacts in project
Name Expertise / role Works at Contact information
Influence
(1 to 5)
Interest
(1 to 5)
Project Role Classification
Homologation
Development
Potential user
Potential user
HTML develop.
Neutral
Supporter
Resistant
Supporter
Supporter

36. Joomla Distribution Project Goals
1. To support existent Government Federal Agencies using
Joomla! by mitigating or eliminating possible CMS
migration risks (regarding 2.5 and 3.x versions)
2. To make official the use of Joomla! in Brazilian
Government
3. To integrate Joomla! Government Users and Developers
@berlanda | #JDBR14

37. Planning
● Scope
We aimed to make a Joomla! version based on the Plone
version public area so equal as possible, considering the
project requirements and the first Plone release.
@berlanda | #JDBR14

38. Some project requirements
@berlanda | #JDBR14
● It is needed to apply the base layout
● It is needed to preserve the project pillars, specially
the accessibility and responsive design advices
● It is needed to keep compatibility since IE7 (web
statistics from brasil.gov.br indicated this necessity)
● Emulate the same functionalities of the home page
and of different internal pages of the Plone first
release

39. Allow color and agency name easy
configuration

40. Keep the sections* concept

41. * What means sections in this context?
In portuguese, they are called "Editorias". They
are main pages of specific contents. For
example, considering the Brazilian Ministry of
Education, a section would be "College
Education", other would be "High School
Education" and another would be "Elementary
School Education". Each one will have its own
section.

42. Different Content Items layouts,
within the same template

43. In a strategic way, we had preference to invite
to the following profiles:
○ Professionals working for Federal Government
Agencies and sharing the same demand
○ Professionals of close locations, what allow us to
set face meetings, if necessary
○ Renowned professionals of the Joomla!
Community, what would bring quality for different
project phases
Work team
@berlanda | #JDBR14

44. In a strategic way, we had preference to invite
to the following profiles:
○ Professionals working for Federal Government
Agencies and sharing the same demand
○ Professionals of close locations, what allow us to
set face meetings, if necessary
○ Renowned professionals of the Joomla!
Community, what would bring quality for different
project phases
Work team
@berlanda | #JDBR14

45. Team
And, when the wanted profiles do not want to collaborate
with the project, we agreed to:
Create detailed work packages and distribute them for
those interested in the project (we did it between october
and november in order to support the interface development)
@berlanda | #JDBR14

46. ● HTML interface
(It was not possible to reutilize the same interface
used at the Plone release, because it was based
on a specific framework output)
● 2.5 release (many agencies are still using this
version at the moment)
● 3.x release (important projects will be released
directly in this version)
Project phases
@berlanda | #JDBR14

47. Interface Technologic definition
● Since we had to reprogram the interface we applied
market standard technologies compatible with the
project requirements:
○ HTML5: with alternative solutions for audio and video players
○ Less CSS: common CSS definitions grouped by type. Less include
file names begin with underline (example: _include.less)
○ Bootstrap 2.3.2: Version compatible with IE7. A custom grid was
used to be so similar as possible to the grid proposed for the project
○ Font awesome 3.2.1: version compatible with IE7.
@berlanda | #JDBR14

48. Interface Technologic definition
● Since we had to reprogram the interface we applied
market standard technologies compatible with the
project requirements:
○ HTML5: with alternative solutions for audio and video players
○ Less CSS: common CSS definitions grouped by type. Less includes
names begins with underline (_include.less)
○ Bootstrap 2.3.2: Version compatible with IE7. A custom grid was
used to be so similar as possible to the grid proposed for the project
○ Font awesome 3.2.1: version compatible with IE7.
@berlanda | #JDBR14

49. Project life cycle desired
HTML interface
(team 1)
2.5 release
(team 2)
3.x release
(team 3)
Management
(coordination team)
beginning
End
Maintenance
(teams rotation)

50. Project life cycle performed
HTML interface
(coordination /
volunteer I)
2.5 release
(coordination /
team 2)
3.2 release
(coordination / team 2 /
volunteer II)
Fim
Evolutive maintenance of the product
(coordination)
beginning

51. The Joomla!
distribution case
Things you may find cool
+ some technical info
@berlanda | #JDBR14

52. ● Phoca Gallery
Image gallery
● JCE Editor
Used until 3.2 version. Recently
removed.
● YouTube Gallery (component and
module)
Video gallery - decision influenced by a
previous survey done by Ministry of
Communications Team.
Extensions installed and configured
● Blank Component
For homepage and sections page
● K2
Publication gallery and audio gallery
@berlanda | #JDBR14

53. ● Template padraogoverno01
This template has all extensions view overrides.
● mod_barragoverno
Federal Government Bar and useful settings.
● mod_chamadas
Main content solution for homepage and section pages
● mod_container
Main structure solution for homepage and section pages
Developed extensions

54. ● mod_htmlcustom
HTML fast coding as module, without rich editor
● mod_redes_sociais
Basic module for twitter timeline and facebook used in homepage
Developed extensions

55. Template settings
Template color
Font Style URL
Icons style
Designation
Portal name
Subordination
Adjust class for
portal name
Show Access
Information
Digital Stamp
Show BRASIL
Government
brand
Insert copyright
and
development
information

56. ?cor=azul
tema=azul
According to the settings shown before, the template can have a different main color, use a icon style, display related logos on
footer or be a high contrast version. Variables sent by GET can change the template main color, if it is allowed at settings.

57. Dynamic module position names
For more information follow this link (in Portuguese)
According to the page class defined at the menu
item editing, some template name positions will
be changed. It allows to set modules for specific
pages without to use module assignments. The
benefit of it is more filtering available options
based on position name, no need to access
each module to identify assigned menu items,
less module positions and template variations.

58. Different content item layouts

59. Diferentes telas de item de conteúdo

60. Explanation
Inside the template overrides folder, it was
created a helper for support the com_content
article override. It has a function for identify if
the article category alias or its parent category
alias is equal to any file name inside the
respective folder. If the file is found, it will be
used instead of the default.php file.

61. News hat
(Key reference file)
News title
Introtext Social Media
sharing options
(mod. HMTL custom)
Journalistic Article
"eye"
(citation tag applied
inside the Rich Text
Editor)
Fulltext
Categories
(main and all parent
categories)
Related subject(s)
(metakeys / tags)

62. What means "eye" in this context?
The equivalent term for eye in
Portuguese is a journalistic jargon too
and it is used to indicate a highlighted
piece of the text, not necessarily a
citation.

63. Article editing
@berlanda | #JDBR14

64. Fulltext
News hat
(Key reference file)
News title
Introtext Social Media
sharing options
(mod. HMTL custom)
Lightbox image
(Full article image)
Image credits
(Caption field)
Photo caption
(Image alt text)

65. Article editing

66. Explanation
● If the name of the chosen image for Full
article image field has the prefix 'thumb-', a
bootstrap based lightbox will be auto applied
to the image. The larger image shown when
the lightbox is active should have the same
name, without the prefix.

67. mod_chamadas
1
2 3 4
5 6
7

68. mod_chamadas
8

69. Explanation
● Eight module instances in the homepage are
mod_chamadas instances. "Chamadas"
means calls, in English. In this case it is
possible to translate as generic items list.
● This flexible module allows you to set the
data model input and the view style output,
besides override some informations, like a
specific title.

70. mod_chamadas process graph
Data source
configuration
Output configuration
K2 Phoca Gallery
Content items
Photo gallery
Featured items
News list with intros
@berlanda | #JDBR14
Parameters and data override
configuration

71. some mod_chamadas applied settings
Data source
configuration
Parameters and data override
configuration
Output configuration
1. article_content
2. manual
3. manual
4. manual
5. article_k2
6. article_content
7. listagem-box01-galeria
8. article_content
1. manchete-texto-lateral
2. chamada-secundaria
3. chamada-secundaria
4. chamada-secundaria
5. listagem-audio
6. listagem-box01
7. phoca_gallery
8. chamada-secundaria
1. qtd-itens = 1 | titulo = custom
2. variação de cor 1
3. variação de cor 2
4. variação de cor 3
5. IDs categorias 1 e 2
6. qtd-itens = 8
7. sfx classe = module-box-01
8. Título alternativo = Programas

72. mod_chamadas
(other examples of usage)

73. mod_chamadas
(other examples of usage)
only one module
onlyonemodule

74. Vertical modularization:
just use the template native position
Horizontal modularization: use mod_container
inside a native position and set it to show a new
specific position inside it
Flexibility:
Until 3 columns based on twitter bootstrap 2.3.2
class names
Benefits:
A simpler and unique template allows you to create
more complex layouts with position combinations
● Objective: to allow a vertical and horizontal complete modularization
mod_container

75. mod_container
For more information follow
this link (in Portuguese)
mod_container
position
configuration
mod_container main
class configuration

76. ● Little experience with github usage (at the beginning)
● Many extensions used
● Little time to focus at a specific installation package,
without to keep the Joomla code together
● To simplify a local installation: just download the
package, execute the SQL script and change the
config file
Let me know: Why the complete
Joomla! code is versioned under
github distribution repository?
@berlanda | #JDBR14

77. Joomla! Distribution Project outcomes
@berlanda | #JDBR14
To support existent Government Federal Agencies using Joomla!.
"It was not the 'dreamed' Joomla! Standard Portal, but it was the
Joomla! Standard Portal possible to be done right now. It will be a
great quick start".
To make official the use of Joomla! in Brazilian Government. The
distribution github repository link is available at the Secretariat of
Communication of Brazilian Presidency (SECOM) as a alternative
for all interested agencies.
To integrate Joomla! Government Users and Developers (still
there is too much to do)

78. Lessons learned
● The product development reached success
(product)
● With reference to the project management
method, it was not been done all that was
expected, because:
○ Role accumulations prejudiced the project
management
○ The opportunity to consolidate a people integration
legacy is passing. @berlanda | #JDBR14

79. Lessons learned
● This community development project
reproduces the same behavior problems of
our local community:
○ few people work and many others just reap the
benefits
○ many people promise to get involved, but few people
actually do
○ community projects are treated like hobbies
@berlanda | #JDBR14

80. Lessons learned
● Initiatives like that will advance faster if
professionalization of the projects occur:
○ Creation local associations to support and finance
development initiatives like that.
○ The remuneration will be able to gather professionals
unavailable so far.
○ The remuneration and the association creation allow us be able
to create a contract relationship.
@berlanda | #JDBR14

81. Next challenges
● Landing page management - extension development
● Agenda of commitments for leadership roles - extension
development
● Government Vocabulary controlled implementation - extensions
development
● Expand the project documentation
● New security assessments
● Creation of ready to use virtual machines (Vagrant)
● Include the initiative code in Brazilian public software portal
● to keep the standard de facto
● Manter uma padronização (a quest of all involved)

82. Next challenges of Brazilian Joomla!
Community regarding Government sites
● Maintain dialogue with the management
committee of the Federal Government Standard
Portal
● Take back the interaction between Joomla
users and developers of Joomla in Government
● Maintain dialogue with others CMS communities
@berlanda | #JDBR14

83. THIS DISTRIBUTION IS INDICATED FOR
EXPERIENCED JOOMLA PROFESSIONALS.
Disclaimer:
The volunteers involved in this project are not responsible for the misuse of this
package as well as by the incorrect configuration of the servers regarding security
and performance settings. The usage of a LAMP (Linux, Apache, MySQL, PHP)
environment for production servers is recommended, what implies strict folder
permissions settings, restricting access to the administrator URL and directory,
performing backups and other good practices.
IMPORTANT NOTICES
@berlanda | #JDBR14

84. Thanks to
● JUG: Joomla! Calango (specially Ivanio Luiz and Paulo Ries)
● #JDBR14 staff
● Secretariat of Communication of Brazilian Presidency team
● Ministry of Education different departments
● Ministry of Defense and Ministry of Communication teams
● Roberson Pinheiro (National Council of Justice)
● Antônio Morais (Ministry of Education)
● Tiago Garcia (Ministry of Health)
● Lucas Cosso (Ministry of Education / Indra Company)
● Bruno Batista (CTIS Company)
● Érico Andrei (Plone Community) @berlanda | #JDBR14

85. Rafael de Souza Berlanda
@berlanda
rafaelberlanda@gmail.com
Use / test / take part!
github.com/joomlagovbr
http://portalpadrao.joomlacalango.org
joomlagovbr@joomlacalango.org
joomla-e-gov-br@googlegroups.com
joomlacalango@googlegroups.com http://goo.gl/X5JNEM
Short link of this translation:
Original presentation link:
http://goo.gl/4K2b7R