Projektplan OLD

Om Bright Hotell.

Strax utanför staden där du bor har ett nytt hotell precis byggts: Bright Hotell. Byggnaden har en våning, en fin tomt och ligger precis vid vägen så att det är lätt att ta sig dit. Hotellet har en matsal där man serverar frukost, lunch och middag. Hotellet satsar på bra service till lågt pris. De som besöker hotellet är affärsmän på resa, helgbesökare och sommarturister. Hotellet har också konferenslokaler. Nu vill hotellet göra en webbplats och det är du som fått uppdraget!

Här är de generella krav för webbplatsen som du bör ha i åtanke:

• Webbplatsen ska innehålla minst fyra sidor (Start, Boka, Hitta, Kontakta) som är länkade till varandra i en horisontell meny.

• Den ska innehålla en presentation av hotellet och det ska vara möjligt boka rum (med ett formulär, som dock ej behöver fungera fullt ut). Webbplatsen ska även innehålla något annat – vad får du välja själv (t.ex. aktiviteter som hotellet erbjuder, sevärdheter i staden eller något liknande).

För E och C

Du ska göra en genomarbetad projektplan till din hotellwebbplats. Du ska svara på punkterna nedan. Tänk på att du inte nödvändigtvis uppnår ett visst betyg bara för du skrivit något på det. Skriv projektplanen med samma punkter som jag har gjort så är den lätt att följa.

· Vilka sidor ska finnas på hotellwebbplatsen

· Vilka bilder måste du hitta och i vilket filformat? png och/eller jpg

· Vilka teckensnitt ska du använda? Använd max två.

· Vilka färger ska du använda?

· Vilka två webbläsare ska du testa webbplatsen i?

· Vilken teckenkodning ska du använda?

För A

(se film 08 Riktlinjer nedan )

Tillgänglighet: Hur planerar du uppfylla olika krav på tillgänglighet

Riktlinjer för god praxis inom webbutveckling (Skolverket)

På webbsidan webbriktlinjer finns finns måna punkter som en professionell webbutvecklare ska ta hänsyn till. Som nybörjare har jag valt ut några punker från Prioritet 1:

För A skriv hur du planerar att uppfylla dessa.

Ange i kod vad sidans olika delar har för roll

  • Skapa rubriker med h-element

  • Använd rätt html-element när ni gör listor

  • Namnge formulärfält med kopplade label-element. Se detta exempel

  • Skriv rubriker till tabeller

  • Markera obligatoriska fält i formulär

  • Betona innehåll med elementet em och inte bara kursivering, eftersom det inte går att kursivera skärmläsarens tal.

Beskriv med text allt innehåll som inte är text

  • Välj detaljnivå efter användarens behov


Erbjud möjlighet att hoppa förbi återkommande innehåll

  • Skapa genvägar för att hoppa över delar i strukturen till exempel menyn, för att komma direkt till sidans innehåll.

  • Skapa rubriker med h-element, eftersom skärmläsare låter användarna snabbnavigera med hjälp av sidans rubriker.

  • Om du använder HTML5, använd strukturelement som main, aside, header, footer och nav för att definiera vilken roll varje del av sidan har.

Följ standarder

Se till att koden validerar


  • Försök att automatisera en regelbunden kodvalidering, eller gör validering till en rutinåtgärd vid all förändring av webbplatsens kod. Det är lätt hänt att tidigare korrekt kod går sönder.


Så här kan man göra med denna uppgift.

Filmer som förklarar hur ni ska göra denna uppgift

Webb Projektplan F06 exempel

Filmen går igenom som täcker projektplan, sitemap, wireframe, färger, vilka webbläsare man bör testa i, infoga javascript, validering

Filen 4b går igenom hur man bör tänka med koden, indrag, felsökning, caniuse.com, optimering


Filmen går igenom webbriktlinjer. Jg går också igenom områden som ARIA och WCAG som ni inte behöver göra i denna kurs men som ni ska känna till