1. Moment01 - Introduktion och utvecklingsmiljö

I detta moment skall vi se till att sätta upp en utvecklingsmiljö och göra de installationer och förberedelser som krävs för att kunna genomföra denna kursen. Om vi tidigare inte har en redovisningsmiljö på plats med WordPress och en landing page så måste detta också fixas.

Info

Denna kursen kan läsas parallellt/direkt efter Webbutveckling01 eller senare. I detta moment så finns det delar som kanske redan är gjorda i närtid och som fortfarande fungerar, då hoppar vi helt enkelt över dessa delar. Känner du att du behöver fixa till saker som du inte är nöjd med så lägg tid på detta nu, senare i kursen kommer tiden behövas till annat.

1.1 Kursdokument

Vi börjar kika på kursdokumentet för kursen wesweb01 och ämnet Webbserverprogrammering. Det är det som står här som är det vi skall lära oss.

1.2 Utvecklings- och redovisningsmiljö

Alla kursens redovisningar kommer att göras på en publik webbserver. Min erfarenhet är att det som visas publikt rent generellt brukar ha högre kvalitet. Vi får hjälp av Oderland som hostar serverplats och varje elev får en egen liten plats på internet.

Eftersom ni redan har ett konto hos Oderland så behöver inget nytt skapas.

1.2.2 Landing page

Landing page

I kursen Webbutveckling01 så byggde vi en landing page som blev en startsida på din domän. Från denna sidan så länkades alla övningar, projekt och WordPressapplikationen. Om du vill bygga vidare på denna sidan och länka alla övningar/projekt i denna kurs så går det bra, eller så skapar du en sida där du samlar att som har med Webbserverprogrammering01 och som då länkas från din landing page. Du väljer.

I denna kursen kommer du redovisa mindre eller större uppgifter i varje moment, för att förbereda detta så behöver du skapa en webbsida där alla dina uppgifter skall länkas från. Då kursen Webbutveckling01 ligger till grund för denna kurs så så bör detta inte vara några problem men kanske är denna uppgift en bra repetition för att damma av kunskaper i html och css.

Följande krav vill jag att din Landing page uppfyller;

  • Jag skall enkelt hitta länkar till allt inlämnat material i kursen Webbserverprogrammering01 via din landing page.
  • På sidan skall det förberedas för länkar till samtliga uppgifter i momenten, i moment2 så är det ca 20 mindre uppgifter som skall redovisas. Senare kommer det vara färre uppgifter för varje moment med det kommer också vara ett antal projekt som är mer eller mindre omfattande och som skall redovisas i en egen mapp.
  • En länk skall finnas till din WordPress.
  • Gör sedan din Landing page personlig, det skall tydligt framgå syftet med sidan och vem som ligger bakom den.
  • Innan sidan anses klar så skall den vara validerad och vara godkänd enligt standarden för html5 och css3.

Det finns flera sätt att bygga upp denna Landing page, antingen så väljer du en enkel väg och bygger om någon sida som du jobbade med under kursen Webbutveckling01, bygger en helt ny för att repetera och träna på syntaxen så att du kommer in i utveckling för webben igen. Kanske fanns det någon teknik som du ville testa men inte riktigt hann med under kursen, här är ett utmärkt tillfälle att leka lite med koden.

Känner du att du har glömt mycket eller allt som handlade om html och css så är detta ett utmärkt tillfälle att lära sig på nytt. Om du inte har kunskaper i html/css så kommer det bli omöjligt att klara denna kursen då alla projekt vi skapar kommer vara i webbmiljö. Använd resurser som du använde till förra kursen.

I denna kursen kommer vi int hinna lägga massa tid på att designa våra sidor men de måste ändå klara av de krav vi ställer i kursen Webbutveckling01. Mitt tips är då att lära känna det CSS-ramverk som du gillar mest. Under kursens gång kommer jag ofta använda CSS-ramverk i mina guider och det jag använder oftast är SPECTRE.CSS men även Milligram kommer användas. Fördelen med dessa två ramverk är att det behöver inte läggas till allt för mycket i html-koden (jämför med Bootstrap) utan den mesta kraften ligger redan i css-filen. Du är naturligtvis fri att använda det ramverk som du själv uppskattar men 98% av arbetstiden bör läggas på PHP och inte på att designa våra webbsidor.

1.2.3 WordPress

Du borde redan ha en fungerande WordPress-installation så nu är det läge att gå igenom den och ser till att teman, plugins och själva kärnan är uppdaterad och fungerar som den skall. Kika över eventuella kategorier och taggar för att förbereda för den nya kursen. Fundera på hur du vill använda inlägg och sidor.

1.3 Webbserver

För att kunna utveckla dynamiska webbsidor så är det smidigast att installera en webbserver på din egen dator. Kunskapsdokumentet: Webbserver går igenom hur du gör detta.

1.4 FileZilla

Installera FileZilla enligt instruktionerna i kunskapsdokumentet: FileZilla.

Har du redan FileZilla installerad, kolla om den behöver uppdateras.

Ändrad sökväg?

Troligtvis har du nu ändrat plats på var dina filer finns. Då är det troligt att de inställningar du tidigare har gjort i FileZilla inte längre stämmer. Då kan det vara dags att kika över detta.

1.5 Uppgift

Uppgift: m01

För att vara redo för nästa moment i kursen så behöver allt som gjorts ovan vara klart och fungerande. Nedan finns en checklista för att du enklare skall kunna se att allt som borde vara klart är det. När du är klar med alla delar så vill jag att du skriver ett avslutande inlägg på WordPress där du utvärderar momentet. I inlägget vill jag att du kortfattat beskriver vad du har gjort för att bli klar med momentet, det som du har kvar sedan tidigare kurser behöver du inte redogöra för.

Checklistan

För att göra det lite enklare att runda av ett moment och att eleven skall vara säker på att allt som läraren förväntar sig skall finnas med så har jag gjort en checklista, då kan du enkelt checka av alla delar för dig själv innan du anser dig vara klar.

[  ] Du har tillgång till en webbplats via Oderland.
[  ] Skapa samlingssidan som är din landing page eller som länkas från din landing page på din domän.
[  ] WordPress är installerad, uppdaterad, uppsatt med en lösning för säkerhetskopiering och är redo för att dokumentera kursen arbete.
[  ] Installera en webbserver och gör de inställningar som behövs.
[  ] FileZilla är installerad, uppdaterad och har rätt inställningar.
[  ] Utvärdera om du vill momentet i ett inlägg på WordPress.