GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Transkript

1 GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

2 GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM Om kunden Mediq Danmark A/S er Danmarks førende handelsvirksomhed indenfor sundhedssektoren. I 2009 gik virksomhederne Hermedico og Kirudan sammen under Mediq, der I 2012 igangsatte projekter med henblik på en øget elektronisk håndtering af ordre og bevillinger. Målgrupper Kundens ene målgruppe er de nye og eksisterende kommunale kunder der til dagligt administrere og har overblikket over bevillinger, aftalevarer, borgere og forbrug. Anden målgruppe er den eksisterende kundeservice, der til dagligt servicerer kommunale kunder, og fremadrettet skal servicerer de kommunale portalkunder. Problemstilling Alle bevillinger godkendes af Mediqdanmark før forsendelse af hjælpemidler. Mediq ønsker at omdanne deres analog bevillingssystem til en ny digital webportal i deres allerede implementerede e-commerce miljø. Kommuner har dog ikke de nyeste it løsninger, og majoriteten gør derfor ikke brug af moderne browsere. 31 (MEDIQ Danmark Bevillingssystem En webportal til Mediq s kommunale kunder

3 GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM IA og Wireframes Under og efter workshop fasen, er det mit job at notere og skitsere wireframes udfra Adapt og Mediq s kommunikation. 32

4 Design Mediq ønsker at nedarve den visuelle identitet fra webshoppen, og så vidt muligt genanvende UXD (user experience design) webshop designet bruges derfor som design guide, og analyseres for genbrugelig CSS og IE7 problemstillinger 33

5 Redesign til Bevillingssystem og IE7 version Fordi systemet implementeres i den eksisterende E-handels løsning, genbruger jeg så vidt muligt samme HTML tags og klasser i koden, som i webshoppen. Det er smart fordi man så ikke behøver at definere dobbelt css til samme element typer, og gør at hele løsningen er nemmere at vedligeholde. De gennemgående elementer layoutes, og godkendes af kunden. 1. input felter og tekst styles 2. Tooltip ved mouse over 3. De lange klientlister kan sorteres alfabetisk 4. Mouse over effekt på lister for bedre visuel navigering 5. Pagers tilføjes i top og bund i forhold til usability og performance Opret bevillingshoved Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Hr. Peter Petersen CPR: XXXX Kunde ID: Bevilling Inkontinens Start: Diabetes Start: Vis forbrug Vis forbrug Vis Vis Du er logget ind som Henrik Henriksen Bevilling Varenr. Varenavn Startdato Slutdato Forbrug Unomedical Unomedical Unomedical Unomedical Du er logget ind som Henrik Henriksen Opret bevilling Download til Excel Tilbage til bevilling Tilbage til klient Klientliste Stamdata CPR: Stamdata CPR: ( i ) CPR: ( i ) Her kan du søge på de klienter der har bevilling i kommunen. Du kan f.eks søge på navn eller Cpr nummer. 1 CPR: ( i ) Adresse: ( i ) Postnummer: ( i ) Navn: ( i ) Postnummer: ( i ) 2 Bevillingsvaregruppe: ( i ) Status: ( i ) Navn: Titel: Adresse: Postnummer: By: Henning K Andersen Pensionist Gade gadesen Gåserød Navn: ( i ) Henning K Andersen Titel: ( i ) Pensionist Adresse: ( i ) Gade gadesen 12 Postnummer: ( i ) 2222 By: Gåserød Dette er en info boks. den aktivers ved Dette at flytte er en musen info boks. over ( i den ) aktivers ved at flytte musen over ( i ) Kommune: Telefon nummer: Andeby Kommune: Andeby Telefon nummer: ( i ) Nulstil Download som Excel fil Adresse Stednavn Postnummer Sidste levering Bevillingsdato Adresse Stednavn Postnummer Sidste levering Bevillingsdato Spærring Cpr-nummer Navn Navn Adresse Stednavn Postnummer Jeppe Jeppesen Strandvej Jeppe Jeppesen Strandvej Bestil vare til patient Rediger Jeppe Jeppesen Strandvej Jeppesen 17 Strandvej Jeppe Jeppesen Strandvej Søg Navn Bruger-id Administrator Jeppe Jeppesen Strandvej Jeppesen 17 Strandvej Jeppe Jeppesen 20RD2910 navn@mail.dk Ja Helle Bokmann 52RM1223 navn@mail.dk Jeppe Jeppesen Strandvej Jeppesen 17 5 Strandvej Jeppe Jeppesen 20RD2910 navn@mail.dk Ja Jeppe Jeppesen Strandvej Jeppe Jeppesen Strandvej Jeppe Jeppesen 3333 Strandvej Helle Bokmann 52RM1223 navn@mail.dk Jeppe Jeppesen 20RD2910 navn@mail.dk Jeppe Jeppesen Strandvej Jeppe Jeppesen 3333 Strandvej Mail adresse: Flexlevering navn@mail.dk Hjemme efter kl Helle Bokmann 52RM1223 navn@mail.dk Mail adresse: ( i ) Flexlevering ( i ) navn@mail.dk Jeppe Jeppesen 20RD2910 navn@mail.dk Ja Hjemme efter kl Gem

6 Begrænset kompatibilitet med IE7 browsere Kundens kritiske krav er IE7, så jeg må ind og udvikle løsningsmodeller(fallbacks). Jeg bruger javascript (Jquery) til at løse css udfordringer i forskellige situationer, som f.eks: (1 MODENIZR BROWSER DETECTION (2) JQUERY EVEN OG ODD (1) Modenizr Jeg bruger biblioteket Modernisr, der analysere brugerens browser oplysninger, og i vores tilfælde tildeler HTML IE7 og IE8 klasser. Det betyder at vi kan definere en fallback css der kun rammer hvis brugeren er en IE7 browser. (2) Even og Odd Der findes meget lange kundelister, og for at kunne manipulere rækkerne med css skriver jeg en global jquery kode som er målrettet hele systemets tables. (3) INTERNET EXPLORE, GRADIENT (SCRIPT) FILTER (3) Gradienter I IE7 bruger jeg filter (MS script) til browser genereret gradient. 35

7 Workflow Mit workflow i sammarbejde med resten af Adapt teamet Løbende test og kvalitetskontrol Normalt udvikler jeg i Chrome som understøtter de nyeste teknologier og har en god udvikler addon. Workshop med kunden Godkendelse af kunden Jeg tester løbende, og sammen med front-end afdelingen i Adapt kvalitets tester vi i firefox og safari samt IE Research IA implementeres i Wireframes Analyse af design Test i Internet Explore fra en Mac foregår via Virtual machine. Det er et software som virtuelt køre en version af windows, hvor vi derigennem kan teste i forskellige IE browsere. Opstartsmøde Implementering af funktionaliteter Implementering af design Redsign til IE7 Godkendelse af intern udvikler version Intern test Godkendelse af design Upload til test miljø Overlevering til kundens E-Commerce miljø Godkendelse af kunden 36

8 Setup Data og udviklingsflow i forhold til Mediq Bevillingssystem Mediq Danmark Via et script modtager vi klientlister fra Mediq danmark (i realtime), så godkendelser kan ske inden for få sek. System/netværk Nextweb CMS GIT (version styring) Mediqdanmark.dk E-commers løsning Anvendte værktøjer igennem Mediq projektet Balsamiq Mockup Illustrator Photoshop 960 grid Coda2 Jquery compass, SASS (CSS Authoring Framework.) Information kilder Caniuse.com msdn.microsoft.com w3schools.com Udviklings miljø (Fælles) GIT Version styring Test Bevillings system Live Lokalt udvikler miljø Front & Back-end Lokalt udvikler miljø Front & Back-end Lokalt udvikler miljø Front & Back-end 37

9 Compass og SASS/CSS Compass hjælper med at gøre workflowet hurtigere og en del sjovere. Man arbejder f.eks med indlejret css fremfor det traditionelle css workflow. Der er mulighed for at arbejde med variabler, og mixins som betyder global kontrol og er med til at skabe en effektiv arbejdsgang. Compass Variabler Variabler i SASS Exempel på et simpelt mixin Mixin i brug Exempel på en complex mediaquery (responsive) mixin Mixin i brug 38

10 Eksempel på indlejret css Normal CSS body { body section { body section header { body section header nav { body section header nav ul { body section header nav ul li { body section header nav ul li a { SASS body { section { header { nav { ul { li { a { Med sass slipper man bl.a. for at gentage forlængelser MERE INFORMATION: 39