federal government standard web portal developed at joomla!
DESCRIPTION
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.TRANSCRIPT
Rafael Berlanda | @berlanda
http://goo.gl/X5JNEMShort link of this translation:
JoomlaDay Brazil 2014
Government Standard Web Portal developed at CMS JoomlaSã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
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
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
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
Topics covered in this presentation
1. Reasons for standardization2. General characteristics3. Historical data4. The Joomla distribution project5. The Joomla distribution case6. New challenges and important
notices@berlanda | #JDBR14
source: secom.gov.br
= information architecture
= simpler language
= government news repository
1. Focus on the audienceThe 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.
2. Common digital experienceIn 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)
3. Accessibility e responsive designAccording 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
4. Economic EfficiencyThe 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
Header
source: secom.gov.br
Designation
Keyboard shortcuts Accessibility bar Language bar
Portal name
SubordinationService bar
Search field
Social media and RSS links
Header
source: secom.gov.br
Designation
Keyboard shortcuts Accessibility bar Language bar
Portal name
SubordinationService bar
Search field
Social media and RSS links
standardized place forFAQ and contact
Column
source: secom.gov.br
1
2
1
2
3
4
Header
Col
umn
footer
Header
Up to four items that need to be featured
Main menu
"Hat" Menu main subject
Opened menu itemTree structure that support up to 4 hierarchical levels
Menu itemLink may have an hierarchical level or not
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?
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.
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
May June August September
Prospectmeetings
Researches
Pinnacle ofthe 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 agenciesby SECOM
Deadline:December 31st
May June August September
Prospectmeetings
Researches
Pinnacle ofthe 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 agenciesby SECOM
Deadline:December 31st
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 hired5. Important Joomla Government cases would be
lost.
Risks
@berlanda | #JDBR14
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
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
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.
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 informationInfluence(1 to 5)
Interest(1 to 5)
Project Role Classification
Homologation
Development
Potential user
Potential user
HTML develop.
Neutral
Supporter
Resistant
Supporter
Supporter
Joomla Distribution Project Goals1. 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
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
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
* 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.
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
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
TeamAnd, 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
● 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
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
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
Project life cycle desired
HTML interface(team 1)
2.5 release(team 2)
3.x release(team 3)
Management(coordination team)
beginningEnd
Maintenance(teams rotation)
Project life cycle performed
HTML interface(coordination / volunteer I)
2.5 release(coordination / team 2)
3.2 release(coordination / team 2 / volunteer II)
FimEvolutive maintenance of the product(coordination)
beginning
● Phoca GalleryImage gallery
● JCE EditorUsed 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 ComponentFor homepage and sections page
● K2Publication gallery and audio gallery
@berlanda | #JDBR14
● Template padraogoverno01This template has all extensions view overrides.
● mod_barragovernoFederal Government Bar and useful settings.
● mod_chamadasMain content solution for homepage and section pages
● mod_containerMain structure solution for homepage and section pages
Developed extensions
● mod_htmlcustomHTML fast coding as module, without rich editor
● mod_redes_sociaisBasic module for twitter timeline and facebook used in homepage
Developed extensions
Template settingsTemplate 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
?cor=azultema=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.
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.
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.
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)
FulltextCategories(main and all parent categories)
Related subject(s)(metakeys / tags)
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.
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)
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.
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.
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
some mod_chamadas applied settingsData 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
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
mod_container
For more information followthis link (in Portuguese)
mod_container position configuration
mod_container main class configuration
● 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
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)
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
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
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
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)
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
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
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
Rafael de Souza Berlanda@[email protected]
Use / test / take part!github.com/joomlagovbr
http://[email protected]
[email protected]@googlegroups.com http://goo.gl/X5JNEM
Short link of this translation:
Original presentation link:
http://goo.gl/4K2b7R