Del!II:!Produktdokumentasjon!!

Transkript

1 1 DelII:Produktdokumentasjon

2 2 1.Forord Idennedelenavsluttrapportenbeskrivessluttproduktetogdetekniske aspekterveddet.detvisestilnoetekniskfagterminologisomikkenødvendigvis forklaresnærmereidennerapporten.seforøvrigbrukerveiledningog kravspesifikasjonforutfyllendedokumentasjon. DelII:Produktdokumentasjon

3 3 2.Innholdsfortegnelse 1.Forord Innholdsfortegnelse Produktbeskrivelse Formåletmedproduktet Beskrivelseavstruktur Strukturogfunksjonalitet Innloggingsomadministratorogfunksjonalitet Innloggingsomregistrertkundeogfunksjonalitet Designogbrukervennlighet SidekartogtabellforSkiltetDitt Sidekart Tabell Kommentarogforklaringtilsidekartogtabell Programspråk HTML PHP CSS Javascript MySQLogDatabasen Brukerpresentasjon Helsepersonell,offentligetjenestemennogadvokater Butikkpersonell,firmaer VeienvidereDutfordringeroguløsteoppgaver DelII:Produktdokumentasjon

4 4 3.Produktbeskrivelse Idettekapitteletgirvienbeskrivelseavsluttproduktet,detsformålog brukertyper,struktur,designogforholdtilbrukervennlighet. 3.1Formåletmedproduktet Formåletmedproduktetvårterålageennettløsningforoppdragsgiver tilsalgavnavneskilt,stemplerogkonvoluttersomerenkelåtaibrukforkunder såvelsomadministrator,oggjørdetattraktivtåhandle.produktenesomselges henvendersegsærligtilhelsepersonellogadvokater,menogsåandre,som butikkmedarbeidere,ogsmåogmellomstorebedrifter.oppdragsgivereierog drifterflereulikesalgsforetakhvoravskiltetditt.noertenktsomettav foretakene.påsiktserhanforsegenmuligsammenslåingavdisseunderet paraply Xnettstedellerportal. 3.2Beskrivelseavstruktur Herredegjørviforstrukturenpånettsideneogfunksjonalitetentil produktetvårtoppimotkravspesifikasjonen Strukturogfunksjonalitet. Nettsidenebenyttersegavhtml5ihenholdtilrammekrav2i KravspesifikasjonenogerhovedsakligtreXdelteavutforming.Vitokogså utgangspunktiethtmlxtemplatforforsidenvår.denneendretvisidentil Nyheter forågiplasstildennåværende,somermerproduktorientert(sefigur 1). DelII:Produktdokumentasjon

5 5 Figur1DTilvenstreerforsidenslikdenserutnå,ogtilhøyreertemplatensomførstvartenktsom forside,mensomsidenbleenundersidekaltnyheter Ettersomdetførstogfremstersalgnettløsningenskaldreiesegomfaltdet naturligåpromotereproduktenepåforsidenfremforoppdateringeribloggx form. Vibrukerincludei header og footer slikatvisikrerenhelhetligfargebrukog sideutforming,slikdetspesifiseresvidereikravspesifikasjonenunderestetiske krav.header.phpigjeninkludererogsånavigasjonsmenyengjennom navigation.php(sefigur2). Figur2DUtsnittavprogramkodentilheader.php,medlenkertilcssDstyling,javascriptDfilerog inkluderingavnavigation.php NavigasjonsmenyenharnedtrekksmenymedunderkategorierunderProdukter ogomoss(sefigur3og4). DelII:Produktdokumentasjon

6 6 Figur3DNedtrekksmenyogsøkevindu,medLogginnDlenke Figur4DNedtrekksmenysomviserunderkategorierunderOmOss Tilnavigasjonsmenyenvalgteviåbyggepåetannettemplatogplassertederfor kodenietegetphpxdokumentmedegetcssxstilark. IheaderliggerensøkefunksjonogeninnloggingsXlenkesomendrestilenlenke tilentenadminpanelellerminsidealtettersommanerloggetinnsom henholdsvisadministratorellerkundebruker(sefigur3og5).dersom kundebrukerenharhandletvilogsåenlenketilhandlekurvenvisesher(sefigur 5). Figur5DutsnittavnettsidensomvisersøkevinduetmedlenketilHandlekurvogMinside(loggetinn somkundebruker) Produktsidenviserdetremestsolgteprodukteneførstogderetterlisterdenalle produkteneregistrertidatabasen,medbilderogpris,samtkortbeskrivelse.her kanmanklikkesegvideretilenmerdetaljertoversiktoverproduktetmedmer informasjon,somprisoglagerstatus.navnskiltversjonenharen demonstrasjonsfunksjonhvorkundenskalfåforhåndsvistskiltetmedønsket tekstiflereulikeformer,sombl.a.ovaleellerrektangulæreskiltmedavrundede DelII:Produktdokumentasjon

