Workflow.

Transkript

1

2 arbejdsroces Modtage Brief å ogaven, fra rojektleder danne mig et overblik over eksisterende site, herunder: obyggelse, fejl, mangler med videre danne mig et overblik over alt jeg skulle lave til sitet Rydde kraftigt o i filer & forbedre site-struktur Lave nyt site med de nødvendige filer og undermaer indeholdende: html, javascrits, cascading stylesheets & fonte lave ny grafik til sitet, i hotosho og illustrator + andet materiale bla. df'er til at rinte ud hjemefra osætte websitet i dreamweaver med den nye grafik og den nye tekst Lave ændringer i html-kode, css og javascrit Lave forbedringer i forhold til seo og socialemedier egenkorrektur med rojektleder 1. korrektur ved dansk suermarked smårettelser 2. korrektur ved dansk suermarked + godkendelse ved TCC i holland launch af sitet 2

3 Redegørelse OPGAVEN Ogaven var at lave det nye website til Grundig Guldmærke-kamagnen som kører i føte, Bilka og Salling. Sitet skulle indeholde fire sider: inde, rodukter, konkurrencer og bagageserie. På alle sider skal der være links til hverts suermarkeds website + facebook site. Inde: Skal fortælle om den nyeste roduktserie, man skal kunne rinte sit eget Guldmærkehæfte og samlelade, fortælle og vise hvordan man samler og bruger Guldmærkerne. Produkter: Man skal kunne se hvilke rodukter man har mulighed for at samle guldmærker til, samt hvor mange mærker der skal til, hvad besarelsen bliver og mere uddybende info om hvert rodukt + der skal være en facebook like-button til hvert rodukt. Konkurrencer: Fortælle om de konkurrencer som kører, man skal kunne se konkurrencebetingelser, indeholde links til facebook konkurrencen vise vinderne å facebook konkurrencen, give mulighed for at tilmelde sig nyhedsbreve. Bagageserie: Vise vindere af den konkurrence som kører med indlevering af fyldte samlehæfter fra Wenger-kamagnen. Målgrue Ligger mest i det rosa segment Indkøbsansvarlige år Sarsommelige Traditionelle Faglærte Ser Aftenshowet og lignende rogrammer Hyggemennesker Program valg Jeg brugte Photosho til at fritlægge og billedbehandle de fotos jeg har å websitet. Dreamweaver brugte jeg til at osætte websitet. Fonte OfficinaBold og OfficinaSansBold er de to fonte som er anvendt til de fleste font tags, det er jo ikke nogen man kan vælge automatisk, så jeg har downloaded fontface kits til dem, lagt selve font filerne ind i en font mae å roden af mit site og i mit CSS henvist til dem ved hjæl af kode til hver browser, å denne måde får jeg de ønskede fonte til at blive vist å sitet. : font-family: Helvetica, font-size: 16, line-height: 1.4 em, margin: 0, adding: 0. h1: font-family: OfficinaBold, font-size: 70, line-height: 1em, fontweight:normal, adding-to: 15, margin-to: 0, margin-bottom: 0, tetalign:center. h2: font-family: OfficinaSansBold', font-size: 23, font-weight:normal, margin-to: 0, margin-bottom: 20, tet-align:center. : font-family: Helvetica, font-weight: normal, margin-bottom: 7, marginto: 7, font-weight: bold. h4: font-family: OfficinaSansBold, font-size: 23, font-weight: normal, margin-to: 0, margin-bottom: 0. h5: font-family: OfficinaSansBold, font-size: 29, line-height: 1em, fontweight: normal, margin-to: 0, margin-bottom: 6. h6: font-family: OfficinaSansBold, font-size: 21, line-height: 1em, fontweight: normal, margin-to: 0, margin-bottom: 10. browserkomatibilitet Google chrome - ok Safari - ok Firefo - ok Oera - ok. Internet Elorer - ok. kvalitetsvurdering Sitet er blevet som det skulle være, jeg kunne måske godt have tænkt mig at have lavet nogen af tingene å en anden måde, da jeg jo er blevet klogere efterhånden som jeg arbejdede mig igennem sitet. Desuden har jeg jo bygget videre å nogen ting, der som udgangsunkt ikke har været lavet å en måde som jeg synes var hensigtsmæssig, men jeg har lært enormt meget af det og det har været en rigtig god rocess. 3

