- Kursmaterial
- Planering
- Arbete
- Kunskapsdokument
- Om Kursolle
P1. Projekt02 - Lilla projektet
Här kommer information att presenteras om det lilla projektet som skall täcka alla delar som krävs för att nå betyget E/D i projektform i kursen.
P1.1 Introduktion
Paolo tackar för ditt arbete med webbsidan som du har skapat till honom tidigare, utan den hade han inte haft möjlighet att få så många kunder som han haft sedan sidan publicerades. Eftersom han under kursens gång har blivit duktigare så behöver också hans webbsida vässas lite för att kunna visa på hans nya kunskaper. Därför kommer du få i uppdrag att vidareutveckla hans/din sida utifrån Paolos krav.
P1.2 Uppgift
Det du kommer få av Paolo är en tilläggsbeställning vilket innebär att utifrån din tidigare version bygga vidare/om till en ny sida som skall nå till hans nya krav.
P1.2.1 Projektplan
Paolo har förstått att det är viktigt att sätta upp en projektplan för det har flera av hans kunder krävt. Han har lite dålig koll på hur en bra projektplan skall se ut så det vill han ha din hjälp med. Han påminner att det finns ett kunskapsdokument - projektstöd som skall kunna hjälpa dig inom detta området.
I projektplanen så vill Paolo ha med följande delar;
- Syfte och presentation av uppgiften
- Målgruppen är små företag och föreningar som behöver hjälp med enklare webbsidor.
- Skiss på nya sidan, mest intresserad är han av en
wire frame
men också gärna en mockup så att han får koll på hur du har tänkt bygga upp sidan med färger. - En presentation av vilka sidor som ingår på din webbsida.
- Paolo inser att detta är en ganska liten tilläggsbeställning där vissa delar går fort att genomföra medan andra kanske tar lite längre tid. Dessutom kan det vara svårt att tidsätta de olika delarna i förväg men om du vill göra en planering så är det tillåtet.
Paolo vill att projektplanen skall skapas i din WordPressapplikation. Paolo vill gärna se att du samlar alla info om detta projektet i en egen sida/page, vill du dessutom ta hjälp av inlägg/post för att dokumentera vissa delar så går det bra, men han vill kunna nå allt ifrån sidan för detta projekt.
P1.2.2 Produkten och produktens kvalitet
Grunden från den förra beställningen gäller fortfarande. Syftet med sidan är att göra reklam för sitt företag och att locka kunder genom att visa vad han kan. Designkraven från förra gången är det samma, det är blå som är huvudfärgen och röd färg gillar han fortfarande inte. Han är dock inte längre lika hård på kravet att fonten Permanent marker
måste finnas med. Lämplig font i kombination med övrig design går bra.
Innehållet på sidan skall inte förändras från den tidigare versionen utan det är tekniken som skall förändras så att den blir mer anpassad efter de kunskaper Paolo idag besitter. Det är ok att lägga till sidor, texter och bilder ifall det förbättrar webbsidan. Det innebär att följande saker behöver bearbetas;
- Webbsidan skall göras mobilanpassad på lämpligt sätt, hur du har valt att göra detta skall dokumenteras. Dokumentera också de tester du gör för att kontrollera att sidan är mobilanpassad samt kodad på ett korrekt sätt.
- Gå över alla bilder som finns i applikationen, se om de går att komprimera på något sätt. Dokumentera processen på lämpligt sätt.
- Kika också på sidans övriga prestanda, finns det ytterligare saker att göra så att sidans laddhastighet snabbas upp? Dokumentera även detta arbete.
- Webbsidan följer de grundläggande principerna för tillgänglighet, detta visas genom lämpliga tester som skall dokumenteras.
Dra nytta av alla de kunskaper som du lärt dig under moment05.
P1.2.3 Dokumentation
Välj lämpligt sätt att dokumentera din tester, valideringar och processen där detta sker. Dokumentationen skall publiceras på din WordPress på valfritt sätt. Min rekommendation är att skapa en page
snarare än en eller flera post
för att dokumentera detta projektet.
P1.3 Kunskapskrav att nå i projektet
Under uppgiftens gång skall du uppnå kunskapskraven för följande krav;
Kunskapskrav att nå under momentet
|
Kunskapskrav |
Text |
Betyget E |
Betyget C |
Betyget A |
|---|---|---|---|---|
|
2. Webbpubliceringssystem |
Eleven använder med [2] handlag webbpubliceringssystem och redogör [3] för dess funktionalitet. |
[2] visst [3] översiktligt |
[2] gott [3] utförligt |
[2] mycket gott [3] utförligt och nyanserat |
|
3. Projektplan |
Eleven upprättar en [4] projektplan för en tänkt produkt [5] . |
[4] enkel
[5]
|
[4] genomarbetad
[5]
|
[4] genomarbetad [5] och reviderar den vid behov. |
|
4. Produkten |
Eleven utvecklar utifrån planen en produkt [6] med handledare. I arbetet utvecklar eleven kod som med [7] resultat följer standarder och omfattar [8] av de grundläggande teknikerna för märkspråk och stilmallar. [9] |
[6] i samråd [7] tillfredsställande [8] någon
[9]
|
[6] efter samråd [7] tillfredsställande [8] några [9] I produkten infogar eleven enkla skript. |
[6] efter samråd [7] gott [8] flera [9] I produkten infogar eleven diskreta domskript. |
|
5. Media |
Eleven bearbetar också [10] text, bild och eventuell annan media så att de anpassas till produkten. |
[10] med viss säkerhet enkel |
[10] med viss säkerhet och via flera moment |
[10] med säkerhet och via flera moment |
|
6. Produktens kvalitet |
Produkten är av [11] kvalitet och följer etablerad god praxis vilket eleven kontrollerar med [12] tester. Eleven testar produkten i [13] webbläsare. Eleven testar också produkten på [14] [15] |
[11] tillfredsställande [12] begränsade [13] någon [14] någon plattform [15] och vidtar begränsade åtgärder för att åstadkomma snabb överföring av bilder eller andra mediafiler |
[11] tillfredsställande [12] automatiserade [13] några [14] några plattformar inklusive traditionella datorer eller mobila enheter [15] och vidtar åtgärder för att åstadkomma snabb överföring av bilder eller andra mediafiler |
[11] god [12] omfattande automatiserade och manuella [13] flera [14] Eleven testar också produkten på flera plattformar inklusive traditionella datorer och mobila enheter [15] , vidtar omfattande åtgärder samt optimerar bilder eller andra mediafiler för att åstadkomma snabb överföring av dessa och för att reducera antalet överföringar per sida. |
|
7. Tillgänglighet |
Dessutom bygger eleven en webbplats som med [16] resultat följer grundläggande principer för tillgänglighet [17] . |
[16] tillfredsställande
[17]
|
[16] tillfredsställande [17] och kontrollerar detta med några automatiserade tester. |
[16] gott [17] och kontrollerar detta med automatiserade tester och simuleringar. |
|
8. Dokumentation |
När arbetet är utfört gör eleven en [18] dokumentation av de moment som har utförts [19] och utvärderar med [20] omdömen sitt arbete och resultat [21] . |
[18] enkel
[19]
[20] enkla
[21]
|
[18] noggrann
[19]
[20] nyanserade
[21]
|
[18] noggrann och utförlig [19] med koppling till generella principer och testresultat [20] nyanserade [21] samt ger förslag på hur arbetet kan förbättras. |
|
12. Terminologi |
Eleven använder [26] terminologi inom området. |
[26] med viss säkerhet |
[26] med viss säkerhet |
[26] med säkerhet |
p1.4 Extrauppgift
Som en förberedelse för högre betyg på kursen så skall vi kika på ett kursmål som vi inte tidigare har belyst.
Kunskapskrav att nå under momentet
|
Kunskapskrav |
Text |
Betyget E |
Betyget C |
Betyget A |
|---|---|---|---|---|
|
4. Produkten |
Eleven utvecklar utifrån planen en produkt [6] med handledare. I arbetet utvecklar eleven kod som med [7] resultat följer standarder och omfattar [8] av de grundläggande teknikerna för märkspråk och stilmallar. [9] |
[6] i samråd [7] tillfredsställande [8] någon
[9]
|
[6] efter samråd [7] tillfredsställande [8] några [9] I produkten infogar eleven enkla skript. |
[6] efter samråd [7] gott [8] flera [9] I produkten infogar eleven diskreta domskript. |
I kursen skall vi alltså infoga någon form av script. I kunskapskraven ovan så står det dels enkla script
men också diskreta domscript
. Det vanligaste scriptspråket som används på en hemsida är JavaScript så något JavaScript skall du infoga i en lämplig produkt för betygsnivå C. Domscript är script som på något sätt påverkar DOM (DokumentsObjektModellen) vilket kortfattat är relationen mellan olika element i den kod du skriver. Det finns ett avsnitt om DOM tidigare i kursen (6.5.3 DOM).
Oavsett om du strävar efter C eller A så skall script infogas vilket innebär att du inte behöver kunna koda egna script utan infoga lämpliga script som du finner på nätet och infoga dessa i din egna kod.
Inlämningsuppgift: Infoga Script
Din uppgift blir att infoga ett JavaScript på lämpligt sätt i din webbsida för Projekt02. Tänk på om du skall infoga ett enkelt script
för betyget C eller om du skall infoga ett domscript
för betyget A. Den stora skillnaden mellan dessa tekniker är att i de enkla scripten kan du ropa på ett element som har ett id eller en specifik klass medan när det gäller DOM-script så behöver du påverka ett specifikt element där det kan finnas flera element som har samma klassnamn.
Exempel på script som kan vara intressanta att infoga på din webbsida;
- How TO - Responsive Top Navigation
- How TO - Slide Down a Bar on Scroll
- How TO - Shrink Navigation Menu on Scroll
- How TO - Slideshow
- Kursolle.se, kolla hur du genom att klicka på ett element kan påverka ett specifikt annat element så att det ställs om till synlig eller dold.
Ett tips när du skall förstå hur dessa script fungerar är att isolera det som du vill förstå och ta bort allt som är oväsentligt. När du har isolerat det som är relevant så vet du vad du behöver flytta över och förändra i din egen kod. Vilken svårighetsgrad du skall använda på ditt javascript avgör du själv, jag är mer intresserad av att scriptet passar bra in på sidan och tillför något.
Exemplen ovan där navigationbar aktiveras på olika sätt kan vara inbyggt i tex ett ramverk, då finns det ingen anledning att skapa en egen lösning. Välj då ett annat script att infoga.
När du har implementerat valfritt script så dokumentera detta på lämpligt sätt.
P1.4 Redovisning
När du är klar med ditt projekt skall det redovisas. Det gör du genom att dema din applikation för läraren och visar upp din projektplan, dokumentation samt utvärdering av ditt projekt. Denna rapport lägger du på din WordPressida som ett eller flera inlägg.
Info om bokning av redovisningstid och deadlines hittar du i planeringen och/eller i moment10 som uppdateras när det är dags att boka tid. Om du väljer att att låta detta projekt vara ditt slutprojekt
så skall det visas upp för läraren vid en slutredovisning. Om du väljer att göra Projekt02 så är det istället det projektet som skall visas upp vid slutredovisningen.