PowerPoint-Präsentation - NKSA-Binf
Werbung
Wordpress 4.0
oder:
Wie man ein CMS benutzt und
administriert.
HTML & CSS
Der Browser fragt
beim Server nach der
Datei “meinCSS.css”,
und bekommt diese:
h1 {
<!DOCTYPE ... >
color: orange;
<html>
font-weight: bold;
<head>
}
<link rel="stylesheet"
href="meinCSS.css" type="text/css" />
</head>
Bevor er die grosse Überschrift
<body>
darstellt, schaut der Browser in
<h1>Hallo</h1>
“meinCSS.css” nach, ob hier ein
...
bestimmtes Aussehen für h1Elemente definiert ist – es ist, also
</body>
wird “Hallo” orange und fett
</html>
dargestellt
HTML & CSS
<!DOCTYPE ... >
<html>
<head>
Noch immer wird
“meinCSS.css” benutzt:
<link rel="stylesheet" href="meinCSS.css"
</head>
<body>
...
#nav {
width: 60%;/>
type="text/css"
float: right;
}
...
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Wenn der Browser sieht, dass dieser ganze Abschnitt (div)
</div>
die id “nav” hat, schaut er in “meinCSS.css” nach, was das
</body>
für die Darstellung bedeutet – in diesem Fall, dass der
</html>
Abschnitt mit den drei Links die rechten 60% der Seite
einnehmen soll
Inhalt | Struktur | Layout
<div id=„chat“> Hallo! </div>
Layout der Seite
(CSS, ggf. separate Datei)
Inhalt der Seite
(Buchstaben, ...)
Struktur der Seite
(HTML)
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.
Inhalt | Struktur | Layout
<div id=„chat“> Hallo! </div>
Layout der Seite
(CSS, ggf. separate Datei)
Inhalt der Seite
(Buchstaben, ...)
Struktur der Seite
(HTML)
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.
Inhalt | Struktur | Layout
<div id=„chat“> Hallo! </div>
Layout der Seite
(CSS, ggf. separate Datei)
Inhalt der Seite
(Buchstaben, ...)
Struktur der Seite
(HTML)
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).
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
Content Management System
Die gängigsten
kostenlosen CMS sind:
•
WordPress
•
Joomla
•
Drupal
•
Typo3
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.
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
Infografic: http://www.cms2cms.com/blog/content-management-systems-jungle-how-to-find-your-way/
Also los: WordPress installieren
Der Host ist bereits angemietet, die zu WordPress 4.0
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/wpadmin/install.php
hier sollte natürlich ihr
Name stehen, siehe Zettel
Wird im header angezeigt, hat
nichts mit der URL zu tun.
vornamenachname
Passwort bitte merken!
geben sie eine funktionierende
Adresse an
Häkchen entfernen !
hier geht’s zum administrator-login
Einloggen: http://www.nksainf.ch/nicolasruh/wp-admin/
Backend: http://www.nksainf.ch/nicolasruh/wp-admin/
Frontend: http://www.nksainf.ch/nicolasruh/
Der Beitrag...
• ist die Grundeinheit eines Blogs
(WP kennt auch Seiten, aber damit beschäftigen wir uns später)
http://www.topwebhostinggeek.com/how-to-usewordpress-features-and-functionalities-infographic.htm
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
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
1. Http-Request an URL
2. HTML-Datei schicken
3. ggf. weitere Dateien nachladen
• HTML, CSS, JS, ... Dateien schreiben
• Host mieten und einrichten
• Dateien hochladen (per FTP)
Dynamische Webseite
Client/Browser:
Erfragt Dateien (per URL)
und stellt sie dar.
www-Server:
Speichert PHP-Skripte, die
bei Anfrage ausgeführt
werden und HTMLDateien produzieren
1. Http-Request an URL
2. HTML-Datei schicken
3. ggf. weitere Dateien nachladen
• PHP, CSS, JS, ... Dateien schreiben
• Host mieten und einrichten
• Dateien hochladen (per FTP)
CMS
www-Server:
(content management system)
Client/Browser:
Erfragt Dateien (per URL)
und stellt sie dar.
Erfragt Inhalte der Seite
aus einer Datenbank
(SQL), baut diese dann mit
PHP in HTML-Datei ein
1. Http-Request an URL
2. HTML-Datei schicken
3. ggf. weitere Dateien nachladen
Dann: Interaktion wie normaler
Client, aber als admin eingeloggt
Seite verändern über Backend
Zu Beginn: CMS (inkl. Datenbank) installieren
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)
Die letzten 15 Minuten...
• Erstellen sie mindestens einen Beitrag, mit
1.
2.
3.
4.
Gut gewähltem Titel
Sauber formuliertem Text (ca. 5 – 10 Sätze)
Beitragsbild, z.B. Screenshot
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.
Auf einen Blick:
Browser
Zeitachse
WWW-Server
statische Webseiten
dynamische Webseiten
Browser
WWW-Server
Datenbank
Server
JavaScript
WWW-Server
Browser
weiss, wie man WWW-Server findet,
versteht HTML & CSS (und JavaScript),
kümmert sich um die Darstellung, kann
Parameter übergeben (POST/GET)
Client
weiss, wie man mit Datenbank
Server spricht, kann Parameter
auswerten und PHP verarbeiten,
gibt HTML-Code an Browser weiter
HTML-Dateien
(CSS,
JavaScript)
kann mySQL Anfragen beantworten
und Daten dauerhaft (= Persistenz)
speichern, kümmert sich um die
Verwaltung der Daten
Server
PHP
Client
mySQL
Server
