Mästare 2008 finaluppgift i grenen produktion av webbsidor

Mästare 2008 finaluppgift i grenen produktion av webbsidor Enligt WWF överskrider människans ekologiska fotspår i nuläget det jordklotet tål med ca 30 procent. Fotspåret mäter den konsumtion av naturresurser som människan förbrukar i förhållande till naturens förmåga att nyskapa dem. Med fotspåret mäter man också koldioxidutsläppen i förhållande till naturens förmåga att binda kol. Enligt WWF är finländarnas ekologiska fotspår det tredje största i världen och energi används i Finland på ett ineffektivt sätt. I motsats till andra EU-länder så växer energiförbrukningen fortsättningsvis i Finland (www.yle.fi/uutiset 6.10.2007). I finaluppgiften i grenen produktion av webbsidor är syftet att planera och förverkliga en webbplats mistakenkapuristaa.fi, som skall vägleda unga mot ett ekologiskt konsumtionssätt. Uppgiften är uppdelad i åtta delar, vars sammanlagda totalpoäng är 100. Antalet moduler (huvuddelar) är sex. A1 Kartläggning, definition och planering (grupparbete, 4 personer) / 8 poäng SYKLI:s representant Kati Lundgren ger i rollen som uppdragsgivare finalisterna i uppgift att göra webbplatsen mistakenkapuristaa.fi. Lyssna på kundens uppdragsgivning så noggrant som möjligt och förverkliga utgående från den följande uppgifter. Definiera så exakt som möjligt, med hjälp av Word och på en A4, kunden (den som arbetet utförs åt), webbplatsens målgrupp och kärnbudskap(ett eller flera) Skapa en påhittad, så trovärdig representant för webbplatsens målgrupp som möjligt och profilera honom med några meningar. Hitta på en målsättning som har med hållbar utveckling att göra åt den figur du hittat på och som han skulle vilja uppnå, och som kan förverkligas med hjälp av en webbplats. Framför med hjälp av Word, och på en A4, figurens målsättning och beskriv användningsfallet steg för steg för att förverkliga den. Skapa också ett alternativt användningsfall åt samma figur. Skapa utgående från de påhittade användningsfallen en lista på de tjänster som eventuellt behövs på webbplatsen och det informationsinnehåll som förverkligandet av tjänsterna kräver (Word) Skapa utgående från föregående punkt en pappersprototyp för användargränssnittet och med vars hjälp den påhittade figuren så tillfredställande som möjligt kunde förverkliga båda de påhittade användningsfallen. Noggrannare instruktioner angående pappersprototypen ges på tävlingsplatsen. A2 Kartläggning, definition och planering (individuellt arbete)/ 11 poäng Fortsätt den påbörjade kartläggningen och definieringen från föregående uppgift. Tänk ut vilka andra tjänster, som webbplatsen kunde erbjuda åt sina målanvändare. Uppgör sedan schemat för uppbyggnaden av webbplatsen (med penna och papper eller med något program). I detta skede kan din planerade webbplats vara mer omfattande än vad som är möjligt att förverkliga under tävlingsdagarna. Uppgör en layoutplanering för webbplatsens startsida, ur vilken navigeringen, innehållet och logons placering och utseendet klart framgår. Presentera också i din

