Department of Information Technology e-Michigan Web Development

Department of Information Technology e-Michigan Web Development

2Department of Information Technology e-Michigan Web Development

Agenda

Web Project Review TeamWhat is a Web Review?Internet Policies reviewLook and Feel, UsabilityES and Web Security Infrastructure Services ReviewQuestions


Web Projects Review Team

Vic Mankowski – e-Michigan Specialist Web Site Review Coordinator

Ric Tombelli – User Interface SpecialistInternet Policies and complianceMichigan.gov Brand ManagerDisplay StandardsUsability Guidelines

Rick Wolfinger – ES Security SpecialistSecurity Requirements and ProceduresSecurity and Privacy Policies

Bill Howell – Data Center OperationsApplication Infrastructure – State Hosting


What’s a Web Review?

Specific Milestones in the Project PlanIdentified Agency Web Project with Enterprise PortfolioInvolvement at earliest - Before Design and BuildOngoing participation during build and testing phases

Current Standards/Guidelines Version 2.0 published August, 2003Available to Project Team through internet site www.michigan.gov/dit Policies and Standards

Reviews to clarify standards as needed

Pre-Launch ChecklistFinal Review of application prior to launchIncludes Michigan.gov redirectFinal security review

E-Michigan Web DevelopmentAvailable to PM’s and Development Teams


Policies, Look and Feel, Usability

Utilize existing Vignette content management infrastructure to

Speed DeliveryLower CostsIncrease Adoption by Users

Put in place standards that apply to all applications regardless of the technology platform. Introduce usability guidelines so users can successfully navigate complex government processes on-line.Affects all sites designed to conduct official State business, whether directed at general consumers or targeted constituent needs


Policies, Look and Feel, Usability

All site designs must incorporate these core policy components:

Accessibility LinkingCopyright Security – to be addressed by Enterprise SecurityPrivacy – to be addressed by Enterprise Security


Where do the Policies appear?

Footer Links should appear at the bottom of each and every display page in this format


Internet Policies - Accessibility

AccessibilityUse of text equivalents, alternate text, drop down menus, java scripts and pop-up windowsADA compliance with the W3C Level A Priority 1 ChecklistMultimedia equivalents (audio/video/animation)Relative text sizingColor contrast of text and background cell colors


Policies - Linking

LinkingSuitability of information linked to from your siteOpening new windows when leaving state sitesPolicies for advertising and exposure to potentially offensive material


Copyright

All content displayed or information transacted through the use of electronic means by way of a web site, application or e-commerce site are the property of and copyright protected by the State of Michigan Copyright protection insures that information is not captured and reused by third parties that portray themselves as an official State of Michigan agent.The information contained within any official State of Michigan web site is published for the users own personal use.


ADA Compliance and Michigan

Accessibility and ADA ComplianceThe State of Michigan has adopted compliance with Federal laws and policies relating to Section 508 of the Rehabilitation Act: Electronic and Information Technology Accessibility Standards (Section 508)

Michigan ADA Compliance rules and Section 508Automated ADA Compliance ToolsRelative Font Sizing in HTML

For the purposes of ADA compliance, all font tags should follow relative rather than absolute font sizing when coding displays or Cascading Style Sheets (CSS).

Font tags, style and colorColor contrast - Color Blindness

Testing your application for ADA complianceJAWS and Linx Readers


-1 and +1 : Examples

Michigan:"Greatness through Challenge"<font style=”font-weight: bold” face='arial, helvetica, sans-serif' color='# 003366' size='+1' style='font-weight:bold'>

Below are examples of font size selection capabilities as seen in both IE and NS browser platforms – use of relative font sizes embedded within the HTML satisfies one of the state’s ADA requirements.


Relative Sizing Example


Font Styles

Font styles such as but not limited to:

comic sans, calligraphy, scripts, brushes, block, over-styled

should be avoided and are not business appropriate for State of Michigan on-line services.


Color Blind Viewing and Testing

www.michigan.gov/treasury www.vischeck.com

Original Image Deuteranope Simulation


