Department of Information Technology e-Michigan Web Development

Department of Information Technology
e-Michigan Web Development
Agenda
Web Project Review Team
What is a Web Review?
Internet Policies review
Look and Feel, Usability
ES and Web Security
Infrastructure Services Review
Questions
Department of Information Technology
e-Michigan Web Development
1
Web Projects Review Team
Vic Mankowski – e-Michigan Specialist
Web Site Review Coordinator
Ric Tombelli – User Interface Specialist
Internet Policies and compliance
Michigan.gov Brand Manager
Display Standards
Usability Guidelines
Rick Wolfinger – ES Security Specialist
Security Requirements and Procedures
Security and Privacy Policies
Bill Howell – Data Center Operations
Application Infrastructure – State Hosting
Department of Information Technology
e-Michigan Web Development
2
What’s a Web Review?
Specific Milestones in the Project Plan
Identified Agency Web Project with Enterprise Portfolio
Involvement at earliest - Before Design and Build
Ongoing participation during build and testing phases
Current Standards/Guidelines
Version 2.0 published August, 2003
Available to Project Team through internet site
www.michigan.gov/dit
 Policies and Standards
Reviews to clarify standards as needed
Pre-Launch Checklist
Final Review of application prior to launch
Includes Michigan.gov redirect
Final security review
E-Michigan Web Development
Available to PM’s and
Development Teams
e-Michigan Web Development
Department of Information Technology
3
Policies, Look and Feel, Usability
Utilize existing Vignette content management
infrastructure to
Speed Delivery
Lower Costs
Increase 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
Department of Information Technology
e-Michigan Web Development
4
Policies, Look and Feel, Usability
All site designs must incorporate these core
policy components:
Accessibility
Linking
Copyright
Security – to be addressed by Enterprise Security
Privacy – to be addressed by Enterprise Security
Department of Information Technology
e-Michigan Web Development
5
Where do the Policies appear?
Footer Links should
appear at the bottom of
each and every display
page in this format
Department of Information Technology
e-Michigan Web Development
6
Internet Policies - Accessibility
Accessibility
Use of text equivalents, alternate text, drop
down menus, java scripts and pop-up
windows
ADA compliance with the W3C Level A
Priority 1 Checklist
Multimedia equivalents
(audio/video/animation)
Relative text sizing
Color contrast of text and background cell
colors
Department of Information Technology
e-Michigan Web Development
7
Policies - Linking
Linking
Suitability of information linked to from
your site
Opening new windows when leaving state
sites
Policies for advertising and exposure to
potentially offensive material
Department of Information Technology
e-Michigan Web Development
8
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.
Department of Information Technology
e-Michigan Web Development
9
ADA Compliance and Michigan
Accessibility and ADA Compliance
The 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 508
Automated ADA Compliance Tools
Relative 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 color
Color contrast - Color Blindness
Testing your application for ADA compliance
JAWS and Linx Readers
Department of Information Technology
e-Michigan Web Development
10
-1 and +1 : Examples
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.
Michigan:"Greatness through Challenge"
<font style=”font-weight: bold” face='arial, helvetica, sans-serif' color='# 003366'
size='+1' style='font-weight:bold'>
Department of Information Technology
e-Michigan Web Development
11
Relative Sizing Example
Department of Information Technology
e-Michigan Web Development
12
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
.
Department of Information Technology
e-Michigan Web Development
13
Color Blind Viewing and Testing
www.michigan.gov/treasury
www.vischeck.com
Original Image
Department of Information Technology
e-Michigan Web Development
Deuteranope Simulation
14
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.
Department of Information Technology
e-Michigan Web Development
15
Lynx Viewers – Text Equivalent
DEQ site filtered through Lynx technology
www.delorie.com/web/lynxview.html
Text equivalent allows Jaws reader to accurately
interpret a site
Department of Information Technology
e-Michigan Web Development
16
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.
Department of Information Technology
e-Michigan Web Development
17
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
Department of Information Technology
e-Michigan Web Development
18
Branding of 3rd party applications
3rd party applications
may have areas that
are configurable to
accommodate the
Michigan.gov brand.
Please contact the eMichigan Web
Development
division to obtain
specially configured
branding elements.
Department of Information Technology
e-Michigan Web Development
19
Michigan.gov Domain URLs
The Michigan.gov standard puts in place
redirected URLs from the Michigan.gov
domain
These 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-toread, type and remember
Examples include:
www.michigan.gov/westnilevirus
www.michigan.gov/e-license
www.michigan.gov/gasprices
Department of Information Technology
e-Michigan Web Development
20
URL Examples
www.michigan.gov/mapmichigan
http://www.mcgi.state.mi.us/mapmichigan/home.asp
www.michigan.gov/detroitmetrotraffic
http://metrocommute.com/detroitpopup.html
www.michigan.gov/mischolarships
https://treas-secure.state.mi.us/osg/welcome.asp
Department of Information Technology
e-Michigan Web Development
21
Application Build Standards
Overall Application Screen Resolution
Fixed vs. liquid design
Elements that must appear on all pages
Banner Header Types
Cross Agency Banner Types
Sub Header Requirements
Information Architecture
Footer Requirements
Browser Compatibility
Department of Information Technology
e-Michigan Web Development
22
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.
Department of Information Technology
e-Michigan Web Development
23
Elements that MUST appear
Banner Header
Artwork supplied by e-Michigan Web
Development
Sub Header
Directly under banner header and includes
all utility links and required links
Primary Application Display area
Includes primary user interface and
functionality. May utilize Body Only, Left
Navigation Only or Left and Right navigation
Policy Footer
Includes all required policy links, support
sub header links and copyright information
Department of Information Technology
e-Michigan Web Development
24
Banner Header Types
All banner header art is produced exclusively by the eMichigan 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.
Department of Information Technology
e-Michigan Web Development
25
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.
Department of Information Technology
e-Michigan Web Development
26
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.
Department of Information Technology
e-Michigan Web Development
27
Sub Header Embedded Links
Sub Header top navigation with embedded
links and optional search features. The subheader serves as the primary space for
three (3) required utility links:
1. A link back to the michigan.gov portal site
2. A home page link to the application
introductory screen or home page
3. 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.
Department of Information Technology
e-Michigan Web Development
28
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.
Department of Information Technology
e-Michigan Web Development
29
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.
Department of Information Technology
e-Michigan Web Development
30
Body Area Only
Department of Information Technology
e-Michigan Web Development
31
Left Navigation Only
Department of Information Technology
e-Michigan Web Development
32
Left and Right Navigation
Department of Information Technology
e-Michigan Web Development
33
Application Example
Department of Information Technology
e-Michigan Web Development
34
Application Example
Department of Information Technology
e-Michigan Web Development
35
Usability Issues
Department of Information Technology
e-Michigan Web Development
36
Traditional Project Life cycle
Department of Information Technology
e-Michigan Web Development
37
Iterative Design Process
Department of Information Technology
e-Michigan Web Development
38
Achieving Usability
Department of Information Technology
e-Michigan Web Development
39
Effective GUI Design Methodology
1
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
SOURCE: Human Factors International
Department of Information Technology
e-Michigan Web Development
40
Effective GUI Design Methodology
2
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
SOURCE: Human Factors International
Department of Information Technology
e-Michigan Web Development
41
Effective GUI Design Methodology
3
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
The following information must be
included in the application before it
is considered complete.
Department of Information Technology
You must include the following
information to complete your
application.
e-Michigan Web Development
42
Wrap up and Questions
Plan for a Web Project Review
Our Goal: “Painless and Happy”
The Business is the Driver
Provide Service to the customer
No Surprises
Pre-Launch Checklist should be easy
Department of Information Technology
e-Michigan Web Development
43
Call Vic FREE!
To Schedule a Pre-Build Review Call Vic Free
[email protected] (517) 241-8636
Department of Information Technology
e-Michigan Web Development
44
ES and Web Application Security
The Secure Michigan Initiative
In 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.
Department of Information Technology
e-Michigan Web Development
45
ES and Application Security
Department of Information Technology
e-Michigan Web Development
46
ES Org Chart
Department of Information Technology
e-Michigan Web Development
47
ES and Web Application Security
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.
Department of Information Technology
e-Michigan Web Development
48
Security Policy Compliance
Enterprise Security Policy in DIT
Responsible 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 data
Block unknown or unauthorized access to our systems and
information
Ensure the integrity of information that is transmitted
between users of e-government applications and the State
ES should be involved in the design process as early as possible, so
that network security and privacy issues can be addressed.
Enterprise Security
Rick Wolfinger
(517) 241-3339
[email protected]
Department of Information Technology
e-Michigan Web Development
49
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 reasons
Therefore, 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.
Department of Information Technology
e-Michigan Web Development
50
Internet Policies - Privacy
Privacy Policy applies to:
Form transactions that require sensitive information
such as name, address, email or phone number
Critical identification such as social security number,
drivers license number, credit card number, banking
ID, account numbers or Date of Birth
Collection and storage of email addresses for contact
at a later time
E-mail addresses should be properly safeguarded
against unlawful use or distribution to third
parties.
Department of Information Technology
e-Michigan Web Development
51
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.
Department of Information Technology
e-Michigan Web Development
52
Privacy Policy
Development Teams should consider
the following general criteria when
designing sites:
Information Collected Automatically
Information Voluntarily Submitted
Cookies
Information Sharing and Disclosure
Department of Information Technology
e-Michigan Web Development
53
ES and Web Application Security
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 policies
Five of the most relevant policies are included here:
1410.17 Network Security Policy
1350.11 Security Operational Guidelines for Servers
1350.13 Confidentiality and Privacy Protection
1310.02 Information Processing Security
1460.00 Acceptable Use Policy
Department of Information Technology
e-Michigan Web Development
54
Data Center Operations
Infrastructure
Services Review
Department of Information Technology
e-Michigan Web Development
55
Data Center Operations
Site Hosting
Where Site is Hosted Determines Review
Team Involvement
Inside State Network
Hosted by DCO
Outside Hosting
Review Connections
Security
Compatibility
Costs
Domain Name
Department of Information Technology
e-Michigan Web Development
56
Supported Technologies –
Open Systems
Recommended Hardware
Dell
HP/Compaq
Sun
Recommended Software
Windows 2000
Unix
 Sun Solaris
 HP-UX
 Citrix