4 k s i f a r G orkflow W inde.html 1 4

5 k s i f a r G orkflow W l m t h. s t c u d o r 2 5

6 k s i f a r G orkflow l m t h. n o i t i t come & l m t h. n o i t a insir W 3 4 6

7 k s i f a r G orkflow inde W Forside a a b 3 b a B C På inde siden kan man klikke å nogle tekstlinks hvorefter der åbner sig PDF'er i nye vinduer. 2. Jeg har gemt PDF'er af de samlehæfter, der er lavet til tryk, som kan afhentes føte, Bilka eller Salling, i en mae til formålet i site maen. Link'ene åbner i nye vinduer, da jeg har sat "target" til "blank". 3. Dette billede har jeg osat i Photosho, og lagt ind som baggrundsbillede i en div. 4. Det er også tilfældet med grafikken i venstre side her. Hvert tekst felt er -tags med forskellige id'er. 5. a: De blå bullets ligger som bagrunds billede i en class å lagt ind som id å -tags. b: Denne grafik er lavet i hotosho og lagt ind som et billede. 6. a & b: Alle disse er links til hver suermarkedskædes website, og åbner i et nyt vindue. c: Links til hver suermarkedskædes facebooksite. d: Bundfrisen har jeg lavet i Photosho. d 7

8 rodukter Siden rodukter a 6 b 1. På siden med rodukterne skal man kunne gå ind å hvert rodukt og læse mere information om roduktet og se et større billede af det. 2. Før var hver roduktbjælke et stort billede, hvor teksten var inkluderet i blilledet, dvs. ingen søgeord å det. 3. Nu har jeg indelt roduktbjælkerne i områder til hvert element, og skrevet teksten direkte ind i mit HTML-dokument. Jeg har lavet hover-effekt å både knaen og billedet, som vist, med en class. Ved klik åbner der sig et større billede, med mere information om roduktet i en ou-boks. 4. Her ses den ou-boks, der ligger sig ovenå siden, den har en baggrund som er sort med 75% oacitet, så man kan fornemme at man stadig er å sitet. Pou-boksen kan lukkes ved klik å det lille billede med krydset i hjørnet. 5. Jeg har tilføjet en facebook-like-button til hver roduktbjælke, å den måde kan man nemt srede budskabet om Guldmærkerne ud til flere. Når jeg f.eks. trykker like, dukker den o i mit news-feed å facebook, og alle mine venner vil nu kunne se at jeg synes godt om denne kamagne, og hvis de benytter sig af det link som dukker o i feedet, kommer de direkte ind å roduktsiden. Det var Dansk Suermarkeds ønske, at der skulle ligges en ind for hvert rodukt, så de kunne se hvor mange likes der kommer under hvert rodukt. 6. Jeg har ved hjæl af Oen Grah META tags, bestemt hvilket billede og link tekst der bliver vist i newsfeedet å facebook, når man 8har været inde og like. koden laceres i <head> A: <meta name="og:image" content="url/sti til billedet der skal vises"/> B: <meta name="og:title" content="den tekst der skal stå som link"/>

