Arbeitsinfos • Zusatzinfos
Die Seite Zusatzinfos habe ich einfach meiner bereits eingerichteten Webseite
zugeordnet, damit ich die bereits vorhandenen Elemente einfach durch relative Links
nutzen kann. Das spart Arbeit, denn ich brauchte mir daher um Struktur und Formatierung
der Seite keine weiteren Gedanken mehr zu machen.
Angedocktes
Von hier aus kann ich zukünftig auch auf weitere Projekte bzw. Projektseiten verweisen,
ohne dafür die komplette Menüstruktur des Seitensystems überarbeiten zu müssen, welches
noch nicht dynamisch ist. Gerade weil dieses Seitensystem auch eine Art Webablage
ist, die man auch mit älteren Browsern noch nutzen können soll, habe ich in diesem hier
vorgestellten Seitensystem JavaScript sparsam eingesetzt und bei nicht aktiviertem
JavaScript meist alternative Informationen oder Meldungen codiert. Allerdings habe
ich mir genau das für diese Seite erspart ...
Altes - Frühere Arbeiten aus heutiger Sicht
Ich bin kein Webdesigner, so dass ich in Sachen Design also nicht unbedingt den Anspruch
erhebe, schöne Webseiten zu erstellen. Aber auch die Garantie für uneingeschränkte
und barrierefreie Funktionen kann ich nur bedingt übernehmen, denn nicht wenige liefern
browsertypische Ergebnisse, die darüber hinaus nicht selten auch von den Browserversionen
abhängen - und natürlich auch vom Betriebssystem, der verwendeten Dokument-Deklaration,
von weiteren Standards und Quasi-Standards.
Dennoch ist es mir auch in frühen Arbeiten immer gelungen, valide Webseiten und
Applikationen zu erstellen, die aber heute für den Einsatz im Internet nicht wirklich
mehr taugen, denn für mobile Endgeräte wie Smartphones oder Tablets waren diese Seiten ja
nie gedacht. Und auch die immer größer gewordenen Bildschirme wurden zum Problem,
bevor es dann neue Browser gab, mit denen man die Seiten zoomen kann. Aber nicht jeder
Benutzer kennt oder nutzt diese Funktion, so dass moderne Webseiten dies in der Codierung
oft direkt berücksichtigen. Bevor man also heute die erste Information, eine Botschaft
oder eine Nachricht absetzen kann, hat man schon jede Menge Quellcode geschrieben ...
Meine mehrsprachige private Homepage, die ich lange Zeit noch über den Navigator
auf der Hauptseite meiner Domain anbot, geht auf eine Technik der Seitenabbildung zurück,
die ich 2001 entworfen habe: die Verschachtelung mit Hilfe von iFrames. Mit diesen
Fenstern, welche man auf einer Webseite bequem einbetten kann, war es möglich, die
Inhalte solcher Fenster auf der Hauptseite zu steuern, so dass der Eindruck entstand, als
sei es eine einzige dynamische Seite. Das folgende Beispiel stammt aus einer früheren
Index-Seite:
<a href="8000.htm#Auswahl1" target="Cont1">Link 1</a> <a href="8000.htm#Auswahl2" target="Cont1">Link 2</a> <a href="8000.htm#Auswahl3" target="Cont1">Link 3</a>
Die obigen Aufrufe mit Sprungmarken sind ja in der Tat nichts besonderes, bis auf die Tatsache eben, dass die Datei 8000.htm nur eine Sammeldatei für die verwendeten iFrames gewesen ist, die nur passiv aufgerufen wurde:
<a name="Auswahl1"> <iframe src="../imp/2001.htm?4" name="Cont1" width="100%" height="460" ... </iframe> </a>
iFrames sind also schon früher recht nützlich gewesen. Und auch heute werden iFrames noch
auf vielfältige Weise eingesetzt, so z. B. auch von der FancyBox, einem Sub-Framework,
das auf jQuery beruht (welches wiederum ein JavaScript- und CSS-Framework ist) und mit dem
sich Bilder oder Seiteninhalte wie Mediadaten zoomen und in einem Pseudofenster darstellen
lassen.
Im folgenden Beispiel habe ich eine Einblende-Funktion mit einem im Bereich abgelegten
iFrame-Aufruf für die FancyBox-Überblendung mit Pseudofenster kombiniert. Klicken Sie im
sich öffnenden Anzeigebereich einfach auf eines der kleinen Bildchen ...:
Bilder-Testfeld aufklappen
Wie Sie sicher festgestellt haben, gibt der iFrame die Größe für die automatische Skalierung
mit FancyBox vor. Werden die Aufrufe nicht im iFrame, sondern von der eigentlichen Hauptseite
aus aufgerufen, betrifft die Überblendung den vollen Anzeigebereich des Browsers. Auf dieselbe
Weise lassen sich aber auch Informationen einblenden - quasi ein iFrame in einem iFrame;
klicken Sie im Anzeigebereich auf das Bildchen, damit Sie die ehemalige CSS-Datei mit der
FancyBox angezeigt bekommen:
Text-Testfeld aufklappen
Da ich für die Codierung von Webseiten auch heute noch lieber mit dem ganz normalen
Texteditor arbeite und keine Webeditoren verwende, sind meine Seiten im Quellcode meist
weniger durch Tab-Einrückungen zerrissen, sind trotzdem gut lesbar ... und man kann Text
oder Code auch gut herauskopieren, wenngleich viele Entwickler immer wieder gerne
versuchen, dies mit den diversesten Gimmicks zu verhindern. In einem solchen Fall
schalten Sie dann einfach die Entwickeransicht Ihres Browsers aktiv oder rufen Sie die
Quellcode-Anzeige auf - und meist können Sie die auf der Seite verwendeten Skript- und
Formatierungsdateien damit öffnen und dann auch lokal speichern. ;-)
Neueres - Extras und Experimente
Die ursprünglich eingefügte Experimente-Seite habe ich wieder entfernt und die wenigen
Elemente statt dessen direkt unter dieser Überschrift abgelegt. Allzu viel ist es zwar
nicht, aber vielleicht finden Sie ja die eine oder andere interessante Ausarbeitung
auf dieser Seite ...
Saarländisch-Wörterbuch-WebApp
SWApp als Smartphone-Simulation - β1-Version
Browserfenster (362 x 698 Pixel) öffnen
Alter Taschenrechner im neuen Gehäuse
Taschenrechner als Smartphone-Simulation - α-Version
Browserfenster (362 x 698 Pixel) öffnen
GenuFlor - Pflanzenbestimmung
GenuFlor als Smartphone-Simulation - Prototyp
Browserfenster (362 x 698 Pixel) öffnen
Auf dem Weg in die Zukunft - mit HTML5
Auch wenn HTML5 vom W3C-Konsortium noch nicht offiziell als Standard verabschiedet wurde, beherrschen heute nahezu alle Browser (ob nun auf dem PC, dem Tablet oder im Smartphone) diese Notation bzw. Doctype-Deklaration, welche sehr dynamische Elemente mitbringt, so dass zusammen mit CSS3 lebendige Webseiten erstellt werden können. Da ich aber auch heute noch kein großer Freund von fertigen Lösungen bin, die vielleicht auch von hunderttausenden anderer User 1:1 übernommen wurden, habe ich natürlich wieder eine individuelle Seite kreiert, die sich im Wesentlichen an den schon hier verwendeten Stilelementen orientiert. Die Seite ist zwar HTML5-konform, aber dennoch nicht für alle (mobilen) Geräte optimiert.
Die (neue) HTML5-Webseite - vielleicht nur ein Test ...
in separatem Browserfenster öffnen
Diese Seite sollte ursprünglich direkt von meiner Hauptseite www.Lencioni.de aus aufgerufen
werden. Doch wegen der nicht umfänglichen Gerätekompatibilität erschien es mir sinvoller, die
Seite einfach im Testbereich zu belassen.
Mit diesen Kurzvorstellungen werde ich die Seite erst einmal als abgeschlossen ansehen.
Aber vielleicht schauen Sie ja dennoch von Zeit zu Zeit mal wieder hier vorbei ...