CIW Site Designer (1D0-520) LearnSmart Exam Manual

Transcription

1

2 Maual CIW v5 Site Desiger (ID0-520) CIW Site Desiger (1D0-520) LearSmart Maual Copyright 2011 by PrepLogic, LLC Product ID: Productio Date: July 18, 2011 Number of Questios: 25 All rights reserved. No part of this documet shall be stored i a retrieval system or trasmitted by ay meas, electroic, mechaical, photocopyig, recordig, or otherwise, without writte permissio from the publisher. No patet liability is assumed with respect to the use of the iformatio cotaied herei. Warig ad Disclaimer Every effort has bee made to make this documet as complete ad as accurate as possible, but o warraty or fitess is implied. The publisher ad authors assume o resposibility for errors or omissios. The iformatio provided is o a "as is" basis. The authors ad the publisher shall have either liability or resposibility to ay perso or etity with respect to ay loss or damages arisig from the iformatio cotaied i this documet. LearSmart Cloud Classroom, LearSmart Video Traiig, Pritables, Lecture Series, Quiz Me Series, Awdeeo, PrepLogic ad other PrepLogic logos are trademarks or registered trademarks of PrepLogic, LLC. All other trademarks ot owed by PrepLogic that appear i the software or o the Web Site (s) are the property of their respective owers. Volume, Corporate, ad Educatioal Sales Favorable discouts are offered o all products whe ordered i quatity. For more iformatio, please cotact us directly: solutios@learsmartsystems.com Iteratioal Cotact Iformatio Iteratioal: +1 (813) Uited Kigdom: (0) LearSmart Cloud Classroom: Video Traiig Mauals

3 Maual CIW v5 Site Desiger (ID0-520) Table of Cotets Abstract...5 What to Kow...5 Tips...5 Itroductio...5 Domai 1: Site Developmet Essetials Idetify ad maage elemets of the Web site developmet process....8 Project Maagemet...8 Site specificatios...10 Midmappig...10 Cosider the target audiece...11 Portfolios Meet customer expectatios with Web site project ad desig Idetify ethical ad legal issues relevat to Web developmet ad desig Domai 2: Web Desig Elemets...14 EBay as a example of success Use Web desig priciples to evaluate ad develop a site's aesthetic qualities ad its ability to ehace viewer experiece The importace of usability Use Web desig priciples to eable avigatio, usability ad accessibility Positioal awareess ad avigatio...16 Navigatio...17 Web site characteristics ad strategies iclude but are ot limited to the followig:...18 Accessibility Quick Tips...19 Domai 3: Basic Web Techologies Use basic HTML ad XHTML (X/HTML) to develop a series of Web pages Use X/HTML ad exteded techologies to ehace Web page structure, format ad usability Frames ad framesets...22 Cascadig Style Sheets...26 Metadata Create image files, ad use images i X/HTML pages ad site desig Create Web sites usig GUI site developmet applicatios LearSmart Cloud Classroom: Video Traiig Mauals

4 Maual CIW v5 Site Desiger (ID0-520) May beefits of GUI site developmet applicatios Publish ad maitai a productio Web site Testig...38 Developmet servers / stagig servers / web servers...38 Hostig...38 DNS...40 Publishig ad FTP...40 Publishig with FrotPage...40 Dreamweaver FTP...41 Maiteace...42 Security issues...43 Sever logs...43 Domai 4: Advaced Web Techologies Use multimedia ad plug-i techologies to ehace a Web site Multimedia Web-eablig techologies...44 Multimedia desig priciples...44 Flash...45 Java Applets Use cliet-side ad server-side programmig to ehace Web site fuctioality XML...46 Beefit of XML...49 JavaScript...49 Rollover images...55 Pop-up ad pop-uder...55 Dyamic HTML (DHTML)...55 Documet Object Model (DOM)...56 Plug-i techology...57 Creatig dowloadable files...58 Server-side techologies...59 Cookies Coect Web pages to a database...61 Active Server Pages (ASP)...61 Terms ad tidbits...61 Questios...64 Aswers ad Explaatios...71 LearSmart Cloud Classroom: Video Traiig Mauals

5 Maual CIW v5 Site Desiger (ID0-520) Abstract This exam maual will help prepare the reader to pass the certificatio exam for IDO-520 v5 CIW Site Desiger; The exam objectives for this certificatio are based o a combiatio of techical ad o-techical skills ad kowledge. Noe of the questios o the exam are vedor or product specific. The exam cosist of 70 questios from the followig four domais: Domai 1: Site Developmet Essetials 11 questios Domai 2: Web Desig Elemets 13 questios Domai 3: Basic Web Techologies 26 questios Domai 4: Advaced Web Techologies 20 questios What to Kow The exam objectives for IDO-520 v5 CIW Site Desiger certificatio are based o a combiatio of techical ad o-techical skills ad kowledge. Noe of the questios o the exam are vedor or product specific. The examiatio period will be 75 miutes. To achieve a passig score o the CIW v5 Site Desiger exam 1D0-520, cadidates must correctly aswer at least 49 of the 70 questios to achieve a total score of 70% or greater. The exam cosist of 70 questios from the followig four domais: Domai 1: Site Developmet Essetials 11 questios Domai 2: Web Desig Elemets 13 questios Domai 3: Basic Web Techologies 26 questios Domai 4: Advaced Web Techologies 20 questio Tips To pass this certificatio exam you will have to be very kowledgeable about all the cocepts covered i the exam objectives. Do ot rely o memorizatio of terms! Although it is importat that you are familiar with the terms ad acroyms, you will eed higher level problem solvig ad critical thikig skills to be successful. You will be preseted with may scearios ad you will eed to make decisios based o specific circumstaces. Remember that the exam is timed. You will have 75 miutes to aswer all the questios. If you are usure about the aswer to a questio, mark it ad move o. You will have the opportuity to go back to the marked questios oce you have gotte to the ed of the test. This is the wise thig to do because there are may people who have timed out o certificatios exam because they spet too much time tryig to thik through a difficult questios, leavig others uaswered. By markig the difficult questios ad the movig o, you will at least have the opportuity to aswer all the questios. Whe you go back to the marked questios, if you ca t reasoably choose the best aswer, at least take a guess! Uaswered questios are marked icorrect. If you at least take a guess, you might get it right! Fially, get a good ight sleep the ight before your test. I always try to schedule my exams for morigs because my brai seems to work best i the AM! Do t forget to have a good breakfast. Good luck! LearSmart Cloud Classroom: Video Traiig Mauals

6 Maual CIW v5 Site Desiger (ID0-520) Itroductio There is a prerequisite for takig this exam. It is expected that cadidates will have a firm foudatios of kowledge, which is demostrated by havig previously passed the CIW Foudatios exam 1D0-410 or the CIW v5 Foudatios exam 1D Curretly, if you are ot a certified CIW Associate (meaig you previously passed the CIW Foudatios exam) you ca still take this exam for Site Desiger, however Prosoft Learig will ot award the certificate to you util you pass the prerequisite exam. This prerequisite requiremet may chage i the future so you should visit the CIW exam website ofte for curret iformatio before schedulig your exam. You should be certai that you meet all the course objectives before attemptig the certificatio exam. Followig are the course level objectives for CIW Site Desiger: Idetify ad implemet Web desig cocepts, icludig page layout, multimedia, fot ad color selectio, graphic images, audiece usability, file hierarchy ad avigatios. Maage the Web site developmet process, develop a Web strategy with goals ad tactics to support it ad implemet techiques such as mid mappig ad the site metaphor cocepts. A mid map might be sketched o paper, draw o a white board or roughed out with a computer applicatio. Below is oe example of what a mid map might look like: Choose ad implemet basic Web techologies, such as A/HTML tables ad frames, metadata ad Cascadig Style Sheets (CSS). Use Web productio applicatios ad tools to create ad maage pages ad sites, create aimated GIFs, edit graphic image files ad created multimedia files. Defie ad implemet advaced Web techologies, icludig scriptig laguages, Dyamic HTML, Extesible Markup Laguage (XML), Secure XML, RSS feeds, server-side techologies, Java applets ad plug-is. Explai the fuctios of Web servers, server admiistratios ports, cookies, databases ad database maagemet systems. Compare i-house Web site hostig to hostig with a Iteret Service Provider (ISP) or Applicatio Service Provider (ASP), ad publish sites to the Web usig various tools ad techiques. Complete developmet of a fuctioal Web site, ad maitai ad update a site usig commo sites ad server security priciples. Lastly, let s look at the exam objectives that you should master before attemptig the CIW Site Desiger certificatio exam: Domai 1: Site Developmet Essetials 1.1 Idetify ad maage elemets of the Web site developmet process. 1.2 Meet customer expectatios with Web site project ad desig. 1.3 Idetify ethical ad legal issues relevat to Web developmet ad desig. Domai 2: Web Desig Elemets 2.1 Use Web desig priciples to evaluate ad develop a site's aesthetic qualities, ad its ability to ehace viewer experiece. 2.2 Use Web desig priciples to eable avigatio, usability ad accessibility. LearSmart Cloud Classroom: Video Traiig Mauals

7 Maual CIW v5 Site Desiger (ID0-520) Domai 3: Basic Web Techologies 3.1 Use basic HTML ad XHTML (X/HTML) to develop a series of Web pages. 3.2 Use X/HTML ad exteded techologies to ehace Web page structure, format ad usability. 3.3 Create image files, ad use images i X/HTML pages ad site desig. 3.4 Create Web sites usig GUI site developmet applicatios. 3.5 Publish ad maitai a productio Web site. Domai 4: Advaced Web Techologies 4.1 Use multimedia ad plug-i techologies to ehace a Web site. 4.2 Use cliet-side ad server-side programmig to ehace Web site fuctioality. 4.3 Coect Web pages to a database. Now you should have a idea about the skill base ad kowledge that you will eed to be successful at passig this exam! LearSmart Cloud Classroom: Video Traiig Mauals

