Wordpress 4.0 oder: Wie man ein CMS benutzt und administriert.

Präsentation zum Thema: "Wordpress 4.0 oder: Wie man ein CMS benutzt und administriert."—  Präsentation transkript:

1 Wordpress 4.0 oder: Wie man ein CMS benutzt und administriert.

2 HTML & CSS Hallo... Hallo...  Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese:  Bevor er die grosse Überschrift darstellt, schaut der Browser in “meinCSS.css” nach, ob hier ein bestimmtes Aussehen für h1- Elemente definiert ist – es ist, also wird “Hallo” orange und fett dargestellt h1 { color: orange; font-weight: bold; } h1 { color: orange; font-weight: bold; }

3 HTML & CSS Home About Contact Home About Contact  Noch immer wird “meinCSS.css” benutzt:  Wenn der Browser sieht, dass dieser ganze Abschnitt (div) die id “nav” hat, schaut er in “meinCSS.css” nach, was das für die Darstellung bedeutet – in diesem Fall, dass der Abschnitt mit den drei Links die rechten 60% der Seite einnehmen soll... #nav { width: 60%; float: right; }... #nav { width: 60%; float: right; }...

4 Inhalt | Struktur | Layout Hallo! Statische Webseite Der Webdesigner erstellt die Dateien (HTML, ggf. CSS separat), die der Host dann im Internet für die Clienten (Browser) bereit stellt. Also sieht jeder dieselbe, unveränderliche Webseite, die der Webdesigner gestaltet hat. Layout der Seite (CSS, ggf. separate Datei ) Layout der Seite (CSS, ggf. separate Datei ) Inhalt der Seite (Buchstaben,...) Inhalt der Seite (Buchstaben,...) Struktur der Seite (HTML) Struktur der Seite (HTML)

5 Inhalt | Struktur | Layout Hallo! Dynamische Webseite: Der Webdesigner schreibt ein Programm (in PHP), das die benötigten Dateien (HTML, ggf. CSS) produziert. Deshalb kann die Seite unterschiedlich aussehen, in Abhängigkeit von Rechten oder Verhalten des Benutzers. Layout der Seite (CSS, ggf. separate Datei ) Layout der Seite (CSS, ggf. separate Datei ) Inhalt der Seite (Buchstaben,...) Inhalt der Seite (Buchstaben,...) Struktur der Seite (HTML) Struktur der Seite (HTML)

6 Inhalt | Struktur | Layout Hallo! WEB2.0 / CMS: Die einzubeziehenden Inhalte werden in einer Datenbank gespeichert. Daher können sie flexibel benutzte/geordnet und sogar online geändert werden (mit den entsprechenden Rechten). Layout der Seite (CSS, ggf. separate Datei ) Layout der Seite (CSS, ggf. separate Datei ) Inhalt der Seite (Buchstaben,...) Inhalt der Seite (Buchstaben,...) Struktur der Seite (HTML) Struktur der Seite (HTML)

7 Ein Anwendungsbeispiel Frontend: vom Client auszuführender Code  was der Endbenutzer zu sehen bekommt Backend: vom Server auszuführender Code (inkl. Einstellungen)  bestimmen das Ergebnis im Frontend

8 Bei einem Content Management System – kurz CMS – geht es darum, den Inhalt einer Webseite, also den Content, zu verwalten. Im Gegensatz zu statischen Webseiten, deren Inhalt sich nicht oder nur selten ändert, werden CMS für dynamische Webseiten mit wechselndem Inhalt eingesetzt. Mit Hilfe von CMS ist es möglich, Inhalte ohne Programmierkenntnisse zu erstellen. Außerdem lassen sich Benutzer in Gruppen organisieren, denen wiederum unterschiedliche Rechte vergeben werden können. So lässt sich ziemlich genau einstellen, welcher Benutzer was darf. C ontent M anagement S ystem Bild: www.rackspace.com/blog/choosing-an-open-source-content-management-system-infographic/ Text: Lars Becker; http://www.wp-campus.de/content-management-system-kurz-erklaert/#prettyPhoto Die gängigsten kostenlosen CMS sind: WordPress Joomla Drupal Typo3

