CMS 1

1. CMS
- Content management system

2. Agenda
• CMS
• Server, webbhotell och FTP
• Wordpress, ställ mycket frågor
• Om vi hinner - Snabb genomgång av CMS - uppgiften

4. Nu & Då
• Sidor med bara HTML och CSS kräver ”manuell” uppdatering
• Filerna redigerades lokalt och överfördes med ett FTP-program
• Väldigt omständigt och inkonsekvent
• Envägskommunikation
• WYSIWYG - redigering; effektivt men lite buggigt
• Krävs endast uppkoppling och en webbläsare för att uppdatera
• Inga kodkunskaper
• Återanvända redan färdigutvecklade funktioner
• Tvåvägskommunikation
DÅ
nu

5. CMS

7. Uppbyggnad
• Innehållet sparas i en databas
• Funktioner, layout och strukturen sparas i filer på servern
• Programmeringsspråk krävs för att koppla ihop informationen i
databasen med strukturen/layouten
• PHP - Wordpress
• ASP
• Ruby
• Pearl
• HTML och CSS styr layout och struktur
• WYSIWYG används för att mata in information i databasen

8. Uppbyggnad
• Innehåll i databasen
• Text
• Länkar
• Sökvägar
• I vissa fall kod
• Information som sparas på servern
• HTML-filer (egentligen PHP)
• CSS-filer
• Bilder, filmer mm.

9. • FTP - File Transfer Protocol
FTP
• Ansluter enheter med varandra, dator till server eller dator till dator
eller server till server, o.s.v.
• Cyberduck, Filezilla, inbyggt i finder
• Kan vara lite långsamt i Macsalarna, klicka bara en gång
• Kontrollera filrättigheterna
• Kan vara ett problem i Macsalarna
• 644

11. Utveckla
• Grundläggande themes eller mallar
• Göra egna mallar
• Återanvänd andras lösningar
• Redigera någon annans design
• Koden är Open Source (öppen källkod)
• Utveckla lokalt på datorn eller på servern

12. Andra fördelar med CMS
• Stora möjligheter för samarbete
• Datumbaserad publicering och kalenderfunktion
• Enklare hantering av språk, flerspråksstöd
• RSS-flöde
• Interaktivitet och kommentarsmöjligheter
• Användarhantering

13. • Wordpress
Alternativ
• Välkänt och välutvecklat, kan vara långsamt dock väldigt enkelt -
Mindre produktioner
• Drupal
• Välkänt och välutvecklat, avancerat för nybörjare men väldigt
kraftfullt - Större produktioner
• Typo3
• Kraftfullt, bra för företag med flera webbplatser med olika språk
• Joomla
• Samma som Wordpress

14. Wordpress

15. Wordpress
• Uppbyggt av themes, finns tio tusentals olika teman
• Härstammar från blogg världen
• Skrivs med PHP/MySQL och är Open Source
• Helt gratis för att använda, utvecklingskostnader tillkommer givetvis
• Kommersiellt bruk men även privat
• Statiska sidor gentemot bloggfunktionen
• Wordpress.org och wordpress.com STOR skillnad
• Ni ska använda wordpress.org

16. PHP
<?php
diverse kod
?>

17. PHP
<a href=”<?php diverse kod ?>” class=”link”>
Länk
</a>

18. PHP i Wordpress

19. • Post
• Page
• Categories
• Tags
• Comments
• Theme
• Childtheme
• Plugin
• Widget
WP-begrepp

20. WP-begrepp
• Post - ett inlägg på bloggsidan
• Page - en statisk sida
• Categories - kategoriserar hela sidans innehåll
• Tags - märker upp artiklar/statiska sidor med nyckelord/sökord
• Comments - kommentarer på en post eller page
• Theme - tema
• Childtheme - eget tema som länkar in ett grundtema
• Plugin - övergripande funktion
• Widget - funktion som läggs synlig för användaren

21. Fördelar med Wordpress
• Extremt mycket information att tillgå, passande för ”nybörjare”
• Utvecklas fortfarande
• Lätt att använda gentemot andra alternativ
• Men detta förändras hela tiden och fler alternativ börjar dyka upp

22. Installera Wordpress
1. Ladda hem Wordpress från wordpress.org
2. Anslut till Webbhotellet med FTP
3. Skapa en databas i kontrollpanelen på ditt webbhotell
4. Knappa in adressen www.dindomän.se
5. Följ instruktionerna
6. Glöm inte användaruppgifterna, skriv ner allt!
7. Logga in på www.dindomän.se/wp-login.php
8. Klart! Vill ni ha en mer utförlig beskrivning har jag skrivit ihop ett
dokument som ligger på itslearning
9. Använd INTE one-click-installer

23. Themes
• En färdig mall
• Använd Childtheme, krav för inlämningen
• Default-temat för Wordpress heter twentythirteen, nyligen släppt
• CMS - uppgiften?
• Skillnader på teman
• Bredd
• Struktur uppbyggnad - hur många kolumner
• Responsive design - varning för widgets
• Komplext
• Finns teman som är gjorda för att bygga vidare på

24. Vad ingår i ett tema
• style.css - krav
• index.php - krav
• header.php
• loop.php
• footer.php
• images-mapp
• screenshot.png

25. • Två vägar att gå:
Themes
• Designa ett eget tema
• Bra förståelse för hur det är uppbyggt
• Du får det du vill ha utan kompromisser
• Tar tid och krävs att du uppdaterar din kod
• Bygg vidare på någon annans arbete
• Använd i så fall childthemes
• Inte full koll på hela koden
• Kan behöva göra kompromisser vad gäller design
• Någon annan står för uppdateringarna
Rutiner

27. Grundelement - Header
• Logo/title <h1 class=”site-title”>
• Slogan/tagline <h2 class=”site-description”>
• Search <div class=”search-toggle”>
• Meny <nav id=”primary-navigation” class=”site-navigation”>

28. Verktyg
• Tutorials, både på youtube och vimeo
• Leta upp rätt selektor
• Xray - javascript funktion som läggs som ett bokmärke
• Inbyggda plugins i Safari, firefox och chrome
• Webbeditorerna kan också hjälpa till med olika sökfunktioner

29. CMS - uppgiften
• 3 högskolepoäng
• Portfolio/CV/Blogg
• Fundera på innehållet
• Använd antingen Twenty Twelve/Thirteen/Fourteen som parent theme
Ni måste alltså göra ett childtheme.