Meine Website
Auf dieser Seite möchte ich am Beispiel meines eigenen Internetauftritts einen Überblick darüber geben, wie eine solche Seite entsteht und was es zu beachten gilt. Eine privatere Geschichte über die Entwicklung meiner Internetseiten bis zur heutigen Version findet sich im privaten Bereich unter "Meine Internetseiten".
Technische Daten
Diese Seiten laufen auf dem Content Management System Joomla in der Version 1.7. Mit Hilfe dieses Inhalteverwaltungssystems ist eine saubere Trennung von Inhalten und Layout möglich. Die Bearbeitung von Inhalten erfolgt mit einer Art Texteditor und die Menüstruktur kann mit entsprechenden Mausklicks einfach und erstellt werden. Somit ist es möglich auch viele einzelne Seiten ohne Eingriffe in den eigentlichen Code zu pflegen.
Als Designvorlage kommt eine Eigenentwicklung zum Einsatz, die als Template für Joomla 1.7 implementiert ist.
Für entsprechende Erweiterungen werden Joomla Module und Komponenten eingesetzt, zum Beispiel Phoca Download für die Downloads, das Kontaktformular FlexiContact, die Sitemap XMap sowie der JCE Editor zum einfachen Bearbeiten im Adminstratorbereich. Mit Hilfe dieser und anderer teils kostenloser Erweiterungen kann somit zusätzliche Funktionalität bereitgestellt werden, ohne das Rad neu zu erfinden.
Zudem kommen mit den Social Media Twitter-Google-Facebook Buttons im Blog und dem Organspendehinweis selbst entwickelte Module und Plugins zum Einsatz.
Die komplette Website wird vom Webhoster KONTENT GmbH gehostet.
Entstehung
Im folgenden möchte ich kurz erklären in welchen Arbeitsschritten dieser Internetauftritt entstanden ist. Die Bilder zum jeweiligen Arbeitsschritt können durch Anklicken vergrößert werden.
Template Entwurf
Am Anfang steht neben der Idee für eine Internetseite natürlich die Frage nach dem Aussehen. Das hängt auch von den Inhalten ab. Während eine kleine Visitenkarte mit nur ein oder zwei Seiten kein aufwändiges Menü zur Navigation braucht, benötigt eine komplexe Website wie diese das auf jeden Fall.
Sobald die Entscheidungen dazu gefallen sind, entsteht eine grobe Skizze für den Aufbau der Seite - eine Art Schablone, "Template" genannt. Dabei handelt es sich lediglich um ein simples Bild - eine Grafik und keine funktionsfähige Seite.
Von links nach rechts sind zunehmen die Details des Entwurfs erkennbar. In der Skizze im linken Bild steht die grobe Struktur der Website im Vordergrund: Ein Banner Platzhalter mit darunter angebrachtem Menü bildet den oberen Teil, ein Untermenü schwebt angedockt am Hauptteil der Seite.
In der Mitte kommen dann Platzhalter Einträge für das Menü hinzu, sodass ein besserer Eindruck der späteren Seite entsteht. Zudem sind Schatten an den Boxen eingefügt wurden, die Untermenü Einträge haben einen Hintergrund mit leichten Reflexionen und ein Banner wurde platziert.
Im rechten Bild ist zudem ein Dummy-Artikel eingefügt wurden, um erstmals einen Eindruck über Schriftart, Zeilenabstand, eingesetzte Farben für Überschriften und generelle Textformatierungen zu bekommen.
Template Umsetzung
Was bis dahin nur eine simple Grafik in einem Bildbearbeitungsprogramm war, wird anschließend in viele Einzelteile zerstückelt und als einzelne Grafiken gespeichert. Für das Grundgerüst eines Joomla Templates existiert eine bestimmte Dateistruktur, die nun für das zu erstellende Template nachgebaut wird. Mit Hilfe von HTML und CSS entsteht so das Template in Form von hunderten Zeilen Code im entsprechenden Texteditor.
Neben der Struktur werden mit CSS auch die verschiedenen Elemente wie Menüeinträge, Überschriften, Listen, Grafiken, Links u.v.m. formatiert, sodass später auf der Seite alle Elemente eines bestimmten Typs auf jeder Seite gleich aussehen und ein einheitliches Bild vom Internetauftritt entsteht.
Joomla Installation
Sobald das Template fertig gestellt ist, wird auf meinem lokalen XAMPP Webserver eine neue Joomla Installation vorgenommen und dort das entsprechende Template installiert.
Menüs & Beiträge erstellen
Anschließend werden die Inhalte der Seite erstellt. Angefangen von der Aufteilung der Menüs in Hauptmenüs und Untermenüs, die Titel der entsprechenden Menüeinträge, die Verlinkungen der Menüeinträge auf Beiträge bis hin zum Schreiben der Beiträge selbst. All das kann im Administrationsbereich von Joomla gemacht werden und bedarf keinerlei Programmierkentnisse.
Erweiterungen
Während die Seite mit Texten gefüllt wird, werden zudem diverse Joomla Erweiterungen installiert, die zusätzliche Funktionalität bereitstellen. Dazu gehört hier ein Kontaktformular, eine Komponente im Administrationsbereich zur Verwaltung von Downloads und eine Sitemap Komponente. Desweiteren habe ich selber noch Module programmiert, mit denen meine Inhalte mit Twitter, Google+ und Facebook verlinkt werden können sowie ein kleiner Werbebanner als Hinweis auf das wichtige Thema Organspende.
Feinschliff
Am Ende ist die Seite im Prinzip fertig, bedarf aber meist an einigen Stellen noch etwas Feinschliff. Im Falle dieser Seite wurden Überschriften mit zusätzlichen Elementen vor und nach dem eigentlichen Text versehen (.: Text :.), im Blog wurde ein Trennelement zwischen den einzelnen Artikeln eingefügt, die Stärke der Schatten der beiden großen Container und Reflexionen im Menü überarbeitet und die Zeilenabstände an die Textfülle angepasst.
Als kleines Gimmick ist zudem im oberen Hauptmenü der Slider mit JavaScript animiert wurden, sodass dieser zu der jeweiligen Kategorie gleitet, sobald man den Link anklickt.
Mit Hilfe dieser kleinen Details, die teilweise kaum auffallen, bekommt so jede Seite ihr eigenes Flair.
Mit der Erweiterung des Templates auf eine blaue Variante habe ich zudem die Trennung zwischen meinem privaten Bereich (Blog, Mensch) und dem "geschäftlichen Teil" meiner Website vorgenommen (Studium, Web & Software). Während der allgemeine Aufbau gleich bleibt, trennt die unterschiedliche Farbgebung beide Bereiche gut voneinander ab.
Live-Schaltung
Im letzten Schritt, nachdem das Ergebnis als zufriedenstellend bewertet wurde, geht es dann an die Live-Schaltung des Internetauftritts. Dazu werden alle benötigten Dateien auf den vom Webhoster bereitgestellten Webspace geladen und angepasst, sodass die Seite ab da unter der entsprechenden Adresse erreichbar ist.
Doch damit ist es nicht vorbei: Nun geht es daran eine Suchmaschinenoptimierung vorzunehmen, damit die Seite auch gefunden wird. Entsprechende Sitemaps können bei Google eingereicht werden, über die Joomla Metadaten Schlüsselwörter und Beschreibungen zu den Artikeln hinzugefügt werden und so das Ranking in den Suchmaschinen verbessert werden.
