ࡱ> rtqc FjbjbSS L114$ ]$P* $N |+  Lh h h *******,-/$*0*h h S vVh h *^|^*rw)t* <sVa* MIT-ITS WEB SITE STANDARDS Look and Feel Standards Overview The "look and feel" of a web site is very important to the success of a web site. The "look", meaning the page colors and graphics considered as a whole, should give the user a sense of professionalism and continuity. The "feel", which we will define as the specific location of common elements such as navigation elements, should give the user an easy means by which to move about the web site. Together, the look and feel should reflect the purpose with which the site was designed. As much as possible, MIT-ITS web pages should conform to the general MIT web site standards. They must also conform to the established accessibility guidelines. See the related MIT URLs for more information: "Guidelines for Web Pages at MIT" - http://web.mit.edu/guidelines.html "Universal Design and Web Accessibility" - http://web.mit.edu/ada/waccess.html Consistency of look and feel in all areas of a web site allows users to develop an intuitive model for using the site. Users can then rely on that intuitive model when they need to use a part of the site new to them. The intuitive model helps users learn new functions and transactions more quickly and easily. For this reason, all pages on the MIT-ITS web site are required to conform to a standard look and feel In simplest terms, that standard is defined as having a light blue background with a standard header and footer. Other specific standards apply. General Specifications Download Time An important aspect of development is making certain that the end-user will be able to use the site in a reasonable amount of time. This download time includes the total time it will take to download the web page itself, plus all of the graphics included on that page. All pages intended for community viewing should take less than 40 seconds to download. Comment Tags Include comment tags around every element that is a functional piece of html. Colors, Fonts, Layout, Formatting As much as possible all color, font, layout and formatting will be controlled by an external style sheet. This improves download time, improves accessibility and makes maintenance easier. The style sheet has been written with the understanding that Netscape is the required browser for using ITS. Screens may display the pages differently depending on their support of css. With styles turned off these pages are still usable, i.e., they degrade gracefully. The link to the style sheet is included within the block of each page:  OR Style Sheet Contents  Home Page The home page, index.html, must contain: Hours of operation, and business support. Email address and phone number for business and technical support. Reference to the Americans with Disabilities Act of 1990. Links to all MIT-ITS functions. Links to help, getting started (certificates, kerberos id, etc.) System status message (UP or DOWN). Link to MIT home page. Link to SAP for MIT home page. MIT copyright at bottom of screen. Other Pages All content on the MIT-ITS site must be pertinent to MIT interests. Content should also be reviewed by process-owners for approval and suggestions. All MIT-ITS pages other than the home page must contain the standard MIT-ITS header, navigation area, and footer. Both the header and the footer must be inserted through the use of server-side includes. The standard MIT-ITS header is currently the title bar placed in the top of the web page. It includes the MIT-ITS logo, the title of the transaction accessed, and the date. Below the header, right-justified, is the navigation area with navigation links for the function type (e.g., Journal Vouchers) plus links to the MIT-ITS home page and to help documentation. All pages must have a navigation area, even if it only includes links to the home page and to help. Exceptions will be transaction detail pages that require a specific exit or form submission. The footer on all pages must contain the copyright below a horizontal rule. Common Page Elements Elements Governed by Styles (See style sheet contents above.) Headings Within a Page class=heading On-screen Instruction class=note R/3 Message Table Cell class=message Field Section Table Cell class=section Field Label Table Cell class=fieldlabel Field Data Table Cell class=data Column Heading Table Cell class=column Body Tags Include margin height and width specifications in the body tag.  Background The background on any MIT-ITS page should be: bgcolor="#B8CCD9" (light blue). Even in the case of a different color, the background must be very light so that text will be easily seen on top of it. This value is governed by the external style sheet. Header (server-side include) Navigation Area The navigation area appears just below the header and is right justified. Some pages will have a right justified row of navigation links, e.g. Help | SAPweb | Purchasing. Other pages may not have this right justified row of navigation links because using a link on these pages will lock the transaction.  On Screen Instructions and Notes  Any instructions appearing as a part of an MIT-ITS screen must be specific and concise. On screen instructions must appear inside a light blue table: R/3 Messages When the R/3 system detects an error within field contents, or has a message to display regarding the current session, the R/3 message is placed into the ~messageline parameter. If a message exists, it is displayed to the user in a highlighted block through the use of a single-cell table, formatted as shown below. If no message exists, the table is not displayed.  Images Images cause longer download times. Whenever possible, use text rather than images. All images included on MIT-ITS pages are subject to review. Removal will only occur in extreme cases, such as graphics with large file sizes (>100K). Buttons All buttons will be standard HTML form buttons, not graphical buttons. On long forms for which users may need to scroll to the bottom, all functional and navigational buttons will be made available at the top of the form as well as at the bottom Tables Tables should have a border of 0 or 1, depending on the use of the table. Cell spacing should be 1 or 2, and Cell padding should be no more than 4. For example:  Footer  Elements Not Allowed / Subject to Approval Except where otherwise noted, all elements which have not been specifically allowed on the MIT-ITS site should be considered barred. This ban includes, but is not limited to, the following: Frames In every instance when you would use frames, tables can be used to display information in a similar layout. File management becomes much easier, and the audience for the information is increased. An exception will be made for SAP delivered transactions. Company or Software Logos MIT-ITS should not be viewed as endorsing or promoting any software vendor, product or company. Logos are allowed for organizations with which departments have created a partnership, but those logos are only allowed in the context of those partnerships. JavaScript JavaScript must be approved for their technical content to make certain that they (1) do not take too long to download, (2) do not pose a security risk to the end-user computer or the enterprise network, and (3) conform to MIT-ITS look and feel standards. Sounds Sounds should be avoided. While sounds may grab a user's attention the first visit to the site, they can quickly become an annoyance upon further visits, especially if the sound file requires significant download time. Video and Streaming Media Until a standard has been developed for this technology, video and streaming media are not allowed on the MIT-ITS site. Author Information Individual elements of the MIT-ITS web site should not be presented as authored or maintained by individuals. Summary The "look and feel" of a site is very important to the usability of a site. Radical differences between various sections of a site lead to confusion and significantly reduce usability. The more consistency there is, the easier it is for users to perform their work and learn new functions. The current standards used for the MIT-ITS web site are designed by a subcommittee of the MIT-ABAP Committee. Members of the subcommittee are accepted on a volunteer basis. Development and Maintenance Service Naming Conventions There are two kinds of objects that are relevant to ITS: The R3 transactions SAP delivered or custom (created and maintained in transaction se80). The web objects. (Services, Theme, Templates, Mimes): Created/maintained in Web Application Builder (se80) & Web Object Administration (siac1). Published on the MIT-ITS server. Briefly, the procedures for deploying these MIT-ITS transactions are: If a standard service XXXX already exists Copy service XXXX to ZYY_XXXX in transaction SIAC1in SF2 (where YY is the 2-Character Abbr. of the Application Name Appendix B of MIT SAP development standards http://web.mit.edu/sapr3/dev/standards4.html). This will copy the service/theme/mimes and templates. In Web Application Builder: Strip down service ZYY_XXXX from username/password/language, and change references of 'XXXX' into 'ZYY_XXXX'. Delete the SAP GUI for HTML templates. Generate the templates (generation style: classic) one for every screen. Publish entire service ZYY_XXXX into SF2ITS. Release transport (transaction se10) and send email to r3-chmgt requesting transport and publishing of ZYY_XXXX into SF5ITS. If a service DOES NOT already exist Develop new transaction ZXXXX in transaction se80. In Web Application Builder: Create service ZYYXXXX to point to transaction 'ZXXXX'. . (Where YY is the 2-Character Abbr. of the Application Name Appendix B of MIT SAP development standards http://web.mit.edu/sapr3/dev/standards4.html) Generate the templates (generation style: classic) one for every screen. Publish ZYYXXXX into SF2ITS Release transport and send email to r3-chmgt requesting transport and publishing of ZYYXXXX into SF5ITS. Note: According to the above scenarios the service naming convention is the following: - XXXX: a SAP service file that calls SAP transaction XXXX. - ZYY_XXXX: a modified service file that still calls SAP transaction XXXX. - ZYYXXXX: an MIT service file that calls MIT transaction ZXXXX (ZXXXX is a modified version of SAP transaction XXXX, or a native MIT transaction) Images All images after being created in Photoshop or any other software have to be uploaded to SAP to the Internet Service ZGLOABL using transaction se80. Then images can be published to the MIT-ITS servers and transported to other SAP instances. Version control If Web Application Builder (transaction: se80) and Web Object Administration (transaction siac1) totally replace WebStudio then all objects are transportable via the SAP transport system. The existing emailing lists r3-chmgt and fss-chg can be used for transport requests. Version generation and management can be accomplished under the menu option Utilities. Publishing logs can also be displayed under the menu option Utilities. In order for publishing to work IACOR needs to be running on the ITS-server. If IACOR is not running we will need to use floppies to transport the Web objects from one environment to the other. All floppies should be dated and kept for reference. The R3 transactions (SAP delivered or custom) are still transportable via the SAP transport system. The contact person at the MIT-ITS server site is: name: Hart, Daniel R email: dhart@MIT.EDU phone: (617) 253-4107 Dan Hart has agreed to copy files to the MIT-ITS servers at 7:30am, 11:00am and 1:30pm. The floppies are to be delivered at his mailbox at the first floor of W91. In order to move Web Objects to SF2-ITS, SF5-ITS and SF8-ITS the developer needs to send an email to HYPERLINK "mailto:dhart@MIT.EDU"  dhart@mit.edu  and provide him with floppy or file names. In order to move Web Objects to PS1 the developer needs to send an email to fss-chg. The members of fss-chg after verifying the transport with the process owner and the change request form will forward the email to dhart@mit.edu. The list of developers authorized to request movement of Web Objects to SF2, SF5 and SF8 are: AEKING KATERINA MSPRAGUE SROACH ZAVOLEAS The list of developers authorized to request the movement of Web Objects to PS1 are: DWILEY PPAGE WTURNER MDAMIAN The subject of the email should contain MIT-ITS Web Object move. In the body of the email the developer needs to specify source and target system and the file names: For example: Subject: MIT-ITS Web Object move from SF5 to PS1 From : SF5-ITS To: PS1-ITS Files to be copied: Service files: c:\program files\SAP\ITS\2.0\SF5\services\zfi_inbx.srvc c:\program files\SAP\ITS\2.0\SF5\services\zfi_veri.srvc Template folders: c:\program files\SAP\ITS\2.0\SF5\templates\zfi_inbx\ c:\program files\SAP\ITS\2.0\SF5\templates\zfi_veri\ Mimes: c:\program files\ServersandDaemons\Apache Group\Apache\htdocs\SAP\ITS\mimes\global\ c:\program files\ ServersandDaemons\Apache Group\Apache\htdocs\SAP\ITS\mimes\zinbx\ Files: c:\program files\Apache Group\Apache\htdocs\SAP\ITS\zjvrpt.html ---------------end of email---------------------------------------------- Note: Running Web Studio is another way to maintain Web Objects. Because of our security concerns this is not a viable solution. MIT-ITS Web Site Standards * DRAFT * DRAFT * DRAFT * DRAFT * DRAFT * Look and Feel Standards  DATE \@ "M/d/yy" 6/20/01  TIME \@ "h:mm AM/PM" 11:35 AM * DRAFT * DRAFT * DRAFT * DRAFT * DRAFT * Page  PAGE 9 of  NUMPAGES 9 MIT-ITS Web Site Standards Development and Maintenance
`~windowtitle` today's date:  `~date`
Help | SAPweb | Purchasing 

