All posts tagged: jquery

Bildergalerie auf voller Breite

Bis vor wenigen Jahren war jede Webseite auf die Breite von 960 Pixeln optimiert, und danach mussten sich Browserfenster sowie Bildschimgröße richten. Das änderte sich, als winzige Telefone und riesige Fernseher plötzlich zum Surfen herhalten mussten. Angesichts der neuen Anforderungen programmierte ich eine minimalistische Bildergalerie, die von 520 px bis 2000 px Fensterbreite funktioniert. Die Bilder werden ohne Scrollen so groß wie möglich angezeigt, aber nicht abgeschnitten. Natürlich gibt es eine Demonstration. Die Fotos stammen aus Wettbewerben der Wikipedia. Wer die Galerie verwenden möchte, kann sie unter CreativeCommons CC-BY-SA herunterladen (12 MB). Die Bilder sind immer im Seitenverhältnis 2:3. Hochformate müssen links und rechts einen farblich passenden Balken bekommen. Auf den ersten Blick klingt dies nach einer Einschränkung. Ich bin aber der Meinung, dass die meisten Browserfenster ungefähr quadratisch oder breiter als hoch sind. Deshalb passen Querformate einfach besser. Und wenn die Hochformate schon zwangsläufig links und rechts Platz haben, sollte dieser wenigstens immer mit etwas Passendem gefüllt sein und nicht in einer Einheitsfarbe. Die Anpassung an eigene Bilder und Texte ist zugegebenermaßen etwas umständlich. Es können zwei bis …

Fußball WM 2011 – BINGO!

Die Fußball WM ist mal wieder in Deutschland. Es handelt sich keineswegs um das Sommermärchen 2006. Nicht einmal Jogi Löw und Kaiser Franz Beckenbauer sind dabei. Aber auch mit Germanys Next Topmodel hat das Turnier wenig gemeinsam. Viel mehr nennt sich der Spaß FIFA Frauen-Weltmeisterschaft Deutschland 2011. Wir reden also von Sport. Mit Frauen. In Deutschland. Dieses Jahr. Sommer­mädchen Trikottausch Weiblichkeit nicht verleugnen Frauen am Ball Kaffeeservice trotz unsere Mädels Lesben sexy Bajramaj Mannweiber schönstes WM-Girl Fußball-Barbie schönerer Fußball Weltmeister­innen der Herzen Bindegewebe WM-Schönheit Sommer­märchen ausverkauft Stollen statt Absätzen Minirock Jogis Mädels Ballkönigin Prima Ballerina Kapitänin Den Bullshit-Bingozettel mischen, hier ausdrucken, und sobald der Komentator eine Phrase aufwärmt ankreuzen! Vier Kreuze in einer Reihe gewinnen. Das Original stammt von Extra 3. Welche Phrasen fehlen noch?

Bastard Open Web Project

Admins dürfen ja alles und sind für nichts ver­ant­wort­lich. Sie nen­nen sich /root, lö­schen mal eben ei­nen Hau­fen User­da­ten. Wenn es dann Är­ger gibt, wuss­ten sie nicht, was rm -rf be­deu­tet, denn sie sind ja keine Ent­wick­ler und schon gar nicht An­ge­stell­te des Com­pu­ter­her­stel­lers. Diesen ge­nial­sten Job aller Zei­ten be­schrieb Si­mon Tra­va­glia in Ba­stard Ope­ra­tor from Hell ein­drucks­voll. Die deut­sche Ver­sion kommt von Flo­rian Schiel, nennt sich Ba­stard Assis­tant from Hell (BAfH) und spielt an der Uni Mün­chen. Ihr solltet euch die Ge­schich­ten des BAfH mal an­sehen. Jedenfalls, und da­rum geht es hier ei­gent­lich, hat der BAfH auch eine Web­seite, und zwar das Ba­stard Open Web Pro­ject (BOWP), powered by netAction. Das ist ein Point and Click Ad­ven­ture, bei dem sich jeder Spiel­stand book­mar­ken lässt. Es ist in PHP ge­schrie­ben und kommt voll­ständig ohne Java­Script aus. Alle Ele­men­te in den Räu­men sind in solchen Text­dateien be­schrie­ben, die erste Zeile ist ein Kommentar: , Sammelrabe koordinaten, 110,134,30,45 ifnot, q131, hoverbild, rabe30x45alpha.gif Ausredenkalender Als Gag gibt es seit 2005 einen Ausredenkalender, den ich mit einem Cronjob füttere. …

Druckluftkissen Konfigurator

