Web460 ppt-de-jul-wi-web-all-2020

Websites mit WordPress
WordPress als CMS
Herzlich Willkommen in der
Klubschule Winterthur

WordPress als CMS
Kursleitung:
Hansruedi Döbeli
ICT Architekt
Softwareentwicklung und Design
Mail: doebelih@hotmail.com

Lernziele
 Nach diesem Kurs sind Sie in der Lage, Websites mit
WordPress einzurichten, deren Inhalte selber zu
verwalten, das Layout mit Hilfe von „Themes“ anzupassen,
sowie Zusatzfunktionen via Plugins zu aktivieren.

Inhalt
 Was ist WordPress? Wo macht der Einsatz Sinn?
 Erste Schritte in WordPress
 WordPress Installation
 Front- und Backend von WordPress
 Artikel erstellen
 Bilder einbinden und Mediathek
 WordPress Themes und Plugins
 WordPress Menüs, Navigation
 Einstellungen und Sicherheitsaspekte
 Umgang mit Updates und Upgrades

Anschluss- Fortsetzungskurs
 WordPress: Blog erstellen
 WordPress: Online Shop erstellen
 WordPress: mach mehr aus deiner Webseite - Workshop

Datum Tag Block Bemerkung
13. 07 2020 Mo 1 Einführung, Einrichten, Grundlagen
14. 07. 2020 Di 2 Beitrag/Seiten, Medien,
Customizer, Kommentare
15. 07. 2020 Mi 3 Code, Interaktive Webseiten,
Funktionen, Menue, Events
16. 07. 2020 Do 4 Benutzerverwaltung, Shoplösung,
Events, Administration

WordPress als CMS
WordPress ist eine Open Source Blog Anwendung und
wurde 2003 aus dem Projekt b2/cafelog abgeleitet. Die
Multiple-Website-Funktionalität von WordPress wurde 2010
intergriert. Heute ist WordPress die am meist verwendete
Blog Anwendung, die hinter Millionen von Blogs und
Webseiten steht und von Millionen Menschen jeden Tag
verwendet wird.

Was ist WordPress?
 Entstanden als Blog-Tool (2003)
 Jetzt ein vollwertiges CMS
 Einfach zu bedienen
 Riesige Entwicklergemeinde
 Auf Webserver installiert lokal oder beim Provider
 Website-Bearbeitung im Browser
 kostenlos

Andere CMS
10%
Kein CMS
78%
WordPress
12%

Andere
16%
Blogger
3%
Typo3
3%
vBulletin
6%
Drupal
6%
Joomla
11%
WordPress
55%

Warum WordPress?
 Einfach
 Leistungsfähig
 Verbreitet (mit Abstand Nr. 1)
 Opensource

Lizenz
 Opensource GPLv2
 Nutzung und Anpassung kostenlos
 Anbieten nur unter gleicher Lizenz
 Hinweise dürfen entfernt werden
 Themes und Plugins auch GPL

WordPress.com vs WordPress.org
 WordPress.com
 beschränkter Zugriff
 keine zusätzliche Plug-Ins
 kein eigenes Designe (Themes)
 kein zugriff auf Code
 WordPress.org
 eigenes Hosting
 voller Zugriff
 eigenverantwortlich für
Aktualisierung sowie
Backups

Hostpoint WordPress installieren

Hostpoint WordPress installieren
Installation 2. Instanz in separates Verzeichnis

WordPress erste Schritte
 Bildbearbeitung in der Cloud:
 http://www.bilder-editieren.de (einfaches Werkzeug)
 http://www.online-image-editor.com/?language=deutsch
(erweitertes Werkzeug)

 Aufbau Grundgerüst HTM5 Seite – alle Bereiche:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Beispiel HTML5 Grundgerüst</title>
<meta name="description"
content="Kurzbeschreibung">
<link href="design.css" rel="stylesheet">
</head>
<body>
Arbeitsbereich
</body>
</html>

Auswahl von Themes:
Name: Bemerkung: Link:
WordPress
Themes
Premium
Themes
www.wordpress.org
Elmastudio Einfache
Themes
www.elmastudio.de/wordpress-themes/
Elegant
themes
Diva unter
den
Vorlagen
www.elegantthemes.com/
themesforest Plattform
mit riesiger
Auswahl
themesforest.net/
11.07.2020

