AO39 and GWT Orientation - iGovPhil Programi.gov.ph/wp-content/uploads/2015/06/GWHSandGWTOrientation-DOST.pdf•Content Area Layout 3 Columns (left sidebar + content area + right sidebar)

AO39 and GWT Orientation

Roxanne Aviñante & Stephanie Azarias

• Agenda– Overview of A.O. 39

– Guidelines on the content, structure, and design of government websites

– Content Preparation

– Overview of the Migration Procedure to the GWHS

Administrative Order No. 39

Mandating Government Agencies to migrate to the Government Web Hosting Service (GWHS) of the

Department of Science and Technology-Information and Communications Technology Office (DOST-ICTO)

• Section 1: Establishment of the GWHS– For hosting the websites of :

• National Government Agencies (NGAs)

• Government Financial Institutions (GFIs)

• Government-Owned or Controlled Corporations (GOCCs)

• State Universities and Colleges (SUCs)• Inter-agency collaborations, programs and projects

Administrative Order No.39

• Section 2: Responsibilities of the Implementing Agencies– Content Coverage: NDSCG and OP-PCDSPO

– Technical Assistance: DOST-ICT Office


• Section 3: Responsibilities of hosted agencies– Produce and regularly update the contents of their

websites, subject to the UWCP and its implementing rules;

– Develop online services offered through their websites, subject to prevailing policies, rules and regulations of the government; and

– Employ a webmaster duly designated by the Head of Agency


• Section 4: Migration of Existing Website– Complete migration within one year from the

effectivity of this AO

– Content compliant with the UWCP within 180 days from its issuance

– Websites that have been defaced or rendered inaccessible by unauthorized parties within the last 6 months shall be given priority


• Section 5: Government IP Exchange and Data Peering– The DOST-ICTO shall establish a Government

Internet Protocol (IP) Exchange (G/IPX) facility.


• Section 6: Cost of Operating the Facilities and Services of the GWHS– The DOST-ICTO shall include in its annual

appropriations the amounts necessary for the personnel services and its maintenance and other operating expenses.

– allowed to charge fees from its subscribers for the use of its facilities and services on a cost recovery basis to fund its variable expenses


• Section 7: Use of the Electronic Government Fund (e-Gov Fund)– The DOST-ICTO is hereby authorized to set aside a

Website Migration Fund to be sourced from e-Gov Fund, subject to existing laws, rules and regulation.


• Section 8: Reports– The NDSCG shall submit reports, annually and/or as

often as maybe required by the President, relative to the implementation of the provisions of this AO.


• Section 9: Repealing Clause– All issuances, orders, rules and regulations or parts

thereof which are inconsistent with the provisions of this AO are hereby repealed, amended or modified accordingly.


• Section 10: Separability Clause– Should any provision of this AO be declared invalid or

unconstitutional, the other provisions not affected thereby shall remain valid and subsisting.


• Section 11: Effectivity– This AO shall take effect immediately

– DONE, in the City of Manila, this 12th day of July, in the year of our Lord, Two Thousand and Thirteen.


Guidelines on the content, structure, and design of government websites

An annex to the Memorandum Circular of the GWHSissued by the DOST-ICT Office

• Scope– Applies to:

• NGAs

• GFIs

• GOCCs

• Inter-agency projects

– Advocated to:• SUCs

• Constitutional Bodies

• LGUs

• Legislative and judicial branches of the government

Website General Guidelines

• Basic Interface Requirements– Responsive framework

– Standard width of 1190px on regular screens and scales down on smaller devices of 320px in width

– 12-column grid layout on regular screens and scales down to a 1-column layout on mobile devices


• Home Page– Major sections:

• Top bar

• Masthead

• Auxiliary Menu (optional)

• Banner

• Content Area

• Agency Footer

• Standard Footer


• Inner Page– Sections:

• Top bar

• Masthead

• Auxiliary Menu (optional)

• Content Area

• Agency Footer

• Standard Footer


• Content Area– May be divided only into three, two, and one

column(s)


• Section Components– Top bar

• Republic Seal

• Main Navigation– Home

– Transparency

– Products and Services/Major Programs and Projects

– Contact Us

• Search Bar


• Section Components– Masthead

• Agency Logo

• Republic of the Philippines

• Line / Department Name (optional)

• Agency Name / Region (optional)

• Tagline (optional)

– Auxiliary Menu

• Extra set of navigation

• Breadcrumbs


• Section Components– Content Area