Eine Anwen­dung ganz in jQuery zu schreiben bedeutet Lux­us­pro­bleme zu lösen. Im Browser lassen sich geniale Benut­zer­füh­run­gen um­set­zen, die mit PHP auf dem Server gar nicht denk­bar wären. Die Nutzung des Ange­bo­tes bringt aber auch expo­nen­tiell so viele Heraus­for­de­run­gen mit sich. Zum Beis­piel klickt man sich in ser­ver­seitig pro­gram­mier­ten Web­an­wen­dun­gen nach­ein­an­der durch eine Viel­zahl For­mu­lare. Das geht auf dem Client auch, kein Pro­blem. Aber man kann es auch so gestal­ten, dass sich per­ma­nent jede Ein­stel­lung än­dern lässt. Klingt gut, muss nur erst ein­mal pro­gram­miert wer­den. Von Druck­luft­kis­sen Tech­nik GmbH be­kam ich den Auf­trag für ei­nen Druck­luft­kis­sen Kon­fi­gu­ra­tor. Da­mit stel­len die Kun­den ihr Pro­dukt zu­sam­men und se­hen, was die Fir­ma fer­ti­gen kann. Die grafische Darstellung geschieht übrigens durch Übereinanderlegen von gut 2000 Einzelbildern. Wer den Quellcode sehen möchte, findet den aktuellen Stand im Subversion Repository: $ svn checkout https://svn.netaction.de/svn/druckluftkissen-konfigurator/

Enable raw HTML and execute PHP in WordPress

My fourth WordPress Plugin has the name Enable RAW HTML – Disable Corruption. It switches all the filters for your content off. Everything you type will be sent to your visitor’s browser. The filters are wp_autop, convert_chars, wptexturize. If you need the same functions not only for posts and pages but also for excerpts or something else, have a look in the source and edit what you need. You can even enable PHP execution if you want. There are many plugins like this, but this is the most effective. Now you get what you type.

Kalender per jsonP in die eigene Webseite

Für das freie Kalenderprojekt GriCal schrieb ich ein kleines Script in jQuery. Es ermöglicht Webmastern, mit geringem Aufwand einen Überblick der anstehenden Termine auf ihrer Webseite anzuzeigen. Die Daten gehen nicht über den eigenen Webserver, sondern werden vom Browser direkt beim Kalenderprojekt angefordert. Dies geschieht mit jsonP und nicht mit Frames oder iFrames. jsonP ist ein Format für Arrays, die in ausführbarem Code eingebettet sind. Es ist sehr viel schlanker und vielseitiger als HTML, außerdem lässt es sich über Domains hinweg vom Browser laden. Nächste Events Powered by GriCal Die Funktion getJSON() holt die Daten im Format jsonP, in diesem Fall mit der Anfrage nach Terminen in Berlin. Anschließend werden mit each() alle erhaltenen Elemente des Arrays mit HTML verpackt und in das vorbereitete DIV-Element #calendar geschrieben: <script type="text/javascript"> function gridcalendar() { $('#gridcalendar div.gridcalendarEvent').remove(); $('#gridcalendar p:last').remove(); var url = 'http://dev.grical.org/s/?query='+ encodeURIComponent($('#gridcalendar input').val())+ '&view=json&limit=6&jsonp=?'; $.getJSON(url, function(data) { $.each(data, function(key, val) { var datefields = val.fields.start.split('-'); $('#gridcalendar').append( '<div class="gridcalendarEvent">'+ '<div class="gridcalendarDate">Start: '+ (datefields[2]*1)+'. '+(datefields[1]*1)+'. '+ datefields[0]+ '</div>'+ '<div class="gridcalendarTitle">'+ '<a href="https://www.grical.org/e/show/'+val.pk+'/">'+ val.fields.title+'</a>'+ '</div></div>' ); }); if (data.length<1) …

Hashbang

