Programmierung
Wenn Sie ein CMS (Content Management System) verwenden, müssen Sie sich normalerweise nicht um die Programmierung kümmern. Möchten Sie Ihren Webseiten einen eigenen Stil geben oder einfach eine interessante Darstellung zeigen so kann mit modernem Web Design heute viel erstellt werden. Selbsterstellter Code kann in einem CMS (Content Management System) eingesetzt werden und verbindet so eine einfache Gestaltung mit optimierter Darstellung.
Den üblichen Webtechniken HTML, CSS und JavaScript kommt jeweils eine bestimmte Rolle zu.
- HTML legt fest, was auf der Seite stehen soll (der strukturelle Aufbau einer Webseite)
- CSS legt fest, wie es dargestellt werden soll (Formatierung)
- JavaScript legt fest, was passieren soll. (damit werden Elemente interaktiv)
Bei direkter Programmierung ist es heute einfacher und sicherer möglich aktive Elemente und Grafiken darzustellen. Da ich schon immer ein grosses Interesse an Webtechnologien hatte, möchte ich Ihnen ein paar Ideen zeigen, was mit vernünftigem Code unter vielem anderem möglich ist.
Sicher kann man sich streiten, ob es sinnvoll ist eine Uhr oder einen einfachen Kalender auf der eigenen Seite darzustellen. Als Grundlage, um Wissen anzueignen und zum Ausbau auf z.B. einen Event Kalender zeigen die folgenden Beispiele was mit wenig Programmierung möglich ist um Webseiten einfach zu gestalten.
Beispiel analoge Uhr mit HTML
Ohne Grafiken kann mit modernem HTML eine Uhr dargestellt werden. Keine Bilder, nur Programmcode.
Mit dem HTML Befehl canvas kann direkt gezeichnet werden. Mit wenig Programmcode wird eine einfache Uhr dargestellt und mit Script:Function aktiviert.
Analoge Uhr mit HTML und CSS
Wenn eine Uhr ein gutes Design haben sollte sind mit CSS Formatierung viele Möglichkeiten offen. Im Web finden sich viele interessante Projekte. Hier heisst es ausprobieren bis es gefällt.
Mit CSS formatierte Uhren können mit der Script:Function aktiviert und auf die aktuelle Zeit gesetzt werden.
Beispiel Kalender
Mit wenig Programm-Code einen einfachen Kalender erstellen.
Die Basis zu diesem kleinen Script so wie viele andere ist frei erhältlich. Sie können auf eigene Bedürfnisse angepasst werden.
Bouncing Ball *
Modernes CSS ermöglicht animierte Grafiken zu erstellen. Ein schönes Beispiel ist ein 3D Bouncing Ball. Keine Bilder nur CSS Formatierung. (Basis Code von Daniel Sternlicht)
Viele weitere interessante Anwendungen finden sich im Web. Suchen Sie nach ihrem Wunschobjekt und Animation.
Grafische Elemente
In älteren Webseiten wurden für Linien, Menu Button usw. jeweils eigene Bilder geladen. Diese mussten zuerst in einem Grafikprogramm mit einigem Aufwand erstellt werden.
Bild -button-exp.png- wird geladen. Je nach Auflösung entsteht schnell einmal eine längere Ladezeit.
Das Bild ist nur in der Originalgrösse einigermassen scharf.
Modernes CSS formatiert direkt
Hier wird der Button nur mit CSS Formatierung erstellt. Keine Bildladezeit.
Diese Darstellung bleibt daher in jeder Bildschirmgrösse optimal scharf.
* Wenn Sie diese Seite mit einem PC oder Notebook ansehen versuchen Sie doch einmal folgendes:
Gehen Sie mit dem Mauszeiger auf den Bouncing Ball und halten Sie die Maustaste gedrückt. So eine Aktivität kann erreicht werden mit Programmierung.
Die aufgeführten Beispiele sind in älteren Browser Versionen vielleicht nicht sichtbar. Eine Aktualisierung wird dringend empfohlen. Neuere Browser sind kompatibel mit neueren Programmiertechniken und sicherer im Umgang mit verschiedenen Daten.