9 Infografic: http://www.cms2cms.com/blog/content-management-systems-jungle-how-to-find-your-way/

10 Also los: WordPress installieren Der Host ist bereits angemietet, die zu WordPress 4 gehörenden Dateien sind auf den Server geladen, die Datenbank ist angelegt, und das für jede(n) von ihnen. Jetzt müssen sie ihre WP-Version nur noch installieren: http://www.nksainf.ch/nicolasruh/wp- admin/install.php http://www.nksainf.ch/nicolasruh/wp- admin/install.php hier sollte natürlich ihr Name stehen, siehe E-Mail

11 Wird im header angezeigt, hat nichts mit der URL zu tun. vornamenachname Passwort bitte merken! geben sie eine funktionierende Adresse an Häkchen entfernen !

12 hier geht’s zum administrator-login

13 Einloggen : http://www.nksainf.ch/nicolasruh/wp-admin/

14 Backend : http://www.nksainf.ch/nicolasruh/wp-admin/

15 Frontend : http://www.nksainf.ch/nicolasruh/

16 Der Beitrag... ist die Grundeinheit eines Blogs (WP kennt auch Seiten, aber damit beschäftigen wir uns später)

17 http://www.topwebhostinggeek.com/how-to-use- wordpress-features-and-functionalities-infographic.htm

18 Aufgabe Erstellen sie einen Beitrag, in dem sie möglichst verständlich erklären, was ein CMS ist. Erwähnen sie auch, welche Vorteile ein solches System gegenüber einer herkömmlichen Webseite hat.

19 Aufgaben 1.Zunächst sorgen sie für ein wenig Inhalt: – Erstellen und Veröffentlichen sie > 5 Beispiel-Beiträge – Experimentieren sie auch mit Bildern, Videos, Links,... – Machen sie sich mit der Text-Ansicht des Editors vertraut – Setzen sie Beitragsbilder, Schlagwörter und Kategorien ein – Überprüfen sie das Ergebnis im Frontend 2.Machen sie sich weiter mit dem Backend vertraut: – schauen sie sich an, welche Einstellungen man vornehmen kann – probieren sie Verschiedenes aus, z.B. neues Theme installieren, Theme anpassen, Kommentare moderieren – Aber Achtung! Sie sind der Administrator und müssen Dinge ggf. auch wieder in Ordnung bringen

20 Die grosse Aufgabe Sie haben jetzt ihre eigene WordPress-Seite. Auf dieser Seite sollen im Laufe der Zeit möglichst viele Informationen aufgeschaltet werden, die ihnen bei der Vorbereitung der Abschlussprüfung helfen können (Binf und/oder andere Fächer) Als Admin sorgen sie dafür, dass – die Inhalte der Seite sinnvoll ausgewählt und inhaltlich korrekt sind, die Sprache klar und richtig ist und nötige Quellen angegeben sind – die Strukturierung von Seite und Inhalten es Besuchern einfach macht, Relevantes zu finden – das Layout der Seite einheitlich und ansprechend gestaltet ist und die Ordnung klar transportiert Ihre Seite wird gegen Ende des SJ anhand diese Kriterien bewerten (ganze Note, Kriterien bekommen sie noch genauer)

21 Die letzten 15 Minuten... Erstellen sie mindestens einen Beitrag, mit 1.Gut gewähltem Titel 2.Sauber formuliertem Text (ca. 5 – 10 Sätze) 3.Beitragsbild, z.B. Screenshot 4.Kategorie(en) & Tag(s) – sobald wir das eingeführt haben Inhaltlich soll es in diesem Beitrag darum gehen, was sie heute im BInf (neues) gelernt haben. Heute könnten sie z.B. einen Beitrag zu Frontend/Backend schreiben, oder erklären, was ein CMS ist. ab jetzt immer

