Webbutveckling01 [weuweb01]

Moment04 - Hit&dit resor + miniprojekt

Introduktion

I detta momentet så skall du få skapa två lite större webbsidor som innehåller flera delar. Först får du lära dig att bygga en sida för en resebyrå med hjälp av Erik på webbkoda. Efter det skall du få chansen att utifrån en beställning av läraren bygga en webbsida på egen hand.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Processen för ett webbutvecklingsprojekt med målsättningar, planering, specifikation av struktur och design, kodning, optimering, testning, dokumentation och uppföljning.
  • Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS samt orientering om Ecmaskript och dokumentobjektsmodellen (DOM).
  • Teckenkodning, begrepp, standarder och handhavande.
  • Bilder och media med alternativa format, optimering och tillgänglighet.
  • Riktlinjer för god praxis inom webbutveckling.
  • Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
  • Terminologi inom området webbutveckling.

Projekt

Du byggde ett mindre projekt i det förra momentet, nu skall vi göra ett något större projekt på beställning från ett resebolag. Här får du chansen att testa på flera nya tekniker. Det kommer efter den tutorial som du skall följa finnas en möjlighet att bygga vidare på uppgiften och på egen hand presentera en site som innehåller samma saker men är lite annorlunda uppbyggd.

Förarbete

Innan du ger dig på den stora tutorialen i detta moment så vill jag att du kikar på hur du kan implementera audio & video på dina webbsidor. Den guiden hittar du längst ner på denna sidan.

Hit och dit resor

Hit & Dit Resor På webbkoda.se så går Erik igenom en fiktiv beställning på en webbsida för företaget Hit&Dit resor. I nio klipp guidar han dig igen arbetet att färdigställa webbsidan för reseföretaget.

Projektet Hit&Dit Resor. Lycka till!

Frivilliga uppgifter

Nu har du förhoppningsvis en bra webbsite som matchar beställningen som Hit&Dit Resor har gjort.

Hit&Dit Resor v2.0

När du jobbar dig igen Eriks tutorial så kanske du känner att du skulle vilja göra på ett annat sätt ibland. Nu har du möjlighet att göra det, det är fri lek att förändra Hit&Dit Resor efter ditt eget önskmål, ta dock inte bort någon av den information som finns på webbsidan, ändra går bra och även att lägga till.
Tips: Jobba inte vidare i samma mapp utan ta en kopia på hela mappen med alla filer och jobba vidare med en kopia.

Hit&Dit Resor v2.1

I Eriks upplägg så byggs allt på en enda sida, risken finns att denna sida blir väldigt stor och då gäller det att dela upp materialet på flera sidor. I Hit&Dit Resors webbsida så finns det fyra menyalternativ och hade jag byggt denna sidan på ett alternativt sätt så hade jag byggt fyra sidor, med olika innehåll men med samma sidhuvud och sidfot. Då får vi ju ställa om länkarna så att de går till olika sidor istället.
Tips: Jobba inte vidare i samma mapp utan ta en kopia på hela mappen med alla filer och jobba vidare med en kopia.

Samlingssidan

Nu har du lärt dig lite nya saker och testat på lite tekniker som du kanske skulle vilja använda på din samlingssida. Vill du snygga till din samlingssida med dina nya kunskaper så gör det. Det kan vara kul att spara dina gamla samlingssidor för att se hur du utvecklas under kursens gång. Om du sparar den gamla samlingssidan som samlingssida_v1.html så kan du i slutet av kursen gå tillbaka och kika på olika versioner, det brukar vara kul att se utvecklingen. Våga också länka dessa till din samlingssida.

Miniprojekt: Paolos Webbtjänst

Ett litet miniprojekt där du utifrån en beställning på egen hand, med de kunskaper som du fått i kursen, skall bygga en mindre webbplats.

Bakgrund

Paolo är en kille med rötter från norra Italien som håller på att lära sig att bygga hemsidor i skolan. Läraren har givit Paolo och hans kompisar flera mindre projekt att träna på och nu tycker Paolo att han är tillräckligt bra på att bygga hemsidor så han tänker starta sin egen webbyrå som sidoverksamhet. Han har döpt verksamheten till Paolos Webbtjänst men han tycker inte att han har tid att bygga sin egen webbplats där han gör reklam för sin verksamhet. Läraren är mer tveksam till att det är tiden som är det stora problemet men har lovat Paolo att låta några andra andra elever hjälpa Paolo med sin webbplats.

Krav allmänt

