kursolle.se

P2. 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.

P2.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.

P2.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.

P2.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.

P2.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.

P2.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.

P2.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] [inget]

[4] genomarbetad

[5] [inget]

[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] [inget]

[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] [inget].

[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] [inget]

[20] enkla

[21] [inget]

[18] noggrann

[19] [inget]

[20] nyanserade

[21] [inget]

[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

P2.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] [inget]

[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 du infoga någon form av script i din webbplats. I kunskapskraven står det både enkla script (C-nivå) och diskreta DOM-script (A-nivå).

Det vanligaste scriptspråket på webben är JavaScript, och det är också det du kommer att använda här.

Viktigt: Du behöver inte kunna skriva egen JavaScript. Din uppgift är istället att:

  • hitta ett färdigt script
  • infoga det i din egen kod
  • anpassa det så att det fungerar på din sida
  • förstå och kunna förklara vad det gör

P2.4.1 C-nivå – enkla script

För betyget C använder du ett enkelt script. Det innebär att du infogar ett färdigt script, kopplar det till ett eller några få element på sidan och gör mindre anpassningar så att det fungerar i din egen kod.

På C-nivå ska scriptet ha en tydlig och synlig funktion. Det får gärna märkas att du har lagt till något, till exempel att en meny öppnas, att bilder växlar eller att användaren kan ta sig tillbaka till toppen av sidan. Det viktiga är inte att scriptet är avancerat, utan att det fungerar, passar på sidan och att du kan förklara vad det gör.

Exempel på script som passar bra för C-nivå:

  • Mobilmeny (hamburgermeny) – ett tydligt script där användaren kan öppna och stänga menyn på mindre skärmar.
  • Bildspel / slideshow – passar bra om du vill visa projekt, bilder eller annan information i ett rullande flöde.
  • “Till toppen”-knapp – ett enkelt script som gör sidan lättare att använda om den innehåller mycket innehåll.
  • Dark mode (enkel) – låter användaren växla mellan ljust och mörkt läge med en tydlig knapp eller funktion.

P2.4.2 A-nivå – diskreta DOM-script

För betyget A använder du ett mer genomtänkt och diskret script som påverkar flera delar av sidan via DOM (Document Object Model).

För betyget A bör scriptet vara mer genomtänkt och fungera som en naturlig del av webbplatsen. Det handlar alltså inte bara om att lägga till en tydlig effekt, utan om att använda JavaScript för att förbättra struktur, navigation eller användarupplevelse på ett diskret sätt.

Exempel på script som passar bättre för A-nivå:

Skillnaden mellan C- och A-nivå handlar därför inte främst om att koden måste vara mycket svårare, utan om hur väl scriptet passar in i sidan. På C-nivå räcker det att ett enkelt script fungerar. På A-nivå bör scriptet vara mer genomtänkt, mer integrerat i designen och bidra till att sidan blir tydligare eller mer användarvänlig.

Skillnad mellan C och A

  • C: Scriptet fungerar och används
  • A: Scriptet är anpassat och förbättrar helheten

Tips

  • Isolera det viktiga i scriptet – ta bort det du inte förstår
  • Testa steg för steg
  • Ändra id och klasser så att det passar din kod
  • Välj script som faktiskt passar din webbplats

Observera att vissa funktioner kan finnas färdiga i ramverk. Då behöver du inte göra en egen lösning – välj istället ett annat script.

Inlämningsuppgift: Infoga Script

Infoga ett JavaScript i din webbplats (Projekt02).

  • Välj nivå (C eller A)
  • Infoga och anpassa scriptet
  • Se till att det fungerar i din egen kod
  • Dokumentera kort i samma dokumentation som övriga projektet
    • Vad gör scriptet?
    • När används det?
    • Hur påverkar det användaren?

P2.5 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.