8 Maual CIW v5 Site Desiger (ID0-520) Domai 1: Site Developmet Essetials There will be eleve questios o the CIW Site Desig certificatio exam dealig with site developmet essetials. 1.1 Idetify ad maage elemets of the Web site developmet process. Project Maagemet Web project teams iclude several roles. There may be oe team member for each role, or a sigle team member may take o more tha oe role, depedig o compay size, scope of project, etc. Project maager maages the etire project, documets the project pla ad tracks the progress. Iformatio architect traslates customer requiremets ito a blueprit, icludig site avigatio, eed for database coectivity, etc. Graphic desiger creates a cosistet ad appealig look for the web site, icludig the creatio of graphics, color schemes, Flash aimatios, etc. Iformatio techology group programmers, database admiistrators ad etworkig techicias. Marketig professioal resposible for developig the strategy ad tactics for commuicatig web site messages, images ad brad idetity. These team members are ivolved i the developmet of the look ad feel of the site, as well as the text cotet of the site. Writer/editor these team members are the wordsmiths, so to speak, ad the oes to esure proper spellig ad grammar usage. They do proofreadig of other s writig ad write cotet themselves. Resource Importace (e.g. Will the team members be available as I eed them?). Cosider your resources whe coductig: Feasibility study Risk maagemet study Cotigecy plaig Web site desiger depedig o the size of the compay, a web site desiger may have to do most of the roles of a web developmet team. I larger compaies, the web site desiger may oly have oe role o the team. The followig are some of the various skills a web site desiger may eed to be proficiet with: Web site plaig Graphics desig Site avigatio, structure ad scheme desig XHTML codig (usually usig a WYSIWYG like Dreamweaver) Programmig ad/or scriptig Customer service Testig LearSmart Cloud Classroom: Video Traiig Mauals

9 Maual CIW v5 Site Desiger (ID0-520) , telephoe calls ad meetigs are basic meas of Web project collaboratio. Additioal collaboratio tools iclude: Itraets JJ Wiki sites JJ Itraets ca oly be accessed from withi a compay s etwork by iteral employees. Wiki sites are collaborative Web sites that ca be easily modified by ayoe with access. Olie coferecig JJ Olie coferecig eables people from differet locatios to meet virtually, typically sharig ideas via a virtual whiteboard, voice ad text chat, remote cotrol, presetatio viewig, program sharig ad eve video coferecig. Istat messagig JJ Istat chat (IM) applicatios such as AIM or Trillia are commo tools for askig quick questios or havig group chat sessios. The iitiatig phase of a Web project icludes: Needs aalysis Project objectives, assumptios ad costraits Statemet of Work (SOW) Stakeholder a perso or group with a iterest i the project. A project must have stakeholder buy-i to succeed. Project Stakeholders JJ JJ JJ JJ JJ JJ JJ JJ Cotributor: Ayoe directly ivolved i your project Depedet: Ayoe impacted by your project Sposor: Ayoe backig your project Reviewer: Ayoe critiquig your project s result Supplier: Ayoe who is a resource i implemetig your project Deliverer: Ayoe resposible for the project delivery Ower: Ayoe owig the results of your project User: Ayoe usig the result of your project Primary Stakeholders JJ JJ The perso or people you are primarily doig the project for Determie whe the project has bee successfully completed Note: Some of your stakeholders may chage as your project progresses. Employees may leave, or you may fid that you eed the guidace of someoe you did ot thik of i the plaig stages. Statemet of work (SOW) Cotais the project descriptio, goals ad pla. Project schedule lists tasks ad time frames for completig them. A bottom-up approach should be used to determie the look, feel ad fuctioality of a Web site after cosiderig various scearios from the user s poit of view. LearSmart Cloud Classroom: Video Traiig Mauals

10 Maual CIW v5 Site Desiger (ID0-520) The visio statemet is a fudametal framework that defies the scope ad itet of a ew site ad should be defied durig the coceptualizatio phase of a Web developmet project. Tactics support strategies. Strategies will ivolve attractig ad keepig site visitors. Tactics are the methods for realizig these strategies. Site specificatios There are four types of web site specificatios to cosider: Fuctioality Architecture Cotet Desig Midmappig Midmappig is a way to sketch ideas for a Web site o paper or o a whiteboard i a team meetig. This is just a quick process of movig ideas from thoughts to paper or the whiteboard without judgmet. As thoughts flow, sketch them i ad brach them freely, i a o-liear way. Later, you ca refie the midmap ito a realistic Web site pla. ple of a midmap: LearSmart Cloud Classroom: Video Traiig Mauals

11 Maual CIW v5 Site Desiger (ID0-520) Alteratively, the midmap could be used to create a outlie for a hypothetical hierarchy: This is a outlie of a midmap. Home Page for Real Estate Site I. For Sale A. Homes 1. Photo Pages (may) a. Additioal Photos 2. Photo Page a. Additioal Photos 3. Photo Page a. Additioal Photos B. Lad C. Commercial II. About Us III. Mortgage Calculator IV. Area Iformatio A. Area Professioals B. Area Schools C. Area Activities Cosider the target audiece Determiig ad kowig the site audiece is very importat. Demographics ad techology are key, but you ca t possibly kow all of your audiece, so it is importat to make your site as accessible as possible. You will eed to cosider: Various system capabilities Users with disabilities Elemets of usability iclude: High-quality cotet Easy avigatio Iformatio architecture Search capability Audiece usability tests are eeded to achieve maximum site usability. Metaphors are ofte used i Web site desig, just as they are i other forms of advertisig ad marketig. LearSmart Cloud Classroom: Video Traiig Mauals

12 Maual CIW v5 Site Desiger (ID0-520) Portfolios Web desigers should build a Web Portfolio or E-Portfolio to show their work. Typically a e- portfolio should iclude: Resume Samples of custom graphics Liks to other Web sites desiged by the portfolio ower Samples of other skills such as JavaScript, Flash, etc. 1.2 Meet customer expectatios with Web site project ad desig. Meetig customer expectatios (eeds & desires) is more importat tha aesthetics. Project evaluatio Durig the closig phase of a Web site desig project, the team should reflect back o the project to determie what worked well, what did t work well ad basically lessos leared. Weekly writte project trackig reports should be shared with stakeholders. Scope creep uaticipated tasks, chages or problems ca expad the scope of a project. A cotigecy pla should be i place to deal with chages or delays to the project pla. Desigers should avoid usig techologies ad desig techiques that are ot user-friedly for all site visitors. Here are several examples: <blik> tag <layer> tag ActiveX cotrols LearSmart Cloud Classroom: Video Traiig Mauals

13 Maual CIW v5 Site Desiger (ID0-520) Whe writig cotet for a web page, thik about the ature of the site, its purpose ad the iteded audiece. Stay o target ad avoid usig jargo specific to a idustry or professio. Templates are a good way to esure cosistecy of structure ad style across all pages i a Web site. Cascadig style sheets (CSS) are ofte attached to templates. 1.3 Idetify ethical ad legal issues relevat to Web developmet ad desig. Web sites should ot be used as soudig board to slader; or should they misrepreset the truth. Cosider iteratioal legal issues whe desigig e-commerce web sites. You may eve eed to cosult with a lawyer who specializes i iteratioal trade. Thigs to cosider i regard to iteratioal trade iclude: Customs: The legality of shippig your products to other regios. Whe cotractig with parties i aother regio whose laws will you go by? Itellectual property & copyright laws differ from oe couty to aother. Fair use i the US may be a copyright ifrigemet i aother couty. Taxatio. LearSmart Cloud Classroom: Video Traiig Mauals

14 Maual CIW v5 Site Desiger (ID0-520) Domai 2: Web Desig Elemets There will be thirtee questios o the CIW Site Desig certificatio exam dealig with web desig elemets. EBay as a example of success Cosider the success of the EBay web site as you read this sectio. The desig ad developmet team at EBay has obviously doe a fatastic job of maximizig the use of Web desig elemets! 2.1 Use Web desig priciples to evaluate ad develop a site's aesthetic qualities ad its ability to ehace viewer experiece. The importace of usability First impressios are importat, ad the Web medium is self-cetric. This meas that visitors are oly iterested i their ow eeds ad desires. Desig easy avigatio so that visitors ca easily fid what they wat. If you do t meet your visitor s eeds or desires, they will go elsewhere! Amog the most valuable iformatio a Web developer ca have is kowledge of his or her audiece. Kowig the audiece requires you to lear certai demographic elemets about its members. For example, if you are creatig a site for childre you would ot wat to iclude a lot of text with a high level vocabulary. You would wat to use simple ad few words, with may graphics. LearSmart Cloud Classroom: Video Traiig Mauals

15 Maual CIW v5 Site Desiger (ID0-520) Usability elemets to cosider iclude, but are ot limited to: Quality cotet Easy avigatio Iformatio architecture Search capability Web site elemets to cosider iclude: White space Colors Fot choices Rules (horizotal rules) Lists Paragraph styles Headig levels Images Logo Margi Borders Navigatio elemets Tables Framesets Desig strategies for user focus iclude such strategies as: Esurig that the cotet of iterest to your audiece occupies the first 50% to 80% of scree space above the fold (cotet which ca be see without scrollig). Eye-trackig studies idicate that Web users first look at the ceter of the page, the left, ad the right. They rarely look dow. Tools for site s visual cosistecy: Creatig ad followig a style guide to desig a template. Predesiged templates ad CSS helps to quickly create cosistet pages. Visually balaced pages: Web pages should cotai about 50% less text tha a prited page of the same iformatio. Symmetrical balace is created whe all elemets o both sides of the page are equal. Scree resolutio should be desiged to the lowest commo deomiator. Curretly 800 X 600 is cosidered the most commo deomiator, but keep i mid that this is a movig target. Usig percetages istead of pixels is oe way to esure a fit for all resolutios. Good typography skills are essetial for a desiger. It is importat for a desiger to kow which fots will look similar o differet operatig system. It is also importat to use fot choices cosistetly throughout the site. By default, Web pages are ot priter friedly. Cosider providig a pritable format copy such as.pdf. Alteratively, you could slim the page dow to about 650 pixels. The Iverted Pyramid is the most commo page layout format. This style offers the user a list of story summaries first, the liks or refereces to the details for those who are iterested. Newspapers typically use the iverted pyramid style. Stories summaries o the frot page are cotiued o aother page. LearSmart Cloud Classroom: Video Traiig Mauals