Copyright 2001 © Massachusetts Institute of Technology

`if ( ~messageline != null )`

`~messageline`
`end`
Note: Some text with instructions or info to note here.
BODY {font-family: verdana, arial, helvetica, sans-serif; font-style: normal; color: #000000; margin: 0em; background: #B8CCD9; /*light blue*/ background-image: none; } A:link {color: #003B66; /*royal blue*/ text-decoration: none; text-transform: none; font-weight: normal } P, TD {font-family: verdana, arial, helvetica, sans-serif; font-size: small;} TD {valign="top"} H1 {font-family: verdana, arial, helvetica, sans-serif; font-size: medium;} P.heading {font-family: verdana, arial, helvetica, sans-serif; color: #0039aa; /*bright blue*/ font-size: medium; font-weight: bold;} .note {background: #DCE7ED; /*pale blue*/ text-align: left;} TD.pagehead { background: #405580; /*navy blue*/ color: #FFFFFF; /*white*/ font-size: small; font-weight: bold;} TD.date { background: #405580; /*navy blue*/ color: #B8CCD9; /*slate blue*/ text-align: right; font-weight: bold;} TD.message { background: #ffff98; /*yellow*/ font-size: small; font-weight: bold; text-align: middle;} TD.section { background: #405580; /*navy blue*/ color: #FFFFFF; /*white*/ font-weight: bold; vertical-align: text-top;} TD.fieldlabel { background: #98b0c7; /*slate blue*/ text-align: right;} TD.data { background: #DFDFD7} /*putty*/ TD.column { background: #405580; /*navy blue*/ color: #FFFFFF; /*white*/ font-weight: bold; text-align: center; vertical-align: bottom;} 567@ R ` W]*u{*vwz ߸ߍ߀j5OJQJUmHB* CJOJQJj56CJOJQJUmHjCJUmH CJOJQJPJj56OJQJUmH CJOJQJjCJOJQJUmH jU56CJOJQJ 5OJQJ55CJOJQJ CJOJQJ267@(3 S ` xxxxx -D H$67@(3 S ` %OyX|{skc        $  _       A /} #:;n$%OyX|Bq9^xxx & F hxx !Bq9^+5vxzc ½~{xurn ?@ACt  #Mu -]^*9EFi  *+5vxzcxxx xx !xxx ! &()*+,-./012345<+3*xxH$7$8$hxxx&()*+,-./012345<+3*1}zwtoOVWBC D E F G H I J K M TUWu   +&'15<+3*1 ! !!"""# #$$%&&''{))))++--- . .$.J112222jU jU CJOJQJ5CJ5CJ6CJOJQJ5CJOJQJ6j56CJOJQJUmH jUmH56CJOJQJ 5OJQJB* CJOJQJj5OJQJUmH:*1 xH$7$8$ h8p @ xx !! !!!"~"""### #/$$$$$$%R%%%<&]&^&&&&''_(((|tl     : V\   I     ./KL M'()&AB&'(345PQ' !! !!!"~"""### #/$$$$$$%R%%%<&]& & F 8 h & F & F<xxx]&^&&&&''_(((({))))*+#+++,j,,--- & F < & F <xxx h (({))))*+#+++,j,,---- ./ 01J1_1t111.22374>4G4P4W4`4a44444¿}zwtqnkhnuR8!n!12#* H  %  n   = Y-  [  (-- ./ 01J1_1t111.22374>4G4P4W4`4a444444445xxx22225-8.838<8F888888888888999"9#9*9+9,9-9C9D9L9M9P9W9X9^9`9f9h9n9p9w9}9~999999999999999;;;;弳B* CJOJQJ0JCJOJQJmH0JCJOJQJj0JCJOJQJUCJOJQJmHjCJOJQJU5CJOJQJ CJOJQJCJ5CJ CJOJQJ jU?44445~5555555546l6m666666F77777-8.88899999999::\:e:::::::::::;;;;;h;i;{;;;;;;;H:ABw/>RSnoVWX`A5~5555555546l6m666666F77777-8.88899  !H$H$7$8$x9999999::\:e:::::::::::;;;;; !$  !H$;h;i;{;;;;;;;;><?<O<X<\<]<<<<<<<<-=.=M=Q=H$7$8$ h8p @ ;;><?<O<X<\<]<<<<<<<<-=.=M=Q==============+>,>_>d>~>>>>>>>/?0????@@D@i@@@@@@ANAuAAAAA BDB]BBBBB"C=C>CqCCCCCD6DND}DDDDE$EFEjEEEEF8FTFqFFFFF d;<<<<==>0???@@A AFFFFCJ CJOJQJCJOJPJQJB* CJOJQJQ==============+>,>_>d>~>>>>>>>H$7$8$ h8p @ >/?0????@@D@i@@@@@@ANAuAAAAA BDB]B.H$7$8$ Mh8p @ xHP X !(#]BBBBB"C=C>CqCCCCCD6DND}DDDDE$EFEjEEEEF8FTFTFqFFFFFH$7$8$(&P1h/ =!"#$%|,,  c yg(,,(d'`(&P1h/ =!"#$%|,,  c yg(,,(d'`DyK dhart@MIT.EDUyK *mailto:dhart@MIT.EDU [8@8 NormalCJ_HaJmH sH tH :: Heading 1$`@&]`5\FF Heading 2$ !#@&]5\2@2 Heading 3$@&5\ Heading 4f$ Sh8p @ xHP X !(#h@&^h5CJOJQJ Heading 5f$ Sh8p @ xHP X !(#h@&^h5CJOJQJ Heading 6$@& ƪ8h8Tp$ @ \ xHPl <X !!t"(##D%%`'((|)0**+L,-5CJOJQJH@H Heading 7$@&56CJOJQJ\]^J<A@< Default Paragraph Font.B. Body Text `]`.U@. Hyperlink >*B*ph8T8 Block Text`]`^>V@!> FollowedHyperlink >*B* ph>P2> Body Text 2 !#|]|PBP HTML Body 7$8$H$ CJOJQJ_HaJmH sH tH 0Q@R0 Body Text 36],@b, Header  !, @r, Footer  !&)@& Page Number<Z@< Plain TextCJOJQJ^JaJGH#[0 B "!GH#[0  B~*~~~ !!!!!!!!!  z )0BV  +D^^#####&2;F%-4:* ]&-59;Q=>]BTFF&(*+.013678;<=>(4;F'),/259...BX^qy{& !D!#@ "(  n  c $ "`  c $   n  c $   "n  c $   "  H ??  "`  c $ `  c $ `   c $  ` ! c $! ` " c $"  B S  ?  v &BP#Ot(0d#td#*t<#{tH&$t %t & t!&t(f$' t"8' tA D E M NTP\?/B/233D3X3p3q3344455+5,5M5N5w5}5555555a6c6m6|6~666666666666 7 7m7w749@99999999999`:b:h:s:u:{:::6;E;G;U;V;g;j;k;;;;;;;;;;;;<<$<&<+<-<6<<<<<<<=======>>#>%>*>,>5>^>g>v>}>>>>>??J???O@Y@@@kAxAAAAABB8:L~DKb 7AhlwJ-N-^-_-d-s-t-y--a000011111324252k222222222E3F3G33333333,444455+5,5M5N5w5}5555555556"6a6c6j6l666666666 7 77 7}7~7777777@8B8P8V8Y8Z88888/919N9O9R9W999999999999999-:2:`:b:e:g:::::1;5;j;k;;;U<_<p<u<<<<<<<<<<<<<.===_=m=====I>R>>>>>>>>>*?4?K?W?y?~????????@"@,@:@E@Z@f@@@@@@@@@ AA2A=AOA]AyAAAAAAAAB"B@BKB\BfByBBBBngiftJ\\R-CREW SERVER\R-Trn Devl\Work Folders\Nancy\ITSLook&FeelStandards_NG.docngiftJ\\R-CREW SERVER\R-Trn Devl\Work Folders\Nancy\ITSLook&FeelStandards_NG.docngiftJ\\R-CREW SERVER\R-Trn Devl\Work Folders\Nancy\ITSLook&FeelStandards_NG.docngiftiC:\WINNT\Profiles\ngift\Application Data\Microsoft\Word\AutoRecovery save of ITSLook&FeelStandards_NG.asdPLC:R-trn Devl:Work Folders:Nancy:ITSLook&FeelStandards_NG.docPLC9Macintosh:Temporary Items:AutoRecovery save of ITSLook&FePLC/Macintosh:Temporary Items:Word Work File A 2118PLC1R-trn Devl:Sites:sapits:ITSLook&FeelStandards.docPLC1R-trn Devl:Sites:sapits:ITSLook&FeelStandards.docPLC1R-trn Devl:Sites:sapits:ITSLook&FeelStandards.doc      k(rt/.3 wT>:qhEhh^h`.hh^h`)hh^h`) hh^h`OJ QJ o( hh^h`OJ QJ o(^`o(.^`.pLp^p`L.@ @ ^@ `.^`.L^`L.^`.^`.PLP^P`L.h^`.h^`.hpLp^p`L.h@ @ ^@ `.h^`.hL^`L.h^`.h^`.hPLP^P`L.^`.^`.pLp^p`L.@ @ ^@ `.^`.L^`L.^`.^`.PLP^P`L.h^`.h^`.hpLp^p`L.h@ @ ^@ `.h^`.hL^`L.h^`.h^`.hPLP^P`L. :qk(/.wT @ @WB@@ GTimes New Roman5Symbol3 Arial;HelveticaG MS MinchoTimesq5  Arial monospaced for SAPAndale Mono? Courier New7 Verdana?& rHellasArial;Wingdings"1hVFVfV&LP/ d!0d:]",JC:\WINNT\Profiles\katerina\Application Data\Microsoft\Templates\Normal.dot(IndyGov Web Page Look and Feel StandardskaterinaPLC Oh+'0 ` lx    ')IndyGov Web Page Look and Feel Standardsordndy katerinaeb ateateI\WINNT\Profiles\katerina\Application Data\Microsoft\Templates\Normal.dota\PLC4CMicrosoft Word 8.0e@ @X*"@@v؞ LP/ ՜.+,D՜.+,T hp|  'MITd:: )IndyGov Web Page Look and Feel Standards Title (RZ _PID_GUID _PID_HLINKS'AN{982F9B83-63CD-11D5-87A7-0050E4565960}Ad3mailto:dhart@MIT.EDUx  !"#$%&'()*+,-./0123456789:;<=>?ABCDEFGIJKLMNOPQRSTUVWXYZ[\]^_`bcdefghjklmnopsRoot Entry Fj}uData @1TableH0WordDocumentLSummaryInformation(aDocumentSummaryInformation8iCompObjX FMicrosoft Word DocumentNB6WWord.Document.8