einstellungen

felix schwenzel,    

hier kann man ein paar grundeinstellungen für wirres.net vornehmen. die einstellungen werden für mindestens 14 tage per cookie gespeichert.

werbung

seit 2004 kann man auf wirres.net die werbung abschalten. derzeit geht es indem man einfach die taste „w“ drückt oder auf diesen link klickt: werbung aus

kompaktansicht

die übersichtsseeiten zeigen in der regel die artikel in ganzer länge. übersichtlicher wird möglicherweise mit der kompaktansicht. die kann man mit der taste „x“ an (und aus) schalten, oder mit diesem link: kompaktansicht an

j/k-navigation

das ist zwar keine einstellung, geht aber. „j“ springt zum nächsten artikel, „k“ zum vorherigen. das geht auch mit n/p (n=next, p=previous), beachtet allerdings auch einzelne links.

schriftarten

hier folgt, wenn ich mal lust habe, ein schriftumschalter. es soll ja leute geben, die die brevia und das brevia-k nicht so mögen.

reaktionen

standardmässig lädt auf wirres.net nur die werbung, der ivw-zähler und die piwik-statistik (mittlerweile zwei piwik-statistiken, mokono zählt auch nochmal per piwik die besucher). social-buttons oder die kommentare werden beim ersten besuch nicht geladen, auch nicht deren scripte. erst beim aufklappen beispielsweise des twitter sliders wird code von twitter nachgeladen und eventuell vorhandene tweetbacks (lokal) nachgeladen. die sliderstellung wird ebenfalls per cookie gespeichert, bleibt also auch auf anderen seiten offen.

tastaturbedienung

  • j/k — vor und zurück
  • n/p — vor und zurück
  • x — kompaktansicht an/aus
  • y — navigationsslider ein/ausblenden
  • t — twitterslider auf/zuklappen
  • f — facebookslider auf/zuklappen
  • p — plusoneslider auf/zuklappen
  • r — readabilityslider auf/zuklappen
  • l — flattrslider auf/zuklappen
  • k — kommentarslider auf/zuklappen
  • s — suche

wirres.net redesign

felix schwenzel,    

wirres hat angefangen mit einem tabellen-basierten layout. ganz schreckliche konstruktionen waren das damals, aber so hat man das halt damals gemacht.

wirres.net 1

vor ein paar jahren habe ich das layout dann ohne tabellen, mit CSS und HTML gebaut.

wirres.net 2

jetzt fand ich es an der zeit, ein layout zu bauen das zumindest ansatzweise auf HTML5 basiert. ansatzweise deshalb, weil die konstruktion, glaube ich, nichtmal im traum den validator-test besteht. aber auch das ist ein dauerzustand, seit beinahe 10 jahren. ausserdem war mir nach mehr weissraum und vor allem nach einem reaktionsfähigen (responsive) layout, ein layout also, dass keine separate mobil-site benötigt um auf mobilen geräten einigermassen auszusehen, sondern sich mit hilfe von media-queries an das ausgabegerät, bzw. die darstellungsfähigkeiten anpasst (das ist unter anderem hier ganz schön erklärt). denn auch das nervte mich ein bisschen, wie wirres.net auf dem mobiltelefon aussah. vor zwei jahren war ich kurz davor eine separate mobile version zu bauen, die die browser-kennung analysiert und entsprechend zur desktop- oder mobilvariante weiterleitet. das hätte aber für jeweils eine seite, verschiedene URLs erfordert. das fand ich dann doch irgendwie doof.

wirres.net 3

wirres.net 3 mit reaktion

die basis für mein redesign war die HTML5 boilerplate. in diesem grundgerüst war die grundstruktur vorgegeben und bibliotheken wie modernizr.js, respond.js (bei mir noch nicht 100%ig implementiert) oder die CSS-ansätze für CSS-resets und media-queries enthalten, auf die ich aufbauen konnte. dank HTML5 ist die struktur der seite auch ansatzweise semantisch und etwas DIV-reduzierter als vorher. aber auch das ist noch verbesserungswürdig. ein paar microformate hatte ich bereits in der alten version eingebaut, neben hcard und dem datumsgedöns wie microformats es empfiehlt, ist jetzt auch das hnews-microformat, wie es von readability empfohlen wird, eingebaut. apropos datumsformat. bisher habe ich das datum immer so codiert, damit es suchmaschinen auch erkennen (bei google klappt das ganz gut):

<abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ">DD.MM.YYYY</abbr>

da ich das datum jetzt zweimal anzeige, steht das jetzt weiterhin unten mit <abbr> codiert und oben in html (der time-auszeichnung traue ich noch nicht so ganz):