Manchmal soll ein Teil einer Webseite erst nach einem Klick sichtbar sein, zum Beispiel wenn im Shop das Impressum aufklappt oder eine Artikelbeschreibung. Mit JavaScript kein Problem, mittels Hash (diese Anker-Adressen mit #) lassen sich sogar Deep-Links bilden, aber die Suchmaschinen finden die Zusatzinformationen nicht. Seit kurzem gibt es die Lösung namens Hashbang. Darauf geht Google in einem Artikel genauer ein. Facebook hat es schon lange. Home Hund Katze klick was an! Klick eines der Tiere an. Nicht nur der Text daneben ändert sich, sondern auch die URL. Google bietet zwar einen Weg, auch diese Inhalte zu indizieren, aber dafür muss beim Crawlen das Programm zur Erstellung des Inhaltes ausgeführt werden. Nach eigener Untersuchung führt Google nicht mal die einfachsten JavaScript-Schnipsel aus. Das heißt, die Inhalte für den Crawler müssen serverseitig bereitgestellt werden. Entweder wird die Logik des Hund-Katze-Programmes komplett in PHP nachprogrammiert, oder ein serverseitiger Textbrowser führt das JavaScript aus und gibt dem Crawler seine Seite. Lösung Ein Mittelweg ist, dass das PHP-Script auf dem Server nur die wichtigsten Inhalte der Seiten findet und …

WordPress Plugin Nivo Slider Light

Eine der unauffälligsten Bildergalerien ist der Nivo Slider. Außer zwei Pfeilen im Bild oder wahlweise einer Reihe Punkten unter dem Bild ist keine Navigation zu sehen. Die Bilder wechseln automatisch nach einer einstellbaren Zeit, wenn man nicht klickt. Die Übergänge zwischen den Bildern sind fließend, das Script wurde in jQuery geschrieben. Um diese Bildergalerie in WordPress zu nutzen, schrieb ich das Plugin Nivo Slider Light. Es beeinflusst keine andere Galerie und ist nicht mit der Mediathek verbunden. Um das Plugin einzubinden muss statt dessen der HTML-Code der Galerie manuell in den Artikel getippt werden: <div class="nivoSlider" style="height:200px; width:600px;"> <img src="/wp-content/uploads/image1.jpg" /> <img src="/wp-content/uploads/image2.jpg" /> <img src="/wp-content/uploads/image3.jpg" /> <img src="/wp-content/uploads/image4.jpg" /> <img src="/wp-content/uploads/image5.jpg" /> </div> Über den Plugin-Editor im Administrationsbereich von WordPress lassen sich alle Einstellungen am Slider vornehmen und die CSS-Datei bearbeiten. Demo1 – Demo2 – Nivo Slider Light Installation Das Syntax Highlighting geschieht auch in diesem Artikel mit dem WordPress Plugin Jush Syntax Highlighter. Wenn Vorschaubilder der Galerie angezeigt werden sollen und eine Verbindung mit der WordPress Mediathek gefragt ist, lohnt sich ein Blick …

WordPress Plugin JUSH JavaScript Syntax Highlighter

Kurz nach simple scrollbar gallery erscheint mein zweites WordPress Plugin. Ein Wrapper für das jQuery-Plugin JUSH JavaScript Syntax Highlighter. Durch das Script wird der Inhalt von jedem <pre class=”jush”> in Artikeln oder Seiten mit einer Syntaxhervorhebung bunt dargestellt. Nebenbei verlinkt JUSH alle erkannten Befehle zur Befehlsreferenz der jeweiligen Sprache, damit die Besucher deren Funktion mit einem Klick nach­schlagen können. Das Script erkennt recht zuverlässig die richtigen Sprachen. Da­durch wird PHP in HTML und auch ein SQL-Query in PHP erkannt und hervorgehoben: <html> <body><? $result = mysql_query(‘SELECT * FROM table WHERE 1=1’); ?></body> </html> Der Quellcode muss mit einem der Online HTML Encoder oder PHPs htmlspecialchars() maskiert werden, damit zum Beispiel spitze Klammern nicht als HTML-Tags erkannt werden. Als Einrückung haben sich Leerzeichen bewährt, weil die Browser Tabs kaum vorhersehbar anzeigen. Das Styling steht in einer kleinen CSS-Datei und kann beliebig angepasst werden. Installiert wird JUSH JavaScript Syntax Highlighter für WordPress am Einfachsten aus WordPress im Adminbereich unter Plugins über die Suche. Dort findet sich auch das Plugin von Ladislav Prskavec, der zwar sehr nett ist, …

Twitter Updates auf der eigenen Webseite

Dieser Artikel enthält keine bahnbrechenden Neuigkeiten. Genau genommen gab es alles schon irgendwo. Allerdings werden viele interessante Techniken in einem kleinen Programm verwendet, was vielleicht doch einen Blick wert ist. Die Aufgabe bestand darin, einen Microblog in eine Webseite einzubauen. Selber hosten wäre zu einfach und zu zuverlässig, ich entschied zugunsten von Twitter. Aus mehreren Gründen ist es ungünstig den Tweet in den Browser des Besuchers direkt von Twitter laden zu lassen, zum Beispiel mit Ajax oder einem iFrame. Erstens hat Twitter dann Informationen über die Besucher, zweitens dauert das durch den DNS Resolve von twitter.com und den nachfolgenden Aufbau der HTTP-Verbindung unnötig lange und drittens gäbe es bei einer HTTPS-Seite clientseitige Warnungen wegen mangelnder SSL-Verschlüsselung. Also kommt ein kleiner Proxy, man kann auch sagen Repeater auf den Webserver. Er braucht eigentlich nur den Tweet zu holen und an den Client durchzureichen. Wenn er schon mal da ist, kann er auch gleich mit einem Cache die langsame Twitter-API und die häufigen Twitter Downtimes abpuffern. Und nebenbei noch die Hashtags und User mit je einem preg_replace …