Sie sehen sich momentan die Weblog-Einträge zur Kategorie "Netzreisen" an.
27. March 2011
Soeben wurde das neue Kontaktformular für die Website meines Vaters Matthias Griewisch, dem berühmt berüchtigten Cembalobaumeister aus Bammental, online gestellt. Es verfügt jetzt über eine client-seitige Validierung der Formulardaten.
Auf deutsch übersetzt: Die Daten, die der normale Benutzer eingibt, werden direkt auf seinem Rechner auf bestimmte Kritierien überprüft, beispielsweise ob alle Felder ausgefüllt wurden, ob die E-Mail-Adresse gültig ist und so weiter ...
Client-seitig, also mit Javascript (in meinem Falle mithilfe jQuery, Validation-Plugin und dieser Anleitung hier), die vom Benutzer eingegebenen Daten zu überprüfen, hat den Vorteil, dass der Server entlastet wird, da alles auf dem Rechner des jeweiligen Benutzers stattfindet. Bei größeren Anstürmen kann das durchaus nützlich sein. Für das eigentliche Versenden der Daten kommt dann wieder PHP zum Einsatz.
Außerdem hat der Benutzer eine viel direktere Rückmeldung, da jetzt sofort, wenn der Benutzer ein Feld falsch ausgefüllt verlässt, eine entsprechende Fehlermeldung unterhalb des jeweiligen Feldes angezeigt wird.
Falls der Benutzer jetzt Javascript ausgeschaltet haben sollte (solche Leute soll es ja tatsächlich geben ...), sorgt ein kleines PHP-Fallback dafür, dass die Daten trotzdem noch vom Server kontrolliert werden, bevor sie versendet werden.
Und hier kann man sich das neue Kontaktformular anschauen:
Website besuchen »
12. February 2011
Vielleicht haben Sie es schon gesehen: Auf der Website meines Vaters Matthias Griewisch, seines Zeichens Cembalobaumeister aus Bammental, hat sich was getan. Und zwar beim Menüpunkt "Werkstatt": Hier wurde der vorherige Image-Slide-Effekt durch eine richtige Diashow ersetzt, bei der man nun auch anhalten kann und von Hand sich ein Bild aussuchen kann.
Um sich vorab schon mal ein Bild der neuen Galerie machen zu können, klicken Sie doch einfach auf den Screenshot links. Dort sehen Sie, dass die Werkstatt-Galerie ganz ähnlich aufgebaut ist wie die Galerien bei den Einzelansichten der Instrumente: Oben das große Hauptbild, darunter die kleinen Bilder (Thumbnails), auf die Sie klicken können, um das jeweilige Bild oben anzuzeigen. Mithilfe der Pfeile rechts und links neben den Thumbnails können Sie durch die Thumbnail-Liste navigieren. Sie können auch auf das große Hauptbild in den linken oder rechten Bereich klicken (nachdem sich ein Pfeil gebildet hat) und so zum vorherigen (bzw. nächsten) Bild zu springen.
Die eigentliche Diashow können Sie unter dem großen Hauptbild rechts mit den entsprechenden Links (Start / Stop) ... naja, starten und stoppen halt! 
Ist doch irgendwie logisch, oder? Momentan ist die Diashow so eingestellt, dass sie immer fünf Sekunden bei einem Bild verweilt, bis sie zum nächsten Bild springt. Sie sehen rechts neben den Links dann immer einen Countdown, bis zum nächsten Bild gesprungen wird.
Und hier können Sie sich den Effekt auf der richtigen Website anschauen.
Zur Website springen
Für die Webdesigner unter uns: Umgesetzt wurde dieser Effekt (wie immer) mit der Javascript-Bibliothek jQuery und dem Plugin AD Gallery.
10. September 2010
Manchmal mag es schön aussehen, wenn man einer Website eine feste Höhe sowie eine feste Breite verpasst und diese Box, die dabei entsteht, dann vertikal und horizontal zentriert. Wie das geht? Mit ganz wenig CSS. Der folgende Artikel zeigt wie's geht.
Dieses kleine Codeschnipselchen habe ich bei einer meiner zahlreichen Netzreisen gefunden.
#wrapper {
width:800px;
height:600px;
/* für horizontale und vertikale Zentrierung */
position: absolute;
left:50%;
margin-left:-400px; /* Um die Hälfte der Breite nach links schieben */
top:50%;
margin-top:-300px; /* Um die Hälfte der Höhe nach oben schieben */
}
Wie arbeitet der Code? Ganz einfach:
- In Zeile 2 und 3 werden Breite und Höhe des Containers festgelegt.
- Für die horizontale und vertikale Zentrierung ist eine absolute Positionierung des Containers notwendig. (Zeile 5)
- Die nächsten Zeilen sorgen für die eigentliche Zentrierung. (Zeile 6-9) Hierbei sind nur die
margin-Werte jeweils anzupassen. Der margin-left-Wert muss stets die Hälfte der Breite in px betragen, der margin-top-Wert die Hälfte der Höhe in px.
Im HTML legt man dann einfach ein div-Container an, der sämtliche Inhalte enthält:
<div id="wrapper">
<p>Hier kommt sämtlicher Inhalt hin.</p>
</div>
Fertig. Horizontal und vertikal zentriert. So einfach ist das.
28. May 2010
Webdesigner kämpfen immer wieder damit, ihre CSS-Dateien ordentlich zu halten. Eine Möglichkeit ist, viele kleine CSS-Dateien zu erstellen, die dann für jeweils einen bestimmten Bereich der Website das Design zur Verfügung stellen.
Diese Möglichkeit schützt allerdings nicht vor doppelten Angaben innerhalb des Stylesheets. Dafür gibt es jetzt Object Oriented CSS (kurz OOCSS) von Nicole Sullivan.
Ausgangslage
Normalerweise wird eine Box mit rosa Hintergrund und schwarzer Rahmenlinie so definiert:
.boxmitrosarahmen {
background: #8f0824; /* oder irgendetwas anderes rosa farbenes */
border: 1px solid black;
padding: 10px;
}
Im HTML greift man mittels dieses Konstrukts auf die eben festgelegten Formatierungen zurück:
<p class="boxmitrosarahmen">Lorem ipsum…</p>
Einen zweiten Kasten mit anderen Farbwerten kann man analog zum ersten Beispiel erstellen. Wenn man das gemacht hat, fällt auf, dass gewisse Formatierungen der Boxen doppelt definiert wurden:
- Der Innenabstand, der zweimal 10px beträgt
- die Rahmenstärke und der Rahmentyp
Und wo bleibt jetzt das Object Oriented CSS?
Hier setzt OOCSS von Nicole Sullivan an. Es überträgt den Hintergedanken von Objektorientierung (von Programmiersprachen) auf CSS. Ein Gedanke von Objektorientierung ist die Modularisierung: Alles wird auf kleinste Teilchen reduziert, die dann erweitert werden. Unmittelbar damit verbunden ist das sogenannte DRY-Prinzip. “DRY” steht für “Don’t repeat yourself” und fordert, dass nichts doppelt notiert wird. Unser Ausgangsbeispiel verstößt also ganz radikal gegen das DRY-Gesetz.
Wie können wir dem begegnen? Mit Object Oriented CSS. Überlegen wir uns also, wie wir die doppelten Angaben vermeiden. Wir könnten eine Art Basisklasse festlegen, die die grundlegenden Formatierungen für die Boxen festlegt, und einige andere Klassen, die diese Basisklasse erweitern. Die Basisklasse könnte .box heißen und so aussehen:
.box {
padding: 10px;
border-style: solid;
border-width: 1px;
}
Die Erweiterungsklassen könnten nach folgendem Muster angelegt werden:
.rosablack {
background: #8f0824; /* Den Kommentar dazu spare ich mir hier. 
*/
border: 1px solid black;
}
Diese Namensgebung der Erweiterungsklassen (erst der Hintergrundname in einem Wort und dann die Farbe der Rahmenlinie) widerspricht zwar dem uralten Grundsatz, dass man sprechende Klassennamen wie .note oder .important verwenden soll, weil man aus .rosablack nur schwer ablesen kann, wofür diese Klasse zuständig ist. Natürlich könnte man die Klasse auch .note oder .important nennen. Aber für mich war diese Namensgebung praktischer, weil bei mir eine grüne Box (grüner Hintergrund und grüner Rahmen) nicht automatisch eine “Irgendetwas-ist-gut-gelaufen-Box” heißt.
Im HTML greift man dann auf beide Klassen (Basis- und Erweiterungsklasse) gleichzeitig zu, ganz nach Motto:
<p class="box rosablack">Lorem ipsum…</p>
Vor- und Nachteile von OOCSS
Nach dieser ersten Demonstration stellt sich vielleicht die Frage nach den Vor- und Nachteilen von OOCSS.
Ein Nachteil von OOCSS ist sicherlich, dass man mehr schreiben muss (weil die sogenannten short hands im CSS nicht mehr vorhanden sind, bzw. gemäß dem DRY-Prinzip nicht mehr angewendet werden dürfen). Das betrifft allerdings nicht nur das CSS, sondern auch das HTML.
Der Vorteil jedoch ist, dass man nichts mehr doppelt schreibt und so später einmal bei allen Boxen auf einmal, egal welcher Farbe, die Rahmenstärke ändern kann. Dieser Vorteil der Modularisierung des CSS hat mich voll überzeugt und mich dazu bewogen, das Konzept in Maßen auch auf meiner eigenen Website einzusetzen; ich benutze es bei den Kästen, die manchmal im Fließtext auftauchen, und bei den Erfolgs- und Fehlermeldungen beim Kontaktformular.
Ich hoffe, eine gute kleine Einführung in das Thema gegeben zu haben. Vielleicht regt mein Blogeintrag den ein oder anderen Webdesigner, der meine Website besucht, dazu an, doch mal sein CSS und HTML noch mal zu überdenken und OOCSS bei zukünftigen Projekten konsequent einzusetzen.
Weblinks zum Thema
24. April 2009
Schon in der Presse am 20.3.2007, ist dieser Kommentar gegen Latein (Titel: Schafft Latein ab) trotzdem so schön, dass ich ihn hier noch einmal rezitieren möchte. Kursiv und eingerückt daher die Kolumne und zwischen den einzelnen Passagen einige Bemerkungen von mir.
Los geht’s:
Ich gehe in einen Italienischkurs.
Schön. Italienisch ist eine schöne Sprache, so melodisch.
Ich verrate das ungern, weil ein Kollege von mir neulich im Scherz gemeint hat, er mutiere langsam zum Spießer, und wenn das so weitergehe, werde er noch Yoga betreiben oder einen Italienischkurs in der Volkshochschule besuchen, haha – und bei mir ist es zwar nicht Yoga, sondern Pilates, und ich besuche nicht die Volkshochschule, sondern das Italienische Kulturinstitut. Aber die Ähnlichkeit ist nicht zu übersehen.
Was zum Henker soll daran spießig sein, eine Sprache zu lernen? Was soll daran spießig sein? Ich weiß es nicht …
Zwei Lektionen habe ich schon hinter mir, es ist also noch zu früh, um zu sagen, ob ich im Sommer imstande sein werde, mich mit Bademeister Emilio zu unterhalten, der immer geduldig genug war, zu entschlüsseln, was mein Mann und ich mit unserem Gefuchtel meinen. Aber immerhin haben mir zwei Lektionen gereicht, um bestätigt zu finden, was ich vermutet hatte: Latein hilft gar nichts. Nada. Niente. Rien. (Ich hoffe, das stimmt jetzt).
Ist es nicht herrlich? Nach zwei Lektionen weiß sie zwar noch nicht, ob sie je sich mit einem italienischen Bademeister unterhalten wird können (warum zum Teufel erwähnt die seinen Namen? Und dass er immer geduldig genug war, zu entschlüsseln, was mein Mann und ich mit unserem Gefuchtel meinen? Das will doch kein Mensch wissen …), sie weiß jedoch schon, dass ihre Lateinkenntnisse ihr nicht dabei helfen werden. Aber dass Niente von lateinisch nihil abgeleitet wird, ist doch nicht so schwer zu erkennen, oder?
Nun ist es ja nicht so, dass mir Italienisch schwer fällt, im Gegenteil: fare erinnert mich ans französische faire, cancellare ans englische to cancel, dormire ist gleich dormir… Und so bastle ich mir mein Italienisch zusammen – nur an Latein habe ich noch kein einziges Mal gedacht, obwohl ich sechs Jahre Latein hatte und nur vier Französisch.
Aber dass sowohl fare als auch faire vom lateinischen facere kommen, daran haben Sie noch nie gedacht? Oder – noch besser – dormire: Da ist jeder Buchstabe gleich!
Jetzt will ich nicht behaupten, dass das Italienische mit dem Lateinischen gar keine Ähnlichkeit aufweist. Vielleicht tut es das ja. Wahrscheinlich sogar.
Was heißt wahrscheinlich sogar? Natürlich ist Lateinisch dem Italienischen ähnlich. Ist ja schließlich seine Muttersprache. Und diese Ähnlichkeit kann manchmal sogar komplette Gleichheit ablösen (Beispiel: dormire — dormire).
Der Punkt ist: Ich weiß es nicht, ich kann mich nicht mehr daran erinnern, was daher rührt, dass diese Sprache mausetot ist. Ja, ich bin versucht zu sagen: toter, totest. Toter als damals, als diese Sprache auch schon tot war, aber noch der eine oder andere lateinische Satz in der Kirche zu hören war. Und weil sich mein Gehirn nicht merkt, was es 20 Jahre nicht gebraucht hat – Voilà. Ecco. Nix mehr da.
Hier muss ich kurz den Kommentar von Martin Schmid zitieren: “Der Punkt ist: Sie können gar nicht (mehr) Latein, was eventuell mit Ihrem Merkvermögen zusammenhängt, mehr wohl aber noch mit der Tatsache, dass Ihnen Latein als tote Sprache beigebracht wurde.” Richtig so!
Aber die Fremdwörter? Da hab ich die lateinischen auch nicht leichter erlernt als die aus dem Griechischen stammenden. Medizin? Soll man jahrelang Latein büffeln, um sich ein paar Knöchelchen besser zu merken? Die Grammatik? Ach, das Italienische hat doch auch eine Grammatik! Ich wünschte, ich hätte Italienisch gelernt statt Latein. Dann wäre ich jetzt vielleicht nicht so ein Spießer.
Latein ist nicht nur dazu da, sich ein paar Fremdwörter aus anderen Sprachen besser zu merken. Außerdem können Sie, der Sie anscheins über keinerlei Lateinkenntnis verfügen, sich ein Urteil darüber – meiner Meinung nach – nicht erlauben.
Außerdem — um nochmal auf den Titel dieser Story zurück zu kommen — wie wollen Sie eine komplette Sprache abschaffen? Wollen Sie alle Leute, die heutzutage noch Latein lehren, lernen, sprechen und schreiben — und das sind mehr als Sie denken! Garantiert! — wollen Sie etwa alle diese Leute ausrotten? Dafür, dass Sie kein Latein mehr können, können die armen unschuldigen Lateinlehrer, -schüler und -professoren doch nichts, oder?
31. March 2009
Eins steht für mich inzwischen fest: Für das nächste Relaunch meiner Website wird das CMS “Expression Engine” zum Einsatz kommen. Grund: Ich habe gerade die kostenlos verfügbare Core- Version zum Test- Zwecke in einem Unterverzeichnis auf meinem Webserver installiert und ich bin vom Konzept her schon einmal begeistert. Dass man nämlich machen kann, was man nur will. Einzelne Inhaltselemente an beliebiger Stelle auf der Website ausgeben. Dabei können die Designs auch schon mal wechseln. Mit einem CMS wie Wordpress, das momentan auf meiner Hauptseite läuft, könnte ich so etwas nicht machen.
Wann allerdings dieses Relaunch durchgezogen wird, steht noch nicht fest. In einem oder zwei Jahren vielleicht, wenn ich mich etwas eingehender mit Expression Engine beschäftigt habe. Das dauert nämlich seine Zeit, denn momentan gibt es noch kein deutsches Einführungsbuch zur Expression Engine. Und bis man auf den englischen Dokumentationsseiten alles verstanden hat … Das braucht seine Zeit!
Fest steht (oder wie man in der Umgangssprache sagt: “Feststehen tut nur …” ), dass auch alle bisherigen Blogeinträge, die mit Wordpress gemacht wurden, in die neue Website eingepflegt werden werden ( – klingt zwar komisch, ist aber glaube ich richtig so.)
19. March 2009
Manchmal – denke ich mir so – ist es doch ganz gut, dass ich den PCPraxis- Newsletter abonniert habe. So habe ich nämlich heute durch eben diesen Newsletter erfahren, dass das bekannte Linux- Maskottchen, der Pinguin Tux, einem tasmanischen Teufel weichen muss. Dieser wird dann Tuz heißen und für eine Version (Kernel 2.6.29) das Linux- Maskottchen sein; mit Tuz wollen die Linux- Entwickler auf den bedrohten Bestand der Beutelteufel aufmerksam machen.
Das Linux- Maskottchen Tuz für Kernel- Version 2.6.29 - den gelben Schnabel vom Pinguin- Vorgänger Tux durfte der tasmanische Teufel aber erben.
P.S. In der Schule bei uns ham se jetzt auch Linux (Opensuse) installiert – Ubuntu wär’ zwar schöner gewesen (mit GNOME- Desktop), aber egal …
17. January 2009
Schon etwas länger habe ich mich gefragt: Wie wird eigentlich der Begriff « C++ » ausgesprochen? Das wird doch wahrscheinlich nicht so einfach « Zeh plus plus » ausgesprochen, oder? Die Programmiersprache Qt wird schließlich auch wie das englische « cute » ausgesprochen. Aber tatsächlich. Nachdem ich eine Tasse Wasser zum Kochen gebracht hatte – soll heißen, ich habe eine Googlesuche durchgeführt - kam ich zu dem Ergebnis, dass die Programmiersprache C++ tatsächlich « Zeh plus plus » ausgesprochen wird. Das hätte ich nie gedacht.
8. January 2009
Es macht echt Sinn, sein Stylesheet in mehrere kleine Stylesheets aufzuteilen. Statt einem großen hat man dann viele kleine. Sehr sinnvoll. Wenn man dann schnell mal eine Änderung machen möchte, kann man das recht fix erledigen.
Wenn man eine Website von Hand erstellt, geht das Zerlegen des Stylesheets recht einfach. Man macht einfach aus der einen großen Datei (im Beispiel styles.css genannt) viele kleine Dateien (zum Beispiel fundament.css für radikales Reset, layout.css für grobes Layout, sonstige-styles.css für die Feinheiten). Wie das geht, ist klar: Man öffnet die styles.css, erstellt eine neue CSS- Datei und kopiert bestimmte Code- Abschnitte in die neue CSS- Datei hinein, die man dann am Ende zum Beispiel fundament.css nennt. Diese vielen kleinen Stylesheets kann man dann entweder direkt im HTML einbinden, nach dem Motto:
<head>
...
<link rel="stylesheet" type="text/css" href="fundament.css">
...
</head>
Auf diese Weise kann man dann alle CSS- Dateien nacheinander im HTML einbinden.
Möglichkeit zwei ist aber viel eleganter: Man erstellt eine CSS- Datei, nennt sie zentrale.css (oder so ähnlich) und bindet in dieser zentrale.css die einzelnen Stylesheets mit der @import- Regel ein:
@import url("fundament.css"); ...
Im HTML wird dann nur (mit dem <link>- Element, siehe oben) die zentrale.css aufgerufen, der Quellcode wird dadurch ein wenig übersichtlicher gehalten.
Tipp: In Wordpress mit mehreren Stylesheets arbeiten
Natürlich kann man auch in Wordpress mit mehreren Stylesheets arbeiten. Bei meinen Versuchen, mein Stylesheet aufzuteilen, stellte sich heraus, dass es nicht mit der @import- Regel, die ich in styles.css eingebunden hatte, klappt.
Nach ein wenig googeln habe ich allerdings folgendes herausgefunden:
- Die fertigen kleinen Stylesheets werden in den Hauptordner deines Themes, wo auch die
styles.css liegt, abgelegt und mit dem FTP- Programm deiner Wahl (mein persönlicher Favorit ist der Filezilla, ein Open-Source- Programm, das es auch für Linux gibt) in den Hauptordner deines Themes auf dem Webserver hochgeladen.
- Öffne nun in Wordpress die Datei header.php in dem Wordpress- eigenen Editor.
- Gehe zu der Zeile, wo das Hauptstylesheet styles.css eingebunden wird:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Füge – am Besten direkt unter dieser Zeile – folgende Zeile ein:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/comments.css" media="screen"/>
comments.css soll hier nur als Beispiel dienen. Füge stattdessen die Namen deiner Stylesheets ein – für jedes Stylesheet ein solches <link>- Element. Fertig.
26. October 2008
Jawohl, ich gestehe: Wenn ich eine Website sehe, die mir gut erscheint, dann schaue ich auch gerne mal in den Quelltext. So habe ich auch bei http://bertkiewiet.nl/, einer Website von einem Freund meines Vaters, einen Blick hinter die Kulissen gewagt, weil ich wissen wollte, wie er diese Foto- Galerien hinbekommt.
Jawohl, ich gestehe: Wenn ich eine Website sehe, die mir gut erscheint, dann schaue ich auch gerne mal in den Quelltext. So habe ich auch bei http://bertkiewiet.nl/, einer Website von einem Freund meines Vaters, einen Blick hinter die Kulissen gewagt, weil ich wissen wollte, wie er diese Foto- Galerien hinbekommt.
- Wenn im <title> nichts steht, wird der Domain-Name als Seitentitel ausgegeben.
Also schaue ich im <head> der Seite nach: Außer einem <meta>- Element und einem leeren <title>- tag gibt es dort nichts zu sehen. Interessant und neu für mich: Wenn <title></title> (in genau dieser Schreibweise) im <head> steht, dann wird der Domain- Name als Titel für die Browserzeile genutzt.
Wenn dagegen aber kein <title> im <head> angegeben ist, erscheint « Unbenanntes Dokument » oder ähnliches als Seitentitel. Haben Sie schon mal nach diesem Stichwort gegoogelt? Erschreckend, dieses Suchergebnis: Etwa 1.930.000 Seiten haben im Netz den Titel « Unbenanntes Dokument ». Naja, wie auch immer. Ich war etwas abgeschwoffen (falls es dieses Wort gibt; es soll mir hier als Partizip von « abschweifen » dienen).
Jedenfalls: Leider war kein <meta name=“Generator” content=”...”> vorhanden, was mir das Programm verraten hätte, womit Bert seine Website gemacht hat. Jetzt habe ich erfahren, dass er diese Foto- Galerie, die leider auf Flash aufsetzt, mit SimpleViewer gemacht hat. Aber darauf wollte ich nicht hinaus.
Erstmal ist mir schon beim Überfliegen aufgefallen, dass dieser Quelltext sehr unstrukturiert ist. Warum schreibt er mühsam:
<big><span style="font-family: Verdana;">Welcome ...</span></big>
Warum nicht einfach:
<h1>Welcome to the photo website of Bert Kiewiet</h1>
und legt dann im <head> fest:
<style type="text/css">
h1 {
font-size: 130%; /* Oder irgendein anderer Wert,
der dem HTML- tag <big> in etwa entspricht */
font-family: Verdana;
}
</style>
oder (noch besser): Er lagert seine Styles in eine (oder auch mehrere) CSS- Datei (-en) aus:
h1 {
font-size: 130%; /* Oder irgendein anderer Wert,
der dem HTML- tag <big> in etwa entspricht */
font-family: Verdana;
}
Als ob das schon nicht schlimm genug ist (der Code jetzt, an der Website habe ich vom Aussehen her nichts ), legt unser Bert dann auch noch für einen Zeilenumbruch eine Schriftart fest:
<br style="font-family: Verdana;">
Warum nur? Warum muss man für einen Zeilenumbruch eine Schriftart festlegen? Welcher Sinn steckt dahinter? Aber die große Frage bleibt immer noch: Wie hat er es überhaupt geschafft, einem Zeilenumbruch die Schriftart Verdana mit auf den Weg zu geben?