Paolo har gjort en skiss på sin webbplats och det finns några grundläggande krav han måste få igenom. Det första är skissen på sidan, han vill ha en header, en footer och en navbar. Han har grym koll på HTML5 och det är viktigt för Paolo att strukturtaggarna <footer>, <header> och <nav> används. Han tror också att det skall finnas en <main> och troligtvis <section> eller <article> också. För att du skall förstå hur Paolo har tänkt sig sin webbplats så har han gjort en skiss.

Webbplatsens skiss

I skissen, som kallas för Wire Frame så ser du att Paolo vill ha fyra sidor på sin webbplats. Info om dessa kommer du få lite senare. Paolo har rötter från norra Italien och har ett speciellt favoritlag i fotboll, detta laget har färgerna svart, blått och vitt som lagfärger. Därför vill Paolo att dessa färger skall vara de färger som finns på hemsidan. Det är helt ok att blanda dessa färger och skapa olika nyanser och du får också lägga till en färg som bryter av helt. Denna färg får dock inte vara röd eftersom det är den färgen som värsta rivalen har på sina tröjor.

Paolo har förstått att på pexels, så finns det fria bilder att använda sig av, han har också upptäckt att det finns en bild på honom själv där. Paolo är inte så duktig på bildhantering och har heller ingen kamera eller färdiga egna bilder. Däremot så vet Paolo att om han på macens tangentbord trycker ner kombinationen ”shift + cmd + 4” så kan han markera en del av skärmen och göra en bild av detta. Detta tycker Paolo fungerar för tillfället. Alternativt är att du använder bilder från pexels när så behövs.

Krav samtliga sidor

Paolo vill att headern, footern och nav-bar skall se likadan ut på alla sidor. Paolo har sett någon på nätet som har färgat den sidan som användaren är på för tillfället annorlunda i navbar vilket han tycker är lite fräckt. Han vet inte ritkigt hur det fungerar men om du vill göra det så går det bra.

I headern vill Paolo använda fonten Permanent Marker från Google Fonts för att skriva ut företagets namn eftersom Paolo ännu inte har kunnat skapa en logga. Du vet det här med bilder och bildhantering. Fonten Permanent Marker vill han också ha på de rubriker som du skapar på de olika sidorna.

På alla sidor skall en horisontal navbar finnas med länkar till de olika sidorna. Mer info om de olika sidorna senare.

Längs ner på sidan skall en footer finnas, innehållet här kan för tillfället vara tomt, men du kan om du vill få göra en notering att det är du som skapat hemsidan och länka till din samlingssida.

Hem (index.html)

Denna sidan är startsidan på webbplatsen, här skall det endast finnas en kort text om Paolo och vad Paolo kan göra. I rutan nedan finns färdig text som skall presenteras på sidan och under övrigt finns övriga önskemål/krav från Paolo.

Texten

Välkommen till Paolos webbtjänst. Jag har på kort tid lärt mig en mängd webbtekniker och är nu redo att hjälpa dig att få ett bra hem på nätet. Tveka inte att höra av er till mig så kan vi diskutera hur jag kan bygga rätt lösning för just dig eller ditt företag.

Övrigt

Den snygga bilden på Paolo som länkats ovan skall finnas på denna sidan.

Tekniker (tekniker.html)

Här vill Paolo visa upp tre tekniker som han behärskar, html, css, javascript och WordPress.

Texten
HTML5

HTML5 är grunden i de webbsidor som jag skapar men jag behärskar också HTML4.01 om du tycker att utvecklingen går för fort. HTML är ett märkspråk som utgör själva ramen för webbsidorna som jag sedan med hjälp av andra tekniker formaterar så att de ser ut som vi vill.

CSS

CSS är den tekniken som får hemsidan att bli snygg i både datorn och på mobilen. Det är inte bara färg och form som gör att sidan blir läcker utan det finns också möjligheter att förstärka vissa händelser med färg och rörelse.

JavaScript

JavaScript är grymt coolt, jag är inte så duktig på det för tillfället men jag hoppas att du vill anlita mig att bygga coola lösnignar så lär vi oss tillsammans. Min lärare har lovat att kika lite på detta ssenare under året, annars får jag väl lära mig själv eller spara till en senare kurs.

WordPress

Det är så många inställningar att göra i WordPress så att du blir helt snurrig, för att vara ärlig så blir jag också det men jag gillar ju karuseller så det går bra. Om du vill ha en webbplats som du enkelt uppdaterar själv så kan jag bygga upp en webbplats i WordPress som blir helt unik för just ditt företag när jag har bombat in alla coola plugins och något fräckt tema.

Övrigt

Paolo förstår vikten av att presentera detta på ett snyggt sätt, därför vill han tillsammans med texten för varje teknik också visa en bild som på något sätt belyser den valda tekniken. Klipp ut en egen bild eller använd någon från tjänsten som länkats ovan.