Others Supported
Windows NT 4.0
Compaq Tru64
IBM AIX
Department of Information Technology
e-Michigan Web Development
57
Supported Technologies –
Database Management Systems
Oracle
9i installed and supported.
8i supported.
SQL Server
For Windows 2000 installed and supported.
For NT supported.
Services Offered
Software 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.
Department of Information Technology
e-Michigan Web Development
58
Hosting Services – Support Staff
Technical Support
Staff specialists for Unix, Windows, database, network,
configuration and system management, SAN and enterprise
backup.
Hardware & operating system upgrades.
On call problem resolution.
Operations Support
Production Data Center staffed 7x24.
Development Data Center staffed 5 X 8
Best Practices implemented
Problem 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
Department of Information Technology
e-Michigan Web Development
59
Hosting Services –
Security and Disaster Recovery
Secured environment
7x24 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 Infrastructure
Dedicated fiber connectivity between Data Centers.
Remote Mirroring of Storage Area Network (SRDF).
Dual power feeds to DR Facility.
Automatic offsite tape backup (EDM).
Department of Information Technology
e-Michigan Web Development
60
Hosting Services –
System Monitoring
CA Unicenter TNG
Central manager / remote agent architecture.
Monitors availability of operating systems and all
infrastructure elements.
Provides end-to-end performance information on
servers and Databases
Integrated with Remedy ARS used by Enterprise Help
Desk.
Symantec’s Enterprise Security Manager
Central Manager / remote agent architecture
Maps security standards into compliance checks
Provides Central Repository for managing Security
Modules
Symantec’s Intruder Alert
Central manager / remote agent architecture
Monitors, detects, responds to system threats
Collects and preserves Central Audit Trail
Provides Central Repository for managing activated
policy
Controlled by Enterprise Security
Department of Information Technology
e-Michigan Web Development
61
Wrap up and Questions
Plan for a Web Project Review
Our Goal: “Painless and Happy”
The Business is the Driver
Provide Service to the customer
No Surprises
Pre-Launch Checklist should be easy
Department of Information Technology
e-Michigan Web Development
62
Call Vic FREE!
To Schedule a Pre-Build Review Call Vic Free
[email protected] (517) 241-8636
Department of Information Technology
e-Michigan Web Development
63