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 s 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 Use of text equivalents, alternate text, drop down menus, java scripts and pop-up windows ADA compliance with the W 3 C 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 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 s 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 readersthat 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
rd Links to 3 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 3 rd 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. 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-to-read , 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 16 bit 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 exclusivelyby 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. 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 s User Interviews s Task Analysis s Task Design s Paper Prototyping s 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 s Functional browser display area of 740 pixels s Banner Header and Michigan. gov branding elements s Sub-header links and location s Footer links and location s 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 s Use short words that any average user can understand s Use short sentences when possible to help clearly define instructions and meanings s 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 mankowskiv@michigan. gov (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: s National Institute of Standards (NIST) Security Handbook s International Standards Organization (ISO) 17799 Security standards s 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 Wolfinger. R@michigan. gov 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 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 s Sun Solaris s HP-UX s Citrix Others Supported Windows NT 4. 0 Compaq Tru 64 IBM AIX Department of Information Technology e-Michigan Web Development 57
Supported Technologies – Database Management Systems Oracle 9 i installed and supported. 8 i 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 7 x 24. 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. s CA Uni. Center TNG s Symantec’s Enterprise Security Manager s Symantec’s Intruder Alert Department of Information Technology e-Michigan Web Development 59
Hosting Services – Security and Disaster Recovery Secured environment 7 x 24 environment monitoring (Site. Scan). Generator backup for electrical failures. CCTV monitors throughout the facilities. Magnetic card access. 7 x 24 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 mankowskiv@michigan. gov (517) 241 -8636 Department of Information Technology e-Michigan Web Development 63
Скачать презентацию Department of Information Technology e-Michigan Web Development
960ab6c2b1a957f9095d26c46dbf5f20.ppt