22 Ordnung nicht nur in Wordpress

23 Bilder ordnen nach Datum nach Kategorien (hierarchisch) nach Tags

24 Taxonomien (= hierarchische Ordnung) Beispiele: Spezies Ordnerstruktur Webseitennavigation Vorteile: durchdacht übersichtlich Nachteile: nur eine Ordnung unflexibel manches schwer einzuordnen

25 Tags (= Schlagworte) Beispiele: Tags auf Facebook Schlagwortverzeichnis Vorteile: flexibel erlaubt Mehrfachnennung Nachteile: müssen sinnvoll zugewiesen werden oft unübersichtlich kann fliegen Raubtier Exoskelettnachtaktiv

26

27 Aufgabe 1.Denken sie sich sinnvolle Kategorien & Tags für ihre bisherigen Posts aus (auf Papier, mit der verteilten Liste) 2.Taggen und kategorisieren sie ihre Posts tatsächlich

28 Weblog = Pages, Posts & Tags

29 HTML & CSS (Repetieren und Vertiefen)

30 HTML & CSS seite.html  Das Beispiel, das uns jetzt eine Weile beschäftigen wird  Sehr nah am WordPress Standard-Aussehen (nur etwas vereinfacht und nicht mehr dynamisch)  Das Beispiel, das uns jetzt eine Weile beschäftigen wird  Sehr nah am WordPress Standard-Aussehen (nur etwas vereinfacht und nicht mehr dynamisch)....site-header { width: 100%; height: 48px; }....site-header { width: 100%; height: 48px; }... style.css

31 HTML & CSS Ein Beitrag Text Text Text Text Text Text Text Noch ein Beitrag Text Text Text Text <!-- #post-##  Ein Beitrag Text Text Text Text Text Text Text Noch ein Beitrag Text Text Text Text <!-- #post-##  seite.html  seite.html enthält zwei Beispiel-Beiträge  In Teil 1 des Arbeitsblatts geht es darum, die Details der Formatierung diese Beiträge anzupassen  seite.html enthält zwei Beispiel-Beiträge  In Teil 1 des Arbeitsblatts geht es darum, die Details der Formatierung diese Beiträge anzupassen....post { margin: 2px 18px; color: #002AFF; }....post { margin: 2px 18px; color: #002AFF; }... style.css

32 HTML & CSS seite.html  site.html enthält drei Hauptcontainer, der (mittlere) Hauptinhaltsbereich ist weiter unterteilt  In Teil 2 des Arbeitsblatts geht es darum, diese Container zu positionieren, um bestimmte Layouts zu erreichen  site.html enthält drei Hauptcontainer, der (mittlere) Hauptinhaltsbereich ist weiter unterteilt  In Teil 2 des Arbeitsblatts geht es darum, diese Container zu positionieren, um bestimmte Layouts zu erreichen....main-content { float: right; } #secondary { float: left; }....main-content { float: right; } #secondary { float: left; }... style.css

33 Typisches Layout mit float

34 Layout-Variationen Das Grundgerüst kann man sich erstellen lassen, z.B. von diesem Layout-Generator: http://csscreator.com/version2/pagelayout.phphttp://csscreator.com/version2/pagelayout.php

35

36 1. Http-Request an URL 2. HTML-Datei schicken 3. ggf. weitere Dateien nachladen Statische Webseite Client/Browser: Erfragt Dateien (per URL) und stellt sie dar. www-Server: Speichert Dateien (HTML, CSS, JS,... ) und stellt sie auf Anfrage bereit HTML, CSS, JS,... Dateien schreiben Host mieten und einrichten Dateien hochladen (per FTP) HTML, CSS, JS,... Dateien schreiben Host mieten und einrichten Dateien hochladen (per FTP)