9 k s i f a r G orkflow konkurrence W siden konkurrencer 1. På denne side kan man tilmelde sig nyhedsbreve til en eller flere af følgende: føte, Bilka eller Salling. Man kan også deltage i konkurrencer via facebook. 2. Konkurrencebetingelserne oer u i et nyt vindue, der er lavet som et HTML dokument. Når man klikker å linket er det skrevet ind i mit main javascrit at den skal åbne conditions-dokumentet i et nyt skalérbart vindue. Har her vist kode fra javascrit, HTML og hvor mit HTLM dokument ligger: Jeg har lavet knaer med hover effekt som linker til det facebook-site der hører til den enkelte kna. 4. Når man klikker kommer man ind å det facebook site som hører til knaen og kan her deltage via konkurrence a'en. 5. Når man klikker å a'en skal man like facebook sitet (her føte's faceook site). Og får dermed adgang til at deltage i konkurrencen. 6. Den mailformular, der ligger i sitet, er en som er købt hos Juhlsen Camaigns, derfor har jeg lavet en selv ved hjæl af HTML og CSS, for at vise hvordan jeg ville have gjort. (Se næste side). 9

10 detaljer mailformular 1. Den mailformular, der ligger i sitet, er en som er købt hos Juhlsen Camaigns, derfor har jeg lavet en selv ved hjæl af HTML og CSS, for at vise hvordan jeg ville have gjort. 2. Jeg har brugt et form-tag til at lave formularen med, inden i den har jeg lavet et label-tag og inut tye= tet. Label er der hvor man skiver hvad der skal stå over boksene, inut er boksene. Jeg har lavet hover-effect å boksene. 3. Når man stiller sig i boksen dannes der en blå ramme omkring den. 4. Her har jeg lavet checkboksene med inut tye=checkbo. 5. Selve tilmeldingsknaen har jeg lavet med et button-tag hvor jeg har laget en class å stylet class'en med et guldgradient, rundehjørner og font i CSS'en. Jeg har også lavet hover-effekt, det har jeg gjort med en hover class å knaen, hor jeg har lavet en oacity å: 0.6. Jeg har lavet 5 hiddenfields: inut name="reciient" inut name="fromaddress" inut name="subject" inut name="redirect" inut name="orderby", (det er dem som får det til at virke). 6. Når man sender får man en tak tilbagemelding, der ligger som et enkelt html dokument i sitet

11 flowchart inde rodukter konkurrencer bagageserie PDF SAMLEPLADE PDF SAMLEHÆFTE KØKKENVÆGT 7 X FACEBOOK LIKE-BUTTONS DELTAG FØTEX FØTEX.DK FØTEX.DK FØTEX FØTEX FØTEX.DK HÅNDMIXER FØTEX.DK DELTAG BILKA BILKA.DK BILKA.DK BILKA BILKA BILKA.DK STAVBLENDER- SÆT BILKA.DK DELTAG SALLING SALLING.DK SALLING.DK SALLING TERMS SALLING SALLING.DK ELKANDE SALLING.DK TILMELD NYHEDSBREV FØTEX TERMS TERMS KAFFE- MASKINE FØTEX KONKURREN- CEBETINGELSER BILKA BLENDER BILKA TERMS SALLING DAMPSTATION TERMS SALLING 11

12 = margin eller adding = margin eller adding = linjeskift skelet inde h1 h fortsættes næste side 12

13 = margin eller adding = margin eller adding = linjeskift skelet inde li fortsat fra forrige side 13

14 = margin eller adding = margin eller adding = linjeskift skelet rodukter h1 h h h h h h h fortsættes næste side 14

15 = margin eller adding = margin eller adding = linjeskift skelet rodukter h h h h fortsat fra forrige side 15

16 = margin eller adding = margin eller adding = linjeskift skelet konkurrence h1 h

17 = margin eller adding = margin eller adding = linjeskift skelet bagageserie h1 h

18 1 Storyboard inde Overskrift. 2. Grundig logo. 3. Navigations links der skifter mellem alm. tilstand, hover og active. 4. Tekst der forklarer om kamagnen og om firmaet Grundig. 5. Link til PDF af samleladen. 6. Link til PDF af hele Guldmærkehæftet. 7. Samlet billede af de forskellige Grundig rodukter, man kan samleguldmærker til. 8. Billede som trin for trin viser hvordan man får og anvender Guldmærkerne. 9. Tilhørende forklarende tekst. 10. Information med datoer. 11. Illustration som viser hvor mange Guldmærker man får r. antal kroner man handler for. 12. Vejledning, vilkår og betingelser for deltagelse i fortsættes næste side 18

19 Storyboard inde fortsat fra forrige side kamagnen: 13. Kundesuort. 14. Bilka.dk logo, som linker til Bilkas website. 15. Salling.dk logo, som linker til Sallings website. 16. Føte logo, som linker til føte' website. 17. Bilka logo, som linker til Bilkas website. 18. Salling logo, som linker til Sallings website. 19. Facebook logo med tilhørende tekst-links, der linker til føte' facebook site. 20. Facebook logo med tilhørende tekst-links, der linker til Bilkas facebook site. 21. Facebook logo med tilhørende tekst-links, der linker til Sallings facebook site. 22. Bundfrise med stemningsbilleder af Grundigrodukter. 23. Coyright + tekst link til generelle vilkår for deltagelse i konkurrencer hos Dansk Suermarked

20 Storyboard rodukter Overskrift. 2. Grundig logo. 3. Navigations links der skifter mellem alm. tilstand, hover og active. 4. Tekst der forklarer om firmaet Grundig. 5. Garanti. 6. Garanti slat. 7. Billede af køkkenvægt, der linker til o u med større billede af roduktet og mere information. 8. Tekst der forklarer om besarelse. 9. Mere info kna, der linker til o u med større billede af roduktet og mere information. 10. Guldmærkat med ris å roduktet. 11. Facebook like-button med count. 12. Billede af håndmier, der linker til o u med større billede af roduktet og mere information. 13. Billede af Stavblendersæt, der linker til o u med større billede af roduktet og mere information. 14. Billede af elkande, der linker til o u med større billede af roduktet og mere information. 15. Billede af kaffemaskine med termokande, der linker til o u med større billede af roduktet og mere information. 16. Billede af blender, der linker til o u med større billede af roduktet og mere information. 17. Billede af damstation der linker til o u med større billede af roduktet og mere information resten er unkt 20

21 Storyboard rodukter fortsat fra forrige side Bilka.dk logo, som linker til Bilkas website. 19. Salling.dk logo, som linker til Sallings website. 20. Føte logo, som linker til føte' website. 21. Bilka logo, som linker til Bilkas website. 22. Salling logo, som linker til Sallings website. 23. Facebook logo med tilhørende tekst-links, der linker til føte' facebook site. 24. Facebook logo med tilhørende tekst-links, der linker til Bilkas facebook site. 25. Facebook logo med tilhørende tekst-links, der linker til Sallings facebook site.. Bundfrise med stemningsbilleder af Grundigrodukter. 27. Coyright + tekst link til generelle vilkår for deltagelse i konkurrencer hos Dansk Suermarked

22 Storyboard konkurrencer Overskrift. 2. Grundig logo. 3. Navigations links der skifter mellem alm. tilstand, hover og active. 4. Tekst der forklarer om facebook konkurrencen. 5. Tekst link til konkurrencebetingelser. 6. Link til føte' facebook site, hvor man kan deltage i konkurrence. 7. Link til Bilkas facebook site, hvor man kan deltage i konkurrence. 8. Link til Sallings facebook site, hvor man kan deltage i konkurrence. 9. Tekst der forklarer om samlehæftekonkurrence. 10. Vindere af 14-dags facebook konkurrence. 11. Mailformular med tilmelding til nyhedsbrev. 12. Tekst der forklarer om tilmelding til nyhedsbrev. 13. Bilka.dk logo, som linker til Bilkas website. 14. Salling.dk logo, som linker til Sallings website. 15. Føte logo, som linker til føte' website. 16. Bilka logo, som linker til Bilkas website. 17. Salling logo, som linker til Sallings website. 18. Facebook logo med tilhørende tekst-links, der linker til føte' facebook site. 19. Facebook logo med tilhørende tekst-links, der linker til Bilkas facebook site. 20. Facebook logo med tilhørende tekst-links, der linker til Sallings facebook site. 21. Bundfrise med stemningsbilleder af Grundigrodukter. 22. Coyright + tekst link til generelle vilkår for deltagelse i konkurrencer hos Dansk Suermarked

23 Storyboard bagageserie Overskrift. 2. Grundig logo. 3. Navigations links der skifter mellem alm. tilstand, hover og active. 4. Tekst der forklarer om tidligere kamagner. 5. Vindere af samlemærkekonkurrencen. 6. Bilka.dk logo, som linker til Bilkas website. 7. Salling.dk logo, som linker til Sallings website. 8. Føte logo, som linker til føte' website. 9. Bilka logo, som linker til Bilkas website. 10. Salling logo, som linker til Sallings website. 11. Facebook logo med tilhørende tekst-links, der linker til føte' facebook site. 12. Facebook logo med tilhørende tekst-links, der linker til Bilkas facebook site. 13. Facebook logo med tilhørende tekst-links, der linker til Sallings facebook site. 14. Bundfrise med stemningsbilleder af Grundigrodukter. 15. Coyright + tekst link til generelle vilkår for deltagelse i konkurrencer hos Dansk Suermarked