Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

Transkript

1 Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

2 Målsättning Att bygg upp en komplett webbplats i ett publiceringssystem. Platsen ska vara snygg, funktionell och uppfylla de krav man ställer på en publik webbplats. Huvudspåret är att ni ska göra en portfoliosida till er själva och om ni inte vill eller kan så gör ni en sida för en fiktiv organisation eller ett fiktivt företag. Organisationen eller företaget ska passa dig! Teori Föreläsningsanteckningar, kurslitteraturen, internetlänkar (se kurshemsidan) och utdelade kompendier. Filmer om WordPress eller Content Studio, CS. Förberedelseuppgift Läs igenom föreläsningsanteckningar, utdelade kompendier, internetlänkar samt kurslitteraturen. Titta igenom filmerna så att du får en uppfattning om vad man kan göra i publiceringssystemet. Material Gör ni en WordPress-sajt så kan ni använda mac eller pc. Konton och adress till sajt får ni via de som administrerar ing-servern. Vi lägger upp en lista på adressen: Om ni vill jobba med CS behöver ni ett ad-konto som fungerar och är aktiverat i CS. Ni behöver dessutom en pc som är utrustad med webbläsaren Internet Explorer. Utförande Denna laboration utför ni individuellt, men ni hjälps givetvis åt så mycket som möjligt. Utför moment 1 för godkändnivå på labben. För plusnivå gäller att godkändnivån är uppfylld och att moment 2 är lösta. Läs igenom hela laborationen innan du börjar.

3 Uppgift om du väljer WordPress Moment Du ska med att bekanta dig med WordPress genom att prova dig fram. - gör några sidor. De ska vara varierade och innehålla bilder, texter, länkar, listor och kanske någon liten tabell. - skriv några blogginlägg. Gör kategorier, t.ex. ditt favoritämne, nyheter eller pressreleaser. - leta upp ett tema som passar till sajtens behov. Installera detta och konfigurera så att det passar din sajt. - ta en skärmdump i början av arbetet så att det går att följa dina framsteg. 1.2 Jobba vidare med innehållet. Förändra ditt tema och använd förslagsvis metoden med child theme. Du laddar upp detta och reviderar/kompletterar stilmallen så att det blir som du tänkt dig. Det finns fina filmer om detta på kurswebben. Det går men är mer problematiskt att blanda in filen functions.php så det är inget krav på att den ska vara med i ditt child theme. Se till att sidorna har ett rimligt stort innehåll. Det ska upplevas som en färdig webb. 1.3 Lägg till en gilla- eller rekommendera-knapp med hjälp av de verktyg som finns för att integrera med Facebook. Vissa teman har detta inbyggt och i andra får man komplettera med en plugin. (Är det helt omöjligt för att du valt ett knepigt tema så får du beskriva detta i rapporten/protokollet) 1.4 Infoga de widgets som du vill använda. Dra och släpp som i filmerna. 1.5 Välj en eller flera plugins och installera i din sajt. Någon bör ge ett synligt resultat. Filmuppspelare, bildgalleri eller något ditåt. Vissa plugins dyker upp som en widget i WP andra t.ex. en Facebook-gillaknapp dyker upp då du skriver ett nytt inlägg. 1.6 Gör så att det blir snyggt och läsligt enligt de regler som finns för läsbarhet. Hur var det egentligen uppfyller mallen kraven som finns på Skumma igenom riktlinjerna först och välj sedan någon så att du får en uppfattning om hur de fungerar. 1.7 Du kan validera koden, både css- och html-kod. Ni hittar verktyg för detta i Web Developer Tool som är ett tillägg till webbläsaren Firefox. Här är webbplatsen publik så det ska fungera. Utan verktyget gör ni det html-validering här: och css här: Det är inget krav att visa upp för handledare. Gör det om du vill fråga om något eller få feedback. 1.9 Fyll i protokollet och se till att url, användarnamn och lösenord fungerar så att det går att kolla igenom arbetet. T.ex. kommer rättande lärare att titta på ditt childtheme. Moment 2 För plusnivå lös två av dessa. Här ska ni prova på mer i WordPress.

4 2.1 Gör om någon av mall- eller php-sidorna så att det blir en mindre förändring. I rapporten beskriver du hur det ser ut före och efter. Helst gör du denna förändring i ditt child-theme. Observera at filen functions.php inte ska kopieras över till ditt childtheme. En förändring där skrivs i en ny tom fil som heter så. 2.2 Byt fonter till snygga läsbara fonter från t.ex. Google font api. Det räcker om du gör detta på en meny. 2.3 Om du inte gjort en sida med anpassad utskrift så kan du lösa det här. Då sidorna skrivs ut ska det ske med annan font samt med dold navigering. 2.4 Gör något med stilmallen som snitsar till det. Snegla på css3 och html5 och se om det går att lösa i WordPress. Redovisning Visa upp, fyll i protokollet för WordPress och lämna in det.

5 Uppgift om du väljer Content Studio Moment Du ska med att bekanta dig med CS genom att göra 2 olika webbsidor. Sidorna ska vara varierade och innehålla bilder, texter, länkar, listor och någon liten tabell. Webbplatsen ska utgå från den sista uppgiften du gjorde i laboration ett. Gör detta som vanliga html-dokument Du ska nu göra din webbplats där du kan lägga in ditt eget material (se specifikation på kursens webbsida, eget material till kursen). För att det ska vara lätt att göra nya sidor ska du använda EPT, redigeringsmallar och presentationsmallar för webbplatsen. Du ska också förenkla genom att ta en förarbetad grundmall från t.ex. Du ska också använda active scriping komponenten menu 3.0 för navigeringen. När du skriver rapporten kan du också skriva en förklaring om varför du valt att göra just den plats som du gjort Lägg till ett nyhetsflöde med samma teknik som visas i filmerna. Som informatör är det mycket vanligt att arbeta med nyhetsflöden på webbplatser (Vi provar detta i år) Lägg till en gilla- eller rekommendera-knapp med hjälp av de verktyg som finns för att integrera med Facebook Gör så att det blir snyggt och läsligt enligt de regler som finns för läsbarhet. Hur var det egentligen uppfyller mallen kraven för 24-timmarswebben? 1.15 Du kan validera koden, både css- och html-kod. Ni hittar verktyg för detta i Web Developer Tool som är ett tillägg till webbläsaren Firefox. Webbplatsen är publik för att detta ska fungera. Moment 2 [Plusnivå lös 2.5 och 2.6 eller 2.5 och 2.7] Här ska ni prova på mer om sidlayout och stilmallar. 2.5 Layouta om sajten ordentligt så att den avviker från grundutseendet. Ett typsnitt från Google fonts eller liknande kan vara fint! 2.6 Om du inte gjort en sida med anpassad utskrift så kan du lösa det här. Då sidorna skrivs ut ska det ske med annan font samt med dold navigering. 2.7 Gör något med stilmallen som snitsar till det. Snegla på css3 och html5 och se om det går att lösa i CS. Redovisning Visa inte upp, men fyll i protokollet för Content Studiolösningen och lämna in det.