7 7 kanter,ogalleprodukteneharentekstbokshvormanskalkunneskriveinn ønskettekstpåproduktet(sefigur6). Figur6Dutsnittavnettsidenmedinformasjonomproduktet,pris,lagerstatus,mulighetforåvelge antall,leggetilihandlekurvogskriveinnteksttilforhåndsvisning Vedåtrykkepå Leggtilhandlekurv sendesmanvideretilhandlekurvenhvor manfårenoversiktoverdetmanharhandlet.herkanmanentenvelgeågå videretilbetaling,entenviapaypalellerfåtilsendtfaktura,ellermankanvende tilbaketilproduktsiden.mankanogsåfjerneenkeltprodukterfrakurveneller tømmedenhelt(sefigur7). Figur7Dutsnittavnettsidensomviserhandlekurvenmeddensulikefunksjoner Dersombrukerenharskrevetinntekstitekstboksenpåsidenfordetaljert informasjonomproduktet,vildennevisesitekstxboksenher(sefigur8). DelII:Produktdokumentasjon

8 8 Figur8Dutsnittavnettsidensomviserdenangittetekstentilkunden Innloggingsomadministratorogfunksjonalitet Nårmanharloggetseginnsomadministratorfårmantilgangtiladminpanelet medvalgmulighetersomåleggetil,søkeoppog/ellerendreprodukter,leggetil kategorier,slettebrukeresamtskriveogendre/sletteartikler.påsiktskal administratorogsåfåtilgangtilåsestatuspåtransaksjoner(sefigur9). Figur9DUtsnittavnettsidensomviseraminpaneletmeddiversevalgmuligheter Velgeradministratoråskriveenartikkel,kommervedkommendetiletsidehvor detskalfyllesinndenønskedetekstenoghvormanogsåkanlasteoppetbilde foråillustrereinnholdetiartikkelen(sefigur10). Figur10DUtsnittavnettsidenmedtabellforåskriveartikkel Påalleundersideravadminpanelerdetmuligåavbryteogdermedkomme tilbaketilpanelet.dessutenkanadministratorbrukedeandrenettsideneoghele DelII:Produktdokumentasjon

9 9 tidenkommetilbaketiladminpanelgjennomlenkenvedsøkevinduetsomer aktivsålengebrukerenerloggetinn(sefigur5hvorminsideerangitt,altså innloggetsomkunde) Innloggingsomregistrertkundeogfunksjonalitet ErmanloggetinnsomkundefårmantilgangtilMinsidemedkundepaneletsom angirulikevalgmulighetermyntetpåkundenstenktebehov(sefigur11). Figur11DUtsnittavnettsidensomviserkundepaneletmeddeulikevalgmuligheterangitther Kundenkanoppdaterepassordetogendre/oppdaterekontoinformasjonsom brukernavnogadresse(sefigur12)ogfåenoversiktoverbestillinger. Figur12DUtsnittavnettsidesomvisertabellforendringelleroppdateringavkontoinformasjonen Kundenkanilikhetmedadministratorennårsomhelststoppeoperasjonenved åvelgeavbrytogkommetilbaketilkundepanelet.kundenharogsåheletiden tilgangtildeandrenettsideneogkanvendetilbaketilkundepaneletgjennomå velgeminsidexlenkenoversøkefunksjonen,somvistifigur5. DelII:Produktdokumentasjon

10 10 3.3Designogbrukervennlighet Forsidenerutformetslikatbrukerenpresenteresforproduktkategorienehelt fraførstestund(sefigur13). Figur13DForsidenpåproduktetvårt Herfinnermanlogoentilnettbutikkenøverstidetvenstrehjørnetetterfulgtav tittelensomoverskriftpånivå1ogundertittelpånivå2ogsåen navigeringsmenysomogsåeren nedtrekksmeny(somnevntunderpunkt3.2.1ogvistifigur3og4). ForsidenogproduktoversiktenvaliderersomHTML5dokumenterogtilWCAG nivåaa,ihenholdtilkravspesifikasjonen(sefigur14). Figur14DUtsnittavvalideringsbekreftelsesomHTML5ogWCAGnivåAAfrahenholdsvisW3Cog AChecker AlleproduktX,artikkelXogpresentasjonsfotoerstockfotosomviharvalgtutog lagttil,ogskalpåsiktendrestiloriginalebilderavdeproduktersomtilbys. Ettersombutikkenikkeer oppeoggår ennå,valgteviåikkeavventedisse bildenefraoppdragsgiver,menhellerleggeuterstatninger.tekstbeskrivelsene DelII:Produktdokumentasjon

