Codeschnipsel Archive - oreillyblog

CSS Secrets 3/3: Spaltenbreiten in Tabellen zähmen

Corina Pahrmann — Fri, 05 Jan 2018 07:31:45 +0000

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir im oreillyblog. Auf Silbentrennung und Checkbox-Design folgt „Spaltenbreite in Tabellen zähmen“. Das Problem Auch wenn wir schon vor langer Zeit aufgehört haben, Tabellen für das Layout zu benutzen, haben sie auch auf modernen Websites noch ihre Berechtigung. Tabellen werden benutzt, um tabellarische Daten (Statistiken, E-Mails, Listen von Dingen mit vielen Metadaten und vieles andere) darzustellen. Außerdem können wir andere Elemente dazu bringen, sich wie Tabellenelemente zu verhalten, indem wir die tabellenspezifischen Schlüsselwörter für die Eigenschaft display verwenden. Obwohl ihre Benutzung gelegentlich sehr bequem zu sein scheint, ist das Layout von Tabellen bei dynamischen Inhalten nur schwer vorherzusagen. Der Grund ist, dass die Spaltenbreite dem vorhandenen Inhalt angepasst wird, wobei selbst explizite width-Angaben eher als eine Art Empfehlung interpretiert werden, wie in Abbildung 7.5 zu sehen ist. Aus diesem Grund benutzen wir oft andere Elemente für tabellarische Daten, oder wir finden uns damit ab, nicht alles vorhersagen zu können. …

Der Beitrag CSS Secrets 3/3: Spaltenbreiten in Tabellen zähmen erschien zuerst auf oreillyblog.

CSS Secrets 2/3: Eigenes Design für Checkboxen

Corina Pahrmann — Fri, 08 Dec 2017 07:38:08 +0000

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir im oreillyblog. Nach Silbentrennung geht es heute um Checkbox-Designs. Problem Designer wollen möglichst jedes Website-Element genau kontrollieren. Müssen Grafikdesigner mit beschränkter CSS-Erfahrung ein Website-Mockup erstellen, haben die Formularelemente fast immer ein Design, bei dem sich der CSS-Entwickler am liebsten die Haare ausreißen würde. Aus Gründen der Lesbarkeit sprechen wir in diesem Secret von Checkboxen (oder „Ankreuzfelder“). Trotzdem lässt sich alles hier Besprochene nicht nur auf Checkboxen, sondern auch auf Radiobuttons anwenden, falls nicht anders vermerkt. Als CSS eingeführt wurde, waren Stildefinitionen für Formulare nur sehr beschränkt nutzbar. Selbst heute sind sie in den verschiedenen CSS-Spezifikationen nicht besonders klar formuliert. Allerdings haben die Browser im Laufe der Jahre immer mehr CSS-Eigenschaften für Formularelemente zugelassen, wodurch es inzwischen recht große Gestaltungsmöglichkeiten gibt. Leider gehören Checkboxen und Radiobuttons nicht zu diesen Formularelementen. Bis heute ermöglichen die meisten Browser so gut wie keine Stildefinitionen. Als Folge finden sich die Website-Autoren entweder mit dem …

Der Beitrag CSS Secrets 2/3: Eigenes Design für Checkboxen erschien zuerst auf oreillyblog.

CSS Secrets 1/3: Silbentrennung

Corina Pahrmann — Fri, 17 Nov 2017 07:55:31 +0000

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir nun im oreillyblog. Wir beginnen mit CSS Secret Nr. 20 aus dem Kapitel „Typografie“: Silbentrennung. Das Problem Designer lieben Blocksatz. Wenn Sie sich ein beliebiges, gut designtes Magazin oder Buch ansehen, ist er ständig zu sehen. Im Web wird der Blocksatz dagegen eher selten verwendet und von geschickten Designern eher noch weniger. Warum ist das so, obwohl wir doch schon seit CSS 1 text-align: justify; definieren können? Der Grund wir klar, wenn Sie sich die folgende Abbildung ansehen. Typografen sprechen hier von einem „Gießbach“ aus Leerraum, der entsteht, wenn die Wortabstände angepasst werden müssen, um den Blocksatz zu erzeugen. Das sieht nicht nur unschön aus, es behindert auch die Lesbarkeit. Im Druck geht der Blocksatz Hand in Hand mit der Silbentrennung. Durch das Fortführen eines Worts auf der folgenden Zeile muss deutlich weniger Leerraum eingefügt werden, wodurch der Text wesentlich natürlicher wirkt. Lösungen für die Silbentrennung im Web gibt es einige. Allerdings …