<time class="published" datetime="YYYY-MM-DDThh:mm:ss+ZZ:ZZ" pubdate>DD.MM.YYYY</time>

nach dem boiler-plate-grundgerüst hab ich mir die ia-seite ziemlich genau angesehen und von dort einige CSS-styles einfach übernommen. anfangs auch das raster und die in sich zusammenfallenden spalten-konstruktionen für weniger breite browser-fenster.

von der boilerplate und dem ia-design habe ich auch die schriftgrössen übernommen: 100% oder 1em. ob das so bleibt oder welche schriften ich künftig verwende überlege ich noch. das feedback auf die 100%-schrift war ja auch nicht so dolle. vielleicht ist das alles wirklich noch nen tacken zu gross.

der spass am responsive-design ist natürlich, dass man nicht für ein layout, sondern mindestens drei layouts gestalten muss. die seitenleiste mit den artikelbildern oder der „factbox“ die im desktop-layout links rausragt, hat im layout fürs telefon oder tablet keinen platz mehr, muss also hübsch kollabieren. so sieht das dann aus:

wirres.net 3 artikelbild

* * *

wirres.net 3 factbox

auch die dreiecke für die aufklapp-slider haben auf mobilen geräten keinen platz, dort werden also per mediaquery statt dreiecken plus- und minuszeichen angezeigt. auch die favicons bei den links rücken auf dem desktop (grösser als 1024px) nach links, bei kleineren layout nicht.

die navigation hat mir ein bisschen kopfzerbrechen bereitet. grundsätzlich wollte ich das layout so minimalistisch wie möglich haben, fand aber eine hauptnavigation ausschliesslich am fuss etwas zu minimalistisch. für telefone bleibts dabei, ein klick aufs logo springt an den fuss zur hauptnavigation, von wo aus man auch wieder hochspringen kann. auf dem desktop öffnet sich rechts ein slider, der die hauptnavigation, aber auch die hauptkategorien und ein paar einstellmöglichkeiten anzeigt. der nachteil ist natürlich, dass man zum navigieren immer mindestens zwei klicks braucht. der vorteil ist, dass man in so einem slider ne menge unterbringen kann und den rest der seite schön minimalistisch halten kann.

einstellungen

die werbung konnte man auf wirres.net schon immer abstellen. früher über einen button in der hauptnavi und die taste „w“ (wie werbung). das kann man jetzt im seiten-slider machen. wenn man will. ebenso kann man auf den übersichtsseiten eine kompaktansicht aktivieren, entweder per button oder mit der taste x. das geht auch schon seit ein paar jahren (weil ich es praktisch fand), war aber nirgendwo dokumentiert. das isses jetzt. früher war die darstellung allerdings einfach so, dass der ganze artikel per jquery ausgeblendet wurde, jetzt habe ich das statt wie anfangs angedacht mit einem jquery-plugin der die texte kürzt, mit der höhe der article-auszeichnung gemacht, die ich per CSS verkleinere, unten eine linie und in webkit und mozilla browsern noch einen CSS-schatten einblende (CSS-code für den schatten im google-reader geklaut). find ich ziemlich toll, da so auch die bilder angeteasert werden. weitere einstellungen über die ich derzeit noch nachdenke sind ein optionaler instapaper-button hinter jedem täglichen link („read later“) und eine option die schriftart auf serifen oder so umzustellen. das funktioniert natürlich alles mit keksen, der browser merkt sich die einstellung also (für zwei wochen — könnt ich eigentlich auch länger speichern?).

faltmenues und social buttons

das social-button-gedöns nervt eigentlich ziemlich, aus genau drei gründen. die facebook-, +1- oder flattr-buttons sind alle irre hässlich, erhöhen die ladezeiten und erlauben den betreibern die besucher zu tracken. deshalb habe ich für facebook, google und flattr schon länger als heise eine zwei-klick-lösung eingebaut. das heisst die buttons werden nicht nur ausgeblendet, sondern sind bei zugeklappten menüs auch nicht geladen. erst wenn man den button explizit aufruft, wird der javascript-code der jeweiligen betreiber nachgeladen und der button gezeichnet. das ist jetzt etwas leichter zu erkennen als vorher, aber eigentlich ein alter hut.

ebenso die anzahl der reaktionen die ich von einem unterprogramm per json bei google, facebook, delicious, twingly, echo, twitter und flattr abfrage und zwischenspeichere (15 minuten). so kann ich unter und über jedem beitrag dynamisch die anzahl der reaktionen anzeigen, ohne dass eine http-anfrage vom benutzer an den jeweiligen button-betreiber geht. die queries und den code dafür kann ich bei interesse gerne hier veröffentlichen.

die blase neben der anzahl der reaktionen habe ich bei spreeblick geklaut, die grosse blase mit den einzelnen zahlen, macht der jquery-plugin tipped. ohne javascript sieht man die zahl der reaktionen natürlich nicht. wobei die noscript-version der seite und die printversion noch baustellen sind.

CSS3 pseudo-klassen

irre was man mit CSS-selectoren so alles selektieren kann. oder anders gesagt: darüber habe ich in den letzten wochen so einiges gelernt. man kann mit CSS zum beispiel alle bilder selektieren, die das alt-attribut „*“ haben:

img[alt ="*"]

der selektor mit der url des bildes oder links ist ja bereits ein klassiker:

img[src ^="http://root.wirres.net/videothumbs/"]

oder wenn man einen anker in der url hat, kann man die DIV oder die HTML auszeichnung mit der gleichen ID wie der anker selektieren und beispielsweise den hintergrund ändern (mach ich beispielsweise bei den permalinks für links (beispiel)):

div.linkitem:target {background-color:#f5fbfb;}

keine pseudoklasse, aber auch sehr hilfreich folgender CSS-code:

input, textarea {	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;    
	box-sizing: border-box;
	}

damit werden beispielsweise bei iOS eingabe-felder die 100% breit sein sollen auch wirklich 100% breit angezeigt. ohne den code oben sind bestimmte felder trotz der 100%-breiten-deklaration breiter. trieb mich fast in den wahnsinn und sollte eigentlich in alle CSS-reset vorlagen mit aufgenommen werden.

keine selektoren, aber die CSS-transitions für effekte sind auch ganz toll und sparen ne menge jquery. das mokono-logo oben rechts hab ich vorher beispielsweise bei einem hover per jquery langsam ein und ausgeblendet. das geht jetzt per CSS. muss man nur wissen.

#mokonologo {opacity: .15;}
#mokonologo:hover {opacity: 1;}
#mokonologo {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

jquery

ich beschreibe jquery immer so: das ist so einfach, dass selbst ein honk wie ich es versteht. neben allerlei selbst zusammengehackten code, benutze ich neuerdings folgende plugins:

schon länger folgende:

auf meiner todo-liste stehen noch ganz viele kleinigkeiten und beispielsweise ein HTML5-videoplayer, derzeit benutze ich einen flash-plugin ohne HTML5-fallback von 1975.

technisch begeistert mich das neue layout ziemlich doll. ich habe viel gelernt und habe noch viel zu lernen, was HTML5, semantik, schlanken aufgeräumten code und so angeht. sehr schön gemacht, vor allem im hinblick auf den code hat jeriko sein responsive-design übrigens. ein sehr schönes reaktionsfähiges layout, sauber gecodet. unübertroffen natürlich ia. oder diese 10. oder das wordpress react theme. alles ziemlich toll. und viel arbeit.

auch wenn das neue layout (noch) nicht allen gefällt und sich sicher noch ändern wird, mir gefällt die haptik der seite jetzt wieder. fühlt sich einfach besser an. und das war ja auch der sinn der aktion.

wirres.net 3.0

felix schwenzel,    

ich habe wirres.net mal ein bisschen umgestaltet. möglicherweise klappt noch nicht alles. wenn was kaputt ist oder nicht funktioniert, bitte einen kommentar hier drunter und ich reparier es. was ich wie und warum gemacht habe schreib ich später gesondert auf.

vorher

vorher

nachher

nachher

php5

felix schwenzel,    

ich habe mir die freiheit genommen, die versionsnummer von ezpublish, der software auf der wirres.net läuft, auf version 2.3.0 zu erhöhen. bisher lief hier die version 2.2.8 (de 2001 veröffentlicht wurde), mit ein paar patches der version 2.2.9 (die 2003 veröffentlicht wurde) und einigen meiner bugfixes und änderungen die sich über die jahre ansammelten. neue funktionen oder features sind jetzt nicht hinzugekommen, dafür sollte ezpublish jetzt auf php5 laufen läuft ezpublish jetzt auf php5.

während ich das schreibe, ist zumindest php5 per .htaccess aktiviert:

<Files ~ "\.php">
  SetHandler x-httpd-php5
</Files>

da mein hoster droht mittelfristig php4 zu deaktivieren und nur noch php5 weiterzupflegen, war dieser schritt, vor dem ich einigen horror hatte, nötig geworden.

glücklicherweise musste ich für die php5-kompatibilität nicht allzuviel expertise mitbringen (die ich bekanntlich nicht habe), sondern nur ein bisschen geduld und etwas sorgfalt. ezpublish php5-lauffähig zu machen hat bereits jemand anders erledigt und ich konnte den code dann mit meiner codebasis per hand, datei für datei, zusammenführen. bis auf ein paar kleine bugs im backend, scheint alles zu funktionieren, falls nicht, freue ich mich über hinweise.

folge mir

felix schwenzel,    

wirres.net kann man folgen

mir kann man folgen

flattern kann man mich nicht nur unter jedem artikel, sondern auch

beim zurückfolgen bin ich extrem willkürlich. auf twitter folge ich fast nie leuten zurück die englisch twittern oder das wort „social media“ auf einen blick öfter als zwei-, dreimal benutzen (meine derzeitige schmerzgrenze). bei google-buzz (oder im google-reader) folge ich fast allen leuten die mir keine fefe-links in den reader sharen (zwei machen das schon. mehr fefe halte ich nicht aus) und ein oder zwei interessante links in den letzten tagen geshared haben. auf facebook, xing und linkedin bin ich am willkürlichsten. manchmal bestätige ich anfragen von leute die ich nicht kenne, wenn sie irgendwie interessant scheinen, was aber nur geht, wenn sie das eine oder andere von sich preisgeben oder mir sagen, warum ich ihre anfrage bestätigen soll. bei linkedin und facebook achte ich beim bestätigen von anfragen auch auf das benutzer-foto, schliesslich tauchen bestätige kontakte im adressbuch meines handys auf.

das sind natürlich nur meine eigenen regel, die sich ständig ändern. vielleicht sind meine regeln auch gar nicht so willkürlich, sondern eher — äh — intuitiv. weil nachgedacht hab ich darüber noch nicht besonders viel. sollte man aber mal machen. irgendwann.

flattr-count-anzeige ohne api

felix schwenzel,    

seit einiger zeit wollte ich auf den übersichtsseiten (also zum beispiel der startseite) von wirres.net eine anzeige der flatters die jeder artikel bekommen hat sehen, so wie die anzahl der reaktionen, also kommentare, trackbacks oder tweets angezeigt wird. das geht zwar, indem man unter jeden artikel einen button pappt, aber das fand ich visuell wenig verlockend. spreeblick macht das und ein paar andere seiten auch.

flattr-anzeige auf wirres.net

flattr-anzeige auf wirres.net

flattr-anzeige auf spreeblick.com

flattr-anzeige auf spreeblick.com

leider ist das REST-API von flattr noch nicht fertig und flattr kann nur mit javascript in button-form eingebunden werden.

vor ein paar tagen habe ich dann diese seite gefunden, auf der ben collins beschreibt, wie er die anzahl der flatters in feedflare eingebunden hat (also so, dass seine feedburner-feed-artikel unten die zahl der flatters anzeigt). im prinzip hat er ein php-script geschrieben, dass den flattr button für einen artikel aufruft und daraus den „flattr-count“ extrahiert. ich habe das script ein bisschen angepasst und wenn man ihm eine wirres-url als argument gibt, zeigt es den flattr-count an:

http://felix.schwenzel.de/.flattr/flattr-me-static-v2.php?link=http://wirres.net/article/articleview/5634/1/6/

die konstruktion, wie ich es auf wirres.net eingebunden habe ist völlig hirnrissig, funktioniert aber. jeder programmierer würde die hände über dem kopf zusammenschlagen und wenn ende des jahres endlich kathrin passigs buch „weniger schlecht programmieren“ herauskommt und ich es gelesen habe und weniger schlecht programmieren gelernt habe, werde ich wahrscheinlich auch die hände über dem kopf zusammenschlagen.

eigentlich schlage ich bereits jetzt die hände über dem kopf zusammen. [hier bitte aufhören zu lesen, jetzt wirds langweilig.] ich habe nämlich folgende, ziemlich unelegante umwege gehen müssen:

in den code meines CMS konnte ich das script zur abfrage nicht einbauen, da es nur unter php5 läuft und cms nur unter php4. dazu kommt, dass mein hoster das abfragen von fremden webseiten per php unterbindet, das script also gar nicht auf wirres.net funktioniert. also habe ich es auf schwenzel.de zum laufen gebracht. die abfrage des scripts und das einsetzen des flattr counts erledigt jquery, dass das im hintergrund per ajax erledigt. allerdings wäre so eine abfrage von wirres.net auf schwenzel.de ein cross-site-scripting-dings, und die abfrage einer anderen domain als der auf der das script läuft, erlaubt jacascript aus sicherheitsgründen nicht. also fragt jquery das script auf schwenzel.de über ein kleines proxy-script ab.

die eigentliche (und hanebüchend unelegant programmierte) jquery-abfrage kann man im quellcode der übersichtsseiten lesen. oder es auch lassen.

ich weiss nicht warum, aber das wollte ich mal los werden.

ix höre auf zu bloggen

felix schwenzel,    

nur eine kleine randnotiz: ich blogge nicht mehr. ich schreibe einfach, wie bereits seit über 10 jahren, ins internet rein. kurzzeitig fand ich es putzig mich wie viele andere auch „blogger“ zu nennen. ich fühlte mich für eine weile einer gruppe zugehörig die nicht zu definieren war, die unfassbar heterogen und teilweise homosexuell ist. momentan ist mir eher peinlich mich blogger zu nennen. die weblogbedeutungsmafia definiert mir eine nummer zu viel rum, da werden regeln aufgestellt wie man richtig zu bloggen habe, was man als blogger zu tun habe oder nicht, romantisch in die vergangenheit geblickt, wo einst ja alles besser war, da wird wie wild rumpolarisiert und gegen vorgebliche innere und äussere feinde gekämpft, an allen fronten: ödes rumgewixe vor dem spiegelbild, selbstverherrlichung, abgrenzen gegen alles neue.

bloggen verkommt mehr und mehr zu zu einem regelkorsett. mir ist das zu eng und zu langweilig, mir ist es zu blöd mit irgendwelchen selbstherrlichen irren und lauten spacken in einen topf geworfen zu werden die zwar eine minderheit sind aber sich berufen fühlen sich als sprecher zu inszenieren. ihr, nicht ich!*

ich bin nicht dick, ich sehe nur so aus.
dies ist kein blog, es sieht nur so aus.
ich bin kein blogger, kein a-blogger oder aa-blogger: ix bin kein-blogger. sonst ändert sich nix.

kein blog

[nachtrag]
dings, find ich gut.

kreis, hund und scheisse

felix schwenzel,    

Die Wahrheit hebt sich von der Lüge durch Unglaubwürdigkeit ab.
Elfriede Hablé

mottos

aus gegebenen anlässen wechselt das motto dieser seite regelmässig. hier eine liste der vergangenen mottos:

  • ix sein egozentrum - wirres.net
  • wirres, unscharf und quarkig ohne quark
  • ix bins nur, ganz rallig
  • grosse hemden-wochen bei wirres.net
  • not redesigned and not valid since april 2002
  • wirres, not redesigned since april 2002
  • wirres, konsequent alles falsch
  • wirres, komplett ironieresistent und -frei
  • toller hecht - wirres.net
  • wirres.net: überqualifizierter dilettantismus
  • wirres.net: selbstverliebt, irrelevant, humorlos, abtörnend
  • wirres, sehr ignorant
  • wirres, fachblog für irrelevanz
  • wirres, geschriebene scheisse
  • wirres, worst journalistic blog german
  • wirres, second worst journalistic blog german (after spiegel-online)
  • wirres, fachblog für verbale inkontinenz
  • gewöhnungsbedürftiges weblog
  • unglaubwürdiges weblog
  • unglaubwürdige homepage
  • unglaubwürdiges dings

logos

die logos auf dieser seite sind zum grössten teil einsendungen von lesern, nachdem ich erstmals im februar 2005 folgendermassen dazu aufrief:

falls jemand bock hat mit dem kreis oben rechts links (in dem zur zeit ein schnüffelnder hund steht) was zu machen (aka zu gestalten): gerne. sonst mach ich das alleine.

einzige bedingung, der dicke kreis (aussenmass: 100x100px), die farbe (s/w) und die scheissse bleibt.

alle logos waren für eien weile als logo auf wirres.net zu sehen.

im oktober 2005 gabs dann einen erneuten aufruf, diesmal sogar mit jury (sascha lobo) und preisverleihung (lobo logo wettbewerb und lobo logo wettbewerb preisverleihung).

#

wirres ohne w

felix schwenzel,    

aus protest gegen das „w“ bleibt wirres für eine woche ohne w (und nach wie vor ohne rechtschreibung). vielleicht auch länger. oder kürzer. was weiss ich denn.

#

wirres bräu

felix schwenzel,    

unverhofft kommt manchmal: danijela von projektriangle hat mir mal wieder ein gesicht gegeben, auf nem kronkorken. merci.

am samstag habe ich jemanden getroffen der meinte mein name sei felix wirres. cooler nachname eigentlich. nehme ich als künstlernamen wenn das mal nötig sein sollte.

#