37 1. Http-Request an URL 2. HTML-Datei schicken 3. ggf. weitere Dateien nachladen Dynamische Webseite Client/Browser: Erfragt Dateien (per URL) und stellt sie dar. www-Server: Speichert PHP-Skripte, die bei Anfrage ausgeführt werden und HTML- Dateien produzieren PHP, CSS, JS,... Dateien schreiben Host mieten und einrichten Dateien hochladen (per FTP) PHP, CSS, JS,... Dateien schreiben Host mieten und einrichten Dateien hochladen (per FTP)

38 1. Http-Request an URL 2. HTML-Datei schicken 3. ggf. weitere Dateien nachladen CMS (content management system) Client/Browser: Erfragt Dateien (per URL) und stellt sie dar. www-Server: Erfragt Inhalte der Seite aus einer Datenbank (SQL), baut diese dann mit PHP in HTML-Datei ein erfragt Daten gibt Daten zurück Dann: Interaktion wie normaler Client, aber als admin eingeloggt  Seite verändern über Backend Zu Beginn: CMS (inkl. Datenbank) installieren

39 Dynamik mit JavaScript Wenn Ereignis eintritt (z.B. Benutzer fährt mit Maus über ein Bild)...... dann rechnet der Browser mithilfe der bereits heruntergeladenen JavaScript-Dateien aus, wie sich die dargestellte Webseite verändert Client/Browser: interpretiert JavaScript Programme

40 Zeitachse kann mySQL Anfragen beantworten und Daten dauerhaft (= Persistenz) speichern, kümmert sich um die Verwaltung der Daten WWW-Server Browser Datenbank Server Server Client weiss, wie man WWW-Server findet, versteht HTML & CSS (und JavaScript), kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET) Browser WWW-Server Server Client weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt HTML-Code an Browser weiter statische Webseiten dynamische Webseiten HTML-Dateien (CSS, JavaScript) mySQL JavaScript Auf einen Blick: PHP

41 Datenbanken DB-Anfragen mit mySQL

42 Wozu Datenbanken? Daten / WerteLösungAbfrage benötigtWo Gespeichert? wenigeVariablenNameArbeitsspeicher (des laufenden Programms) einigeDatenstrukturen (z.B. Arrays) Name[Index] vieleDatenbankSQL Tabellenname, Attribute, ggf. Filter Datenbankserver (zentral, persistent, multiuser) sehr vieleDatenbank extrem vieleDatenbank(en)

43 Die Grundidee Anwender, Anwendungen Abfrage (SQL) Datenbanksystem (DBS) Antwort (Tabelle) IDStringZahlDatum 1xxx3241.2.2013 3LoL173.6.1989

44 Fachbegriffe: (DBS = DB + DBMS) Datenbank (DB) Schnittstelle: Structured Query Language (SQL) Datenbanksystem (DBS) Anwendungen Datenbank Management System (DBMS)

45 Die Fundbüro Analogie Fundstücke Schnittstelle??? Fundbüro Kunden Verwalter

46 Definition Ein Datenbanksystem (DBS) ist eine Zusammenfassung von strukturierten Daten (Datenbank, DB), die von einer speziellen Software (Data Base Management System, DBMS) verwaltet und über eine definierte Schnittstelle vielen Nutzern oder Anwendungen gleichzeitig und kontrolliert zur Verfügung gestellt werden.

47 Datenbanksysteme Vorteile Dauerhafte Speicherung von großen Datenbeständen Redundanz und Inkonsistenz vermeiden durch die zentrale Datenverwaltung Effiziente Verwaltung von großen Datenbeständen (Speicherplatz, Zugriffsgeschwindigkeit) Einheitliche Schnittstelle (Anfragesprache) für den Zugriff auf Daten Regelt den gleichzeitigen Zugriff durch mehrere Benutzer oder Anwendungen Ermöglicht zentrale Backup-Strategien Nachteile nur noch indirekter Zugriff auf Daten zusätzliche Abstraktionsebene zusätzlicher Aufwand (Datenbankserver bereitstellen, extra Anfragesprache lernen)