11 11 avprodukteneerogsåvåreegneogkunmentsomenpekepinnpåutforming, font,størrelse,fargeosv. IutviklingenavnettsidenslogobruktevietonlineverktøysomJonathanSnook harutvikletforåbestemmeomfargevalgpåforgrunnmotbakgrunner kompatiblemedwcagsineulikeklassifiseringer(a,aaogaaa).vivalgteå fokuserepåatteksteniselvelogoenskullekontrastertemotbakgrunnentilnivå AA,selvombakgrunneneikkekontrastertenokmothverandretilåfylledette kriteriet.tekstenvilleuansettkommefremogdetvardetviktigste. IvalideringenoppmotWCAGiverktøyetACheckerdukketdetoppenadvarsel (sefigur15). Figur15DutsnittavadvarselsidentilACheckersinvurderingavindex.phptilnettløsningenvår.Her gårdetfremataltdsetningenkanbliunødiglang. Foråkontrolleredenvisuelleutformingenvalgteviiutgangspunkteten billedløsningforåviselogoenogtittelenpåsiden.såbleviadvartmotatdenne løsningenkunnekommettilåkreveenunødiglangbeskrivelseialtxsetningen underimgxtagenforåbeskrivebildetsinnhold.vivalgtederforåendretilen merbrukervennligvarianthvortittelskrivesirentekstsom<h1>ogundertittel som<h2>.logoenmånødvendigvisværeetbilde,mendenkreverikkelikemye informasjonialtxsetningen. ItrådmedWCAGsineretningslinjerharvivalgtenfontutenserifer,såkaltsansX serif(elleruten føtter ).Detteforågjøreleseopplevelsenpåskjermlettereog merbehagelig,samtidigsomviogsådermedtarhensyntildyslektikere.videre harvivalgtåfølgewcagsin Quickreferencelist : DelII:Produktdokumentasjon

12 12 *tekstalternativerforbilder *ingenvideoxelleraudioelementer *bakgrunnenerjevntoverhvitogskriftenmørksomgirgodkontrast *skrifttypeerverdanasansxserifsomunderletterleseropplevelsen *vedbrukav<h>xtagererdetlettereåmanøvrereseggjennomsidene barevedhjelpavtastaturet *nettsideneoppførersegsommankanforvente,utenskjultefunksjoner *gjennombrukenavhtml5ogcss3ervisåkompatiblemedny programvaresomvikanfåblittperdagsdato 3.4SidekartogtabellforSkiltetDitt Herpresenterervisidekartetogensidetabellovernettløsningenvårforåangi hvilkenivåerdeulikesideneogfunksjonenebefinnerseg Sidekart Idettesidekartetforproduktetvårtfokuserervipåhvorsidenelenker (Antall'klikk'='antall'innrykk)' HjemX> NavneskiltX> DetaljertproduktinfoX> Forhåndsvisning Handlekurv(selengernedisidekartetforinfoomkurven) StemplerX> DetaljertproduktinfoX> Handlekurv(selengerned) KonvolutterX> DetaljertproduktinfoX> Forhåndsvisning Handlekurv(selengerned) ProdukterX> NavneskiltX> Detaljertproduktinfo DelII:Produktdokumentasjon

13 13 Forhåndsvisning Handlekurv(selengerned) StemplerX> Detaljertproduktinfo Forhåndsvisning Handlekurv(selengerned) KonvolutterX> Detaljertproduktinfo Forhåndsvisning Handlekurv(selengerned) NyheterX> Artikler(lesmer) OmOssX> Kontaktinfo(kontaktinformasjon) KontaktskjemaX> Feilmelding/Sendingsbekreftelse RegistrerdegX> Feilmelding/Registreringsbekreftelse HandlekurvX> Feilmeldingdersomikkeinnlogget PaypalX> GjennomførbetalingX> <XBekreftetmottattbestilling BekreftbestillingX> <XFakurakvittering Logginn(senedenfor) Registrerdeg(seovenfor) LogginnX> *KundepanelX> Oppdaterepassord Oppdaterekundeinformasjon Sebestillinger DelII:Produktdokumentasjon