layoutplanering de mest centrala funktionerna för startsidan. Försök att göra din layout så lockande som möjligt för målanvändarna. o Sätt för genomförande: papper/bildbehandlingsprogram Skriv en offert riktad åt kunden angående webbplatsprojektet mistakenkapuristaa.fi i vilken du definierat/specifierat projektets tidtabell och gjort en specificerad kostnadsuppskattning. Uppgör offerten med Word och enligt standarduppställningarna för ett dokument och fäst uppmärksamhet på att det kommunikativt blir klart och flytande. Du träffar kunden i ett kundmöte. Försök att sälja din idé till kunden, så att det blir du som får förverkliga webbplatsen mistakenkapuristaa.fi. Fäst särskild uppmärksamhet på kommunikations-, marknadsförings- och försäljningsfärdigheter. Gör behövliga korrigeringar i din layoutplanering och i schemat för uppbyggnaden utgående från den feedback du fått av kunden och domarna. B Statisk XHTML och CSS-sida /25 poäng Förverkliga med hjälp av XHTML och CSS webbplatsen mistakenkapuristaa.fi, utgående från din efter feedbacken korrigerade layoutplanering och schema för uppbyggnad. Webbplatsen bör ha en Startsida, Väx upp till hållbarhet-sida, Ekokonsumtionstips-sida, Ekoinsiktspel-sida och Videon-sida. Lägg till texten som finns i filen C:\materiaali\tekstitiedostot\startsida.doc på startsidan. Använd åtminstone två av bilderna i mappen C:\materiaali\kuvat\ på startsidan. På startsidan bör det finnas ett avgränsat område, namngivet med rubriken kontaktuppgifter, och som innehåller en e-postlänk till adressen kontakt@mistakenkapuristaa.fi (rubriken är innanför området). Lägg till texten i filen C:\materiaali\tiedostot\vaxupptillhallbarhet.doc till sidan Väx upp till hållbarhet. Kopiera pdf-dokumenten från mappen C:\materiaali\pdf\ till en mapp pdf, som du skapar i din webbplatsmapp. Skapa länkar på sidan Väx upp till hållbarhet med var hjälp användarna kan öppna pdf-dokumenten. Resten av sidorna får sitt innehåll i kommande uppgifter, men lägg i detta skede till texten Hit kommer sidan sidans_namn innehåll i dem. Försök att göra webbplatsen så användbar och lockande som möjlig för målgruppen. Gör webbplatsen så användbar och tillgänglig som möjlig för eventuella synskadade användare. Gör inte webbplatsens allmänutseende färglös och tråkig, utan försök att göra helheten visuellt intressant för målgruppen, originell och vid behov också konstnärlig. Fäst särskild uppmärksamhet på användningen av färger, grafiska layoutelement, utformning (web design!), komposition, typografiska lösningar samt användningen av kontrast. Webbplatsen bör fungera med resolutionen 1024x768 och med webbläsarna IE6, IE7, Firefox 1.5 och 2.0 i operativsystemet Windows XP. Koda sidan i huvudsak med hjälp av XHTML-kod. Använd CSS för definition av fonter och färger och vid utformning av sidans utseende/layout. Ifall du inte behärskar placering av webbplatsens element med hjälp av CSS, så kan du använda dig av sk table- eller annan teknik (iframe, frame jne.) Detta medför dock att du får mindre totalpoäng i den här deluppgiften. Följ webbkonventionen när det gäller placeringen av navigeringen och logon; det får inte vara oklart för användaren vilken webbplats och sida han befinner sig på. En aktiv länk bör utseendemässigt avvika från de andra länkarna. Navigeringen på webbplatsen bör vara smidig och då man klicka på logon kommer man tillbaka till startsidan. Du kan använda Flash, JavaScript eller andra visuella och till interaktivitet hörande tekniker på webbplatsen. Ditt Flash- och JavaScriptkunnande bedöms dock i

