# Hej! :wave: - Oskar Lövsveden - Webbprogrammerare - Kalmar, Campus --- ## Varför denna video? - Assignment 3 - CMS - WordPress Note: Detta är ett kompliment till de skrivna instruktionerna. --- ## Assignment 3 - Assignment 2 → Ny design! - Förbättra användbarheten - Navigering - Organisationsschema - ... - Begränsningar - Vald hemsida - CMS funktioner - Webbläsare Note: I den här uppgiften kommer du att utnyttja kunskapen som du fått under kursen för att göra om webbplatsen som du valde i uppgift 2 genom att använda WordPress. Tanken här är att höja användbarheten av webbplatsen genom att förbättra navigering, organisationsschema eller något annat som du finner lämpligt. Ämnen som ligger utanför gränserna för användbarhet, som att använda SMS-tjänster i marknadsföringssyfte, kommer inte att accepteras som användbarhetsförbättringar. Era förslag till förbättringar ska begränsas till webbplatsen, vilka funktionerna som erbjuds av ett CMS och den senaste tekniken för nuvarande webbläsare. ---- ### Deliverable 1 (Report) - Analysera och diskutera hemsidans nuvarande situation. - Riktlinjer - Användare - Information - Funktion - Uppgift - Innehållets organisering - Navigering Note: Rapporten ska innehålla en kritisk analys där du tydligt beskriver listan över identifierade problem för webbplatsen och lyfter fram de förslag eller förbättringar som du introducerat och omarbetat på sidan. Guidelines: - Har man glömt att tänka på någon typ av användare? - Saknas det någon information, funktioner eller uppgift som borde finnas? - Är grupperingen och strukturen logisk för användaren? - Motsvarar navigeringsscheman innehållsstrukturen? Du kan använda andra webbplatser, läroböcker eller externt material som källor för att inspirera och till viss del motivera era ändringsförslag. Men glöm inte att hänvisa till de källor som du har använt i er referenslista. ---- ### Deliverable 2 (Redesign) - Ny design för er valda sida - WordPress - .com ("gratis") - .org (gratis) Note: Efter att du identifierat designluckor i den föregående delen är nu syftet med denna del att ge webbplatsen en ny design och implementera en prototyp. Du implementerar era lösningsförslag med hjälp av CMS-verktyget WordPress. Du kan välja mellan wordpress.com eller wordpress.org för att skapa er webbplatsprototyp. Mer om skillnaderna sen. ---- ### Deliverable 2 (Prototype) - Behåll känslan - Tre sidor("pages") - varav en är en startsida - Kopiera inte orginalet, fokus på era ändringar Note: Du skapar en potentiellt högkvalitativ och verklighetstrogen prototyp av webbplatsen utan att offra utseendet och känslan av den ursprungliga webbplatsen. Max tre webbsidor behövs för att visa era ändringar. En av dessa sidor bör vara startsidan. Du ska inte kopiera orginalsidan, utan lägg fokus på ändringarna du implementerar. ---- ### Inlämning - Individuellt/grupparbete (max 3 per grupp) - Deadline: 23 Maj, kl. 23.59 ---- ### Inlämningens olika delar <!-- .slide: style="font-size: 30px;" --> - Rapport (PDF) - Länk till er presentation - Ingen kod (.html, .css, .js, etc.) - 1800 ord (exklusive försättsbladet, referenslista och bilagor) - Times New Roman, 11 punkter, enkelt radavstånd - Harvard stil på referenser - Namnge filen baserat på följande mall: - förnamn.efternamn.assignment3.pdf ELLER - efternamn1.efternamn2.assignment3.pdf ELLER - efternamn1.efternamn2.efternamn3.assignment3.pdf - Prototyp skapad i WordPress - Presentation (video och ljud) - Video på 6-8 minuter - Fokus på ändringarna Note: - Inkludera länk till sidan om möjligt i rapporten. - Spela in en video där alla i gruppen presenterar och går igenom något från hemsidan. - Presentera webbplatsens prototyp "live", inte via screenshots. - Zoom eller OBS är två förslag på program att spela in i. - Presentera i samma ordning som era namn står i rapporten. - Eftersom detta är en tentamenpresentation så ska du använda kamera. - Ladda inte upp någon videofil på MyMoodle, men du inkluderar länken till videon i rapporten. - Om det är youtube se till att videon är publik, men olistad för att se till att bara de som får länken kan se den. - Du får presentera på engelska eller svenska. --- ### CMS - Står för Content Management Systems - Skapa hemsidor utan att koda. - T.ex WordPress, Drupal och Joomla. - Hur funkar det? - Vad kan det användas till? Note: CMS arbetar baserat på teman eller förbyggda paket(som kallas plugins) som innehåller funktionalitet och användargränssnitt. Administratörer underhåller webbplatsen via en användarvänlig adminpanel, från vilken de lägger till eller tar bort sidor, innehåll och så vidare. Många av dessa system är gratis med öppen källkod. Så generellt sett har CMS en enorm gemenskap av bidragsgivare bakom sig, som ständigt lägger till nya funktioner och teman. Använd det för att skapa bloggar, e-handel, portfolios, mm. Det största CMSet är WordPress och 40% av alla hemsidor på webben idag är skapade genom WordPress. Både wordpress.com och wordpress.org innehåller mer än 7500 teman och tusentals plugins. --- ### WordPress  Note: Som sagt, är bägge varianter gratis, med vissa skillnader. - wordpress.com tar hand om hosting och är gratis, med begränsningar för hur mycket funktioner och teman man får använda gratis. Mycket ligger bakom en betalvägg(paywall). Men det är samtidigt ett enkelt sätt att komma igång med en hemsida utan några tekniska färdigheter. - wordpress.org kan laddas ner och konfigureras utan några egentliga begränsningar, men då ansvarar man för att hosta den själv sedan vilket kräver lite mer tekniska färdigheter. Prata kort om fördelar (snabbt, enkelt, icke-tekniskt) och nackdelar (lägre säkerhet från tredjeparts mjukvara, kan kräva mycket uppdateringar om plugins och teman uppdateras, konflikter mellan plugins) ---- ### Tutorials - Tutorials för .com och .org - Jag använder Windows, inte Mac Note: Leta efter en tutorial för wordpress.com på MyMoodle om du vill pröva det, annars titta på tutorial för wordpress.org och hur man skapar en arbetsmiljö för det. Säg til om du har Mac och stöter på problem - Vi löser det! --- ## Thank you! - Mail - ol222hf@student.lnu.se - Slack - ol222hf :sunny: