CMS- Content management system

• CMS

• Server, webbhotell och FTP

• Wordpress, ställ mycket frågor

• Om vi hinner - Snabb genomgång av CMS - uppgiften

Agenda

• 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

Nu & Då

DÅ

nu

CMS

• 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

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.

Uppbyggnad

• FTP - File Transfer Protocol

• 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

FTP

• 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

Utveckla

• 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

Andra fördelar med CMS

• Wordpress

• 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

Alternativ

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

Wordpress

PHP

<?php diverse kod?>

PHP

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

PHP i Wordpress

• Post

• Page

• Categories

• Tags

• Comments

• Theme

• Childtheme

• Plugin

• Widget

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

WP-begrepp

• 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

Fördelar med 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

Installera Wordpress

• 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å

Themes

• style.css - krav

• index.php - krav

• header.php

• loop.php

• footer.php

• images-mapp

• screenshot.png

Vad ingår i ett tema

• Två vägar att gå:

• 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

Themes

Rutiner

• 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”>

Grundelement - Header

• 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

Verktyg

• 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.

CMS - uppgiften