Website der Schule

Seminararbeit „Website der Schule -basierend auf WordPress“

Einleitung

Das Internet hat seit seiner Einführung zu einem Modernisierungsschub auf der ganzen Welt in den Bereichen Wirtschaft und Kommunikation geführt. Durch die weltweite Vernetzung ist die Entstehung neuer Wirtschaftszweige, so wie ein Wandel des Kommunikationsverhalten und die Mediennutzung im privaten und beruflichen Bereich ermöglicht worden. Oft wird die kulturelle Bedeutung dieser Entwicklung mit der Erfindung des Buchdrucks gleichgesetzt.

(Quelle: https://de.wikipedia.org/wiki/Internet , Stand: 05.05.2016 18:42 Uhr)

Mit der weltweiten Verbindung durch das Internet entstehen im Netzwerk virtuelle Plätze, an welchen Dateien und Ressourcen hinterlegt sind. Diese bieten die Möglichkeit sich innerhalb des Internets durch einen virtuellen Platz, auch Website genannt, zu präsentieren. Eine sogenannte Website dient als Webauftritt, Webpräsenz und Webangebot eines oder mehreren Nutzern und als Medium zur Kommunikation über das Internet.

Eine Website besteht aus meist strukturiertem Text, in welchem Bilder und andere Multimedialelemente eingebunden sind. Der Aufbau einer Website bildet sich aus einer HTML – Datei, welche in einem Verzeichnis eines Pfads einer Domain liegt. Die Weiterentwicklung des Internets und dadurch auch die der Programmiersprachen, hatte zur Folge, dass die HTML Strukturen einer Website immer komplexer und vielzähliger wurden, wodurch durch Hyperlink verknüpfte Pfade einer Domain, eine Website mit mehreren verschiedenen Seiten ermöglicht wurden.

Im Gesamten steigert dies die Anschaulichkeit und Funktionalität einer Website sowie die Möglichkeit komplexere Informationen an die Nutzer im Internet zu übermitteln. Um eine plattformunabhängige Darstellung in allen Browsern zu erlangen wird die Programmiersprache HTML oder XHTML gewählt. Zur einfachen Strukturierung der in HTML oder XHTML festgelegten Informationen und Daten wird CSS als Programmiersprache für die Gestaltung genutzt, da auch diese eine plattformunabhängige Darstellungsmöglichkeit bietet.

Die Dateien und Ressourcen, die die Website bilden, werden auf einem Webserver abgelegt, welcher die Verbindung zu anderen Nutzern im Netzwerk ermöglicht, also die Website im Internet für alle sichtbar macht. Der Webserver befindet sich häufig in einem Rechenzentrum von einem Webhoster, welcher seine Webserverplätze, auch Webspaces genannt, an den Inhaber der Website vermietet.

(Quelle: https://de.wikipedia.org/wiki/Website , Stand: 5.05.2016 14:24 Uhr)

Im folgenden wird der Aufbau einer, auf WordPress basierenden Website, anhand des Beispiels einer neu gestalteten Schul – Website für unser Gymnasium erläutert und die einzelnen Arbeitsschritte, sowie Funktionalitäten und Aufbaustrukturen erklärt.

Website, basierend auf WordPress

WordPress ist eine Software, mit welcher sich benutzerfreundlich und einfach eine Website gestalten und sowohl deren Inhalte verwalten, als auch das Erscheinungsbild und Anordnungen einfach koordinieren, verändern und gestalten lässt. Es zählt als Content-Management-System und ist vollständig Open Source, was zur Folge hat, dass es für jeden Nutzer frei und kostenlos zur Verfügung steht.

Durch den Download von WordPress und der Installation auf einem Webserver sind die Bedingungen für eine auf WordPress basierenden Website erfüllt und der Nutzer kann direkt anfangen seine eigene Website zu gestalten (Design), sowie Inhalt (Content) einzufügen und zu verwalten.

WordPress ist die meist Verwendete Software zum einfachen Website erstellen überhaupt. Die Statistiken von http://w3techs.com/technologies/overview/content_management/all (Stand 09.05.2016 19:12 Uhr) sagen aus, dass WordPress bei 61% aller auf Content-Management-System basierenden Websites verwendet wird.

Durch die hohe Interesse an WordPress, welches auch anhand der nach eigenen Angaben von WordPress (http://wordpress.org/download/counter/ , Stand: 09.05.2016 19:14Uhr) über 18 Millionen Downloads der freizugänglichen Software zu bezeugen ist, entsteht innerhalb des Internets eine Community, in welcher über WordPress diskutiert und für WordPress Hilfe gesucht werden kann. Auch dies ist ein weiteres Merkmal welches sowohl Einsteigern den Umgang mit WordPress erleichtert und schnell nahebringt, als auch die Interesse an WordPress steigert. Dadurch entwickelt sich Wordpress zu einer Open Source Content-Managment-System Software mit Potenzial für die Zukunft und hoher Nutzerfreundlichkeit im Web.
Wordpress wird in einer der modernsten Webprogrammierungssprachen „PHP“ (Personal Home Page )  geschrieben und benötigt daher einen Webserver zur Umsetzung sowie eine MySQL Datenbank, in welcher alle Daten und Inhalte der Website gespeichert werden.

Zur Gestaltung einer auf WordPress basierenden Website gibt es verschiedene Themes, welche kostenlos oder für eine bestimmte Summe von verschiedenen Anbietern erworben werden können.

Trotz den vorgeschriebenen Themes ist es möglich, einen Eingriff im Quellcode der Seite vorzunehmen. Dies macht WordPress vorallem für gelernte Informatiker und Webentwickler interessant und individuell.

So lässt sich aus einem vorgegebenem Theme, flexibel durch einfache Codeänderungen, der gewünschte Content der Website verändern und anpassen oder fehlenden Funktionen hinzufügen. Benutzern, die weder Informatik studiert haben noch Webentwickler sind, ist es ebenso möglich, Ergänzungen vorzunehmen, um mehr Funktionen für die eigene Website zu bekommen. Dies funktioniert durch das integrierte Plugin System, welches Benutzer möglich macht, weitere Funktionen, also vorprogrammierte Codes, in die Website einzubinden. Plugins sind wie Themes von externen Anbieter sowohl kostenfrei, als auch für eine gewisse Summe zu erhalten und können durch die Plugin Integration in die WordPress Websites eingebunden werden.

(Quelle: http://wordplus.de/was-ist-wordpress , Stand: 09.05.2016 19:32 Uhr)

Benutzerstruktur für die Schule

Ein weiteres Merkmal, welches WordPress so populär macht, ist der benutzerfreundliche Umgang und die Möglichkeit, eine Website von mehreren Personen, in unterschiedlichen Bereichen verwalten zu lassen.

Bei der Website einer Schule gibt es mehrere Benutzer, die auf die Website Zugriff erhalten und ihre Inhalte der Öffentlichkeit präsentieren wollen. Hierfür bietet WordPress ein passendes Benutzersystem, welches sowohl den Schutz der Website garantiert, damit keine Bugs entstehen, programmierten Codes verändert oder gelöscht werden können und die Grundstruktur der Website bestehen bleibt.

Jeder Benutzer kann nur durch den Verwalter, auch Administrator genannt, angelegt werden und einen Zugang über seine Email Adresse erhalten. Nach der Registrierung des Nutzerzugangs auf der Website ist es dem Benutzer möglich, sein Passwort selbständig zu ändern und festzulegen, um zukünftig reibungslos die gewünschten Inhalte der Seite ändern zu können.

Das Benutzersystem sieht vor, jedem einzelnen Benutzer eine Rolle zuzuweisen. Diese Rolle legt fest, welche Rechte der Nutzer hat, Inhalte und Einstellungen an der Website zu ändern.

WordPress selbst verfügt über fünf Voreingestellte Benutzerrollen. Der Administrator erhält uneingeschränkte Rechte am Inhalt und den Einstellungen der Website, ihm ist es somit möglich neue Benutzer hinzuzufügen, Einstellungen und Themen zu ändern sowie Plugins zu installieren. Alle anderen Benutzer sind dem Administrator unterstellt, so dass der Administrator Änderungen der Nutzer rückgängig machen oder löschen kann. Bei der Website der Schule übernimmt diese Rolle derjenige der die Website erstellt hat und ein Lehrer oder eine Lehrerin, welche als Hauptverantwortliche für die Website ausgewählt wird und diese verwalten wird. Speziell für die Website der Schule wird die Benutzerrolle Autor für alle Mitwirkenden, die Inhalte einfügen oder ändern wollen, genutzt. Diese Rolle hat eine eingeschränkte Rechteverteilung. Benutzern dieser Rolle ist es möglich neue Beiträge auf der Website zu erstellen, zu veröffentlichen und zu löschen oder die vorhandenen Beiträge zu bearbeiten und zu löschen. Damit wird garantiert, dass an der Grundstruktur der Website und dem Aufbau des ausgewählten Themes nichts verändert werden kann, da dies sonst bis hin zu einem Verzeichnisfehler der Website auf dem Webserver führen kann und die Website im Internet nicht mehr vorhanden ist. Daher wird hier gezielt auf ein Benutzermodell mit zwei verschiedenen Benutzerrollen, welche unterschiedliche Rechte beinhalten, gesetzt. (Quelle: http://wordplus.de/was-ist-wordpress , Stand 09.05.2016 20:06 Uhr)

Inhalte und Editor

In WordPress liegen zwei grundlegende Inhalts-Typen vor, welche zum Einfügen des Inhalts der Website vorgefertigt sind und genutzt werden. Diese Typen nennen sich „Seiten“ und „Beiträge“. Es gibt wesentliche unterschiede zwischen Seiten und Beiträge, während Beiträge chronologisch nach Datum der Veröffentlichung auf der Startseite oder einer festgelegten Seite aufgeführt werden, so ist ein Seite statisch und wird nicht nach dem Datum aufgeführt, sondern ist in der Navigation oder Seitenleiste zu finden. (Quelle: https://de.support.wordpress.com/post-vs-page/ , Stand 10.05.2016 20:33 Uhr).

Außerdem sind Seiten von mehreren Punkten auf der Website erreichbar und der Inhalt bleibt statisch vorhanden, während sich Beiträge dynamisch verhalten und nach dem Datum sortieren. Auf der Website der Schule speziell gestaltet sich eine Navigationszeile aus verschiedenen Seiten. Diese Seiten bringen einen statischen Inhalt und stehen als Oberbegriffe für den dort veröffentlichten Inhalt. Hier wird der Vorteil genutzt, dass von jedem Punkt der Website auf die Seiten zugegriffen werden kann und der Nutzer es einfach hat sein gesuchtes zu finden. Innerhalb der Seiten wird dann der Inhalt durch Beiträge erfasst, damit durch die dynamische Inhaltsveränderung der Seiteninhalt immer aktuell bleibt. (Quelle: http://blogkiste.com/wordpress-seite-beitrag-unterschied/ , Stand 10.5.2016 20:48 Uhr)

Auf der Website der Schule soll über die neusten Ereignisse der einzelnen Fächer informiert werden. So gibt es jeweils eine statische Seite zu jedem Fach, auf welche von allen Punkten auf der Website zugegriffen werden kann, deren Inhalt in Beiträgen ausgegeben wird, damit sich das aktuellste Ereignis für den Besucher immer an oberster Stelle befindet. Die Eingabe des Inhalts erfolgt über den integrierten Webeditor namens „TinyMCE“ der im visuellem Modus oder HTML Modus vorliegt. Im visuellem Modus werden die eingegebnen Inhalte grafisch dargestellt und der Text kann durch einfache Einstellungen, welche sich hinter Schaltflächen, oberhalb des Editors befinden, visuell formatiert werden. Im HTML Modus dagegen wird die Möglichkeit geboten, direkt im Quelltext zu arbeiten und den eingegeben Text mit HTML Befehlen so zu formatieren wie der Nutzer es möchte.

WordPress-Beitrag-bearbeiten
(Quelle: http://wordplus.de/wp-content/uploads/WordPress-Beitrag-bearbeiten.png , Stand 10.05.2016 20:57 Uhr)

 

Bilder einfügen

Um die veröffentlichten Inhalte visuell zu unterstützen, bietet WordPress eine Möglichkeit Bilder in die Inhalte einzufügen. Die Bilder müssen entweder direkt über den Editor hochgeladen werden, oder über den Menüpunkt „Medien“. WordPress speichert diese dann direkt auf dem Webserver und bindet automatisch den Serverpfad des Bildes ein, damit dieses korrekt angezeigt wird. Die Auflösung wird von WordPress automatisch angepasst, damit das Bild auf der Seite korrekt angezeigt wird und die Ladezeit beim Aufrufen der Website für den Besucher nicht zu lange dauert. (Quelle: http://wordplus.de/was-ist-wordpress , Stand: 10.05.2016 21:13 Uhr)

Verwendetes Theme

Das für die Website der Schule verwendete WordPress – Theme trägt den Namen „Enfold“ und wird von Christian Budschedl bereit gestellt. Es profitiert hauptsächlich von den vielen Möglichkeiten und Variationen, die geboten werden um eine Website zu gestalten. Außerdem ist es leistungsstark für Webserver optimiert und bietet durch ständige Updates immer die neusten Sicherheitsmaßnahmen.

Aufbau der Schulwebsite

Die Website wird aus drei wesentlichen Teilen aufgebaut. Angefangen mit dem „Header“, welcher sich immer an oberster Stelle der Website anordnet und den Titel beinhaltet (hier links) so wie rechts die Navigationsleiste, welche durch Hyperlinks auf alle Inhaltsseiten der Website verlinkt. Die Navigation bildet die Überbegriffe der Themen und soll zum schnellen Zugriff des Besuchers auf gewünschte Themen beitragen. Für einzelne Navigationspunkte können Unterpunkte hinzugefügt werden, um die Bereiche zu präzisieren. Der Header ist auf allen Seiten der Website vorhanden und bietet die Möglichkeit durch einen Klick, auf die Schaltfläche des Logos (hier links), zurück auf die statische Startseite zu gelangen oder über die Navigationsleiste zu den gewünschten Themenbereichen weitergeleitet werden. Außerdem befindet sich neben der Navigationsleiste im Header eine Schaltfläche, welche durch eine Lupe gekennzeichnet ist, mit der es möglich ist, gezielte Inhalte auf der Website durch Schlagwörter zu finden. Somit bildet der Header den Orientierungspunkt des Besuchers auf der Website und bietet die Möglichkeit gezielt die gesuchten Informationen zu erlangen oder einen schnellen Überblick über die behandelten Themen zu bekommen.

header
(Quelle: http://www.smv-nbg.de , Stand: 10.05.2015 21:23 Uhr)

 

 

Der zweite Teil der Website nennt sich „Footer“ und befindet sich immer an der untersten Stelle der Website. Er dient zum Abschluss der Website und fasst noch einmal die wichtigsten Punkte der Website zusammen. Hier wurden gezielt mehrere Elemente im Footer eingesetzt. Mit dem Element „Interessante Links“ wird dem Besucher der Website eine Art Leitfaden angeboten, mit welchem er zu aktuellen Informationen, sowie den Hauptinformationen geleitet wird, welche der Betreiber der Website jedem Besucher mitteilen will, oder hilft dem Besucher an einen allgemeinen Informationspunkt der Website zu gelangen, falls er beim anschauen der Website noch nicht die gezielten Informationen gefunden hat und bis zum Ende der Website gelangt ist. Neben „Interessanten Links“ befinden sich noch einmal, wie schon oben in der Navigation, alle Hyperlinks zu den Seiten um den Besucher, wenn er am Ende einer Seite angelangt ist, weiterzuleiten auf die restlichen Seiten der Website. Neben den „Seiten“ gibt es das Element „Kategorien“ worüber auf bestimmte Beiträge zugegriffen werden, welche in Kategorien eingeordnet werden, wie zum Beispiel die einzelnen Fächer. Auch dies bietet dem Besucher einen Überblick über die auf der Website behandelten Themen und einen schnellen Zugriff auf die gewünschten Informationen. Als letztes Element befindet sich das „Archiv“ im Footer, welches dynamisch arbeitet und alle veröffentlichten Beiträge auf der Website, nach Datum in der Zeitangabe von Monaten ordnet. So kann der Besucher gezielt nach Beiträgen, Ereignissen oder Informationen mit einem bestimmten Veröffentlichungsdatum suchen. Außerdem befindet sich eine Schaltfläche mit dem Symbol eines Pfeils im Footer, mit welcher es möglich ist durch einen Klick, vom Ende zum Anfang der Seite zu gelangen, um dem Besucher einen leichten und dynamischen Umgang mit der Seite zu ermöglichen. Den Abschluss des Footers bilden die Urheberrechtsinformationen, welche darüber aussagen wer die Rechte am Aufbau und Inhalt der Website besitzt, in diesem Fall das Gymnasium Neuenbürg, und wer das bereitgestellte Theme entwickelt hat und die Rechte an diesem besitzt.

footer
(Quelle: http://www.smv-nbg.de , Stand: 09.05.2016 21:23 Uhr)

 

 

 

 

Zwischen Header und Footer bildet sich der eigentliche Inhalt der Website, der sogenannte „Content“. Im Content werden alle Informationen die auf einer Seite übermittelt werden sollen ausgegeben. Hierbei gibt es viele Möglichkeiten von Anordnungen die gewählt werden können, um den Inhalt anzuzeigen. Auf der statischen Startseite der Schulwebsite besteht der Content aus verschiedenen Elementen. Eingeleitet wird er durch eine dynamische Schrift die immer das letzte Wort des Satzes ändert. Darunter befindet sich ein Bildelement der Schule um dem Besucher der Website am Anfang einen anschaulichen Inhalt zu bieten. Damit der Besucher direkt über das Thema der Website informiert wird, befindet sich unterhalb des Bildelementes eine Grundbeschreibung des Gymnasium Neuenbürg, sowie das Schulmotto welches durch drei Boxelemente ausgezeichnet wird, deren Schaltfläche einen Hyperlink enthält, über welchen man zur genauen Beschreibung des auf der Box enthaltenen Schlagwort geführt wird.

Bildschirmfoto 2016-05-11 um 20.10.17
(Quelle: http://www.smv-nbg.de , Stand: 09.05.2016 21.32 Uhr)

Diese Elemente bilden die statische Starseite die beim Aufruf der Website unter der Domain immer als erstes erscheint. Diese Seite wird auch „Homepage“ genannt.

Neben der Startseite als statische Seite befindet sich die Kontaktseite, als weitere statische Seite auf der Website welche, zwei für den Besucher, aktive Elemente enthaltet. Neben den Kontaktdaten befindet sich ein Formular in welches der Besucher direkt seine Daten und persönliche Anfrage eingeben und an den Betreiber der Website abschicken kann. So ist es auch Besuchern möglich, eine Nachricht zu hinterlassen, ohne dafür ein E-Mail Dienstprogramm auf ihrem Endgerät installiert zu haben oder die Website währenddessen verlassen zu müssen. Außerdem befindet sich auf der Kontaktseite eine „Iframe“ Einbindung von Google Maps, mit dem Standpunkt des Gymnasium Neuenbürg, welche es dem Besucher der Website möglich macht, direkt eine Route dorthin planen zu können.

Bildschirmfoto 2016-05-11 um 15.52.49
(Quelle: http://www.smv-nbg.de/kontaktanfahrt , Stand: 09.05.2016 21:35 Uhr)

 

 

 

 

 

 

 

Alle anderen Seiten der Website werden dynamisch gehalten da hier in zeitlichen Abständen immer neue Inhalte veröffentlicht werden, wie zum Beispiel die aktuellsten Neuigkeiten bei den einzelnen Fächern, und sich die Information als Beiträge nach dem neusten Veröffentlichungsdatum sortieren sollen. Dabei muss nur ein neuer Beitrag erstellt werden und im Editor, mit einem Klick, die Seite, auf der der Beitrag veröffentlicht werden soll, ausgewählt werden. Somit kann die Website durch die Autoren immer aktuell gehalten werden und erfordert keine tieferen IT Kenntnisse zum einfügen von neuem Inhalt auf dem Webserver.

Schlusswort

Mit WordPress wurde eine moderne Technik gefunden, die sowohl qualifizierte und ausgebildete Webdesigner viele Möglichkeiten bietet, die zur Ermöglichung einer individuellen Einstellung der Website führt, aber auch Nutzern ohne Vorkenntnisse schnelle und einfache Möglichkeiten bietet eine eigene Website zu erstellen und zu verwalten. Dies wird bei der Website der Schule zum nutzen gemacht. Da eine Vielzahl von Nutzern an den Inhalten der Website mitwirken werden und keine besonderen Vorkenntnisse vorhanden sein müssen. Auch die Sicherheit ist bei WordPress gegeben und wurde daher als weiterer Faktor bei der Auswahl für die Website der Schule ausgewählt, da durch die hohe Nutzung von WordPress künftige Updates mit Verbesserungen der Sicherheit kommen werden. Auch die Leistungsfähigkeit von WordPress ist an den Technischen Stand der heutigen Zeit angepasst und wird ständig verbessert. Mit einem Blick in die Zukunft stellt sich WordPress als geeignete Technik für die Website der Schule heraus, da der Umgang nicht schwer zu erlernen ist und neue Autoren leicht an der Website mitwirken können. Außerdem nimmt die allgemeine Bedeutung und Nutzung von WordPress immer mehr zu, was daran zu erkennen ist das viele Webhoster eine WordPress Seite neben dem Webserver zur Vermietung anbieten. Damit ist eine Zukunftssichere Entwicklung der Website der Schule geschaffen, welche durch künftige Updates und einfache Betreuung stets ihr modernes Design, aktuellen Inhalt, Leistungsfähigkeit und Sicherheit bewahren wird.

2 Gedanken zu „Website der Schule“

  1. Sehr schöner und informativer Beitrag 🙂 eventuell könntest du die http-Links durch eine Verlinkung etwas verstecken und somit schöner zum lesen machen 🙂

  2. Hi, tolle Infos, gut aufbereitet.

    Du baust ja jetzt die Seite für Neuenbürg mit Enfold. Ich baue gerade die Seite für die Realschule Östringen (Übungsserver: http://s522832455.online.de/ und ein anderer Lehre baute die Seite für die http://www.ass-sinsheim.de
    Alle mit Enfold.
    Meine Idee war dann noch, einen Youtube Kanal mit HilfeVideos zu machen. Er ist hier: https://www.youtube.com/channel/UChTOA-ImEWqoTHVSoRxaZTA

    Dort entstehen Hilfeeides für die Personen, die dann deine fertige Seite bedienen sollen.

    Würde mich freuen, wenn wir in Kontakt bleiben könnten. Vielleicht suchst du auch mal einen Praktikumsplatz im Bereich Webdesign, den man von zu Hause machen kann. Würde mich auch freuen, wenn du selbst Hilfevideos machst.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.