uppgifter längre fram i tävlingen, så i detta skede lönar det sig att i första hand koncentrera sig på webbplatsens användbarhet och funktionalitet samt dess intresseväckande och visuella allmänintryck. C Dynamisk del: Ekokonsumtionstips innehållshanteringssystem /22 poäng Deluppgiften sedd från perspektivet hållbar utveckling Minskandet av energiförbrukningen kräver nya innovativa sätt att agera. Förverkliga på sidan Ekokonsumtionstips följande beskrivna system, med hjälp av vilken användarna kan presentera sina idéer angående hållbar utveckling åt andra användare av webbplatsen. Användarna av webbplatsen mistakenkapuristaa.fi kan med hjälp av innehållshanteringssystemet på sidan ekokonsumtionstips skicka in sina förslag och idéer, som alla användare kan ta del av, till webbplatsen. På webbplatsen finns ett formulär dit användarna skriver sitt för- och efternamn, sin e-postadress, sin signatur och sitt ekokonsumtionstips. Alla fält i formuläret är obligatoriska. Om man försöker skicka iväg ett ofullständigt ifyllt formulär, krävs att alla fält först fylls i av användaren. De uppgifter, som skickas in via formuläret lagras i en databas eller i en annan fil. De lagrade uppgifterna skrivs radvis ut på sidan ekokonsumtionstips (samma sida) i kronologisk ordning, så att de senast inskickade kommer högst upp. På sidan syns de 15 senast inskickade ekokonsumtionstipsen. På varje rad skrivs den inskickandes signatur, ekokonsumtionstips och e-postadress ut. E-postadressen visas som en länk. Från sidan ekokonsumtionstips finns det tillgång till en administrativ del, där man kan ta bort vilken som helst av raderna eller alla inskickade rader från sidan ekokonsumtionstips. Gör en skild sida för administrationsdelen och döp den till admin.php. Till administrationsdelen kommer man endast med inloggningsattributen: användare:kulutus: lösenord: kuriin. Om någon försöker att komma in på administrationsdelen, utan att gå via inloggningsformuläret, t ex genom att i webbläsarens adressfält skriva admin.php, så styrs användaren tillbaka till sidan ekokonsumtionstips. D Interaktiv del: Från energislösande till ekoinsikt animation /16 poäng Deluppgiften sedd från perspektivet hållbar utveckling Apparatur som anskaffats till hemmen och som ofta är påslagna dag och natt förbrukar mycket energi och bidrar till att klimatförändringen försnabbas. I den här uppgiften skall du skapa en animation, som vägleder unga till ett energisparande sätt att använda apparatur i hemmet. Infoga den färdiga animation som en del av sidan ekoinsiktspel. Startvy I animationens syns ett hus utifrån på kvällen, sedd framifrån. Huset har fyra stora fönster, där följande syns: I ett fönster ser man att TVn har lämnat på, i ett annat rum har man glömt belysningen på, genom fönstret till ett tredje rum ser man lådan på en dators hårdskiva, vars strömlampa lyser blinkande och i det fjärde rummet (belysningen på) ser man en figur som står vid fönstret. På husets gårdsplan finns det gårdsbelysning, som är

på. På gårdsplanen finns det också en bil. Till höger om huset syns en busshållplats. Från huset utgår en pil, som pekar på bilen. Animera TVn som är påslagen och strömlampan på datorns hårdskiva. Interaktiva funktioner I animationen finns områden, som fungerar som länkar. Från länkarna kan följande funktioner startas genom att föra muspekaren över dem och genom att klicka på dem: Länkområde Muspekaren på området Klickning Fönstret, där en TV syns Texten Stäng av TVn! blir TVn stängs av synligt bredvid fönstret Fönstret, där belysningen är Texten Släck belysningen! Belysningen släcks på blir synligt bredvid fönstret Fönstret, där hårdskivans strömlampa på datorn Texten Stäng av datorn och dess kringutrustning! blir Lampan på datorns hårdskiva stängs av blinkar synligt bredvid fönstret Gårdsbelysningen Texten Släck gårdsbelysningen till natten! Gårdsbelysningen släcks av Bilen blir synligt bredvid fönstret Texten Lämna bilen hemma på morgonen och åk med buss! blir synligt bredvid bilen Pilen som utgår från huset börjar peka på busshållplatsen Resultatruta I animationens nedre kant finns en ruta, dit poäng uppdateras enligt följande. Från början visas siffran noll. För varje länk, som man klickat på får man en poäng. Poängen läggs till efter varje klickning. Då man har fått poängantalet fem i rutan, försvinner figuren i fönstret, belysningen stängs av (i rummet där figuren stod) och bredvid resultatrutan visas texten Gratulerar! Bra ekoinsikt!. Animationen kan startas från början genom att man klickar på knappen Börja om. E Avtryckets jättar planering, inspelning och överföring av video till datorn (paruppgift) /2 poäng Planera (synopsis och bildmanuskript) och filma parvis en 2 5 minuter lång video Avtryckets jättar. I videon Avtryckets jättar, där det på ett audiovisuellt sätt berättas om vilka saker som orsakar och ökar energi och naturresursernas förbrukning i vår omgivning (jfr med ekologiskt fotavtryck). Som plats för att filma kan du använda Otahallen och hallens närmiljö. För över videon ni filmade från videokameran till bägges datorer. Då videon överförts till bägge tävlandes datorer, övergår ni till att utföra den individuella uppgiften E2. E2 Avtryckets jättar Editering av videon och infogande på sidan /10 poäng Editera med hjälp av ett videoediteringsprogram (i de tävlandes datorer finns programmen Premiere CS3 och Windows Movie Maker installerade) det material som ni filmade till en 2