Synthesized Voice Technology

The most common form of ADA compliance is the use of text readers that allow individuals to “listen” to the web sites they visit. Synthesized voice technology, now common with almost all operating systems on personal computers, allow users to access sites through their web browser and have the text read to them through audio speakers on the same system.


Lynx Viewers – Text Equivalent

DEQ site filtered through Lynx technology www.delorie.com/web/lynxview.htmlText equivalent allows Jaws reader to accurately interpret a site


ADA Conclusion

There is no absolute ADA “PASS/FAIL”Rather, careful analysis must be performed to evaluate the results of each successive test and then make the corrective action to modify the code to reach full compliance.

All sites are unique, it will be incumbent on development teams to verify that they have tested their site using ADA testing tools.

Making a site flow smoothly using these tools will increase the accessibility of all state of Michigan applications and promote access for all citizens.


Links to 3rd Party Sites

The inclusion of vendor logos and links to commercial sites with the intent to promote sales is not supported. Web sites not under the explicit control of the State of Michigan are required to open in a new and separate browser window.Advertising and other material posted by a third party site are not under the control of the State of Michigan, but may be perceived as such by end users.

As a rule, 3 conditions support the need to link to outside sites:

1. Links to Other Governmental Units & Educational Institutions

2. Links to Private Organizations (if these organizations offer services that complement the information or services offered by Michigan)

3. Links to Non-Profit Organizations


Branding of 3rd party applications

3rd party applications may have areas that are configurable to accommodate the Michigan.gov brand. Please contact the e-Michigan Web Development division to obtain specially configured branding elements.


Michigan.gov Domain URLs

The Michigan.gov standard puts in place redirected URLs from the Michigan.gov domainThese URLs are intended to make it easier for applications to be advertised and marketed, through official state government press releases, point of sale, radio, print, and TV advertising.Domain names should be short, easy-to-read, type and rememberExamples include:

www.michigan.gov/westnileviruswww.michigan.gov/e-licensewww.michigan.gov/gasprices


URL Examples

www.michigan.gov/mapmichigan

www.michigan.gov/detroitmetrotraffic

http://www.mcgi.state.mi.us/mapmichigan/home.asp

http://metrocommute.com/detroitpopup.html

www.michigan.gov/mischolarships

https://treas-secure.state.mi.us/osg/welcome.asp


Application Build Standards

Overall Application Screen ResolutionFixed vs. liquid designElements that must appear on all pagesBanner Header TypesCross Agency Banner TypesSub Header RequirementsInformation ArchitectureFooter RequirementsBrowser Compatibility


Application Screen Resolution

The 800 x 600 pixel monitor resolution (High Color 16bit minimum) is the state’s application build standard. All applications must conform to this minimum display standard and should not require screen resolutions higher than 800 x 600. Fixed table spaces, rather than 100% settings to accommodate the majority of users that conduct business with official State of Michigan sites and applications.


Elements that MUST appear

Banner HeaderArtwork supplied by e-Michigan Web Development

Sub HeaderDirectly under banner header and includes all utility links and required links

Primary Application Display areaIncludes primary user interface and functionality. May utilize Body Only, Left Navigation Only or Left and Right navigation

Policy FooterIncludes all required policy links, support sub header links and copyright information


Banner Header Types

All banner header art is produced exclusively by the e-Michigan Web Development Team. Contact the e-Michigan Web Development Team to receive final art. Banner header art must never be cropped or altered in any way. Banners headers must include an image map link area for application home page and Michigan.gov portal.


Cross Agency Banner Header Types

These banner header types are maintained by the e-Michigan Web Development Team. Alteration of the banner header by other Development Teams or third-party groups is prohibited.


Sub Header Requirements

In ALL cases, a gray, sub header top navigation area appears directly below the banner header. This area follows the same width dimensions as the banner header and is always 25 pixels high. The sub header also includes embedded links; several are required. It should appear on all pages along with the banner header and footer links.


Sub Header Embedded Links

Sub Header top navigation with embedded links and optional search features. The sub-header serves as the primary space for three (3) required utility links:

1. A link back to the michigan.gov portal site2. A home page link to the application

introductory screen or home page3. A contact link to give users a access to

contact information regarding the application or specific site information such as contact email, mail or fax information.


Footer Links and Position

This area appears directly under the main body area of the application and is centered and appears in three (3) lines of text. The Michigan.gov Home, State Web Sites and all Policy links should always point to the originating Michigan.gov URL to maintain absolute version control of official State of Michigan on-line services.These policies (source code) should never be copied, altered to placed directly into the originating application.


Information Architecture Standards

Applications (built outside Vignette) must employ a consistent Information architecture that mimics the style already used by the parent agency web site. This architecture was designed around a customer-focused approach and represents the current model for all site construction.Site Design should follow the Michigan.Gov Standards to achieve a consistent brand identity.


Body Area Only


Left Navigation Only


Left and Right Navigation


Application Example


Application Example


Usability Issues


Traditional Project Life cycle


Iterative Design Process


Achieving Usability


Effective GUI Design Methodology

Methodological Standards: Development Teams should create “usable” systems during the design phase by conducting the following analysis

User Interviews Task Analysis Task Design Paper Prototyping Use Iterative Design Process

1

SOURCE: Human Factors International



Design Standards: Look and Feel requirements that affect the consistency of all on line services produced by the state of Michigan

Functional browser display area of 740 pixels

Banner Header and Michigan.gov branding elements

Sub-header links and location Footer links and location Navigational location and consistency

with Parent site

2

SOURCE: Human Factors International



Design Principles: Using effective writing techniques when creating body content

Use short words that any average user can understand

Use short sentences when possible to help clearly define instructions and meanings

Write in the “active” voice rather than the “passive” voice. Active voice is the best way to identify who is responsible for what action

3

The following information must be included in the application before it is considered complete.

You must include the following information to complete your application.


Wrap up and Questions

Plan for a Web Project ReviewOur Goal: “Painless and Happy”

The Business is the DriverProvide Service to the customer

No SurprisesPre-Launch Checklist should be easy


Call Vic FREE!

To Schedule a Pre-Build Review Call Vic Free [email protected] (517) 241-8636


ES and Web Application Security

The Secure Michigan InitiativeIn order to establish a current baseline, a rapid enterprise-wide risk assessment was conducted. This assessment was based upon the guidance and principles from the:

National Institute of Standards (NIST) Security Handbook

International Standards Organization (ISO) 17799 Security standards

Federal Information Systems Controls Audit Manual from the General Accounting Office (GAO).

This rapid risk assessment covered all areas of IT security for the State of Michigan.


ES and Application Security


ES Org Chart



Application/Server Security Checklist

Help ensure nothing has fallen through the cracks prior to web application being launched.Should be completed and signed approximately 2-4 weeks before the application is launched.Not intended as security guidelines to be followed as web application is being developed.


Security Policy Compliance

Enterprise Security Policy in DITResponsible for all data security, recovery polices and security methodologies for the State. Critical that web sites and applications comply with security rules and standards monitored by Enterprise Security.Provide reasonable protection of sensitive information. Prevent corruption of dataBlock unknown or unauthorized access to our systems and informationEnsure the integrity of information that is transmitted between users of e-government applications and the StateES should be involved in the design process as early as possible, so that network security and privacy issues can be addressed.Enterprise SecurityRick Wolfinger(517) 241-3339 [email protected]


Anonymous Access

What is Anonymous Access?All information published on the internet by the State of Michigan is public and subject to FOIA (Freedom of Information Act) rules.As such, a citizen cannot be denied access to a public, online application simply for security reasonsTherefore, citizens must be informed through the home page, that access to encrypted information within the application is secure and requires them to either have the necessary security credentials or to obtain them directly through the site using on-line self-registration, e-mail or US mail correspondence.


Internet Policies - Privacy

Privacy Policy applies to:Form transactions that require sensitive information such as name, address, email or phone numberCritical identification such as social security number, drivers license number, credit card number, banking ID, account numbers or Date of BirthCollection and storage of email addresses for contact at a later timeE-mail addresses should be properly safeguarded against unlawful use or distribution to third parties.