Der Beitrag CSS Secrets 1/3: Silbentrennung erschien zuerst auf oreillyblog.

Der twitternde Tiefkühlschrank

Alexander Plaum — Tue, 30 Apr 2013 13:06:15 +0000

Ein Gastbeitrag von Torsten Dillenburg Als Papa eines kleinen Jungen muss man ja viel mitmachen. Ständig klaut der Sohn einem das iPad, um The Big Bang Theory zu schauen, oder er verstellt am iMac die Auflösung. Und letztens hat dann mein geliebter Filius die Küche für sich endeckt. War ja auch klar. 1. kommt da das lecker Essen her und 2. gibt es dort viele Knöpfe zu drücken. Zum Glück hat der Induktionsherd eine Kindersicherung! Aber den Tiefkühlschrank hat’s erwischt… Ein vernünftiger Dreijähriger muss natürlich auf den leuchtend grünen Knopf drücken: Und außerdem die Tür öffnen (diese Kraft, erstaunlich). Leider funktioniert der Temperaturalarm nur dann, wenn der Tiefkühlschrank auch eingeschaltet ist. Zugegeben, das musste ja alles mal abgetaut werden, aber doch nicht so! Nachdem die letzten Fischstäbchen ihr Seepferdchen gemacht hatten, der Rest an brauchbaren Nahrungsmitteln verputzt und die Küche wieder trocken gelegt war stand für mich fest: Das geht so nicht weiter! Was man zur Risikominimierung braucht ein Raspberry Pi Model B eine SD Karte (mindestens Class 10 mit 8GB) einen DS18B20-Temperatursensor einen 4,7k Ohm-Widerstand eine USB Tastatur …

Der Beitrag Der twitternde Tiefkühlschrank erschien zuerst auf oreillyblog.

Zum Frühlingsbeginn: Einfache Funktionsdefinitionen in Python

Alexander Plaum — Wed, 20 Mar 2013 13:24:45 +0000

Nein, unsere Codeschnipsel-Ecke wurde nicht abgeschafft. Sie hat nur Winterschlaf gehalten. Zugegebenermaßen recht lange. Nun, da der Frühling zwar nicht wettertechnisch, aber immerhin astronomisch beginnt, gibt’s endlich noch mal eine Erklärung mit Code. Im Fokus des folgenden Beitrags: Die leicht zu erlernende Programmiersprache Python, zwei Funktionsdefinitionen, Veronika – und der Lenz (Konzept/Originaltext von Allen B. Downey, Übersetzung von Stefan Fröhlich, redaktionelle Überarbeitung: AP). Eine Funktionsdefinition gibt den Namen einer neuen Funktion sowie die Reihe von Anweisungen an, die beim Aufruf der Funktion ausgeführt werden sollen. Hier ein Beispiel: >>> def zeige_text(): print "Veronika, der Lenz ist da." print "Die Mädchen singen trallala." def ist ein Schlüsselwort, das eine Funktionsdefinition kennzeichnet. Der Name dieser Funktion lautet zeige_text. Die Regeln für Funktionsnamen sind die gleichen wie für Variablennamen: Buchstaben, Zahlen und einige Interpunktionszeichen sind zulässig, aber das erste Zeichen darf keine Zahl sein. Außerdem dürfen Sie kein Schlüsselwort als Funktionsnamen wählen. Und Sie sollten vermeiden, für eine Funktion und eine Variable denselben Namen zu verwenden. Die leeren Klammern nach dem Namen zeigen an, dass diese Funktion keine Argumente erwartet. Die erste Zeile der Funktionsdefinition bezeichnet man als Header, …

Der Beitrag Zum Frühlingsbeginn: Einfache Funktionsdefinitionen in Python erschien zuerst auf oreillyblog.

iOS-Rezepte: STAR WARS Crawl basteln!

Alexander Plaum — Thu, 03 May 2012 10:11:00 +0000