14 14 <X Loggut *AdminpanelX> Leggtiletnyttprodukt Leggtilennykategori SøkoppogendreproduktX> Endreprodukt Slettbruker(søkpåbruker)X> Slettbruker Skrivartikkel Endre/slettartikkel Sebestillinger/Endrestatus <X Loggut ' Tegnforklaring:' 5> 'betyr'at'siden'lenker'til'følgende'sider'angitt'med'ett'innrykk'forbi'lenkesiden.'' <5 'betyr'at'siden'lenker'tilbake'til'siden'ett'innrykk'mindre'enn'siden'symbolet'står'ved.' 3.4.2Tabell Nivå1 Nivå2 Nivå3 Nivå4 Nivå5 Hjem Navneskilt Detaljert Forhåndsvisning produktinfo Handlekurv Stempler Detaljert Handlekurv produktinfo Konvolutter Detaljert Forhåndsvisning produktinfo Handlekurv Produkter Navneskilt Detaljertinfo Forhåndsvisning Handlekurv Stempler Detaljertinfo Handlekurv Konvolutter Detaljertinfo Forhåndsvisning Handlekurv Nyheter Artikler DelII:Produktdokumentasjon

15 15 OmOss Kontaktinfo Kontaktskjema Feil/Bekreft Registrer Feilmelding/ deg RegistreringsX bekreftelse Handlekurv Paypal Gj.førbetaling Bekreftelse Bekreftbest. Kvittering Logginn Adminpanel *seegentabell Kundepanel *seegentabell *EgentabellforAdminpaneletsogKundepaneletsfunksjoner: Niva3 Nivå4 Nivå5 Adminpanel Leggtiletnyttprodukt Leggtilennykategori Søkoppogendre Endreprodukt produkt Slettbruker(søkbruker) Slettbruker Skrivartikkel Endre/Slettartikkel Sebestillinger/Endre status Loggut Kundepanel Oppdaterepassord Oppdaterekundeinfo Sebestillinger Loggut 3.4.3Kommentarogforklaringtilsidekartogtabell Nettstedetharensåkalttrestrukturhvorsåmyesommuliglenkesdirektefra forsiden.viønsketsålangtsommuligågjøretilnærmetallinformasjon tilgjengeliginnenfortrexklikksregelenogføleratviergodtimålmeddet. DelII:Produktdokumentasjon

16 16 Enkeltefunksjonerkreverflereenn3klikk,mendaregnerviatbrukerenhar forpliktetsegsåpasstilinformasjonsjaktenatdetteerinnenforhvasomkan aksepteresmedtankepåkomplisitetenavoperasjonensombrukerønskerå gjennomføre. IsidekartetpresenteresførsteklikkyttersttilvenstresomHjem,ellerforsiden. SammemeningharkolonnenforNivå1itabellen.Førsteinnrykk(nivå2i tabellen)erallesidersomlenkesherfra,ogangissomandreklikk.andre innrykkrepresenterersidersomdetlenkestilfradisseigjenosv.noenav sideneeravnødvendighetskjultforførstegangsbesøkende,nærmerebestemt KundepanelogAdminpanel(merketmedasteriskisidekartet).Dissesidene kreverinnlogging.likeledesvilhandlekurvværeskjultdersomdenertom.det vilhellerikkeværemuligågåvideretilfakturaløsningendersomkundenikke harregistrertsegog/ellererinnlogget. Itabellenersidenesomhørerdirekteunderenannensideplassertdirektetil høyreinnenformodersidenscelleramme. 4.Programspråk Idettekapitteletpresenteresverktøyenevitokibrukforålagenettstedet ogprogramspråkenesomvivalgte.itilleggvilhvertvalgbegrunnes. 4.1HTML Skiltetditterennettbutikkogdermedheltavhengigavatinnholdgjøres tilgjengeligeforflestmuligenettleserepåenraskogsikkermåtenåogi fremtiden.html5blederforvalgttilåfylledefunksjonenesomikkeeravhengig avandrekilder. 4.2PHP VivalgteåbrukedetdynamiskekodespråketPHPforhovedtyngdenav funksjonenerelaterttilproduktetvårt,såsomskjemautfylling,innx/utlogging, handlekurv,fakturering,skriveartikler,oppdatereogleggetilprodukter,endre DelII:Produktdokumentasjon