Projekt (projekt.html)

Denna sidan skall fungera som en portfolio för de projekt Paolo har gjort och vill visa upp.

Texten
Evas Frukt

Mitt första projekt gjorde jag för den stora fruktgrossisten Eva som inte bara har flera olika typer av frukt utan också väldigt många lådor med frukt. Coolt var det att få jobba med Eva, mätt var jag mest hela tiden också.

Hit & ditresor

Det stora resebolaget Hit & ditresor lät mig bygga deras helt nya webbplats. Lite hjälp fick jag faktiskt av en kille som heter Erik men jag orkade inte lyssna på allt han sade så vissa saker gjorde jag helt på egen hand. Grymt nöjda var de med projektet så jag fick med mig flera kartonger med broschyrer hem.

Samlingssidan

Min lärare tjatar om att jag skall bygga en egen sida där jag kan visa upp allt jag gör, jag tror han har en baktanke med detta och kommer välja den bästa samlingssidan och göra om den till sin egen. Säg inget till någon, men det är var jag tror. Jag börjar dock bli rätt så nöjd med min samlingssida och ser att flera elever i klassen gör mycket sämre saker. Shhhh igen.

Övrigt

Paolo förstår vikten av att presentera detta på ett snyggt sätt, därför vill han tillsammans med texten för varje projekt också visa en bild på projektet. Ta en bild av de projekt som du har byggt,har du gjort flera olika versioner av samma projekt så välj det som är mest unikt eller det som du gillar bäst.

Om (om.html)

Detta är sidan där Paolo presenterar sig själv och ger kontaktuppgifter.

Texten

Som du säkert har förstått så heter jag Paolo och är elev på Bakgårdsgymnasiet. Där läser jag andra året och har kommit på att detta med webbutveckling är ganska roligt och jag kan se att det kan vara ett framtida yrke för mig.

Kontakta mig gärna så kan vi diskutera hur jag kan hjälpa dig att bygga din nya webbplats.

Kontaktuppgifter

mail: paolo@paolowebb.se
telefon: 070-1234567
twitter: @paolowebbse
facebook: https://www.facebook.com/paolowebbse

Övrigt

Bygg upp detta lite snyggt, eftersom det är lite data så skall presenteras i form av kontaktuppgifter så behöver du fundera på hur detta skall göras. Har du en idé så kör på den, annars kan det vara läge att kika på hur du kan jobba med tabeller.

Paolo är överytygad om att det så fort han får igång sin verksamhet kommer finnas på fler sociala medier, gör det enkelt att bygga vidare.

Uppgift grund

Grundvarianten av Paolos Webbtjänst skall vara identisk med den beställning som Paolo har gjort eller så nära som det bara är möjligt för dig.

Uppgift fortsättning

Om du vill bygga vidare på Paolos webbplats och göra en bättre variant så blir Paolo väldigt glad. Gör du denna uppgiften så har du fria händer. Glöm inte att hur fin sida du än skapar så kan inte Paolo acceptera röd färg....

Redovisning

Lägg upp ditt Paoloprojekt i en, eller flera, mappar döpta till paolo och kanske ett versionsnummer på din domän. Länka sedan till projektet/projekten från din samlingssida och skapa ett inlägg på din WordPress med lite fria reflektioner över uppgiften och din lösning. Jag är mest intresserad över vilka svårigheter du stött på under arbetet, vilka val du har gjort (och varför) samt om du tycker att uppgiften var kul, givande, lagom svår eller något annat.
I redovisningen vill jag se skärmdumpar på de valideringar du har gjort av koden så att jag ser att både html och css är felfri.

Paolo har koll på att det är viktigt med en bra fil- och mappstruktur. Därför vill han att alla bilder ligger i mappen img och att all css-kod skrivs i en extern fil, style.css.

Eventuella funderingar kring om favoritlaget är Inter, Atalanta eller något annat blåsvart lag är meningslösa. Paolo håller på Club Brügge.

Redovisning

Lägg upp de projekt du har gjort på din domän. Låt varje projekt ligga i en egen mapp. Har du skapat flera versioner av samma projekt se då till att de ligger i olika mappar med olika namn, enklast är väl mapparna /resor_v1/ och /resor_v2/.
När du lagt projektet på rätt plats så länkar du det från din samlingssida.
I ett, eller flera, inlägg på din WordPress så länkar du till de projekt som du har gjort samt skriver en utvärdering om arbetet, vad tyckte du om det, var det en bra uppgift, vad har du lärt dig, var det svårt att följa med? Hur svårt var det att utveckla webbsidorna på egen hand om du har gjort den typen av projekt.