16 Maual CIW v5 Site Desiger (ID0-520) Page Layout refers to the way i which the Web desiger presets iformatio to users. Web page elemets iclude layout, color, fots, images ad other multimedia. Whe a desiger begis the desig process, he or she should determie early o what elemets to use. The desiger should the cosistetly use these elemets throughout the Web site. The desig ad use of CSS is a excellet way to accomplish this. The Elemet of Color plays a vital role i the perceptio ad presetatio of a Web site. A compay's style, culture ad mood ca be portrayed by the colors preseted i the site ad how they bled, coordiate or cotrast. I additio, it is importat to uderstad Web safe colors. Colors are stadardized i two umeric formats: RGB Hexadecimal code The importace of white space: A desiger eeds to apply the delicate balace betwee takig advatage of limited real estate, while avoidig clutter. 80% of Web users merely sca web page cotet lookig for keywords ad phrases - therefore, you must create a page that allows users to quickly sca ad fid the iformatio they seek. First impressios are importat. Keep users satisfied give them what they wat ad they will come back. Users do ot wat to see cluttered pages with irrelevat cotet ad images. The Web is self-cetric: Users are iterested i oly what they wat. 2.2 Use Web desig priciples to eable avigatio, usability ad accessibility. Desig for your target audiece. If you are desigig for a Itraet ad kow that all users will have the latest browsers ad up to date equipmet, you are free to use some cuttig edge techology. If you do t kow this, you should desig for the lowest commo deomiator because visitors are ot comig to the site to experiece jazzy techology ad multimedia. They are lookig for somethig specific, ad if you drive them away by requirig plug-is they do t have or multimedia that takes too log to load, they are ot likely to retur. Positioal awareess ad avigatio Navigatio is movig from oe poit to aother, i a uderstood ad cotrolled maer, with purpose. New visitors are like tourists i a ew city. Make it clear where they ca go after arrivig at your home page, ad from every page, make it clear how to get back "Home." As a Web desiger, it is your duty to provide sufficiet avigatio so that users ca simply ejoy the ride. A well desiged site requires oly a few clicks for avigatio to be uderstood Commo browser avigatio features iclude: Toolbar Back Butto Toolbar Forward Butto URL Address Field URL drop-dow meu LearSmart Cloud Classroom: Video Traiig Mauals

17 Maual CIW v5 Site Desiger (ID0-520) Browser history Bookmarks or Favorites Status Bar Colored Hyperliks Navigatio Primary ad secodary avigatio: Primary avigatio accessible from most locatios Secodary avigatio secodary liks from other pages Notice the primary avigatio liks o the web site: Now otice that if the user clicks o the wome s lik, he/she is preseted with secodary avigatio o the left: LearSmart Cloud Classroom: Video Traiig Mauals

18 Maual CIW v5 Site Desiger (ID0-520) The differece is that the primary avigatio is available o almost all pages o the site, while the secodary avigatio is oly available from certai pages o the site. Differet pages will have differet sets of secodary avigatio liks. Web site characteristics ad strategies iclude but are ot limited to the followig: The Iteret is a medium that eables the user to choose which iformatio to access ad whe to access it, makig the Iteret a oe-to-oe medium, as opposed to a broadcast medium. Thus the cocepts of mass media are ot ecessarily valid for the Web. The Iteret is trasactioal ad iteractive. Iteret Web site visitors are more likely to be resposive to targeted product ad marketig offers that are more tailored to their desires or eeds. The Iteret is o-liear, ad the user is i cotrol of where he or she will go ext. Site visitors ca come ad go at will ad ca choose avigatio paths to follow. Iteractivity, avigatio ad database itegratio set the Iteret apart from other media such as radio, TV ad ewspapers. Iteractivity is oe of the key differeces betwee Web desig ad desig for traditioal media such as prit or TV. Navigatio, iteractivity ad database itegratio are examples of website characteristics. A web site desiger eeds to desig for the eeds of the target audiece ad the stakeholder requiremets. LearSmart Cloud Classroom: Video Traiig Mauals

19 Maual CIW v5 Site Desiger (ID0-520) Accessibility User accessibility stadards ad laws are the resposibility of the Web Accessibility Iitiative (WAI). WAI works to esure that techologies used o the Web are equally accessible to users with physical, visual, hearig ad cogitive disabilities. The WAI works with various W3C groups to esure Web stadards iclude accessibility optios. 10 Quick Tips 1. Images & aimatios: Use the alt attribute to describe the fuctio of each visual. 2. Image maps. Use the cliet-side map ad text for hotspots. 3. Multimedia. Provide captioig ad trascripts (text alteratives) of audio, ad descriptios of video. 4. Hypertext liks. Use text that makes sese whe read out of cotext. For example, avoid the phrase "click here." 5. Page orgaizatio. Use headigs, lists ad cosistet structure. Use CSS for layout ad style where possible. 6. Graphs & charts. Summarize or use the logdesc attribute. 7. Scripts, applets ad plug-is. Provide alterative cotet for case active features that are iaccessible or usupported at the cliet s ed. 8. Frames. Use the oframes elemet ad meaigful titles. 9. Tables. Make lie-by-lie readig sesible. Summarize. 10. Check your work. Validate. LearSmart Cloud Classroom: Video Traiig Mauals

20 Maual CIW v5 Site Desiger (ID0-520) Sice Web site visitors do ot read as much olie as they might if they were readig a brochure, you have to lear to write your message with fewer words. Get directly to the poit Be very clear Avoid idustry-specific jargo Use keywords, keepig search egies i mid Keep all text relevat to the site Cosider usig a style guide Check your facts for accuracy Domai 3: Basic Web Techologies There will be twety six questios o the CIW Site Desig certificatio exam dealig with Basic Web Techologies. 3.1 Use basic HTML ad XHTML (X/HTML) to develop a series of Web pages. The four basic structure tags used to create a XHTML page are: <html> <head> <title> & <body> <html> <head> <title>my page</title> </head> <body> My message goes here </body> </html> Hexadecimal color code values rage fro 00 to FF. RGB color values uses digits betwee 1 ad 255 for each red, gree ad blue value. Color HEX Code RGB Value White FFFFFF 255,255,255 Black ,0,0 LearSmart Cloud Classroom: Video Traiig Mauals

21 Maual CIW v5 Site Desiger (ID0-520) Color Red Gree Blue Hexadecimal Black # White #FFFFFF Red #FF0000 Gree #00C000 Blue #0000FF Yellow #FFFF00 The World Wide Web Cosortium (W3C) cotrols the HTML ad most other Web techology stadards. HTML was developed by Tim Berers-Lee as a markup laguage, ad it is based o SGML. HTML is used to code Web pages by embeddig tags. HTML is a costatly chagig stadard, however, at the time this maual was writte, it covered 6 versios: 1.0, 2.0, 3.0, 3.2, 4.0 ad Differet browsers have additioal, vedor specific (proprietary), stadards that desigers eed to be aware of. Proprietary features geerally do ot work withi competitor browsers. Some browsers simply igore proprietary tags. Features supported by particular browsers that are ot part of the HTML stadard are called extesios. Proprietary extesios exted the HTML stadard. HTML 4.0 icludes three flavors: HTML 4.0 Trasitioal, HTML 4.0 Strict, HTML 4.0 Frameset. LearSmart Cloud Classroom: Video Traiig Mauals

22 Maual CIW v5 Site Desiger (ID0-520) HTML 4.0 supports: Cascadig Style Sheets (CSS) Iteratioalizatio issues Ehaced tables ad forms Scriptig ad multimedia HTML 4.1 brought i several modificatios to the stadard ad supports XHTML. XHTML 1.0 is the latest versio of HTML. It combies features of HTML ad XML ad is cosidered the bridge betwee the two. There are three flavors of XHTML: XHTML Trasitioal XHTML Strict XHTML Frameset 3.2 Use X/HTML ad exteded techologies to ehace Web page structure, format ad usability. Tables are a very commoly used method for Web page layout ad util recetly was the oly way to create complex layouts. CSS positioig is ow widely accepted by browsers, ad this has replaced tables as the preferred method to layout Web pages. CSS positioig is the preferred method of layig out Web pages by the W3C. May desigers still use tables for Web page layout, ad that is also acceptable. Tables are preferred for displayig tabular data. Separate paes i the browser widow are called frames. Frames ad framesets Frames reside iside of structures called framesets. A frameset is a structured web page that defies a set of frames. Frames are used to display Web pages. If you had a frameset that cotaied three frames, the computer scree would display three differet pages at oce, separated by the frames. The frameset tag is a cotaier tag. You use it to structure sectios i the browser widow. Frames are a extesio of HTML 3.2. Typically, framesets are used for a page i which you wated some primary avigatio to always be visible, while cotet i aother frame chages i respose to the avigatio pae. Targetig cotet: A web page usually has liks to other pages. I a ormal, oe-widow layout, whe you click o the lik, the liked page replaces the curret page i the widow. The curret widow is the target locatio for the liked page. A framed documet works differetly. Whe you put a documet ito a frame, you ca tell the browser to display liked pages with a specific frame i the frameset. Here's how it works: You have a table of cotets list i oe frame. Wheever someoe clicks o a item i the table of cotets, the browser reads the lik, gets the liked page ad displays the liked page i aother frame, leavig the table of cotets o the scree, utouched. LearSmart Cloud Classroom: Video Traiig Mauals

23 Maual CIW v5 Site Desiger (ID0-520) You ca direct the browser to do this i two ways. If all your liks will be opeig to the same frame, you would use the <base> tag to set a default target for all liks i the file. If it is a oe time directio of cotet, you would use the "target=" attribute of the achor tag. The base tag tells the browser to display all liked files i the specified frame. The base tag has oe attribute: target="frame-ame". The frame-ame is the ame of the frame ito which the browser will display liked files. Remember that you amed each frame as part of the frame tag i your frameset? Well, you'll use these ames to tell the browser where to display the files that are liked from the curret file. For example, this base tag tells the browser to display all the liked files i the frame amed "cotet": <base target="cotet">. Frame sizig ca be set by idicatig pixels, percetages or the wildcard character. I the followig example, the frameset will iclude two rows. The first row is absolutely sized to 150 pixels high, while the ext row is sized by the use of the wildcard character, ad will take up all remaiig space i the browser widow: <frameset rows= 150,* > The followig example shows how two frames are placed iside the frameset ad how each frame is assiged a web page to display whe the frameset is loaded ito the browser: <frameset rows= 150, * > <frame src= toc.htm > <frame src= cotet.htm > </frameset> The followig example shows how rows ca be sized by percetages of available space i the web browser: <frameset rows= 30%, 70% > <frame src= toc.htm > <frame src= cotet.htm > </frameset> The resultig table Would look somethig like this i structure. LearSmart Cloud Classroom: Video Traiig Mauals