17 17 brukerinformasjonogtilenkeltedesignvalgsominkluderingavheaderog footer.dettesisteforenkeltåkunneendrehovedoppsettetogdetvisuelle rammeverketfornettsidene. 4.3CSS Cascadingstylesheetsblebrukttilådefinerestilenpånettsiden,organisere innholdetogsørgeforatsideneoverholderwcagsittaaxnivå.deterbruktett cssxdokumentforhelenettstedet,medtotilleggsdokumentnårdetgjelder faktureringsdelen. 4.4.Javascript JavascriptetiproduktetvårtfølgerihovedsakmedhtmlXtemplatentil Nyheter ogdrifterbl.a.kalenderfunksjonenpåartiklenesomadministratorkanskrive. 4.5MySQLogDatabasen VivalgteåbrukeMySQLsomprogrammeringsspråkoppmotdatabasen ettersomdetermegetutbredtoglettåbruke,deteretopensourcespråkog gratis,ogspråketholderenhøyytelseiforholdtilkravtilmaskinvare.dermed fikkviimplementertdenfunksjonalitetenoppdragsgiverkrevdepåensikker måte, oglagretdataenesamlet.medmysqlerdetlettlagredataidatabasenoglettå hentedataut.viharhattfokuspåataltinnholdetisidenkanendresav administratorogderforerdetnaturligatdataenelagrespåett"sentralt"sted medeteffektivtoghøyxytelsesprogramspråk. 5.Brukerpresentasjon Idettekapitteletvilvipresentereenoversiktoverbrukergruppene,deresbehov oghvilkeløsningerviharkommetoppmed.kunderskalregistreresegoglogge innforhandleogkanvelgemellomtilsendtfakturaogonlinebetalingstjeneste (PayPal)sombetalingsmåte. DelII:Produktdokumentasjon

18 18 5.1Helsepersonell,offentligetjenestemennogadvokater AlleSkiltetDitt.nosineproduktereraktuellefordisseyrkesgruppene: *navneskilttilpersonellikontaktmedpublikum(somhelesesøstere, tannlegerogsykehuspersonale) *stemplerforbl.a.åvalidereresepter,bekreftekorrektkopiog/eller signeringavoffentligepapirer(somsalgskontrakter,gjeldsbrevog rettsdokumenter) *konvoluttermedf.eks.ethelseforetakselleradvokatfelleskapslogopå. Dennebrukertypentrengerdermedensikkermåteåhandledisseproduktenepå ogtilbydermåkunneforsikresegomatkjøperharretttilåhandleoffentlig beskyttetmateriale.deterviktigatikkeuvedkommendefårtilgangpåf.eks. stemplerfralegerellerlegesentresomkanbrukestilåforfalskebl.a.resepterog andresensitivedokumenter,somepikriser.butikkenkreverinnloggingforå handleogalleprodukterlagespåbestilling.detersåledesviktigat oppdragsgiverdobbeltsjekkerpersoninformasjonensomoppgisoppmot yrkesregisteretslikatsvindelikkeforekommer.vårtproduktharikkegjort foranstaltingerforåsikremotsliksvindelsomnevnther. 5.2Butikkpersonell,firmaer Dennebrukergruppentrengerikkeåvalideressomrettmessigekjøpere,men ikkedestomindreerdetviktigatdekanhandletrygtogeffektivtovernettet.vi harvalgtåvisemerverdiavgiftenogprisenførogetterdenneerlagttilfordidet erviktigmedenoversiktoverkostnadeneetterhvertsomdepåløper.i registreringenlagerkundenetpassordsomgjøresomtilenhashxstringslikat ingenkanhackedatabasenogfådirektetilgangtildennetypeninformasjon. DelII:Produktdokumentasjon

19 19 6.VeienvidereDutfordringeroguløsteoppgaver Nettsidenharflerefunksjonersomennåikkeerimplementertellersomikke fungereroptimalt: *Detbøråpnesforåetablerefirmakontoer. *Designetavlogooghvilkenfontvibruktebøretterprøvesav profesjonellvisuelldesigner. *Mulighetforåskjermemotsvindelforsøkvedkjøpavstempeltilfalske rettsarbeidereellerhelsepersonell.dettebørutformesisamarbeidmed oppdragsgiver,slikatbutikkenikkelideravunødigkrongletekjøpsxog registreringsrutiner. *Bedretilbakemeldingogassistansetilkundevedutfyllingavskjemaer. *Ferdigstilleforhåndsvisningsfunksjonenavskiltmedinnskrevettekst, somvistesegåværevanskeligereennførstantatt. *Ferdigstillefaktureringsfunksjonenslikatbl.a.epostblirsendt. *Utvidebrukenavtemplater,kanskjeombyggehelebutikkentilet alleredevelprøvdogutarbeidettemplat? DelII:Produktdokumentasjon