128 Bit Encryption (IE 6.0)

Using High Level Security and 128 bit Encryption

Home page(s) of an application that requires IE 6.0 must be viewable in IE 5.X and Netscape 5.X to accommodate the greatest number of users at the state’s minimum standard. In the opening page, clearly identify the browser version required to transact secure state business Provide and maintain links to specific commercial software sites (such as IE download sites and Adobe Acrobat sites) that allow installation of specific browser versions needed to maintain application security.


Privacy Policy

Development Teams should consider the following general criteria when designing sites:

Information Collected AutomaticallyInformation Voluntarily SubmittedCookiesInformation Sharing and Disclosure



State of Michigan Security-related Policies

Currently, 28 policies have been written that provide the basis for recommendations by ES for security of web applications, networks, wireless communications.See www.michigan.gov/ricwolfinger to view the policiesFive of the most relevant policies are included here:

1410.17 Network Security Policy1350.11 Security Operational Guidelines for Servers1350.13 Confidentiality and Privacy Protection1310.02 Information Processing Security1460.00 Acceptable Use Policy


Data Center Operations

Infrastructure Services Review


Data Center Operations

Site HostingWhere Site is Hosted Determines Review Team Involvement

Inside State NetworkHosted by DCO

Outside HostingReview ConnectionsSecurityCompatibilityCostsDomain Name


Supported Technologies – Open Systems

Recommended Hardware DellHP/CompaqSun

Recommended Software Windows 2000Unix Sun Solaris HP-UX Citrix

Others SupportedWindows NT 4.0Compaq Tru64IBM AIX


Supported Technologies – Database Management Systems

Oracle9i installed and supported.8i supported.

SQL ServerFor Windows 2000 installed and supported.For NT supported.

Services OfferedSoftware installation and configuration.Version updates and patch releases.Backup and recovery configuration.Extended support can be requested.

Others…Support for other DBMS can be negotiated.


Hosting Services – Support Staff

Technical SupportStaff specialists for Unix, Windows, database, network, configuration and system management, SAN and enterprise backup.Hardware & operating system upgrades.On call problem resolution.

Operations SupportProduction Data Center staffed 7x24.Development Data Center staffed 5 X 8

Best Practices implementedProblem management process.Change management process.Configuration management process.Service Level Agreement management process.Automated system monitoring.

CA UniCenter TNG Symantec’s Enterprise Security Manager Symantec’s Intruder Alert


Hosting Services – Security and Disaster Recovery

Secured environment7x24 environment monitoring (SiteScan).Generator backup for electrical failures.CCTV monitors throughout the facilities.Magnetic card access.7x24 security guards.State of the art smoke detection and fire suppression systems.

Disaster Recovery InfrastructureDedicated fiber connectivity between Data Centers.Remote Mirroring of Storage Area Network (SRDF).Dual power feeds to DR Facility.Automatic offsite tape backup (EDM).


Hosting Services – System Monitoring

CA Unicenter TNGCentral manager / remote agent architecture.Monitors availability of operating systems and all infrastructure elements.Provides end-to-end performance information on servers and DatabasesIntegrated with Remedy ARS used by Enterprise Help Desk.

Symantec’s Enterprise Security ManagerCentral Manager / remote agent architectureMaps security standards into compliance checksProvides Central Repository for managing Security Modules

Symantec’s Intruder AlertCentral manager / remote agent architectureMonitors, detects, responds to system threatsCollects and preserves Central Audit TrailProvides Central Repository for managing activated policy

Controlled by Enterprise Security


Wrap up and Questions

Plan for a Web Project ReviewOur Goal: “Painless and Happy”

The Business is the DriverProvide Service to the customer

No SurprisesPre-Launch Checklist should be easy


Call Vic FREE!

To Schedule a Pre-Build Review Call Vic Free [email protected] (517) 241-8636

Documents

Department of Information Technology e-Michigan Web Development