kursolle.se

P1. Projekt01 - 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.

P01.1 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.

P01.2 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.

Skiss av hemsida

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. Ta gärna hjälp av coolors för att ta fram färgscheman för en webbplats. Lek runt lite och testa de funktioner som finns.

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. Pexels är helt fritt att använda, det är ok att redigera bilderna och ingen tillskrivning krävs. Paolo är inte så duktig på bildhantering och har heller ingen kamera eller färdiga egna bilder. Däremot så vet Paolo att han kan ta en bild på del av skärmen (mac: ”shift + cmd + 4”, windows: "shift + win + s") 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.

P01.3 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 riktigt 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 egen landing page.

P01.3.1 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.

Innehåll på sidan

Text

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.

P01.3.2 Tekniker (tekniker.html)

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

Innehåll på sidan

Text: 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.

Text: 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.

Text: 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ösningar så lär vi oss tillsammans. Min lärare har lovat att kika lite på detta senare under året, annars får jag väl lära mig själv eller spara till en senare kurs.

Text: 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.

P01.3.3 Projekt (projekt.html)

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

Innehåll på sidan

Text: MarkDown

Mitt första projekt gjorde jag om Markdown som är ett markup language. Markdown är en lättläst och enkel märkspråksyntax som används för att formatera text på webben. Med en minimalistisk uppsättning taggar möjliggör Markdown snabb och lätt formatering av text med betoning på läsbarhet. Det är populärt för att skriva dokument, blogginlägg och README-filer, och stöds av många plattformar och redigeringsverktyg.

Text: BurgerBase

Den nya burgarkedjan BurgerBase lät mig bygga deras helt nya webbplats. BurgerBase är en helt ny franchisekoncept på den svenska burgarscenen. De presenterar sitt koncept på följande sätt. Vår passion för kvalitet syns i varje tugga av våra saftiga hamburgare, nylagade med de finaste ingredienserna. Med en modern atmosfär och en meny som erbjuder smaker för alla, är BurgerBase den ultimata destinationen för en smakfull och minnesvärd hamburgarupplevelse.

Text: landing page

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 landing page 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 landing page 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.

P01.3.4 Om (om.html)

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

Innehåll på sidan

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 han finnas på fler sociala medier, gör det därför 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....

Strukturen för projektet

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 landing page 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.

P01.4 Redovisning

När du är klar med uppgiften så skall du om vanligt lägga upp den på din domän enligt kraven i Strukturen för projektet och även länka till projektet från din Landing page.

I WordPress så skriver du ett eller flera inlägg enligt kraven Strukturen för projektet och även en länk till ditt projekt.