48 Wer benutzt ein DBS? und warum (nicht)? Amazon? Wikipedia? Ryanair? Ihre Bank? Ein Chat? Ein Blog? Ihr E-mail Client? iTunes? iPhoto? Picasa? Flickr? Google? Windows?

49 Datenbanksysteme benutzen Anwender, Anwendungen Abfrage (SQL) Datenbanksystem (DBS) Antwort (Tabelle) IDStringZahlDatum 1xxx3241.2.2013 3LoL173.6.1989

50 Was für Daten werden in einem DBS verwaltet? Was ist überhaupt ein Datum? Welche Datenformate werden unterstützt? In welcher Form existieren die Daten in der Datenbank? Fundstücke Fundbüro Kunden Verwalter

51 Die „strukturierten Daten“... stellt man sich am besten als Regale oder Tabellen vor In welcher Form die Daten tatsächlich (physikalisch) gespeichert sind, ist unerheblich, da sie sowieso nur über die Schnittstelle (Abfragesprache SQL) zugänglich sind LNRNameEinwohnerHauptstadtKontinent DKDänemark5.16KopenhagenEuropa DDeutschland81.34 BerlinEuropa INDIndien761.00 DelhiAsien RWARwanda6.30 KigaliAfrika …………… Land

52 Elemente einer Tabelle Fundstücke NummerArtFarbeFunddatumFundortFinder 14555SchirmBlau08.13.2000Bus Nr.12Stalder Roger Wichleren 8779 Neuhausen 14556Schlüssel-09.12.2000BahnhofHegi Roger Brandweg 12 9876 Zuchwil 14557... Zeile, Datensatz, Entität Attribute, Eigenschaften Tabellenname Schlüsselattribut, Hauptschlüssel Eigenschaftswerte ~ Domain Eigenschaftswerte ~ Domain Tabelle, Entitätsmenge

53 Fundstücke Farbe Finder Art Fundort Nummer Funddatum ER-Diagramm Attribute, Eigenschaften Tabellenname Schlüsselattribut, Hauptschlüssel Zeile, Datensatz, Entität Eigenschaftswerte Tabelle, Entitätsmenge

54 54 Schnittstelle SQL SQL = Structured Query Language. – Bezeichnet eine Sprache zur Kommunikation mit Datenbanken. – Ist international genormt und wird von vielen DBS verstanden. – Wird im Folgenden zur Formulierung von Abfragen eingesetzt. Syntax einer (einfachen) SQL-Abfrage: SELECT [Attribute] FROM [Tabelle] WHERE [Bedingung]; Die WHERE-Klausel ist optional, aber oft wichtig (= Filter) Es gibt noch einige weitere optionale Klauseln, z.B. zum Ordnen oder Zusammenfassen der Antwort-Tabelle

55 – SELECT Name, Einwohner, Kontinent FROM Land WHERE Einwohner > 10 Datenbankzugriff - Ein erstes Beispiel Länder mit über 10 Mio. Einwohner LNRNameEinwohnerHauptstadtKontinent DKDänemark5.16KopenhagenEuropa DDeutschland81.34 BerlinEuropa INDIndien761.00 DelhiAsien RWARwanda6.30 KigaliAfrika …………… Land Ergebnistabelle NameEinwohnerKontinent Deutschland81.34Europa Indien761.00Asien ……… Diese Tabelle stellen wir uns vor, eigentlich müssen wir aber gar nicht wissen, wie die Daten intern strukturiert sind Diese Tabelle bekommen wir als Antwort geschickt, sie enthält den zur Anfrage passenden Teil des Datenbestands

56 http://dev.mysql.com/doc/refman/5.5/en/select.html

57 SQL-Abfrage Üben 1.SQLTutorial.zip entpacken 2.index.html (im entpackten Ordner) mit Browser öffnen 3.Kapitel 1 & 2 machen (Lektion & Übung, probenrelevant)

