P1. Projekt01 - 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.
  • Webbsidan följer de grundläggande principerna för tillgänglighet, detta visas genom lämpliga tester som skall dokumenteras.

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.

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

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] [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 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 Projekt01. 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;

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.