• White background only (#fff)

• Images and icons, with descriptions

• Transparency Seal

• Color: agency may use its own colors

• Font styles:– Font face: Verdana, Arial, Tahoma

– Style: Bold, Underline, Italic

– Size: 10-12 pt


• Section Components– Agency Footer

• Downloads Page

• Archives Page

• Site Map

– Standard Footer• Link of the Government Directory

• Seal of the Republic of the Philippines

• Copyright Placement “All content is public domain unless otherwise stated.”


• Section Components– Suggested Content

• FAQs

• Social Media Modules

• Events Calendar

• Philippine Standard Time

• Secretary's Corner/Director's Corner/Dean's Corner

• Photo Galleries


• Note– Agencies who will not be using the prescribed

template can ask for a copy of the template assets (html, css, images)

– Sample websites:

• www.gov.ph

• http://i.gov.ph


http://www.gov.ph/

Content Preparation

• Top Bar✔ Republic Seal – linked to www.gov.ph✔ Home✔ Transparency✔ Products and Services and/or Major Programs and

Projects✔ Contact Us✔ Search Bar

Required Features

http://www.gov.ph/

• Masthead✔ Agency Logo (shall not exceed 100x100 pixels)✔ Republic of the Philippines✔ Line (Separator)✔ Department Name (optional)✔ Agency Name

Required Features

• Masthead✔ Agency Logo (shall not exceed 100x100 pixels)✔ Republic of the Philippines✔ Line (Separator)✔ Department Name (optional)✔ Agency Name

Required Features

• Banner✔ Slider image(s) – full width: 1190px

Required Features

• Agency Footer✔ Archives✔ Site Map / Website's Directory

Required Features

• Standard Footer✔ Link of Government Directory✔ Seal of the Republic of the Philippines✔ Copyright Placement

Required Features

• Transparency Seal (250x250 pixels)– The transparency seal shall be "prominently displayed

on the main page of the website of a particular government agency."

Required Features

✔ Helpdesks and FAQs✔ Social Media Modules ✔ User Login / Password

Requirements for Citizen's Engagement and Transactional Modules

• Events Calendar

• Philippine Standard Time

• Examination Results

• Secretary's Corner / Director's Corner

• Link to Webmail Service

• User Login and Password

• Photo Galleries

Other Possible Features to Include / Recommended Sections

• Content Area Layout ✔ 3 Columns (left sidebar + content area + right sidebar)✔ Left sidebar – Icons (recommended 45x45 pixels) and

other module images required to publish as advised by the DOST-CO

✔ Content Area – under the discretion of the agency; content presentation may vary depending on the requirement of Councils, Service Institutes, RDIs, Regional Offices, Central Office

✔ Right sidebar – Galleries/Polls, Social Media Modules, Link to Video Streaming

DOST Agencies Common Features

• Identified Menu Items, Navigations, and Icons✔ About Us – Top Menu: Transparency and/or Auxiliary

Menu✔ Mission/Vision – Top Menu: Transparency and/or

Auxiliary Menu✔ Programs and Projects and/or Products and/or

Technologies and/or Services – Top Menu


• Identified Menu Items, Navigations, and Icons✔ Procurement Page / Bids – Top Menu: Transparency✔ Careers / Job Opportunities – Icon on the left sidebar✔ Citizen's Charter – Top Menu: Transparency✔ Latest News – Homepage, Featured Articles✔ RSS Feeds – Icon on the left sidebar of the content

area✔ Philippine Standard Time – module on the right

sidebar


• Identified Menu Items, Navigation, and Icons✔ For DOST-CO website – centralized RSS feeds from

all the agencies for Job Opportunities, News and Events, Announcements, Bids(?)

✔ Access Instruction Page – Top Menu or Auxiliary Menu?

✔ Downloadable Files – Auxiliary Menu✔ Agency Links – Top Menu✔ Promotional Events – upload as slider image in the

Banner Section; image width: 1190px


• Other features, navigations, icons, and modules that are unique for each agency shall be put in Auxiliary Menu, Left Sidebar or Right Sidebar of the Content Area.


• It is the government's main thrust to provide effective, efficient, accessible, and transparent governance to the general public. As such, government agency websites shall comply with government provisions and initiatives to make them more user-friendly.

Open Access: Transparency and Accessibility of Government Content

• An agency website shall prominently display the Transparency Seal on its main page, as provided for by Section 93 of the General Appropriations Act of FY2012.

On Compliance With the Requirements of Transparency Seal

• To make information more accessible to the public, agencies shall submit its datasets to the data portal (data.gov.ph), to be launched by government. A guideline shall be set with regard to data that can be shared and cannot be disclosed to the public.

On the Release of Government Data and Datasets (Open Data Initiative)

• Government agency websites shall use the responsive framework to allow the end-user to access the website content on different types of devices. Website layout shall scale down to a one layout on the smallest of mobile devices.

Responsive Web Design: Uniformity Across Platforms and Devices

• Accessibility to People With Disabilities (PWDs)

• Use of Gender-Fair Language

• The PCDSPO Style Guide

• Online Writing Guidelines

• Use of Multimedia for Web Optimization– A guideline on the use of Multimedia for Web Optimization

is being developed to provide guidance to government agencies in posting multimedia materials on their websites.

Specific Content Guidelines

GWHS Migration ProcedureOutlined in the Technical and Security Guidelines Annex of

the Memorandum Circular on the GWHS

• Submit a letter of intent

• Provide the following information:– URL/s, Database Platform, Database Size, Scripting Language,

Applications, Application Size, Computing Platform, CMS (if any)

• Provide a complete copy of your website

• Provide a list of 3 technical contact persons– CIO, MIS head, web administrator/web master, website content

manager

GWHS Migration Procedure

• Notes– Websites hosted at PREGINET will automatically be

migrated to the GWHS• Provide the list of technical contact persons

– Prioritization• Agencies with expiring web hosting service this year

• Hacked websites since January

GWHS Migration Procedure

For comments and queries, email

[email protected]

Documents

AO39 and GWT Orientation - iGovPhil Programi.gov.ph/wp-content/uploads/2015/06/GWHSandGWTOrientation-DOST.pdf•Content Area Layout 3 Columns (left sidebar + content area + right sidebar)