Internet Applications CGS 3175
University of Central Florida
Popular in Course
Popular in Computer General Studies
This 39 page Class Notes was uploaded by Carmelo Connelly on Thursday October 22, 2015. The Class Notes belongs to CGS 3175 at University of Central Florida taught by Mark Llewellyn in Fall. Since its upload, it has received 84 views. For similar materials see /class/227609/cgs-3175-university-of-central-florida in Computer General Studies at University of Central Florida.
Reviews for Internet Applications
Report this Material
What is Karma?
Karma is the currency of StudySoup.
Date Created: 10/22/15
CGS 3175 Internet Applications Fall 2007 Web Site Design art 2 Instructor Dr Mark Llewellyn marklcsucfedu HEC 236 4078232790 httpwwwcsucfeducoursescg53175fall2007 School of Electrical Engineering and Computer Science University of Central Florida l CGS 3175 Internet Applications Web Site Design Part 2 Page 1 Mark Llewellyn I l Web Site Design Best Practices The major components of Web page design are 7 Page layout design 7 Text design 7 Graphic design 7 Accessibility considerations Web sites that look great and are easy to use don t happen by accident Outstanding Web sites are carefully planned and created by using recommended design practices There are a number of factors to consider when designing a Web page Some factors relate to the usability accessibility and appeal of the site to the target audience 7 use of color text graphics and animations Other factors relate to the medium of the Web itself 7 load time issues browser support and monitor screen resolution I CGS 3175 Internet Applications Web Site Design Part 2 Page 2 Mark Llewellyn I Load Time The last thing you want to happen is for your visitors to leave your Web page before it has even finished loading Make sure that your pages load as quickly as possible How long do you generally wait for a page to load Many Web page visitors will not wait more than several seconds It s a good practice to limit the total file size of a Web page and all of its associated images and media files to under 60KB It takes about 8 seconds at 56Kbps for a browser to display a Web page and associated files of 60 KB It s also a good idea for the home page and associated files to be well under this number to ensure the home page loads very fast Go over the limit on content pages only when you re sure your visitors will be interested enough to wait and see what your site is presenting I CGS 3175 Internet Applications Web Site Design Part 2 Page 3 Mark Llewellyn I 6 Above The Fold Placing important information above the fold is a technique borrowed from the newspaper industry When newspapers are placed on counters and in vending machines waiting to be sold the portion above the fold in the page is viewable Publishers noticed that more pa ers were sold when the most important attentiongetting 1 ormation was placed in this location Web designers use this technique to attract and keep visitors on their Web pages Arrange interesting content above the fold the area the visitor sees before scrolling down the page At a screen resolution of 800 X 600 pixels the viewable amount of the screen after subtracting browser menus and controls is about 410 pixels in height Other common resolutions are 1024 X 768 and 1280 X 1024 with display areas of proportional sizes available I CGS 3175 Internet Applications Web Site Design Part 2 Page 4 Mark Llewellyn I 6 Web Page Real Estate There is a saying in the real estate field that the three most important factors about a property are location location and location The Web page location you choose for highprofile components such as logo banners page heading and navigation is also important Web page visitor eye tracking studies have determined that a visitor s eyes most often fixated first in the upper left of the page then hovered in that area before going left to right This makes the most valuable Web page real estate the upperleft side and top center of the page Avoid placing important information and navigation on the far right side as we ll see later this area may not be initially displayed by browsers at some screen resolutions I CGS 3175 Internet Applications Web Site Design Part 2 Page 5 Mark Llewellyn I 6 Horizontal Scrolling In order to make it easy for Visitors to View and use your Web pages avoid creating pages that are too wide to be displayed in the browser window These pages require the user to scroll horizontally Using a screen resolution of 800 X 600 pixels the amount of Viewable screen is about 760 pixels in width If you expect that the page will be printed often it is a good idea to keep the width of the page to less than 560 pixels An aside on screen resolutions A recent survey by The Counter httpwwwthecountercom regarding Web visitors for sites monitored by their senice reported 1027 x 768 as the most popular screen resolution with 57 of the visitors reporting this resolution 17 use 1024 x 768 16 use 1280 x 1024 and 3 use 1152 x 864 and fewer than 1 use 640 x 480 I CGS 3175 Internet Applications Web Site Design Part 2 Page 6 Mark Llewellyn I 6 i Use Of Color 0 Younger audiences such as children and preteens prefer bright lively colors Older audiences tend to prefer high contrast in colors 0 For instance compare the two Web pages shown in the next two pages Can you guess the intended user group for each page An aside on browsers A recent survey by Janco Associates IT Productivity Center indicates that 83 ofthe Web users utilize Internet Explorer with 126 using Firefox and about 2 using Netscape A lot of Web statistics such as these can be found at httpwwwclickzcomstats I CGS 3175 Internet Applications Web Site Design Part 2 Page 7 Mark Llewellyn I 6 l ndnws Internet Explnrer The Un ed States M nl Hume v la httpHusmlntgnvfirvdexzfm7 a hyes v lx l p v dlt mew Favorites Inuls Help v 60 3 v i Buukmarksv 134 bladed icheck v Autuunk v QSettlnusv NationeISecumym gThe United Sham v at v 3 j g 2007 Alnerican Eagle Silver Uncirculated Com Coins and MenIs Collector39s Club Consumer Alena Historian39s comer Pressman Kids amp Yeachers t an H n e lnrmmamn n Ccntacl 2 ltems remaining Waiting Fur httellusminLgevlindexerrn H 0 Internet 100 CGS 3175 Internet Applications Web Site Design Part2 Page 8 Mark Llewellyn quot HIPV Pnckel Change Web 5m 7 Windnws Internet Explorer 39 htr x 7 pv Elle Edit mew ngorites Ionls eID Coogle C v v 1 Go 0 2 a v Q Bookmarksv 3134510ch 139 Check v AutuLmk v H m gtgt OSettingsv v eNatmnaISetuntyAgen EHIPPuck2tChanm l h 39 EJ El 4639 39 Livia393v LI v vagnIsv El Where s he world39s mggea mmquot SEARCH Columbus Day Tune in to the adventures of your HIP Pocket Change pals Take animated xrips mmugh the world of currency Cllck on the Cartoons coin and le me show begin Flip in Coins of the Worm Japan Done 0 Internet I CGS 3175 Internet Applications Web Site Design Part 2 Page 9 Mark Llewellyn I Page Layout 0 Using tables and style sheets to create interesting page layouts can keep Visitors interested in your Web site 0 Look at the page layout designs on the next three pages Which is the most interesting layout Why I CGS 3175 InternetApplications Web Site Design Part 2 Page 10 Mark Llewellyn I e Page Layout Site Logo I Home Products Services Order Contact This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content I CGS 3175 InternetAppIications Web Site Design Part 2 Page 11 Mark Llewellyn I 6 Page Layout Site Logo Home This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content Products Services This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content Order Contact This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content This is web page content CGS 3175 InternetAppIications Web Site Design Part 2 Page 12 I Mark Llewellyn I 6 Page Layout Site Logo Home Products Services Order Contact This is web page content This is web page content This is web page content This is web page content This This is web page content This is web page content This is web page This is web page content content This is Web This is web page page content content This is web ThIs Is web This is web page content page content page content This is web Th39s 395 web This is web page content This is Page content Page Fontent web page content This is web Th39s 395 web page content This is web page W page content content This is web page content I CGS 3175 InternetApplications Web Site Design Part 2 Page 13 Mark Llewellyn I 6 Page Layout The first layout is adequate and may be appropriate for some content but it is not a very interesting layout The second layout contains the same content but uses a tabular format in three columns Visually it is an improvement over the first layout but something is still missing The third layout contains the same content as the first two layouts but includes interspersed graphics This is the most interesting of the three layouts Notice how the images and columns make the same content more appealing Often the page layout storyboard for the home page is different from the page layout used for the content pages When this occurs a consistent logo and color schemes will produce a more cohesive Web site I CGS 3175 InternetApplications Web Site Design Part 2 Page 14 Mark Llewellyn I 6 Page Layout Design Techniques There are three very popular Web page layout designs Ice Jello Liquid 0 We ll look brie y at each of these layout designs CGS 3175 InternetApplications Web Site Design Part 2 Page 15 Mark Llewellyn I Ice Design The ice design technique is sometimes referred to as a solid or fixed design The page hugs the left margin and generally a fixed width table is used to format the page Due to the fixed width the design has much control over the layout and formatting configuring the page to look best at certain screen resolutions have you ever Visited a site with a message to the effect that this site best Viewed at XX x XX resolution The display will degrade gracefully at other screen resolutions The righthand side of the screen will often contain much empty space especially at higher screen resolutions The National Pro Fastpitch softball site httpwwwprofastpitchcom is an example of the ice design I CGS 3175 InternetApplications Web Site Design Part 2 Page 16 Mark Llewellyn I 6 Hal mle rustp ch w dnws Internet A Dlnr V 127 mp mama mm at W mums mm m ygl CV V a V i nummV 954mm a we V Dummy V 5an 35mm 7 4 t l 9mm m mm mega V 39 7 i iquot m use mm mm unused space Ja zgxc nzcmun rernArVF m qmnum lt a numj u i Ly rluu u nwmu NNERS Announcm unshln name uver 1 20n7 Playoffs 15 252 Thundr mm mm Balund nlttvrnlan ND muer mm sraa ms cmnv cuNcN new Nam 7nn7 mer AR gum my W V mm lnF nu I lt Apron Razer mm Pmnsmp smmr m 5mm 27 35 1mm mum 39a39lashmgtcn GIDW 1 o m m I C68 317539 Internet Applications Web Site Design Part 2 Page 17 Mark Llewellyn Jello Design The jello design technique is similar to the ice design in that the content is generally contained within a layout table In this case the table is centered and may be of either xed width or a percentage width such as 80 Jello design pages are typically more pleasing to View at higher screen resolutions than ice designs No matter the screen resolution the content is centered in the page with even margins on both sides The Department of Energy site thMwwwenergygov uses the jello design I CGS 3175 InternetApplications Web Site Design Part 2 Page 18 Mark Llewellyn I 6 r 75 Elam he Cough lciv dll aw ngwtes look Help i ENERGY EFFICIENCY 5 THE PRICES s TECHNOLOGY ENVIRDNMENY TRENDS FDR EMPLOYEES ENERGY SAVINGS TIPS an n rz v urng he as the Eurhm t enter w 7 an dazed at mght m 39 mu you ma reel avg awn H dman dehvers remark m v Gav v if awkmsalev Millde quot Check v thnk v nm l quot sendmv J a l x 7 5 av lbmonal w 3m pagn cu GLuaAL NUCLEAR ENERGY PA The Email may cam p m Senetsw B at e 51 Internaunnal Munu Energy Lgency General Conference In wanna where he highhghted GNED39E p mbers my 9 Internal imam v CGS 3175 InternetApplications Web Site Design Pan 2 Page 19 Mark Llewellyn Liquid Design The liquid design technique results in a uid Web page with content that takes up 100 of the browser window no matter the screen resolution There is no blank margin of the left or the right the content will ow to fill whatever size window is used to display it This type of design can be created with XHTML using a table with the width set to 100 The State of Illinois uses the liquid layout design on their state web site at httpwwwillinoisgov You will find many other Web sites using this very popular page layout technique I CGS 3175 InternetAppIications Web Site Design Part 2 Page 20 Mark Llewellyn I 6 f Illinnissgnv r The Dl cial Website 390 quotIE Slate 0 Illinois 7 Winduws Inlernel xphler l Ll la le dll aw ngurltes Innis elp v Gnoe a v 1 Bunkmaksv Slal ntked timed quotAukclmkv in l 435mdi I l39 l39telili 39i Q Sa lngsv Tgcls39 wwll39 illilvniargnl39 Rod R alanoievich Governor rlugla ma Hum quotwomen who need ace and r g treatmentcangetlt T39lM K II lxer Wur39kmg mmquot Governor alagnJewch annuunced today that startlng Octnber 1 uninsured women of 9 any income wlll be able to get screened and treated for breast and ceNlcal cancer r a er Program revmusly the program was only available to women teaming l oug e HusHess Wltn annual incnme below 250 of me Federal Poverty Level 525525 year fer an lndlvldual As part or his Dublltsaieky Take Charge eet Screened campaign the Guvemur ls asking all women to take advantage of free screenings H g d ng E H and treatments to reduce breast and cervlcal cancer mortalltles lrough early detection and rampt treatment X 9 T av P cmldren Government ass Help I A W Y n Dudtasls Features Latest News Popular unks Search39llvs Dlsaster for workers Severe Weather preparedness E ecm V 00 39 S X Ni rm mtem quotquotms Drlver39s Llcense Vehicle Reglstratlon serwces e woes 5mg ye m E State CODDWES Commitment to PiePm Ema F5515 Renew a professlonal chense State of llllnols e a n e page ECWE quot 7 quot 59 Wd Buy a Huntan Flshmg Llcense Job 0930 07 39 Governor Bl U EVICH announces 3 53 mllllon rant to nel ellnnnate tne rrsk at Q Mere e O lntamet 100 v CGS 3175 InternetApplications Web Site Design Pan 2 Page 21 Mark Llewellyn nu le Edit ngmat Vew elp ad t a array ulch massages messages 1quotltnng src lmagESgnvhdmoutagesect1cmjpg altn w1dch2 275 height 60 gtquot 39lt1 sm 1magesgovhdgmohcageisect1cm Jpg auquot mdh39275 height 6 39gtquot m 39ltimg Sm ima asanhdimoutageisecliun3 Jpg al quot widths39zm helgh wax calcul Le the 1 to Shaw our 1 x lt NOOKTxps x l whllesl I 111inu1squot 1s 23 Num gt DOETlps x as y document mum messageSUIH quotquot break PhatnRatatEv End Sen 7gt scriptxnuscriDLNiM m class g m inagasgavhdjumagisascmn jpgquot alt quot 275quot helgh 60quotgtltnuscripLgtlttdgt quottmplheaderhackgruundcu101quot helghtquot60 muspan 2quot 5119 quotleftquot vsllgn buttnm Mums2755a href daf quotWADlheaderhakgroundcnlclr h 2quot am leftquot va115nquotm1ddlequot wdthquotlUUZquotgtampnbsp lttd class quotme1 headerhackgrnuhdcnlnr n 39 nlSpan quot quot a is rightquot Val9 nquotmxdd19quot mug 1 a re quotdetaun Cfm targeLquotpare magashd urlisectiungif 31 mm i 39 1nulsgav bur erquot w s quotcmplheaderbackgruundcu 1m 51 g rlght vallgn 39huttumquot helghtquot2Elquot wxdth quotZDquotgtltmg Sr 1magashdtabtr quotcmplcabbackgmundcn1nrquot al1gn centerquot Vallgn mumquot widthquot205quot helgh 2Uquotgtlt1mz Sr quotwagesmankglv quotgavquotclassquotmgl uvexnarquotmad R Elag jevxch Governor ltagt ma gt mu quot 3J 39 95 r Ar m1 ClassquotcmplvtabbsckgrcmndmlurquotHung src 1mageSblank git wldth 5quot helght Lr lttab1egt table 015 lttrgt lttd wxdth 125 classe tmpl1debak9rnund table width l DK harder u cellspaclng tr tmplbrdrclr wadth l DZ harder BEIlspsClng cellpaddlng 1quot heightquot852quot vallg39h quot mquotgt 1quot allpaddn ug 15 melbrdrclrquot gt lt td 21355quot Emplitahbackgrnundcolarquot gt lth1 Dias quot mpLhr xmg srsquotmage k 91 39 al ulder quot math quot1 lt1mg Sr nuggeshlank 91fquot an bards n mum quotstrunggt5tata Llnksltsl1unggt a are lta hrefquotstatequotgtltimg srcquotimagasblank 91quot altquotSup 1 lttdgt xcuntsnz gtlt1mg Srcquot1 to State anksquot bur erquotU wldthquot1 heght lquotgtltagtlthlgt vwwmrvsall 7 mm C l E l lltmsr PU CGS 3175 InternetAppIications Web Site Design Part 2 Page 22 Mark Llewellyn Page Layout And CSS The newer trend when designing pages is to use CSS to format the XHTML elements and configure the page Rather than using tables to position the elements on the page and then setting the table to be 100 of the page width CSS is used to position the elements on the page As we will see soon CSS has a number of advantages compared to using a table to format a page including smaller Web page document files sizes quicker loading of pages and more accessible pages that are easier for screen readers to access The home page of the NSA httpwwwnsagov uses CSS to configure the page layout I CGS 3175 InternetApplications Web Site Design Part 2 Page 23 Mark Llewellyn I 6 Welcome quot NSAgov Vl wH l MLSn vlawrlishslm gt w L rl 60 Internal CGS 3175 InternetAppIications Web Site Design Part 2 Page 24 Mark Llewellyn NSA Homepage XHTML code r wwwnsa1 Nutzpad Ella Edit ngmat Mlew Help lt9xm1 versinnquot1 n enodingquot1sanESS 1quot7 ltDOCTYPE html PUBLIC quot W3CDTD XHTML 10 TransltiunalENquot http www w3 DryTRxhtmllDTD html xmlnsquothbtp www wa erg1999th1quotgt head ltuc1egtuacmna1 Seeunw AgencyCentral Seeunw Serv1ce NSACBS 51 meta httprequ1vquotCun ltstyle Lype quot textts Dd mutetypequot content quot texthtml ehereewieeeaasaa quot mEdiaquotsll gt 2 Start Pageant gt v background color uuunuu colnr FFFFFF text align center 1mg hurder39 hone CDntentContainer wldth 760 x marggnrng t39 autu margln CDD padchng39 ax ltstylegt er 1 gt images1ndexjpgquot mu 7amquot helgh 42 Image39 Natlnnal Seeuncy Age quotIndex id 5 25 axtPageNavlgatian gt a quot al 1m 39 Vlew the HTML varslnn of the home page quot 1 nrdsquot4543 View the Flash varsinn of the home page quot Dnrdsquot587 39 Download the current versmn of the Macramedla Flash F t I k Map quot tact CGS 3175 InternetApplications Web Site Design Part 2 Page 25 Mark Llewellyn Page Layout Best Practices Checklist l Appealing to target audience 2 Consistent site headerlogo 3 Consistent navigation area 4 Informative page title that includes the companyorganizationsite name 5 Page footer area 7 copyright last update contact email address BUDDIES 6 Good use of basic design principles repetition contrast proximity and alignment 7 Displays without horizontal scrolling at 800x600 resolution 8 Balance of textgraphicswhite space on page 9 Good contrast between text and background DUDE 13 of the browser window at 800x600resolution I 11 Homepage has compelling interesting information above the fold before scrolling down at 800x600 resolution I 12 Home page downloads in 10 seconds on dialup connection 10 Repetitive information headerlogo and navigation takes up no more than CGS 3175 InternetApplications Web Site Design Part 2 Page 26 Mark Llewellyn l6 Browser Compatibility Best Practices Checklist Ell Displays on current versions of Internet Explorer 6 CIZ Displays on current versions of Firefox D3 Displays on current versions of Netscape 7 D4 Displays on current version of Opera CI 5 Displays on current version of Safari CI 6 Displays on both PC and Mac platforms I CGS 3175 InternetAppIications Web Site Design Part 2 Page 27 Mark Llewellyn I Navigation Best Practices Checklist CI 1 Main navigation links are clearly and consistently displayed CIZ Navigation is easy to use for the target audience D3 If image Flash or DPHVITL is the main navigation clear text links are in the footer section of the page accessibility issue D4 Navigational aids such as a site map skip navigation link or breadcrumbs are used CI 5 All navigation hyperlinks work I CGS 3175 InternetApplications Web Site Design Part 2 Page 28 Mark Llewellyn I 6 Color and Graphics Best Practices Checklist Ell UUUUUUU El 0 Use of different colors in page backgroundtext is limited to a maximum of three or four Color is used consistently Color has good contrast with associated text Color is not used alone to convey meaning accessibility issue Use of color and graphics enhances rather than distracts from the site Graphics are optimized and do not slow download signi cantly Each graphic serves a clear purpose Image tags use the alt attribute to con gure alternate text to display if the browser or user agent does not support images accessibility issue Animated images do not distract from the site and either do not repeat or only repeat a few times I CGS 3175 InternetApplications Web Site Design Part 2 Page 29 Mark Llewellyn I 6 Multimedia Best Practices Checklist Ell Each audioVideoFlash le used serves a clear purpose CIZ The audioVideoFlash les used enhance rather than distract from the site D3 Captions are provided for each audio or Video le used accessibility issue D4 Download times for audio or Video les are indicated CIS Links to downloads for media plugins are provided I CGS 3175 InternetApplications Web Site Design Part 2 Page 30 Mark Llewellyn I 6 Content Presentation Best Practices Checklist El El UDDUDDUDDU D l Comm on fonts such as Arial are used 2 Techniques of writing for the Web are used headings bullet points short sentences in short paragraphs use of white space and so on 3 Fonts font sizes and font colors are consistently used 4 Content provides meaningful useful information 5 Content is organized in a consistent manner 6 Information is easy to find minimal clicks 7 Timeliness The date of the last revision andor copyright date is accurate 8 Content does not include outdated material 9 Content is free of typographical and grammatical errors 10 Content provides links to other useful sites 11 Avoids the use of Click here when writing text for hyperlinks 12 If standard link colors are not used all links use a consistent set of colors to indicated visitednonvisited status 13 If graphics andor media is used to convey meaning the alternate text equivalent of the content is provided accessibility issue I CGS 3175 InternetApplications Web Site Design Part 2 Page 31 Mark Llewellyn I Functionality Best Practices Checklist CI 1 All internal hyperlinks work D2 All external hyperlinks work D3 All forms function as expected D4 No J avascript errors are generated by the pages CGS 3175 InternetApplications Web Site Design Part 2 Page 32 Mark Llewellyn I Accessibility Best Practices Checklist CI 1 If image Flash or DHTML is the main navigation clear text links are in the footer section of the page CI 2 Color is not used alone to convey meaning CI 3 Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images CI 4 Captions are provided for each audio or video file used CI 5 Use attributes designed to improve accessibility such as longdesc title and summary where appropriate I CGS 3175 InternetAppIications Web Site Design Part 2 Page 33 Mark Llewellyn I e More On Accessibility The Internet and Web are such a pervasive part of our culture that accessibility is protected by laws in the United States Section 508 of the Rehabilitation Act requires electronic and information technology including Web pages used by federal agencies to be accessible to persons with disabilities The W3C is also very active in this cause and has created the Web Accessibility Initiative WAI see it at httpwwww3orgWAI to create guidelines and standard applicable to Web content developers authoring tool developers and browser developers The Web Content Accessibility Guidelines 10 WCAG 10 created by the WAI are organized into three groups of checkpoints 7 Priority 1 Priority 2 and Priority 3 7 Priority 1 guidelines must be met by Web developers to ensure accessibility of page content 7 Priority 2 guidelines are stricter in nature 7 they should be met by Web developers to ensure that all visitors can access their pages 7 Priority 3 guidelines are the most stringent and may be met by Web developers I CGS 3175 InternetAppIications Web Site Design Part 2 Page 34 Mark Llewellyn I 6 T s N Make Acces Ille Web es w dows InternelEXplnrer v xii pi ale gait Sew ngmites unis alp Coogle iC v Vicao a v a Buokmavi sv 513mm 3mm 390 Mount v miutaeii Qsendtov Qsettlngsv i eWAlQumk39ipsmi lakenmessibieWebSRErs Q 39 3 El 539 i Liannev v giwkv llml39lguage uuougume Ulu iiulinu iu me A Evaluating Accessibility r previous online version is available in aver 40 Languages 39 0 Search wAi Groups 10 Quick Tips AbUUtWA39 The iinksin the Quick y w 39 strategies 39 WAIsne M i 39 39 39 Help With WA39 Site 2 Image maps Use the We and text iorhots Ms 3 Miil mndla idea 4 Hmenext links Use text that makes sense when read out of context Fur example avoid quotdick herequot 5 II h i l39 l i L M y y w 6 Graph 3 hans Summarize or use the lungdesc attribute 7 Scripts applets a plugins vaide attemative cantentin Case active features areinaccessible or unsuppurted 23 Frames e the noframes eiement and meaningful M 9 Tables Make iine byiine reading Sensible Summarize Io Check your work Validate Use mots checklist and guidelines at httQlwwww3orgTRlWCAG ewsc MIT lNRIA Keiu 200101 How to Order Complete the farm betuw to order the Quick Tips on a Vinyi businessrcardrsiled reference card in large print and in braille If you cannnt use the form please email ii of he iniurmatiun mm the form to waisgmck gsw3org O intemei ix 1DU I CGS 3175 InternetAppIications Web Site Design Part 2 Page 35 Mark Llewellyn More On Accessibility The WAT is currently working on the WCAG 20 which aims to address the variety of new Web technologies now available to be easier to understand and be more precisely tested Watchfire s WebXACT is a free validator that will check your web page for common accessibility issues You can use it at http webxactwatchfirecom The Cynthia Says Portal httpwwwcynthiasayscom also provides a free accessibility validation service The next page shows part of the output from validating my About Me page on the Pegasus site Note that it validates against a lot of areas some of which are not applicable to this document I CGS 3175 InternetAppIications Web Site Design Part 2 Page 36 Mark Llewellyn I 6 SaysRepnn w dnwslnlernelExplnrel is Edlt grew ngnrlte Luuls elp Googlzllle v an g s a Enokmalksv Emblacke check v quotAutullnk v l nnrl 35mm g ml Quieknps creasing results 6 Cynthia Says Repnvt x l E J a ll39 Ham HiSoftware Cynthia Saysm 7 Web Content Accessibility Report Powered by lSclftware Content Qualigz Technulngy Veri ed File Name httg l 39gegasus CCquEduleleellAb0ut Melitml Date and Time 101l2007 3 16 PM Passed Automated Veri cation The level of detail settan for the report is to Show all detail Software can help you meet all of Hl your accesslblllty needs and more our industry leading enterprse and n t Vislt warecum to nd out out HOW Hlsoftware solutions en help you meet your Web compliance goals end request a mal copy Read Understanding ACCESSllJllI today Download Now Veri cation Checklist lcheckwims Passed l 1503 standards Section 119422 Yes No otherl lA 505 standards sectien was 7 i e ery vla alt quotlangdescquot Yes cr m element content 0 Rule 111 the an L 0 No We elements fuund m document burly D Rule 112 All INPUT elements are required tn cuntsln the alt attribute or use a LABEL 0 Internet Maw v CGS 3175 InternetAppIications Web Site Design Part 2 Page 37 Mark Llewellyn ndnws Inlelnel Explore Elle Edlt grew ngnrlles Lani elp a Enokmalksv Emblncke check v Autullnk vllv x lPl39l nnrl 5endtev QSEEKlnBSv E v v Gang g eWAIQuicknpiordsiingresldts ecynthlesaysnepmt x l l Ell k39 the lnfomlatlon provlded y ument L 503 Standards semen 119422 m when pages unllze scrlptj 9 languages to dlsplay content or to create Interface elements l r r a Rule 53 her Elements fuund ll39l ducumel l a Rule 532 D document The ent n c No AREA Elements feung ll39l deeurnent he y a Rule 533 7 Lecete elements that e HTML event handlers c Nu SCRIPT elements fcuna llquotl ducum 1 new 39 document These elements wlll net cause a tellure etthe checkpmnt lf the NUSCRIF T element ls teune hewever they wlll he ldentl ed 0 Nu Am t heey se elem 5 WIN at cause a tallure cf the checkpalnt lf the NOSCRIPT element ls feund hawever they wlll be ldentl ed a a Rule 534 when SCRIPT Elements are used the NOSCRIP39T element l5 regulred In the decument c ent M 505 standards semen 119422 m1 when a web page requlres that an applet plugeln or other application be present on the ves r client system to Interpret page r nt n through I a Rule Rule 119421a s e 4 2 39 I u w NA Eln g39afslsuve technglogy to at H M l m nt u l39redfor 0 Internet 5 100 CGS 3175 InternetApplications Web Site Design Part 2 Page 38 Mark Llewellyn Things to Try Yourself 10 Visit the following sites and determine what layout des1gn they are using ice jello or liquid httpwwwnps gov http www census gov httpwwwofficedepotcorn httpwwwvelonewscom httpwwwcfnewsl 3 com 11 Use one of the accessibility validators listed on the previous page and check your About Me page on Pegasus for accessibility issues CGS 3175 InternetApplications Web Site Design Part 2 Page 39 Mark Llewellyn I