24 Maual CIW v5 Site Desiger (ID0-520) Next, let s look at a two colum structure / frameset: <frameset cols= 30%, 70% > <frame src= toc.htm > <frame src= cotet.htm > </frameset> The resultig frameset structure would be similar to this The followig is a scree capture of a frameset page. The left colum is the table of cotets (so amed i the frameset) frame. Liks clicked there will ope i the ceter mai (so amed i the frameset) frame: LearSmart Cloud Classroom: Video Traiig Mauals

25 Maual CIW v5 Site Desiger (ID0-520) Notice what happes whe I click o the Presidet s Welcome lik: Here is the code the defies the frameset ad its structure: <html> <head> <meta http-equiv="cotet-type" cotet="text/html; charset=widows-1252"> <title>about MSCC</title> </head> <frameset framespacig="0" border="0" rows="*" frameborder="0"> <frameset cols="189,*"> <frame ame="cotets" target="mai" src="toc2.htm" scrollig="o" TITLE="Navigatio Bar"> <frame ame="mai" src="msccid.htm" scrollig="auto" target="_self" TITLE="cotets"> </frameset> <oframes> <body> <p>this page uses frames, but your browser does't support them.</p> </body> </oframes> </frameset> </html> LearSmart Cloud Classroom: Video Traiig Mauals

26 Maual CIW v5 Site Desiger (ID0-520) We ca tell the by studyig this code that this frameset cotais two frames, arraged i colum format, ad that each frame has a ame. This frame s ame is Cotets This frame s ame is Mai We ca also tell from the code that each frame has a web page assiged to it as iitial cotet. This: <frame ame="cotets" target="mai" src="toc2.htm" scrollig="o" TITLE="Navigatio Bar"> tells us that the frame amed cotets will house a web page amed toc2.htm, that liks clicked o the toc2. htm page will ope i the framed amed mai ad that the frame that holds the toc2.htm page will ot iclude scroll bars. The web page that will load ito the frame amed mai is amed "msccid.htm." The pages toc2.htm ad msccid.htm are just web pages with o istructios related to the frames. The frameset cotais all the istructios for behavior. This may seem complicated at first but it is really very simple. Sped time studyig how framesets work because there are sure to be some questios o the certificatio exam that will require a good uderstadig of this techology. Whe a desiger wats to cause a lik to ope outside of a frameset, he/she ca set the value of the target attribute to top. This will cause the liked page to ope i a ew widow. "target="_top" Cascadig Style Sheets The W3C sets the stadards for CSS. LearSmart Cloud Classroom: Video Traiig Mauals