58 Exkurs: Datenbanken im Internet Das Internet wird interaktiver: WEB 2.0 Inhalte (z.B. Text, Bilder, Daten,...) einer Seite werden separat gespeichert, als Datensätze in einem DBS, und erst beim Aufruf der Seite dynamisch (meist per PHP) in ein HTML- Gerüst eingebaut Damit kann der Inhalt einer dynamischen Webseite vom Benutzer abhängig gemacht werden (Identität, Rechte, Verhalten,...)

59

60 Zeitachse kann mySQL Anfragen beantworten und Daten dauerhaft speichern, kümmert sich um die Verwaltung der Daten WWW-Server Browser Server Client weiss, wie man WWW-Server findet, versteht HTML (+ Formulare) & CSS, kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET) Browser WWW-Server Server Client weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt HTML-Code an Browser weiter statische Webseiten dynamische Webseiten HTML-Dateien, PHP mySQL Datenbank Server DB DBS DBMS Web2.0 auf einen Blick:

61 Forms (HTML) Paint Brushes Erasers Quantity: ddedde ddedde ddedde ddedde ddedde ddedde

62 HTML  PHP Paint Brushes Erasers Quantity: ddedde ddedde ddedde ddedde ddedde ddedde http://www.mywebsite.ch/process.php?item=##&quantity=##"

63 PHP  SQL  HTML <?php $quantity = $_GET['quantity']; $item = $_GET['item']; $result = mysql_query("SELECT price FROM goods WHERE item=$item") $price =... echo "You ordered ". $quantity. " ". $item. ". "; echo "Total price: ". $quantity*$price. "; ?>

64 Suchen & Finden im Internet

65 Wie Google funktioniert „World's digital content equivalent to stack of books stretching from Earth to Pluto 10 times“ The Guardian, May 2010 Und wie durchsucht Google jetzt diesen riesigen Datenberg in 0.18 Sekunden?

66 Bots, Spiders, Crawlers,...... sind Programme, die im Internet surfen indem sie sich an Links entlang hangeln Google sammelt Informationen zu allen so gefundenen Seiten...... und trägt sie in eine riesige Datenbank ein

67 Bots, Spiders, Crawlers,...

68 Suchanfrage 1.Finden ist einfach: – In welchen Dokumenten kommen die gesuchten Worte vor? Variationen einbeziehen (z.B. ue/ü, Zug/Züge,...), Füllworte ignorieren (z.B. und, oder,...)  einfache DB-Abfrage: SELECT... 2.Ordnen ist schwer: – Geheime Formel berechnet Ranking Anzahl und Nähe der gesuchten Begriffe, wo auf der Seite sie stehen, Treffer/nicht-Treffer Verhältnis, etc. Am wichtigsten sind Links  „Wichtigkeit“ der Seite

69

70

71 Das Herz von Google PageRank: Link- Gewichtung

72 Google effizient einsetzen: windows –microsoft link:www.nksa.ch site:www.nksa.ch Matura define: firewire firewire filetype:pdf 5+9-(13*9)/PI 1234 in binary 12 cm in inch the answer to life, the universe and everything

73 Such-Alternativen: – http://www.bing.com/ http://www.bing.com/ – http://www.yahoo.com/ http://www.yahoo.com/ – http://de.ask.com/ http://de.ask.com/ Kataloge – http://www.dmoz.org/ http://www.dmoz.org/ – http://dir.yahoo.com http://dir.yahoo.com – (finden sie einen deutschen Katalog?) Metacrawler – http://www.metacrawler.c om http://www.metacrawler.c om Spezialsuchmaschinen – http://tel.search.ch http://tel.search.ch – http://www.map24.ch http://www.map24.ch – http://www.cineman.ch http://www.cineman.ch – http://images.google.com http://images.google.com – http://news.google.com http://news.google.com – http://groups.google.com http://groups.google.com –...

74 http://www.wolframalpha.com/