Name: Bemerkung: Link:
WP Lightbox 2 Fotogallery https://de-ch.wordpress.org/plugins/wp-lightbox-
2/
Contact Form 7 Kontakt-
formular
https://de.wordpress.org/plugins/contact-form-7/
Woo Commerce Storefront https://woocommerce.com/storefront/
Top 10 Popular
posts plugin
Top 10 Popular
plugin for
Wordpress
https://de-ch.wordpress.org/plugins/top-10
Antispam Bee https://srd.wordpress.org/plugins/antispam-bee/
Event Calendar Eventkalender
mit Aktiven
Events
https://de.wordpress.org/plugins/the-events-
calendar/
Plug Ins:

Name: Link:
Checkliste zur rechtlich
sicheren Website in der
Schweiz
http://www.nailedit.ch/checkliste-rechtlich-sichere-
website-schweiz/
Impressum-Generator https://www.bag.ch/impressum-generator
Schweizer Musterverträge
(WEKA; Zahlungspflichtig)
http://www.schweizer-vertraege.ch/Suchbegriff/60-
AGB
Rechtliche Aspekte zu Webseiten:

 Typische Verbindung zum Internet bei Heimanwendern:

 Typische Verbindung zum Internet bei Firmen:

 Ein kleiner Ausschnitt des World Wide Web:

Was bedeutet?
 Dunkelblau: net, ca, us,
 Grün: com, org,
 Rot: mil, edu, tv
 Gelb: jp, cn, tw, au, de,
 Magenta: uk, it, pl, fr,
 Gold: br, kr, nl,
 Weiss: unbekannt,

Was sind Widgets?
 Ein Widget ist eine Komponente eines grafischen Fenstersystems.
 Das Widget besteht zum einen aus dem Fenster, einem sichtbaren Bereich,
der Maus- und/oder Tastaturereignisse empfängt, und zum anderen aus
dem nicht sichtbaren Objekt, das den Zustand der Komponente speichert
und über bestimmte Zeichenoperationen den sichtbaren Bereich verändern
kann.
 Widgets sind immer in ein bestimmtes Fenstersystem eingebunden und
nutzen dieses zur Interaktion mit dem Anwender oder anderen Widgets des
Fenstersystems.

Responsive Webdesign
 Beim Responsive Webdesign handelt es sich um ein gestalterisches und
technisches Paradigma zur Erstellung von Websites, so dass diese auf
Eigenschaften des jeweils benutzten Endgeräts, reagieren können.
 Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der
Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird.
 Dies betrifft insbesondere die Anordnung und Darstellung einzelner
Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die
Nutzung unterschiedlicher Eingabemethoden von Maus (klicken,
überfahren) oder Touchscreen (tippen, wischen).
 Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3
(hier insbesondere die Media Queries) und JavaScript.

Responsive Webdesign

Bild-Formate:
 JPEG oder JPG ist die gebräuchliche Bezeichnung für die verschiedenen
Methoden der Bildkompression. Die Bezeichnung „JPEG“ geht auf das
Gremium Joint Photographic Experts Group zurück, das die JPEG-Norm
entwickelt hat.
 PNG Portable Network Graphics ist das meistverwendete verlustfreie
Grafikformat im Internet. Es ist ein universelles, vom WWW Consortium
(W3C) anerkanntes Grafikformat für Rastergrafiken mit verlustfreier
Verringerung des Platzbedarfs von Daten.
 Gif Das Graphics Interchange Format, kurz GIF, ist ein Grafikformat für
Bilder mit Farbpalette (Farbtabelle mit max. 256 Farben, inkl. einer
„Transparenzfarbe“). Es erlaubt eine verlustfreie Kompression der Bilder.
Darüber hinaus können mehrere (übereinanderliegende) Einzelbilder in
einer Datei abgespeichert werden, die von geeigneten
Betrachtungsprogrammen als Animationen interpretiert werden.

Bilder sagen mehr als 1000 Worte!
http://www.online-image-editor.com/?language=deutsch

Web460 ppt-de-jul-wi-web-all-2020

Weitere ähnliche Inhalte

Ähnlich wie Web460 ppt-de-jul-wi-web-all-2020

Web460 ppt-de-jul-wi-web-all-2020