Federal Government Standard Web Portal developed at Joomla!

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

Reasons for standardization(and initiative communication pillars)

@berlanda | #JDBR14


= 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.


= 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.


= 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.


= no new layout spendings

= no custom CMS development spendings

General characteristics

Standardized C Structure


Header

Col

umn

footer

Header


Designation

Keyboard shortcuts Accessibility bar Language bar

Portal name

SubordinationService bar

Search field

Social media and RSS links

Header


Designation

Keyboard shortcuts Accessibility bar Language bar

Portal name

SubordinationService bar

Search field

Social media and RSS links

standardized place forFAQ and contact

Column


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


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

Colors

fonte: secom.gov.br

1 2 3 4

Some Historical dataFrom crisis to opportunity

@berlanda | #JDBR14

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

Some guys reacted that way:

But me and other guys reacted this

way:

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

So "Everythingsgonna bealright"

"Entãotá beleza"

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.

there must be enough time

Chucky Norris is watching

The Joomla distribution project

@berlanda | #JDBR14

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

Allow color and agency name easy configuration

Keep the sections* concept

* 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.

Different Content Items layouts, within the same template

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

The Joomla! distribution caseThings you may find cool+ some technical info

@berlanda | #JDBR14

● 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

http://epwg.governoeletronico.gov.br/barra/

http://epwg.governoeletronico.gov.br/barra/

● 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.

https://github.com/joomlagovbr/documentacao/raw/master/pdf/3.%20Posicoes%20de%20template%20do%20projeto%20portal%20padrao.pdf


Different content item layouts

Diferentes telas de item de conteúdo

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.

Article editing

@berlanda | #JDBR14

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)

Article editing

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.

mod_chamadas1

2 3 4

5 6

7

mod_chamadas8

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



5. listagem-audio

6. listagem-box01

7. phoca_gallery


1. qtd-itens = 1 | titulo = custom

2. variação de cor 1



5. IDs categorias 1 e 2

6. qtd-itens = 8

7. sfx classe = module-box-01

8. Título alternativo = Programas

mod_chamadas(other examples of usage)

mod_chamadas(other examples of usage)

only one module

only

one

mod

ule

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)

http://www.secom.gov.br/atuacao/comunicacao-digital/portal-institucional-padrao







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:


mailto:[email protected]


https://github.com/joomlagovbr

https://github.com/joomlagovbr

http://portalpadrao.joomlacalango.org

http://portalpadrao.joomlacalango.org









Federal Government Standard Web Portal developed at Joomla!

Technology

Transcript of Federal Government Standard Web Portal developed at Joomla!