27 Maual CIW v5 Site Desiger (ID0-520) XHTML ad HTML specifies four ways to apply CSS styles: Likig liks to a exteral.css. This is the preferred method because you ca lik may pages to a sigle CSS file. To update the styles o all the liked pages, simply make the chage o the sigle CSS. The sytax example is as follows: <lik rel="stylesheet" type="text/css" href="stylesheets/my_stylesheet.css"> Importig This is ot supported or recommeded! For iformatioal purposes oly, the sytax would be like url( Embeddig style istructios are placed i the head sectio of a sigle Web page ad apply oly to that page. By default, all of the styles will be applied to the page uless a ilie style is coded which supersedes embedded styles. Sytax example is as follows: <head> <style type= text/css > <! H1 {color: gree; fot-family: verdaa ;fot-size: 18pt} --> </style> </head. Ilie Ilie styles are added ilie to existig HTML tags. The spa tag Sytax example is as follows:: <spa style= backgroud: blue >Text Here</spa> Here is a example of a exteral style sheet: Body {color: black; backgroud: #000033; fot-family: arial; fot-size: 10pt } HR { text-alig: ceter; color: #FFFFFF; width: 85% } a:lik { color: #FFFFFF; text-decoratio: oe; } a:visited { color: #FFFFFF; text-decoratio: oe; } a:active { LearSmart Cloud Classroom: Video Traiig Mauals

28 Maual CIW v5 Site Desiger (ID0-520) color: #FFFFFF; text-decoratio: oe; } A:hover {color: #F4F4F4; text-decoratio: oe; } H1 { fot-family: arial } H2 { fot-family: arial } H3 { fot-family: arial } H4 { fot-family: arial } H5 { fot-family: arial } H6 { fot-family: arial } P { fot-size: 10pt } Table { } fot-size: 10pt TD LearSmart Cloud Classroom: Video Traiig Mauals

29 Maual CIW v5 Site Desiger (ID0-520) { } fot-size: 10pt This code would be saved as a css file i the web site with the.css extestio, like this: stylesheet.css ad pages would be liked to the css file with the followig sytax: <lik rel="stylesheet" type="text/css" href="../commo/stylesheet.css"> Metadata Proper use of keyword ad descriptio meta tags ca give a Web site a advatage because may search egies idex meta tag keywords ad descriptios foud by spiders that crawl the web. Oce a search egie registers a web page, users who type i search words that match the words i your site s meta tags ca fid your page. May search egies, but ot all, idex web pages by crawlig for meta tags. Metadata is "data about data". The Metadata tag describes the cotet of a Web page, ad has several uses ad forms. Meta tags go ito the head sectio of a HTML documet. They are for the browser ad search egies, ot the site visitor. Keywords ad descriptio are the most commo Metadata items. Most search egie spiders look for ad idex keywords ad descriptios. A Web Site Desiger will icorporate keywords ad descriptio Meta tags wisely to maximize search egie results. META tags are similar to stadard HTML tags. However, there is oe big differece: You have to isert all META tags betwee the <head> </head> tags o your page(s). META tags are used primarily to iclude iformatio about a documet. The META tags will be ivisible to your site's visitors, but will be see by browsers ad search egies. Several of the major search egies make use of the META Keyword tag, ad virtually all of them make use of the Descriptio tag. These tags help the search egie spider determie the cotet of your web site so that it ca be idexed properly. ples of Meta tags: <META ame="keywords" cotet="widgets, widget guide"> <META ame="descriptio" cotet="the ultimate guide to Widget desig!"> You ca also istruct the search egie robot/spider how to idex your site usig the robots META Tag. This is what it looks like: <META ame="robots" cotet="oidex,ofollow">. This istructio tells the spider ot to idex the page that it appears o, ad ot to follow the liks o that page. Here's a complete list of attributes for the robots tag: idex the default, the page is added to the search egie database oidex the page is ot added to the search egie database ofollow the spider does't follow the liks o that page oe same as "oidex, o follow" LearSmart Cloud Classroom: Video Traiig Mauals

30 Maual CIW v5 Site Desiger (ID0-520) Create image files, ad use images i X/HTML pages ad site desig. Web desigers eed to be able to create graphics for the Web. There is a variety of graphics applicatios to choose from. Macromedia Fireworks is oe popular optio because it combies may tools that Web-graphic desigers eed i oe applicatio. The capabilities of vector-based programs, bitmap editors ad image optimizers have bee combied ito oe applicatio i Fireworks. The ative file format for Fireworks images is Portable Network Graphics (PNG). The PNG files ca be exported as JPF or GIF for use o Web pages. Furthermore, Fireworks icludes features to create aimatio ad graphics that icorporate X/HTML ad JavaScript without the desiger eedig to kow programmig! Image layers are extremely hady to work with whe creatig a custom image. Each layer ca cotai idividual parts of the whole image. Fireworks allows the use layers ad the layers remai itact i the PNG copy of the images. However, GIF ad JPG do ot support layers. It is ecessary to flatte the image to oe layer whe covertig (exportig) to the more popular Web formats of GIF or JPG. A meticulous graphics desiger will always keep copies of the PNG files o had for future editig because the JPG or GIF files caot be coverted back to layers. For example: If you created a custom baer with 4 layers i Fireworks, Layer 1 might cotai the backgroud color ad raised embossed effects. Layer 2 might cotai the text, layer 3 several graphics ad layer 4 additioal shape objects. You export a copy to GIF format for use o a Web site. Oe year later the site maager decides he wats the ame chages o the baer. If you have the origial PNG file, this is o problem! You simply ope the PNG file i Fireworks, go to the text layer ad make the chage. Fially, you export a ew replacemet GIF. If you do t have access to the origial PNG file, you are i trouble. You will have to attempt to recreate the etire baer just to chage the text. Recreatig a graphic from scratch to exact specificatios is o easy task ad is very time cosumig! LearSmart Cloud Classroom: Video Traiig Mauals

31 Maual CIW v5 Site Desiger (ID0-520) Fireworks also has a uique method for creatig aimatio. Usig Fireworks you ca create a aimated image from oe sigle file by usig frames, ad them exportig the frames to a aimated GIF. Without Fireworks, it takes several differet image files to create o aimated GIF. Agai, the differece is, with most image editig programs, you would have to compile several differet images ito oe aimated GIF. With Fireworks, you work with oe sigle image, but multiple frames, ad export the fiished product to oe aimated GIF file. Trasparecy is useful whe you wat the backgroud of a page to show through behid a image. To create a trasparet image it is ecessary to remove the backgroud ad/or backgroud color surroudig the part of the image you wat to keep. Image slicig occurs whe the desiger divides large images ito smaller sectios or pieces. Sometimes, dividig a large image ito smaller slices ad the arragig them to appear as oe image o a Web page eables faster loadig i browsers. Fireworks has tools for image slicig, as do several other graphics applicatios. Typically, graphics applicatios such as Fireworks are used to resize images ad chage bit depth ad resolutio for optimal rederig o Web pages. Image croppig is a importat part of Web image desig because the real estate of a Web page is precious ad limited! You do t wat to use up page space displayig the uecessary backgrouds of a image. Also, the larger the image, the loger it takes to load i a Web browser. Optimizig images for the Web icludes both reducig file size ad croppig, whe appropriate. Graphics applicatios like Fireworks ad PhotoShop have built-i file optimizig tools for the web. LearSmart Cloud Classroom: Video Traiig Mauals

32 Maual CIW v5 Site Desiger (ID0-520) Graphics are used o web pages to: Graphics must be: Illustrate cotet Provide backdrops for other activities Offer a meas of avigatig a Web site Aesthetically pleasig Fuctioal Small i file size Color depth ad resolutio are importat cosideratios. As color depth icreases, so does file size. Pixels with 4 bits of grayscale iformatio ca display up to 16 shades of gray. Higher bit depths result i more itese or realistic colors. As color depth icreases, so does the file size. Scree resolutio depeds o the umber of pixels preset i a moitor's height ad width. Higher scree resolutios display sharper, clearer images. Color palettes: Although a 8-bit color display ca show millios of colors, it ca oly display 256 colors at oe time. Widows uses a 256-color palette, while Netscape uses a 216-color palette. Thus the most Web-safe color palette is 216 colors. Ditherig occurs whe a color used o a web page does ot exist i the browser palette. Ditherig is a approximatio, or recociliatio, of colors betwee a image palette ad the system palette. Colors o the image palette are replaced to match the colors o the system palette. I simpler terms, if you use colors i your image that the browser caot reder, it will dither the color to match the origial as close as possible. Bitmap vs. Vector Graphics: Large bitmap images result i larger file sizes because more pixels must be istructed as to which values to display. Coversely, large vector files are o larger i file size tha a smaller image, because mathematical istructios are used to reder the graphic. Bitmap graphics are best suited for photographs, drop shadow effects, ad soft or blurry edges. Vector graphics are best suited for lie art, shapes ad illustratios. Vector graphics are based o mathematical computatios, rather tha the pixel-by-pixel iformatio that comprise bitmapped graphics. Vector graphics ca load faster i Web browsers because they ca be scaled without file size beig affected. Image Tool Fuctios: Computer graphics fall ito two mai categories, vector graphics ad bitmap images. Uderstadig the differece betwee vector graphics ad bitmap images helps as you create, edit ad import artwork. You ca create digital images with a variety of graphics programs. These programs ca be divided ito 2 geeral groups: Vector based drawig programs ad pait type programs. Vector based example: Macromedia Fireworks. Pait type example: Microsoft Pait. The web does ot, at this poit i time, fully support vector graphics. You ca create vector graphics with programs like Illustrator ad Fireworks, but before you ca use them o the Web, you will have to covert them to bitmap. Oly.gif ad.jpg file formats are atively supported by browsers. Oly GIF images ca be trasparet. Oly GIF 89a images ca be aimated, whereas JPG images caot. GIF is cosidered lossless, meaig that as the image is compressed, o iformatio is lost GIF images iterlace as they are redered by the browser. JPEG is best for photographs. LearSmart Cloud Classroom: Video Traiig Mauals

33 Maual CIW v5 Site Desiger (ID0-520) JPEG is lossy, meaig that as the level of compressio is icreased, colors are dropped, resultig i image degradatio. PNG is a graphic file format that may soo be supported by both Netscape ad Iteret Explorer. PNG is lossless ad supports trasparecy, like GIF files, as well as compressio, like JPEG files. 3.4 Create Web sites usig GUI site developmet applicatios. Dreamweaver is a very popular GUI site developmet applicatio LearSmart Cloud Classroom: Video Traiig Mauals

34 Maual CIW v5 Site Desiger (ID0-520) Microsoft FrotPage is aother popular GUI site developmet applicatio LearSmart Cloud Classroom: Video Traiig Mauals

35 Maual CIW v5 Site Desiger (ID0-520) May beefits of GUI site developmet applicatios Most web site desigers use a GUI site developmet applicatio that allows for faster developmet tha had codig. Probably the most popular optios iclude FrotPage ad Dreamweaver. Both of these GUI applicatios icorporate three importat fuctios: Site maagemet May built-i page layout ad desig features ad tools Data coectio tools Dreamweaver features offer better support tha FrotPage for W3C stadards, such as XHTML. Both FrotPage ad Dreamweaver have tools to help the desiger stay compliat with accessibility recommedatios. Both FrotPage ad Dreamweaver have tools to assist the desiger with creatig CSS. Both FrotPage ad Dreamweaver eable a desiger to create web pages without writig code; however a good desiger should certaily kow how to write ad tweak HTML / XHTML code. With Dreamweaver, it is possible to apply absolute positioig by usig layers to create a page layout. FrotPage does ot curretly offer this feature. Image maps are easier to create usig FrotPage or Dreamweaver the they are with had codig them. Istead of havig to do the complex math eeded to come up with the image map coordiates, you simply use the mouse to select the appropriate hot spots. It is advisable to use templates to maitai cosistecy throughout a site. A template ofte cotais, for example, a commo baer or avigatio that appears o every page. The cotet area of the page is editable for custom cotet. This assures that all pages i a site will be cosistet i look, feel ad avigatio. Ultimately, it is advisable to lik a exteral CSS to a template. Ay ew pages that you create based o the template will also automatically be liked to the CSS. To apply a template whe usig GUI applicatios, simply base ew pages o the template. Oce you have liked a.css to the template, all of your basic formattig ad layout will be covered. All you will have to do is add the cotet ad images relevat to the ew page! Both FrotPage ad Dreamweaver iclude features to brig i data from Microsoft Word. You ca choose to brig i the curret formattig or brig data i with o formattig. Both FrotPage ad Dreamweaver have built-i features for creatig rollover images that lik to aother web page. A rollover image chages from oe image to aother whe the mouse poiter rests o the image. Rollover images are script-drive (geerally JavaScript) so the GUI essetially writes the script code. This is a time saver for desigers who are ot proficiet or fast at scriptig. Both FrotPage ad Dreamweaver have built-i tools for creatig web forms. FrotPage eve has built-i form hadlig! Typically, web forms eed some type of CGI iteractio to be processed, ad this requires some additioal skills, such as Perl or ASP scriptig. With FrotPage, all you have to do to eable forms to be processed is to fill-i the form properties cofiguratio fields. By default, FrotPage will use ASP for forms processig; the good ews is, FrotPage writes the ASP code! Note that to use this feature the site has to be published to a server that has the FrotPage extesios istalled to eable FrotPage Compoets. Both FrotPage ad Dreamweaver iclude methods for checkig idividual pages or etire sites for accessibility compliace. Followig is a scree capture of the FrotPage accessibility report (Accessibility checker) tool: LearSmart Cloud Classroom: Video Traiig Mauals

36 Maual CIW v5 Site Desiger (ID0-520) Dreamweaver has a accessibility feature that ca be optioally eabled for each site you maage. If you eable the accessibility checker you will be prompted to provide the eeded items (such as alt text for images) each time you isert a object that requires accessibility add-os. The followig is a scree capture of the pop-up widow you will see i Dreamweaver immediately after isertig a image, if you have eabled this feature: Homesite is a web site editor that, istead of providig GUI web site maagemet, works as a advaced, code-oly editor. It is desiged to help professios write code faster by providig may helpers. Although oe might thik of this web editor as a tool to write HTML code, may programmers also use it to write scriptig code. LearSmart Cloud Classroom: Video Traiig Mauals

37 Maual CIW v5 Site Desiger (ID0-520) The tag chooser is the most helpful feature of the Homesite web editor. I summary, it is the Web Desiger's job to use techology to covey the appropriate message to site visitors. The cocepts of desig are as importat as the cotet. Web desigers use techical tools to implemet their desig ideas. They may use a WYSIWYG tool to create the Web site (i.e. FrotPage or Dreamweaver). They will use some graphics program to create ad ehace Web graphics. People i techical positios must be familiar with Web desig cocepts. Desig cocepts ad the techology to implemet them work together. Note the examples below: Multimedia Data-drive cotet (Accessig Databases) E-commerce Itraets Tools for Web Site Desig iclude, but are ot limited to: WYSIWYG editors HTML editig tools Graphics applicatios Techology for Web Site Desig iclude, but are ot limited to: Maual HTML Codig JavaScript ad other scriptig laguages A combiatio of maual codig ad WYSIWYG fuctioality is the best optio from today's developmet perspective. LearSmart Cloud Classroom: Video Traiig Mauals

38 Maual CIW v5 Site Desiger (ID0-520) Publish ad maitai a productio Web site. Testig Usability Testig: A site's effectiveess should be tested with users who have little or o exposure to the site ad, if possible, the Iteret. If these testers ca easily fid what they wat o the site, you have doe a good job! Before the test, develop the site to the poit of beig early fiished. Web site testig is preformed to determie how effective the site is i terms of usability ad accessibility. The testers should be typical users who have little or o experiece with the site. People with limited experiece with the Iteret are good testers. The site should be early fiished before testig begis. Desigers should test sites o various browsers because what looks good o oe browser may ot look the same with aother browser. Some techologies wo t reder at all with certai browsers. Oe example would be opeig a Microsoft Word documet. The documet will ope just fie withi Microsoft Iteret Explorer but ot at all with a Netscape browser. Aother example would be the <blik> tag. The <blik> tag will reder blikig text i a Netscape browser but ot i other browsers. Differet versios of the various browsers should also be cosidered. Developmet servers / stagig servers / web servers It is ever a good idea to work o a live server. Developmet work should be doe o a work server. If databases or programmig are ivolved, the site should be published to a stagig server, ad the published up to the live web server (also called the productio server) oly after testig. Stagig servers are usually oly available to the desig/developmet team. Stagig servers are ot ecessary for simple html/xhtml sites. They are geerally used oly for sites that iclude programmig ad/or database coectivity. The stagig server should be as similar as possible to the productio server. It should have the same operatig system ad the same software. Geerally, you will do all desig work o a local workig computer or server. Whe you are ready to publish a ew site or chages to a existig site, you will eed two pieces of iformatio: You will eed the IP or URL to publish to ad you will eed the userame ad password to autheticate o the web server. Hostig Web site hostig is a importat cosideratio. You eed a web server i order to make your web site available to the World Wide Web. You may wat to host your ow site i-house, or you may wat to cotract with a outside source referred to as a Iteret Service Provider (ISP). If you eed e-commerce capabilities or special applicatios, you may eed to cotract with a Applicatio Service Provider (ASP). Below you will fid a example of a ASP homepage that lists its curret pricig. LearSmart Cloud Classroom: Video Traiig Mauals

39 Maual CIW v5 Site Desiger (ID0-520) There are may hostig compaies to choose from. If you go to ad type i web hostig you will get a log list of returs! You will eed to lear to compariso shop for the best buy o the features you desire ad eed. If you are lookig for hostig for a olie istat storefrot for a e-commerce site, your eeds will be cosiderably differet, ad the optios cosiderably more expesive. Shoppig cart features ad paymet gateways are covered i more detail i the CIW E-Commerce courseware ad are ot addressed o this exam. LearSmart Cloud Classroom: Video Traiig Mauals

40 Maual CIW v5 Site Desiger (ID0-520) DNS Regardless of where you host your site, you will eed a DNS etry. The Domai Name Systems (DNS) traslates web address text ito IP addresses. Cofiguratios are doe so that users ca access Web sites via URLs. For example, the DNS record for would look like this: google.com IN A This meas that the IP address of scobb.com is Obviously, google.com is easier to remember tha ! Publishig ad FTP Publishig with FrotPage If you are usig FrotPage ad hostig o a server that has the FrotPage server extesios istalled, you will publish usig a built-i FrotPage fuctioality that will sychroize with the server ad oly sed up ew ad chaged files. LearSmart Cloud Classroom: Video Traiig Mauals

41 Maual CIW v5 Site Desiger (ID0-520) Dreamweaver FTP If you are usig Dreamweaver, you will put your files up o the web server usig Dreamweaver s built-i FTP cliet. LearSmart Cloud Classroom: Video Traiig Mauals

42 Maual CIW v5 Site Desiger (ID0-520) Dreamweaver All FTP cliets allow for file trasfers to ad from the FTP server. You will be required to autheticate each time you trasfer files. Maiteace A web site is always a work i progress. Some types of sites are more maiteace itesive tha others, but they all will eed to be maitaied o a regular basis. I additio to simply addig ew iformatio as it becomes available, you will wat to pay close attetio to user feedback ad server logs. You wat to stay o top of issues such as broke liks, most popular pages, least popular pages ad avigatio sequeces. Sometimes, a web site eeds revisio simply because it looks out of date, or its cotet is out of date! Other reasos for revisio iclude: The compay has outgrow the site. Old or proprietary techology eeds to be updated. The site was poorly costructed to begi with ad thus has become difficult to maitai. The site does ot work well. After a site has bee chaged, the chages should be documeted. It is also advisable to keep a backup copy of the old site. LearSmart Cloud Classroom: Video Traiig Mauals

43 Maual CIW v5 Site Desiger (ID0-520) Security issues Web site security issues eed to be cosidered. Web servers are vulerable to all kids of attacks. Types of security risks to be aware of iclude: Social egieerig: Hackers try to trick people ito divulgig sesitive iformatio, such as userames ad passwords. EBay is subject to a lot of this type of hackig. messages made to look like legitimate from EBay are set to thousads of people with some kid of message aimed at trickig people ito divulgig their userames ad passwords. Deial-of-service attacks: These occur whe a site is blasted with so much traffic that the badwidth is all used up. This is similar to causig a traffic jam o a highway! The site may be take dow or it may just slow dow to the poit of appearig to be dow. Brute-force attacks: These are the least sophisticated ad the most commo types of attacks o servers. Oe method is the use of dictioary programs that will just keep tryig to logo by tryig oe word after aother util a correct password is radomly geerated. This is why compaies geerally ecourage users to create passwords that iclude combiatios of case, letters ad umbers. Sever logs Server logs help keep the web site desiger iformed about: Most popular pages Least popular pages Browsig times Navigatio sequeces Demographics Dowloadable software Repeat visitors LearSmart Cloud Classroom: Video Traiig Mauals

44 Maual CIW v5 Site Desiger (ID0-520) Domai 4: Advaced Web Techologies There will be twety questios o the CIW Site Desig certificatio exam dealig with Advaced Web Techologies. 4.1 Use multimedia ad plug-i techologies to ehace a Web site. Multimedia web desig priciples eed to be cosidered. What is Multimedia? Techically, a web page that cotais a picture is multimedia, although we ted to thik i terms of movemet or soud as igrediets of multimedia. Ay form of graphics, aimatio, audio or video o a web page should be cosidered multimedia. Multimedia Web-eablig techologies For multimedia to work o the web there eeds to be eough badwidth ad the proper plug-is. Plug-is eable the multimedia file to be played or activated othe user's Brower. The followig are some examples of multimedia ad the required plug-i; Flash movie ad aimatio Flash Plug-i Video / Streamig Video A media Player such as Real Player PowerPoit Presetatios PowerPoit Viewer Multimedia desig priciples Cosider all of the followig whe usig multimedia: What is the avigatio structure of the Site? Will frames be used? What is your target audiece's viewig capability? What speed are your visitors coectig at? Will a text oly or low-resolutio alterative by provided? Are ecessary plug-is readily ad easily available? Where o the page will you place the lik to the plug-is? How will the user retur to your site after dowloadig the plug-i? Dazzlig your visitors with flashy multimedia is ot the goal of a good Web site desiger! Multimedia should oly be icluded whe it is logical ad ehaces the usability of the site. It should ot be used for simply showig off! The primary goal of a well desiged Web site is to give visitors what THEY wat by applyig a balace of: Well-plaed desig High-quality cotet Appropriate use of media LearSmart Cloud Classroom: Video Traiig Mauals

45 Maual CIW v5 Site Desiger (ID0-520) Flash Flash is a popular applicatio for creatig Web multimedia. Flash combies four elemets that defie its fuctioality: vector graphics, streamig capability, a timelie ad layers. Graphics created with Flash are vector graphics. The ative file format for Flash is FLA. The FLA file is coverted to SWF which is the iserted ito HTML / XHTML code usig the <object> tag. Although you could develop a etire Web site with Flash, it is ot usually advisable. Flash developmet ad updatig is time-cosumig ad requires special skill. If the site you are desigig is goig to eed to be updated frequetly, or if iexperieced Flash developers will be performig the updates, it is ot wise to use Flash to create the etire site. Flash ca be used to create automatic tweeig, if you supply the before ad after objects ad/ or the path they will travel. The <object> or <embed> tag is required to isert Flash movies ito Web pages. The easiest method is to let Flash geerate the code for you! Dreamweaver has a feature that ca test browsers for the Flash plug-i. If the user does ot have the plug-i there ca be a automatic redirect to a alterate page. Dreamweaver does this by geeratig JavaScript code that rus cliet-side. A mask is a type of layer that covers part of a stage ad allows aother part to show through. Flash is ofte used i the istructioal desig field to create multimedia tutorials or simulatios for olie learig. LearSmart Cloud Classroom: Video Traiig Mauals

46 Maual CIW v5 Site Desiger (ID0-520) Flash movies may ot be accessible for everyoe. It is advisable to iclude a ote o the homepage iformig visitors that Flash is used o the site. A XHTML or HTML alterative should be provided. A text alterative is especially importat for mobile devices. Audio cotet should be captioed to accommodate the hearig impaired. Flash buttos ca be used i Flash movies to trigger evets. You ca use default buttos from the Flash library or you ca create custom buttos. Buttos are triggered by mouse evets such as mouse-over or mouse-click. You ca use ActioScript, which is a cliet-side scriptig laguage similar to JavaScript, but proprietary to Flash, to trigger evets. Java Applets Oe way to create aimatio is to use Java applets. The Web desiger is ot usually the oe to create the Java applet, but rather will use oe that a Java programmer has previously created. The Web desiger will simply embed the Java applet ito a Web page ad tweak the parameters. 4.2 Use cliet-side ad server-side programmig to ehace Web site fuctioality. XML XML eables desigers to create documets cotaiig more specific data about cotet. These are cosidered itelliget documets. For example, you could create a custom tag called <movie> ad use that tag to idetify iformatio about the movie DaVici Code. You might create aother custom tag called <book> ad use it to describe the cotet foud o a page about books writte o the DaVici Code. Someoe searchig your XML site could expect to search for DaVici Code usig the idetifier tags to get oly iformatio about the movie or oly results related to books about DaVici Code. The W3C lists stadards for XML. LearSmart Cloud Classroom: Video Traiig Mauals

47 Maual CIW v5 Site Desiger (ID0-520) XML stads for Extesible Markup Laguage. This ew laguage will eable users to create documets that cotai more specific iformatio about cotet tha ever before. XML is take from the Stadard Geeralized Markup Laguage (SGML). SGML is called a meta-laguage, which is a laguage for creatig other laguages. Markup laguages are desiged to istruct computers how to process data. Markup istructios are referred to as tags, ad the process of markig up a documet is sometimes called "taggig." Today most taggig i programs happes trasparetly, ad usually takes place usig a proprietary system. Markup desiged to affect the appearace of a documet is commoly called "procedural" markup because it istructs the computer how to reder the text. XML is a subset of SGML. HTML is for display, ad XML is for cotet. XML is ot HTML. May people thik XML is a additio of tags to HTML. This assumptio is ot correct. Ulike HTML, XML is ot a applicatio but a subset of SGML. XML is SGML made simpler ad more accessible; it is sometimes referred to as "SGML Lite." XML qualifies as a meta-laguage ad ca be used to write other laguages. XML offers users the ability to defie their ow set of markup tags to write their ow versio of HTML. HTML is a applicatio created i SGML. It is ot extesible. There is a fiite set of HTML elemets, which are etered ito pages as tags. HTML was origially created to defie structure, ot formattig. With the commercializatio of the Iteret, the umber of Web page creators grew expoetially, ad ot all users cared about the origial versio of HTML. Users wated the ability to make type bold, chage the fot size or face, ad add color. Netscape respoded to users who were frustrated with HTML's limitatios by creatig extesios to the laguage. Well-formedess is essetial i XML. Documets that are ot well-formed will ot load i the browser, accordig to the XML Recommedatio. The W3C istructs us that "violatios of wellformedess costraits are fatal errors." Therefore, the page will ot appear i the browser at all uless this miimum requiremet is met. Curretly oly Microsoft Iteret Explorer 5.0 ad higher atively supports XML pages. Netscape has aouced its support for XML, ad Navigator 6.x will provide ative XML support. Will XML replace HTML? The short aswer is o, but it might over time. HTML presets severe limitatios to page authors. For data that eeds persistece over time, XML will better serve the purposes of those lookig to retrieve ad reuse that data. XML will redefie the way we code HTML. I the short ru, XML will be used i cojuctio with HTML. As browsers develop ad style techologies progress, XML may be used without HTML. But HTML ad XML are separate ad differet, ad oe techology is ot ecessarily better or worse tha the other. Both tools have appropriate ad iappropriate uses. The more you kow about both, the better equipped you are to choose the best tools to meet your eterprise's eeds. XHTML is the latest recommedatio from the W3C. XHTML combies HTML ad XML to create a trasitio from HTML toward XML, while still providig curret browsers with backward-compatibility. This meas that the XHTML developer who adheres to the requiremets of XML well-formedess ca use HTML tags ad XML tags withi the same documet ad have it be valid. XHTML is also desiged to make Web documets accessible ad iteroperable across platforms, partly due to the strictess of XML. Short for Extesible Markup Laguage, a specificatio developed by the W3C. XML is a pareddow versio of SGML, desiged especially for Web documets. It allows desigers to create their ow customized tags, eablig the defiitio, trasmissio, validatio ad iterpretatio of data betwee applicatios ad betwee orgaizatios. LearSmart Cloud Classroom: Video Traiig Mauals

48 Maual CIW v5 Site Desiger (ID0-520) Whether XML evetually supplats HTML as the stadard Web formattig specificatio depeds a lot o whether it is supported by future Web browsers. Microsoft Iteret Explorer versio 5 hadles XML, but reders it as CSS, ad Mozilla (Netscape) is still i experimetig with XML support. A Few Thigs You Should Kow About XML Rules for XML XML Features: XML stads for Extesible Markup Laguage. XML is derived from the Stadard Geeralized Markup Laguage (SGML). SGML is a meta-laguage (a laguage for creatig other laguages). XML is a subset of SGML (SGML Lite). HTML is display. XML is cotet. XML is ot HTML or a additio of tags to HTML. XML offers users the ability to defie their ow set of markup tags. Tags must be explicit: they caot be iferred. All opeig tags must have correspodig closig tags. Empty tags require a forward slash (/) character before the closig agle bracket. All attribute values must be eclosed i sigle or double quotatio marks. Tags must be properly ested. Tags are case sesitive ad must match each other i every implemetatio. Explicit tags Case sesitive No empty tags All attribute values must be eclosed i quotatio marks Must cotai DTD The 10 desig goals for XML are: 1. XML shall be straightforwardly usable over the Iteret. 2. XML shall support a wide variety of applicatios. 3. XML shall be compatible with SGML. 4. It shall be easy to write programs which process XML documets. 5. The umber of optioal features i XML is to be kept to the absolute miimum, ideally zero. 6. XML documets should be huma-legible ad reasoably clear. 7. The XML desig should be prepared quickly. 8. The desig of XML shall be formal ad cocise. 9. XML documets shall be easy to create. 10. Terseess i XML markup is of miimal importace. Source: This is why HTML is called the lazy programmers dream, ad XML is called the lazy programmers ightmare! LearSmart Cloud Classroom: Video Traiig Mauals

49 Maual CIW v5 Site Desiger (ID0-520) Beefit of XML Oe of the primary beefits of XML is the ability to defie a laguage that allows differet types of presetatio. Compaies ca make up their ow meaigful tags. For example, <letterhead>, <product> or <greetig>. I XML you ca make up tags by ay ame at all! The hope is that i the ear future, search egies will search o a more itelliget level, thus returig results based o cotextual meaig. Usig XML to create tags that defie cotet will aid i this veture. HTML XML XHTML Display Cotet ad structure The trasitio betwee HTML ad XML Secure XML is used to securely trasfer data betwee programs ad servers. The data is ecrypted ad the set over the web usig digital sigatures to esure itegrity. JavaScript JavaScript is a cliet-side scriptig laguage that is most ofte used withi HTML/STHML pages. Sice this is a cliet-side techology, whe the Web pages is closed, the result of the code is goe verses beig set ad stored somewhere. JavaScript ad Java are two distict programmig laguages. Java is a full-fledged object-orieted, server-side programmig laguage ad was developed by Su Microsystems, Ic. JavaScript is a object-based, cliet-side scriptig laguage ad was developed by Netscape. VBScript is a scriptig laguage very similar to JavaScript that was developed by Microsoft, ad is a subset of Visual Basic. Both VBScript ad JavaScript are iterpreted laguages that are iterpreted by the browser. They are NOT compiled. ECMAScript is a ewer optio that works very well with all Web browsers. Geerally speakig, JavaScript will pretty work well i both Netscape ad Iteret Explorer but ot all of the Jscript fuctios ad features will work with Netscape browsers. I a joit effort to stadardize, Netscape ad Microsoft are both movig toward the Europea Computer Maufacturig Associatio (ECMA). ECMAScript ad JavaScript are essetially the same. It is becomig commo to use the terms ECMAScript ad JavaScript iterchageably. The first editio of ECMAScript was adopted by the ECMA geeral Assembly i Jue of JavaScript uses dot otatio to associate a object ame with properties or methods. Oe well kow simple method is the alert() method which causes a pop-up message to occur whe the page is loaded i the browser. Followig is a example of a alert pop-up message: LearSmart Cloud Classroom: Video Traiig Mauals

50 Maual CIW v5 Site Desiger (ID0-520) The alert() method ca be used to create either pop-up or pop-uder messages for advertisig. Here is the code for the alert() method: <!-- alert("good Morig!") // --> </SCRIPT> The JavaScript prompt() method is used to get iformatio from the user through a text field i a pop-up iput box. Followig is a example of the prompt() method: LearSmart Cloud Classroom: Video Traiig Mauals

51 Maual CIW v5 Site Desiger (ID0-520) Here is the code for the prompt(0 method: <SCRIPT> <!-- alert("good Morig, " + prompt("we would like to get to kow you, please supply us with your ame","")) // --> </SCRIPT> Cocateatio is ofte used with the alert() ad prompt() methods i JavaScript to combie text strigs. I typed my ame ito the iput text box above. The pop-up greetig that was retured icluded my ame via the cocateatio feature. The ope() method is used to ope ew browser widows ad populate them. The widow is a object, ad the object widow has properties with attributes that ca be maipulated by settig the value o the right side of the equal sig, like this: toolbar=1 meas iclude the toolbar o the ew widow. This page has the code for the ope() method: LearSmart Cloud Classroom: Video Traiig Mauals

52 Maual CIW v5 Site Desiger (ID0-520) If you click the butto, this widow will ope: Here is the code for the ope() method: <FORM> <INPUT TYPE="butto" VALUE="Ope a HotBot Search Widow" oclick="ewwidow=ope(' 'toolbar=0, locatio=1, meubar=1, scrollbars=1, resizable=1')"> </FORM> Widow object attributes that ca be maipulated Toolbar Locatio Directories Status Meubar LearSmart Cloud Classroom: Video Traiig Mauals

53 Maual CIW v5 Site Desiger (ID0-520) Scrollbars Resizable Width Height Top left After clickig the Test Your Browser butto, data will populate the iput boxes: LearSmart Cloud Classroom: Video Traiig Mauals

54 Maual CIW v5 Site Desiger (ID0-520) Here is the code for the yourbrowser fuctio: This fuctio script goes ito the html head: <SCRIPT> <!-- fuctio yourbrowser() { documet.details.name.value=avigator.appname; documet.details.versio.value=avigator.appversio; documet.details.code.value=avigator.appcodename; documet.details.aget.value=avigator.useraget; } // --> </SCRIPT> The, this code goes ito the html body: <DIV ALIGN="ceter"> <TABLE BORDER> <FORM NAME="details"> <TR><TD> Browser Name: </TD> <TD> <INPUT TYPE="text" NAME="Name" Size="50"></TD> </TR> <TR><TD> Browser Versio: </TD> <TD> <INPUT TYPE="text" NAME="Versio" Size="50"></TD> </TR> <TR><TD> Browser Code Name: </TD> <TD> <INPUT TYPE="text" NAME="Code" Size="50"></TD> </TR> LearSmart Cloud Classroom: Video Traiig Mauals

55 Maual CIW v5 Site Desiger (ID0-520) <TR><TD> User-Aget: </TD> <TD> <INPUT TYPE="text" NAME="Aget" Size="50"></TD> </TR> <TR> <TD><INPUT TYPE=BUTTON VALUE="Test Your Browser" ONCLICK="yourBrowser()"></TD> </TR> </FORM> </TABLE> </DIV> <p><a href="start.htm">retur to JavaScript Samples</a></p> Rollover images A rollover occurs whe the user rests the mouse over a image, which the switches to aother image. A miimum of two images are ivolved i a rollover evet. The user sees the first image whe the page loads. The secod image appears whe the mouseover evet occurs. JavaScript is most commoly used to code rollovers, but may applicatios, such as Dreamweaver ad Fireworks, ca write the eeded code, savig desigers the codig time. Pop-up ad pop-uder Pop-up ad pop-uder widows should be used sparigly ad oly upo user request by clickig a lik to view supportive cotet. Pop-ups ad pop-uders that appear o their ow ad display advertisig are ot desirable. Whe programmig pop-up or pop-uder widows, cosider the fact that may users will have pop-up blockers istalled ad will ot see the cotet. Dyamic HTML (DHTML) DHTML refers to a group of techologies that work together to create iteractivity o Web pages. These techologies iclude scriptig, DOM ad XHTML/HTML ad CSS. DHTML effects are more for etertaimet tha they are fuctioal. DHTML executes o the cliet-side, ad thus is sometimes used as a alterative to some server-side techologies, such as ASP. DHTML is geerally defied as a combiatio of techologies that provides Web page iteractivity. A Few Thigs You Should Kow About DHTML JJ JJ JJ JJ JJ Exteds HTML. DHTML Limitatios JJ JJ Is a group of iterrelated techologies (rather tha a sigle techology). Group icludes: Scriptig laguage, DOM, HTML4.0 ad CSS. Provides dyamic cotet to the browser. Alterative to some server-side techologies. Oly partial browser support. Icosistecies betwee Netscape ad Iteret Explorer regardig DHTML performace. LearSmart Cloud Classroom: Video Traiig Mauals

56 Maual CIW v5 Site Desiger (ID0-520) DOM & DHTML JJ JJ CSS & DHTML JJ Scriptig JJ The DOM is a key compoet i DHTML. DOM stads for "Documet Object Model," ad was developed by Netscape. It is a specificatio, or "istace hierarchy" of JavaScript objects. To help you uderstad this, cosider that JavaScript is a object based programmig laguage, ad it is evet-drive. Therefore, there eeds to be a hierarchy of all objects withi the browser widow. CSS allows you to defie tag properties to create your ow text effects, as well as cotrol absolute positioig of elemets o a page. CSS are a part of DHTML. HTML ad CSS eables you to cotrol page structure, but it is scriptig that eables you to iteract with tags ad styles. You ca use VBScript or JavaScript to iteract with the DHTML DOM. FrotPage ad Dreamweaver JJ Both FrotPage ad Dreamweaver iclude some caed, easy to implemet DHTML. You ca feel fairly safe usig the DHTML that comes with these 2 programs. They have oly icluded methods that are deemed safe i Netscape ad Iteret Explorer. Documet Object Model (DOM) The Documet Object Model (DOM) is somethig web desigers eed to uderstad whe workig with scriptig ad DHTML. Accordig to the Documet Object Model is a platform- ad laguage-eutral iterface that will allow programs ad scripts to dyamically access ad update the cotet, structure ad style of documets. The documet ca be further processed ad the results of that processig ca be icorporated back ito the preseted page. LearSmart Cloud Classroom: Video Traiig Mauals

57 Maual CIW v5 Site Desiger (ID0-520) Plug-i techology Web desigers MUST uderstad which techologies require browser plug-is i order to use them effectively. It would t make much sese to use some flashy wow factor cotet o a page if most users would ever be able to see it because of the eed for propriety plug-is. For example: Flash requires the flash player plug-i ad today most browsers have the flash player plug-i. The key word there is most. You would ot wat to deped o Flash to deliver a missio critical message o a Web site, kowig that some visitors would ever see the message. You could, however, feel safe to use Flash to deliver missio critical employee traiig if you kew it would be delivered exclusively over a compay Itraet ad kew that all employee computers ra recet versios of Iteret Explorer with the Flash player plug-i istalled. A partial list of some commo Web plug-is: Flash Player eeded to play Flash movies Acrobat reader eeded to view PDF documets RealPlayer eeded to view some types of video Plug-is are geerally obtaied as free dowloads. LearSmart Cloud Classroom: Video Traiig Mauals

58 Maual CIW v5 Site Desiger (ID0-520) Creatig dowloadable files Whe a file type that is ot atively supported o the Web (by the browser or a commo plugi) is requested by a user click, the user is prompted to dowload it. Geerally, a pop-up will prompt the user to either ope or save the file. If the user chooses the Ope optio, the file will either ope i the browser if the appropriate viewer is istalled or the user will be prompted agai to idicate what applicatio to use to ope the file. For example, if the file is a PowerPoit presetatio ad the user clicks the Ope optio, the presetatio will ope i the browser if the user has PowerPoit istalled or has the PowerPoit viewer istalled ad is usig the Netscape Browser. Otherwise, the user will be asked to idetify a applicatio to use to ope the file, ad i this case, there would be o applicatio to ope the presetatio. LearSmart Cloud Classroom: Video Traiig Mauals

59 Maual CIW v5 Site Desiger (ID0-520) If the user clicks the Save butto, he/she will be prompted to idicate where to save the file. He/she ca later retrieve the file from that locatio. I a utshell, to create a dowloadable file o a Web page, just set a lik to ay o-supported file type. Clickig that lik will ivoke the File Dowload prompt. Server-side techologies Some examples of Sever-side techologies iclude: Active Server Pages (ASP) developed by Microsoft JavaServer Pages (JSP) developed by Su Microsystems Commo Gateway Iterface (CGI). CGI allows HTML pages to iteract with programmig applicatios Server-side techologies like ASP ad JSP iclude code withi XHTML/HTML pages the rus o the server. Oce processed, the code is removed ad the cliet browser receives oly XHTML/HTML. CGI is a protocol for commuicatio betwee Web forms ad applicatio code. CGI is commoly used for forms processig. Typically, form results are set to a script (usually Perl script) that resides iside a folder called CGI-BIN, processed by the code. The results are the set to some database, to some perso via or to a browser widow. LearSmart Cloud Classroom: Video Traiig Mauals

60 Maual CIW v5 Site Desiger (ID0-520) Cookies Cookies are small text files that have a variety of uses. Cookies are set from a server to the user's browser i the HTTP respose header. The cliet browser accepts the respose from the page assigig the cookie, the accepts (or gives the user the chace to accept or reject) the cookie. Oce the cookie has bee accepted, the browser program stores the cookie iformatio i a file o the user's system. Whe the http request is geerated, ay cookies o the user's system with a path ad domai ame matchig the curret http request will be passed alog i the request header. The, the server ca test for, ad evaluate, the cotets of icomig cookies. Oe use of a cookie is whe a site visitor returs to a site. A cookie ca pass the visitors ame to the browser for a greetig, as i the example below: Cookies are harmless. They ivoke thigs like your ame ad prefereces. Curretly a server ca pass o more tha 20 cookies to a user's computer, ad a user ca store o more tha 300 cookies total. The server does ot see ay iformatio other tha the ame=value pairs. Oly URLs matchig the path ad domai values i the cookie file ca be read agai ad evaluated by the server. A cookie header appears to your browser as follows: Set-Cookie: ame=value; expires; path=path; domai=domai; secure Not all these parameters must be assiged to use cookies. LearSmart Cloud Classroom: Video Traiig Mauals

61 Maual CIW v5 Site Desiger (ID0-520) Name=value The ame/value pair is the oly iformatio required to geerate a cookie. All other cookie attribute are optioal. Expires=date The expires/date pair determies whe the cookie will expire. If this attribute is ot preset, the cookie will expire at the ed of the browser sessio. To set expiratio dates for cookies, the date must be formatted as follows: weekday, DD-Mo-YY HH:MM:SS GMT (GMT stads for Greewich Mea Time.) Paths ad Domais: path=path; domai=domai The path ad domai pairs cotai the path portio ad domai ame of the URL that issued the cookie. Whe a HTTP request header is formed, the path ad domai ame pairs are checked; if they match the page beig requested, ay cookies pertaiig to that path (ad higher) are passed back to the server for evaluatio. Safety of cookies: The server does ot see ay iformatio other tha the ame=value pairs. Oly URLs matchig the path ad domai values i the cookie file ca be read agai ad evaluated by the server. Secure: If this parameter is preset, the cookie is set oly whe a secure protocol, such as SSL, is preset. 4.3 Coect Web pages to a database There are multiple optios ad techologies that eable data coectivity o the Web. ASP, JSP, CGI, Cold Fusio ad Perl script are a few well-kow optios. Active Server Pages (ASP) Active Server Pages (ASP) is a techology developed by Microsoft that used the server to ru scripts to process data ad pass the output back to a database ad/or back to the browser. Terms ad tidbits Ope database coectively (ODBC) supports both SQL ad o-sql laguages. ODBC eables Widows applicatios to commuicate with databases o a etwork. Java Database Coectivity (JDBC) similar to ODBC but was developed by JavaSoft, a subsidiary of Su Microsystems. JDBC executes SQL statemets via Java programmig to commuicate with ay SQL-compliat database. Computer Output to Laser Disk (COLD) used to store data o CD ROMs. Biary Large Object (BLOB) stores biary data i a sigle etry. Used maily for multimedia objects. Virtual Sequetial Access Method (VSAM) used o IBM maiframes. Idexed Sequetial Access Method (ISAM) for maagemet of iformatio storage ad access o hard drives. Olie Aalytical Processig (OLAP) used to aalyze data ad for orgaizatio. Report Program Geerator (RPG) used for reports ad other output. ActiveX Data Objects (ADO) used to access spreadsheets, databases ad other files usig ADO. LearSmart Cloud Classroom: Video Traiig Mauals

62 Maual CIW v5 Site Desiger (ID0-520) CGI stads for Commo Gateway Iterface. CGI allows HTML pages to iteract with programmig applicatios. CGI ca be istrumetal i passig iput to databases. Schema refers to the structure of a database system. This term defies tables ad files ad the relatioship betwee them. I a database, a field is a colum, ad a row is oe record of oe perso, place or thig. The database ca cotai may records. Queries are used to filter/retur records that meet give criteria, ad to perform some other fuctios. There are three basic types of queries: Meu query Optios ca be selected from a meu list. Query by example The user selects the fields ad criteria he/she wats to fid by usig oe record as a example. Query laguage Structured query laguage (SQL) which is used to retrieve or maipulate data i a database. Structured Query Laguage (SQL) was developed by IBM i Today it is the stadard for accessig iformatio from a database. The four mai types of SQL queries are: SELECT statemets used to retrieve data from databases. INSERT statemets used to create ew records. UPDATE statemets used to modify records. DELETE statemets used to remove records. Database Maagemet System (DBMS) is the geeral term used to describe applicatios used to maipulate iformatio i a database. There are three types of DBMS: Flat-file DBMS oe sigle file stores all the iformatio. Relatioal DBMS (RDMS) ca cotai multiple tables ad tables ca be related by commo fields. Multidimesioal DBMS usually geerated by a RDMS. MDBMS stores iformatio i orgaized groups of records based o commo field values. Microsoft Access is cosidered a Relatioal Database Maagemet System because may tables ca be created ad related withi oe file. Access ca be used for Web data coectivity for small to medium sized database eeds. It is especially well suited to workig with FrotPage ASP because these are all Microsoft products ad techologies. LearSmart Cloud Classroom: Video Traiig Mauals

63 Maual CIW v5 Site Desiger (ID0-520) LearSmart Cloud Classroom: Video Traiig Mauals