App-Entwicklung muss nicht staubtrocken sein. Das illustriert ein weiteres Beispiel aus unserem neuen Kochbuch iOS-Rezepte. Matt Drance und Paul Warren erklären darin, wie man seine iPhone- oder iPad-App mit einem perspektisch scrollenden Vor-, Zwischen- oder Abspann austattet, auch bekannt als „Star Wars Crawl“. Wir rufen allen jungen iOS-Padawanen ein herzliches „Möge die Macht mit euch sein!“ zu – und übergeben an die Autoren: Obwohl das Beispiel eher spielerischer Natur ist, illustriert es einige wichtige Techniken. Die drei Elemente, die eine genauere Betrachtung wert sind, sind die Verwendung einer Transformation zur Verzerrung des Texts, der Einsatz von Core Animation, um den Text-View automatisch scrollen zu lassen, und der Einsatz des AVAudio-Frameworks zur Musikwiedergabe. Die Arbeit mit 3-D-Transformationen kann eine Herausforderung sein, aber üblicherweise nutzen wir dazu Matrizen, mit denen wir die Transformationen über die Bibliotheksmethoden erstellen, die für uns von Core Animation definiert werden, z.B. Skalierung (CATransform3DMakeScale), Rotation (CATransform3DMakeRotation) und Translation (CATransform-3DMakeTranslation). Wir können auch direkt auf die einzelnen Elemente der Matrizen zugreifen, um einige sehr interessante Effekte zu gestalten. Im folgenden Code können Sie sehen, …

Der Beitrag iOS-Rezepte: STAR WARS Crawl basteln! erschien zuerst auf oreillyblog.

jQuery-Rezept: Textfelder automatisch vervollständigen

Nathalie Pelz — Wed, 21 Jul 2010 12:04:31 +0000

Problem Es gibt zwei HTML-Eingabefeld-Typen, bei denen ein Anwender einen Wert aus einer Liste bestehender Werte auswählen kann: Radio Buttons und Selects. Radio Buttons sind für Listen mit bis zu acht Einträgen sinnvoll, während Selects bis zu 30 oder 150 Einträgen noch gut anwendbar sind – abhängig von der Art der Daten. Wenn der Anwender aber auch einen neuen Wert eintragen kann, helfen sie nicht weiter – meist wird ihnen dann ein Feld »Andere« beigestellt. Wird die Liste richtig groß – 500 oder sogar 500.000 Einträge, dann sind auch sie nicht mehr verwendbar. Lösung Das Autocomplete-Widget von jQuery UI kann die verschiedenen Situationen abdecken, in denen ein Select nicht ausreichend ist. Im einfachsten Fall sind die anzuzeigenden Daten in einem JavaScript-Array verfügbar: Wählen Sie einen Monat aus: var months = [’Januar’, ’Februar’, ’März’, ’April’, ’Mai’, ’Juni’, ’Juli’, ’August’, ’September’, ’Oktober’, ’November’, ’Dezember’]; $("#month").autocomplete({ source: months }); Hier wenden wir das Autocomplete-Plugin auf ein Eingabefeld für einen Monat an, wobei die Daten in einem einfachen JavaScript-Array bereitgestellt werden. Sind die Daten noch nicht auf Client-Seite vorhanden, …

Der Beitrag jQuery-Rezept: Textfelder automatisch vervollständigen erschien zuerst auf oreillyblog.

Ist das ein Bug von jQuery?

Nathalie Pelz — Fri, 09 Jul 2010 11:39:41 +0000

