Vorab: Begrüßung, Name, Ziel/Wünsche & Kenntnisstand Websites, WordPress?

Druck-Dateien / Handouts: Themen + Inhalte des WS (pdf)WordPress + Angebot (pdf)


  1. Struktur und Bereiche einer Website für Besucher & User

        1. Grafik dazu (klick)
        2. am Beispiel von erkant.de (Header, Hauptteil, Footer, Kommentar-Funktion, Social-Media-Buttons, etc. –
        3. siehe auch Lern-Video Nr. 01
          1. ggf eingeloggt auf media4Teens.de (Themes/Design, Menü, Plugins, etc)
        4. Was meint “responsive” Website?
          1. Grafik
          2. screentests auf tiefenschaerfe.de
          3. i am responsive? Link
  2. Was ist was (Online-Formate)
      1. Website (Image-Website, z.B. tiefenschaerfe.de, )
      2. Blog (zeitl. struktriertes “Tagebuch” in Ich-Form z.B.)
      3. Wiki (eine Online-Nachschlagewerk -> viele Menschen “Besucher” gestalten es)
      4. Lernportal / LMS (Learning-Management-System) z.B. media4teens.de am Beispiel von WS Nachhaltige Smartphones inkl. H5P
        1. (Login jetzt mgl, wer mag -> Das Login erfolgt über einen Link oder den Pfad im Browser, https://media4teens.de/wp-login.php
          • User: Gast-Lehrer-1 bis -10, Passwort: Gast-Lehrer-1 bis -10
      5. Online-Schülerzeitung (siehe erkant.de)

  3. Was ist ein CMS? Was WordPress?

    1. siehe eigener Beitrag
    2. Download PDF-Handout WP + H5P


  4. Was kostet eine Website und was nicht?
  5. Was sollte bei einem Online-Projekt beachtet werden und wie machen Schulen sich unabhängig?
    • Team-Zusammensetzung (alle Fachbereiche, von IT bis Prozessverantwortlichen und Usern (SuS, Eltern)
    • Unabhängigkeit von Agentur
      • Verkaufs-Humbug, übertriebene Versprechen
      • Artfiles vs 1und1, Support,
      • Zugangsdaten, Passworte (siehe oben)
    • Website selbst pflegen können
      • User (Autoren, Redakteure, Admins)
    • Design-Veränderungen
      • “Enfold” vs andere Themes
    • Zusendung aller Dateien und Passworte!

  6. Was wird auf der Website gebraucht und wie sehen die einzelnen Projektschritte aus?

Heißt es jetzt eigentlich Homepage, WebSITE, WebSEITE (engl. WebPAGE), InternetSEITE? Und was sind eine Landing- und eine One-Page?

  • WebSite ist der fachlich richtige Begriff für einen “Platz” im Internet, sprich für einen kompletten Internet-Auftritt, der sich hinter einer Domain (URL, Webadresse) verbirgt.
  • Eine Homepage ist eigentlich nur die Hauptseite, also die Startseite einer gesamten Website, wird umgangssprachlich aber oft für den gesamten Web-Auftritt genutzt. Richtiger Weise ist die Homepage, die 1. Seite auf der Nutzer über die URL/Domain-Adresse landet.
  • Eine Landingpage ist eine einzelne speziell für Werbe-Maßnahmen entwickelte Seite.  Sie stellt ein bestimmtes Angebot, Produkt oder Dienstleistungen in den Mittelpunkt, welches direkt mit Kaufaufforderungen versehen ist.
  • Eine WebSEITE, WebPAGE oder Internet-Seite meinen das Selbe und sind wie einzelne Buchseiten zu verstehen, eben 1 Seite in einem Buch bzw. hier 1 Seite auf einer kompletten WebSite.
  • Mit Onepage ist tatsächlich eine Website mit nur einer einzige Seite gemeint.

Um eine Website mit WordPress oder einem ähnlichen CMS aufzubauen, sind folgende Schritte notwendig. Aufgrund diverser Technik- und Datenschutz-Maßnahmen ist das aber nicht so einfach, wie es zunächst klingt und es sollte gut überlegt werden, ob nicht doch ein Webdesigner beauftragt werden sollte (z. B. Susanne :-) siehe tiefenschaerfe.de).

Schritte sind auf jeden Fall:

  1. Domainnamen finden, siehe Beitrag dazu
  2. Provider suchen, der WordPress, etc vorinstalliert hat (z.B. artfiles.de (sehr guter Support!!!)
    1. oder auf https://de.wordpress.com/pricing/ im Tarif “Business” eine Website erstellen, was aber auf Dauer deutlich teurer wird. -> Der Betrieb einer unabhängigen Website wird empfohlen!
  3. Domain dort registrieren und einen Webhosting-Vertrag buchen (reicht völlig “private web medium” – link)
  4. SSL-Zertifikat beantragen (beim Provider) und einrichten. Aufgrund der DS-GVO ist das ein MUSS -> Anleitung dafür
  5. WordPress (WP) installieren
  6. ein WP-Theme kaufen, wir empfehlen “Enfold” von Kriesi.ch
  7. dieses Theme installieren und konfigurieren, hier insbesondere auf Datenschutzeinstellungen achten.
  8. Generieren und hochladen eines Impressums und Datenschutzerklärung, gehe dazu auf e-recht24.de
    1. Sofern kein Shop oder so eingerichtet werden soll, reichen i.d.R. die kostenfreien Rechtstexte (siehe oben links auf e-recht24.de)
  9. Webdesign (Layout, Struktur und Text) – das ist zeitlich der größte Anteil, sofern kein vorgefertigtes Layout (Theme) genommen wird. Achtung: Bei vorgefertigen Layouts ist die Flexiblität sehr eingeschränkt, Abhängigkeit entsteht, Außer:
    • Bei dem Theme “Enfold” gibt es maximale Flexibilität UND es können Demo-Daten importiert werden, was unbedingt zu empfehlen ist, da das sehr viel Arbeit spart!
    • Infolge werden die Hauptseiten (Home, etc) gestaltet.
  10. Plugins installieren (z.B. Spam-Plugin) – Mehr dazu siehe Anlage (tiefenschaerfe.de-Angebots-Formular)
  11. Kategorien für den Blog oder Zeitung oder Lernportal, wie auch immer, anlegen. Danach können schon erste Beiträge (Artikel) erstellt oder importiert werden.
  12. Weiterhin können Zusatzfunktionen wie Social-Media-Sharing-Tools, etc. eingerichtet werden.

In Zusammenarbeit mit einem Webdesigner läuft das so:

Sofern ein Website mit einem CMS nicht in Eigenregie entwickelt wird, gehen Webdesigner wie Susanne / tiefenschaerfe.de (kontakt@tiefenschaerfe.de) i.d.R. bei der Website-Entwicklung zusammen mit den Auftraggebern wie folgt vor:

  • Start mit Konzept?

Bevor die Arbeit richtig los geht, findet ein Erstgespräch statt, wo Wünsche und Anforderungen geklärt werden. Danach wird entweder in die Fähigkeiten des Webdesigners vertraut und er macht einfach ODER es wird ein Konzept erstellt. Bei mir, Susanne / tiefenschaerfe.de, entfällt die – manchmal sehr teure – Konzeptionsarbeit weitestgehend, da meine Auftraggeber mich oft einfach machen lassen. Und hinterher i.d.R. absolut zufrieden sind :-)

  • Daten liefern oder entwickeln

Bei Projektbeginn bekomme ich von Ihnen, was Sie liefern können. Z.B. ein Logo, Texte, Fotos, eventuelle Zugangsdaten zum Webprovider ODER ich erstelle all dies für Sie und melde Ihre Domain ggf auch bei einem Provider an. Text-Basis sind oft auch vorhandene Broschüren oder ähnliches.

  • Technische Umsetzung

Hierzu gehört die Installation der technischen Basis und der notwendigen Plugins. Als Web-Technik wird immer das Content-Management-System ( CMS ) WordPress genutzt. Das und alle notwendigen Plugins, sowie ein Theme*1 werden installiert und eingerichtet. Hierbei wird auf Datenschutz-Richtlinien geachtet.

*1 – In WordPress wird das grundlegende Layout durch Themes festgelegt, wodurch individuelle Designs entwickelt werden können – weitestgehend ohne Programmierkenntnisse. Daher auch der Begriff Web-Design, abweichend von Web-Programmierung.

  • Layout, Struktur & Text

Jetzt wird es kreativ! Texte und Bilder, Videos, besondere technische Funktionen werden angepasst oder entwickelt, Layout und Struktur in die Inhalte gebracht. Hierbei gehen wir agil *2 vor.

*2 – Das Ziel agiler Entwicklung ist es, den Entwicklungsprozess nicht bürokratisch mit hohem Dokumentationsaufwand, sondern flexibel und schlank zu gestalten. Das heißt: Layout und Struktur entwickeln sich während der Arbeit und können immer wieder angepasst werden. Während der Web-Designer das macht, kann der Kunde sich – Sie – um sein Kerngeschäft kümmern. Zwischendurch werden Meinungen abgefragt, Vorschläge gemacht und sich abgestimmt.

  • Rechtstexte

Impressum und Datenschutzerklärung werden bei e-Recht24.de erstellt, sofern nicht anders gewünscht.

  • Überprüfung & Test

Nunmehr werden installierte Funktionen getestet, Korrekturgelesen, Änderungen durchgeführt und möglichweise Inhalte oder Struktur nochmal geändert.

  • Letzter Schliff & Abrechnung

In der Regel ist eine Website innerhalb von 2 Wochen fertig. Bei größeren oder sich zeitlich hinziehenden Projekten wird in Teilschritten von 14 Tagen abgerechnet. Fremdkosten wie zum Beispiel die Theme-Lizenz und ggf Kauf-Fotos sind darin separat aufgeführt.