All posts tagged: web development

Wikipedia Redefined

The design company NewIsNew has published a conceptual design how Wikipedia could look like. In my opinion, they have a lot of great ideas and lovely details in the images. So I decided to create a working style based on this design. Because of nearly pure CSS I only included some of the features. To test the style in German or English Wikipedia simply follow the instructions bellow: log in and head to your preferences (Einstellungen) click Appearance (Aussehen) click Custom JS in the simple (Einfach) row to create a simple.js file copy and paste this line: save go back to Appearance and click Custom CSS in the simple (Einfach) row to create a simple.css file copy and paste this line: save go back to Appearance, enable the simple skin and save To get rid of the skin click on your user name, preferences, Appearance and change back to vector. Browser Tests Internet Explorer 8 Works with design issues Internet Explorer 9, 10 Some other bugs (this browser really failes) Firefox 15 Works, please report …

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?

Datenvisualisierung von Fefes Blogzeiten

Ja, ich lese Fefe. Manche Themen sind gut recherchiert, über andere kann ich nur den Kopf schütteln, aber darum soll es hier nicht gehen. Auffällig an dem Blog ist, das er keine Uhrzeiten enthält. Auch im RSS-Feed fehlt jede Angabe. Allerdings haben die Beiträge eine Identifikationsnummer der Art b308810e. Ich wollte wissen, was diese Zeichenketten bedeuten. Liest man sie als hexadezimale Zahl, ergibt sich für die Posts eines Tages eine absteigende Nummerierung. Über die Jahre fällt die Zahl sogar sehr stark. Es muss also einen Zusammenhang mit der Uhrzeit geben, auch wenn etliche Sprünge enthalten sind. Wer möchte, kann sich das mal ansehen. Nach rechts geht die Zeit von 2005 bis 2011, nach oben sinken die IDs. Jeder Punkt steht für einen der 21’786 Posts. Deutlich zu sehen sind die Sprünge alle 0x80000000 Sekunden. Fefe hat nämlich neun Bits der ID invertiert. Dreht man sie mit XOR 0x81013f00 wieder richtig, sind die IDs stetig absteigend. Da er anscheinend ein Fan von binären Operationen ist, beträgt die Differenz zwischen ID und Unix-Zeitstempel genau 0x80000000. // Good …

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 …