Problem Sie nutzen jQuery-Code, um ein verborgenes Element anzuzeigen und dessen HTML-Inhalt nach einer Zeitverzögerung zu setzen, die Sie mit setTimeout() erzeugen: function delayLog(text) { setTimeout( "$(’#log’).show().html(text)", 1000); } // Irgendwo weiter unten im Code delayLog(’Hello’); Der Aufruf von .show() funktioniert, aber der von .html(text) führt nicht zum gewünschten Ergebnis. Die Firebug-Konsole zeigt, dass die Variable text nicht definiert ist. Der gleiche jQuery-Code funktioniert, wenn er nicht per setTimeout() aufgerufen wird. Gibt es ein Problem, wenn jQuery zusammen mit setTimeout() genutzt wird? Lösung Eine Möglichkeit, herauszufinden, ob jQuery die Ursache des Problems ist, ist das Ersetzen Ihres jQuery-Codes durch anderen JavaScript-Code, der kein jQuery verwendet. In diesem Beispiel können wir den jQuery-Code durch ein einfaches alert() austauschen: function delayLog( text ) { setTimeout( "alert(text)", 1000 ); } Wenn wir diese Version des Codes auszuprobieren, taucht das gleiche Problem auf – es gibt keinen Alert und Firebug meldet wieder, dass text nicht definiert ist. Damit haben wir das Problem zwar noch nicht gelöst, es aber deutlich eingeschränkt. Es ist ganz offensichtlich nicht jQuery (sofern nicht die …

Der Beitrag Ist das ein Bug von jQuery? erschien zuerst auf oreillyblog.

Arrays mit jQuery.grep filtern

Nathalie Pelz — Mon, 21 Jun 2010 12:12:23 +0000

Wenn man über jQuery spricht, geht es häufig um die Hauptkonzepte – das Bearbeiten des DOM und der Styles sowie die Events. Es gibt aber noch eine ganze Reihe weiterer „Core“-Features und Hilfsfunktionen, die dem Entwickler entgegenkommen. Dies ist eine der nicht so bekannten Hilfsmethoden von jQuery. Problem Sie müssen Elemente in einem Array filtern und entfernen. Lösung (function($) { $(document).ready(function() { var months = [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']; months = $.grep(months, function(value, i) { return ( value.indexOf('J') == 0 ); }); $('#months').html( '<li>'+ months.join ('</li><li>') + '</li>'); }); })(jQuery); Diskussion Dieses Rezept nutzt die Methode $.grep(), um das Array months so zu filtern, dass es nur Einträge entält, die mit dem Großbuchstaben J beginnen. Die Methode $.grep gibt das gefilterte Array zurück. Der vom Entwickler definierten Callback-Methode werden zwei Argumente übergeben. Sie muss den Booleschen Wert true zurückgeben, wenn ein Element beibehalten werden soll, oder false, wenn es verworfen werden kann. Das erste Argument ist der Wert des Array-Elements (in diesem Fall der Monat), während …

Der Beitrag Arrays mit jQuery.grep filtern erschien zuerst auf oreillyblog.

Von Hamstern und Systemadministratoren – cucumber-nagios

Volker Bombien — Mon, 22 Mar 2010 10:11:04 +0000

In seinem Gastbeitrag beleuchtet Tobias Scherbaum, Autor vom Praxisbuch Nagios, das interessante Nagios-Check-Plugin cucumber-nagios, das automatisch die Verfügbarkeit von Web-Diensten prüft. Mit den üblichen Check-Plugins, welche Nagios von Haus aus mitbringt, lässt sich die Verfügbarkeit von Diensten wunderbar prüfen. Hier beginnt aber auch schon das Dilemma: Die Verfügbarkeit eines Dienstes sagt noch nicht wirklich viel über die praktische Nutzbarkeit des Dienstes aus. Ein Webserver kann weiter munter Webseiten mit dem Status-Code 200 ausliefern, auch wenn die Webseite für den Nutzer praktisch nicht mehr nutzbar ist. Stellen Sie sich die eBay-Webseite ohne funktionierende Suchmöglichkeit vor – die Seite ist zwar grundsätzlich verfügbar, ein für den Nutzer wichtiger Bestandteil der Funktionalität jedoch nicht. Brauchte man bisher entweder einen Hamster, der regelmäßig genau diese Funktionalität prüfte, oder zumindest grundlegende Perl-Kenntnisse und etwas Zeit um ein eigenes Check-Plugin zu programmieren, gibt es mit cucumber-nagios eine echte Alternative. Exemplarisch wollen wir die Suchfunktion auf der O’Reilly Webseite prüfen und sicherstellen, dass das Praxisbuch Nagios im Online-Katalog gefunden werden kann. Lassen Sie uns den Hamster wieder in den Käfig bringen ;) …

Der Beitrag Von Hamstern und Systemadministratoren – cucumber-nagios erschien zuerst auf oreillyblog.