- 5 minuter lång film enligt instruktionerna. Sträva till att använda mångsidiga och träffande audiovisuella berättarknep vid videoediteringen (klippning, ljudvärld, övergångar och effekter). Infoga filmen, inklusive videospelare, du editerat som en del av sidan Videon. Det bör vara möjligt att stoppa, starta och spola tillbaka filmen till början med hjälp av kontrollerna på videospelaren. För videospelare, som du kodat själv ges extra poäng. F Dokumentation /6 poäng Uppgör till kunden en saklig och kommunikativt klar dokumentation, som innehåller följande: instruktioner för att ta webbplatsen i bruk o de egenskaper som krävs av webbplatsutrymmet o instruktioner, som berättar hur webbplatsen skall överflyttas till servern uppdateringsinstruktioner för webbplatsen tacka kunden för samarbetet och berätta att du också i fortsättningen är intresserad av att delta i kundens webbsideprojekt dina kontaktuppgifter Gör en mapp instruktioner på grenen Produktion av webbsidors server och spara den fil du gjort dit med namnet instruktioner. Tidtabellen för grenen produktion av webbsidor Onsdag 16.4.2008 kl 13:00-14:30 o introduktion av tävlingen, den apparatur och programvara som används i tävlingarna åt de tävlande Torsdag 17.4.2008 9:00-10:00 o presentation av funktionärerna åt de tävlande o handledning av de tävlande i sådant som hör till tävlingen 10:00-13:00 o kartläggning, definition och planering av webbplatsen 13:00-13:30 o matpaus 13:00-18:00 o förverkligande av den statiska webbplatsen Fredag 18.4.2008 9:00-9:15 o instruktioner inför tävlingsdagen 9:15-11:00 o förverkligande av den statiska webbplatsen fortsätter o den statiska webbplatsen bör vara sparad på grenens server senast kl 11:00 11:00-14:00 o förverkligande av den dynamiska delen

o den dynamiska delen bör vara sparad på grenens server senast kl 14:00 14:00-14:30 o matpaus 14:30-17:30 o förverkligande av den interaktiva animationen o den interaktiva animationen bör vara sparad på grenens server senast kl 17:30 Lördag 19.4.2008 9:00-11:30 o förverkligande av videon och infogande av den på webbplatsen 11:30-12:30 o dokumentation 12:30 o presentation av de tävlandes webbplatser samt uppbyggande och motiverande feedback 13:00 o handledning angående publiceringen av resultatet 14:30 o delgivning av resultatet o protester senast 30 min efter att resultatet delgivits 16:30-18:00 o avslutningstillfälle och prisutdelning Tekniker, apparatur och program som finns till förfogande i finalen De tävlande har tillgång till en arbetsstation utrustad med Windows XP, i vilken åtminstone följande program och tekniker installerats: Adobe Acrobat 8 Professional Adobe Dreamweaver CS3 Adobe Flash CS3 Professional Adobe Flash CS3 Video Encoder Adobe Illustrator CS3 Adobe Photoshop CS3 Adobe Premiere Pro CS3 Microsoft Office 2003 Windows Movie Maker 2.x WS_FTP LE eller något annat FTP-program XAMPP-paket, som innehåller följande o MySql o PHPMyAdmin o PHP 5.x o Apache 2.x

Webbsidorna publiceras på en server, vars egenskaper preciseras i samband med tävlingarna. De tävlande kan utöver ovannämnda program använda program, som de före tävlingarna installerat på sin tävlingsarbetsstation, och till vilka de eller den läroanstalt som de representerar har licens eller vilka är shareware-/freeware-program. Andra tillbehör som används i tävlingen De tävlande har under tävlingen tillgång också till hörlurar, digitalkameror, digitalvideokameror, ritbord och annan utrustning som uppgifterna möjligen kräver. Om den tävlande har funktionella begränsningar, kan han/hon enligt särskild överenskommelse få använda egna hjälpmedel som anknyter till datainmatning såsom specialtangentbord eller mus.