Sprite up the web

Unter dem klanghaften Motto »Sprite up the web« finden wir das Spritely jQuery Plugin, das angetreten ist, die Webseitenwelt mit Spriteanimation ein wenig hübscher zu machen. Und wirklich, dass was wir auf der Seite sehen, und auch einige der Beispiele aus der Early Adopter Gallery, machen wirklich Spass.

Das Plugin stellt zwei Methoden zur Verügung, und zwar sprite(), mit der Elemente aus Einzelbildern animiert werden könne, und pan(), mit der (mehrere) Endloshintergrundbilder animiert verschoben werden können. Das alles soll in den Browsern IE6+, Firefox, Safari, Chrome und Opera funktionieren und außerdem einen angepassten Modus für iPhone, Android und iPad haben. Bitte schön: alles natürlich ohne Flash, Silverlight oder sonstigen Rotz.

EDerzeit liegt Spritely in Version 0.2 vor, es ist also noch Entwicklungsluft nach oben, aber das sieht alles schon ganz brauchbar aus. Bitte testen.

10k Apart (by Microsoft)

Hurra, ein Wettbewerb.

Es hat sich längst rumgesprochen, unter dem Buzzword HTML5 hat die Entwicklung kleiner Applikationen im Web mit standardkonformen HTML, CSS3 und Javascript Einzug in die Welt der Webseiten gehalten. Eines Tages wird man wahrscheinlich doch noch davon sprechen können, HTML5-Seiten programmiert zu haben (oh-oh!).

Dabei sind die Apps die man jetzt schon kennt oft schwergewichtige Ungetüme aus HTML und vor allem Javascript. Das muss natürlich nicht so sein. Um all dem Rechnung zu tragen (und ein wenig Werbung zu betreiben) haben MIX (≅ Microsoft) und An Event Apart einen Wettbewerb ausgerufen: gesucht werden kleine HTML5-Apps, kleiner als 10K, wobei die Verwendung von jQuery, Prototype und Typekit als Webservices ausgenommen sind. Laufen sollen die Apps in der IE9 Preview, Firefox und einem Webkit Browser. Na, dann mal los…

Mein Werkzeugkasten

Über die Jahre hat sich in meiner Toolbox ganz schön was angesammelt.
Foto: Some rights reserved by See-ming Lee 李思明 SML

Schon vor ewig hatte der gute Frank Bueltge einen Artikel über seine WordPress Entwickler Toolbox gepostet und seitdem habe ich einen ähnlichen Artikel in die Pipe gelegt, der nun endlich fertig ist. Die Frage, womit ich dieses Blog entwickle lässt sich von der Frage, womit ich auch professionell arbeite, nicht trennen. Dieses Blog (und die anderen zuvor) ist ja immer die Spielwiese für das, was ich auf Arbeit mache und umgekehrt, setze ich im Arbeitsleben Gelerntes hier gerne ein und um. Von daher kann ich nur meinen globalen Werkzeugkasten präsentieren, für das, was ich so mache… Digitalkreativer und Internethandwerker.

Betriebsystem(e)

Ganz grundsätzlich arbeite ich seit Jahren fast nur noch mit Apple-Rechnern, namentlich zur Zeit einem MacBook Pro (2.66 GHz Intel Core 2 Duo, 4GB RAM). Zu Hause steht noch ein kleiner Mac mini. Vor kurzem wurde allerdings zusätzlich ein Samsung Netbook angeschafft, dessen mitgeliefertes Windows 7 Stalker geplättet und durch das aktuelle Netbook-Ubuntu ersetzt. Mein Arbeitgeber stellt mir zusätzlich ein iPhone und zum Testen auch regelmäßig ein iPad. Entwickelt wird bei mir aber eigentlich ausschließlich auf dem MacBook Pro.

Editor/IDE

Ich weiss gar nicht wirklich, ob es derzeit ein sinnvolles IDE für HTML und CSS auf dem Mac gibt. Ich habe in den Jahren viel ausprobiert, Aptana, NetBeans, Espresso, Coda, am Ende des Tages bin ich immer wieder zu meinem heißgeliebten Textmate zurückgekehrt. Textmate ist eben ausdrücklich keine IDE, sondern ein Texteditor, der praktisch alles kann.

Ja, das ist richtig, ich mache alles mit dem Texteditor, bis hin zu kleineren jQuery-Projekten. Unterstützt wird dies durch viele viele Textmate-Bundles, die beispielsweise JS Lint integrieren, für ordentliche Formatierung sorgen, gegen den W3C Validator checken, SVN (oder Git oder Mercurial) bedienen und so weiter und so fort. Hinzu kommen Templates und eine prima Projektverwaltung.

Serverkontakt

Obwohl ich gerne bis zur letzten Sekunde lokal entwickle (Server zur Verfügung gestellt von MAMP), kommt man natürlich ohne Serverkontakt nicht aus. Wenn ich dabei auf das vorsintflutliche und leider noch viel zu verbreitete FTP angewiesen bin, dann nutze ich dazu @work Transmit und sonst gerne Cyberduck. Viel lieber mag ich allerdings entfernte Dateisysteme mounten, mit MacFusion und MacFUSE. Ich kann aber auch eine Shell bedienen und direkt auf dem Server mit vi. Ich habe auch schon mal mit macvim gespielt, für vi-Abhängige am Mac jedenfalls das Richtige. Meine terminal.app erreiche ich übrigens mit dem coolen Visor, aber das ist natürlich nur Spielerei.

Grafik, Konzept

Da ich mir privat kein Photoshop leisten will und kann, und im Beruf nicht zu denen gehöre, die standardmäßig damit ausgestattet sind, habe ich mir vor einiger Zeit schon Acorn zugelegt. Das macht zumindest alles, was man im Blogalltag so braucht und öffnet sogar PSDs (was auch im Büro manchmal hilfreich ist). Zum Webdesign eignet es sich aber weniger. Hin und wieder spiele ich mit GIMP, aber mal ehrlich… naja.

Zur graphischen Analyse von Webseiten (und damit ich mir die Standardpixelwerte von zeit.de nicht merken muss), habe ich mir xScope gekauft. Dieses wirklich grandiose Tool misst alles am Bildschirm aus, zeigt Farbwerte, macht globale Hilfslinien, Grids und und und…

Im Beruf brauche ich noch zusätzlich Helfer für die Visualisierung von Seiten, Abläufen, etc., bspw. bei der Konzeption. Standardmäßig nutzen wir Omni Graffle, was ich auch sehr mag. Trotzdem habe ich mich schon an Balsamiq versucht, da ich Mockups, die aussehen wie Mockups für pädagogisch sinnvoll halte. Zumal wir dann sehr schnell zu HTML-Prototypen übergehen, da muss man Grenzen ziehen. In Omni Graffle nutze ich deswegen das Web Sketch Interface Stencil.

Firefox ist immer noch die Nummer 1.

Browser, Virtualisierung

Ich entwickle nach wie vor im Firefox. Ich habe mit Chrome geliebäugelt, aber es geht doch nichts über Firefox mit Firebug. Dazu habe ich noch ein paar Addons am Start: natürlich die Web Developer Extension, den User Agent Switcher, den Fangs Screenreader und die Selenium IDE und die passenden Selenium IDE Buttons. Natürlich habe ich trotzdem zusätzlich jede Menge Browser auf dem Rechner installiert, zum Testen eben.

Dafür betreibe ich auch gezwungenermaßen Virtualisierung und zwar mit VirtualBox, wo diverse Auswüchse der Windows-Ära zu Hause sind und diverse Browserversionen von IE verfügbar machen.

Und sonst so?

Puh, das war ja eine lange Liste. Aber alle diese Programme und Tools brauche ich für meinen gelungenen Arbeitsalltag. Und es werden immer mehr. Seitdem ich zum Beispiel viel mit dem iPad zu tun habe, nutze ich immer öfter Simplenote zusammen mit Notational Velocity und gerne auch in Kombination mit Dropbox, mit dessen Hilfe ich Dateien zwischen meinen verschiedenen Rechnern share. Und man will ja auch kommunizieren, obwohl sich immer alle beschweren, dass ich viel zu selten mein Adium am Start habe. Und Gmail und Tweetie und Skype…

Webkongress Erlangen 2010

Eine mittlere Premiere gibt es für den 7. und 8. Oktober in diesem Jahr zu verkünden. Der Webkongress Erlangen findet zu diesem Termin zwar schon zum dritten Mal statt, ich werde dort aber zum erste Male zu hören sein. Unter dem Titel »Relaunching ZEIT ONLINE« werde ich ein wenig über den Relaunch von zeit.de im September 2009, den Weg dorthin und den Erlebnissen seitdem berichten. Dabei geht es natürlich in der Hauptsache um den Fachbereich Frontendentwicklung und -technologie, sowie meine immerwehrenden Freunde: Usabilty und Accessibilty.

Nun kommen natürlich wegen mir alleine zu wenig Teilnehmer zu einem Kongress, deswegen sind weitere hochkarätige Webexperten geladen worden, bspw. Jens Grochtdreis, Vladimir Simovic und Alvar Freude. Übergeordnetes Thema des Kongresses sind Lösungen für barrierefreie Webseiten, soll heissen es geht nicht mehr nur um die Technik und den Prozess, sondern vielmehr um Webangebote, die diese Techniken auch ein- und umsetzen.

Mehr gibt es auf der Homepage des WKE 2010 nachzulesen. Man sieht sich.

Candies Relaunch

Was Feedlesern gar nicht auffällt, ist selbst für Besucher der Artikelseiten von Codecandies nur schwierig zu entdecken: am Freitag hat Codecandies ein neues Template bekommen. Dabei hat sich an der Artikeln nicht viel geändert, dafür erstrahlen die Homepage und alle Übersichtsseiten in neuem Glanze, nachdem ich hier in letzter Zeit viel herumexperimentiert hatte.

Dabei habe ich vor allem darauf Wert gelegt, viel der Techniken auszuprobieren, die ich in den letzten Wochen und Monaten gelernt und an anderen Stellen gelernt habe. Darum ist auch viel mehr unter der Motorhaube passiert, als die Dinge, die man nach aussen sehen kann. Namentlich sind das: Nutzung vieler neuer HTML5-Elemente, Verschlankung des CSS-Codes und Nutzung von CSS media queries um eine angepasste Version für das iPad und Browser mit verkleinertem Fenster anzubieten, Verschlankung des Javascriptcodes, Verbesserung der WordPress-Templates und meiner geliebten functions.php. Aber eins nach dem anderen.

Welcome figure und figcaption

Das neue HTML5-Element figure gehört wirklich zu den sinnvollen Elementen, die schon immer gefehlt haben. Bei figcaption allein bin ich mir nicht so sicher. Der Name zeigt schon, dass man Schwierigkeiten hatte, das neue Element zu integrieren. In einem früheren Stadium war es auch tatsächlich geplant, die Elemente in figure als Definitionslisten zu gestalten. Mit diese Semantik war man schlussendlich aber nicht zufrieden, weshalb man ein eigenes Element erfinden musste und das erhielt den üblen Namen: figcaption. What a word. Ihhhh. Aber sei’s drum, beide Elemente finden sich nun prominent in der Homepage wieder.

Außerdem habe ich die Seite, nicht nur visuell, sondern eben auch im Code, in sections unterteilt. Die HTML5-Elemente header, article , footer und noch ein paar mehr, waren schon vor diesem Relaunch Teil des Codes. Damit bin ich der HTML5fizierung der Seite schon ein ganzes Stück weiter gekommen, ganz abseits der Buzzwordklopperei, rein im Code. Nun müsste man die Elemente nur noch ordentlich in den Artikeln nutzen können, ohne das WordPress anfängt rumzumucken, aber da kümmere ich mich auch noch drum.

Eine neue Brotschrift gibt’s nun auch, hier geht Droid Serif ins Rennen und ersetzt die Georgia, wo sie kann.

CSS Media Queries

Man konnte ja schon vorher lesen, dass ich mich in der Vorbereitung auf das iPad schon ausgiebig mit den praktischen Media-Queries auseinanderhesetzt habe. Nun habe ich auch hier im Blog eine entsprechende Regeln implementiert. Ab sofort bekommen das iPhone im Portraitformat und Browser deren Fensterbreite unter 920px liegt, eine verschmälerte Version der Seite angezeigt. Das kann ja jeder, der mit einem modernen Browser hier vorbeischaut leicht nachvollziehen, sonst hier auch mal ein Beispiel: so sieht’s breit aus:

Und so die schmale Version, 620px-einspaltig. Eigentlich hatte ich die schmale Version im normalen Browser nur zum Testen genutzt, bis mir am Netbook auffiel, dass das natürlich auch für den Firefox durchaus Sinn machen kann.

Der eigentliche Seitencontent ist 940px breit, ich habe 20px Karenz gelassen, weil mir auffiel, dass wenn man bspw. genau 940px nimmt, der Sprung zur schmalen Version auch passiert, wenn er gar nicht nötig ist, zum Beispiel, wenn man das Fentser genau auf Contentbreite bringen will. Insgesamt stört mich der Moment des schwitchens ein wenig, das ist schade, das das so abrupt erfolgt.

[css]@media only screen and (max-width:920px), only screen and (max-device-width: 768px) and (orientation:portrait) { … }[/css]

Für das iPad im Landscape-Modus wird übrigens kein spezielles CSS geliefert. Stattdessen habe ich versucht, die normale Seite so iPad gerecht wie möglich zu gestalten.

Zudem werden wohl nicht alle art directed Artikel in die schmale Version passen. Da kann der geneigte iPad-Nutzer ja noch den Landscape-Modus nutzen.

WordPress- und/oder Javascriptcode

Nach längerer Zeit bin ich auch mal dabei gegangen und habe meine functions.php ein wenig aufgeräumt. Da meine Templates immer ziemlich egozentrisch gestaltet sind, habe ich keine Plugins gebaut, sondern alles was ich an zusätzlichen Funktionen benötigte in diese Datei codiert. Kann man machen, ist wie gesagt nicht so freundlich, wenn man das Theme veröffentlichen will. In der genannten Datei hat sich die letzten Jahre über aber auch ziemlich viel Müll angesammelt, den ich ersatzlos entsorgt habe.

Für meine art directed Artikel habe ich mir ja selbst eine kleine Erweiterung geschrieben, mit der man zusätzliche CSS-Sourcen als Meta-Feld an den Artikel hängen kann. Ich habe mir nun das Art Direction Plugin nocheinmal genauer angesehen und es wieder verworfen, nicht nur wegen der dämlichen Zeile Pay your respects to print, get Art Direction. auf der Plugin-Seite, sondern auch weil ich es für überflüssig halte. Stattdessen habe ich meine Lösung erweitert und verbessert, sowie das Silbentrennungsscript als Option auch für andere Artikel zugänglich gemacht.

Womit wir beim Javascript sind, denn auch hier habe ich ein wenig den Hammer kreisen lassen. Früher globale Scripte, die nur auf einigen wenigen Seiten gebraucht wurden, werden nun nur noch an den entsprechenden Orten geladen. Dafür habe ich mit meiner selbstgeschriebenem Artikelgalerie mal wieder echten Betacode auf Euch losgelassen. Das ist wie immer work in progress.

Word-Wrap

A CSS3 Property That Works in Every Browser. Muss man sich einfach mal merken.

Anime in deutschen Kinos

Als Aninmes nach Deutschland kamen III

Früher als im TV kamen die knuddeligen japanischen Zeichentrickfiguren in das deutsche Kino. Schon 1961 wurde der von MGM vertriebene »Der Zauberer und die Banditen« (engl. Titel »Magic Boy«, Originaltitel »Sasuke the Ninja Boy«) in den deutschen Kinos gezeigt. Produziert wurde er 1959 als zweites Werk von Toei Animation, die uns viel später Dragoball, Sailor Moon oder One Piece in die Wohnzimmer brachten.

httpvh://www.youtube.com/watch?v=JlUFC1HZ59w

Magic Boy zeigt deutlich die Niedlichkeit und Kindlichkeit, die den Animes seit dieser Zeit als Makel anhängen.

Seitdem gab es in Deutschland nicht sonderlich viele Animes im Kino zu bewundern, seit 1961 vielleicht 40 Stück. Und in den 70ern und 80ern war das, was es zu sehen gab nicht wirklich erwähnenswert. Ausser vielleicht »Perix der Kater und die drei Mausketiere« von 1970, weil das nämlich widerum der erste Anime war, der in den Kinos der DDR gezeigt wurde und zwar nur ein Jahr später. 1974 brachte man außerdem einen Biene Maja „Film” in die Kinos, der aber nur aus zusammengeschnittenen Folgen bestand. Die gleiche Frechheit wiederholte sich nocheinmal 1978 mit Wickie, sowie 1986 mit Nils Holgersson.

1984 dann der erste Lichtblick, mit »Lupin Sansei: Cagliostro no Shiro« oder »Die Jäger des Cagliostro« oder »Hardyman schafft alle – Freiheit für Prinzessin Yasmin« (Videotitel) kommt der erste Film unter der Regie von Hayao Miyazaki ins deutsche Kino. Ein Flop mithin, dafür aber auf VHS-Kassetten wohl erfolgreicher.

httpvh://www.youtube.com/watch?v=bdVWrCN8hlk

Akira zeigt eine völlig neue Qualität in Zeichenstil, Umsetzung und Story. Es ist ein reinrassiger Science Fiction, thematisch im Bereich Blade Runner angesiedelt.

1991, dreißig Jahre nach Magic Boy und drei Jahre nach seiner Produktion, erreicht dann endlich der cineastische Anime-Meilenstein die deutschen Kinos: »Akira«. Für mich markiert er den Wechsel vom Kinder-Anime zum Erwachsenen-Genre, denn er beendete eine fast 10 jährige Animepause bei mir. Und gleichzeitig ist Akira auch der erste Manga, den ich gekauft habe. Zufälligerweise war das auch die erste Manga-Serie, die man in Deutschland kaufen konnte (allerdings noch in gespiegelter Bildreihenfolge und daher mit diversen Änderungen zum Original). Akira jedenfalls stellt als Kinofilm, wie als Buch, eine neue Qualität dar, die im Westen bis dahin noch nicht zu sehen war.

Sechs Jahre später sorgte dann »Ghost In The Shell« endgültig dafür, dass Manga und Anime ihren Platz in der deutschsprachigen Popkultur gefunden haben. Damit war sozusagen das Fundament, dass die ersten Kinderserien in den Siebzigern legten, endlich bebaut. So war es jedenfalls bei mir. 😉 Denn seitdem verschlinge ich jeden Anime, dessen ich habhaft werden kann. Und das waren dann noch so einige. Wobei mir die Werke des schon vielzitierten Herrn Myazaki aus dem Studio Ghibli inzwischen die liebsten sind. Und das sind dann ja oft auch wieder Kinderfilme.

httpvh://www.youtube.com/watch?v=bSNA-rpVad0

»Mein Nachbar Totoro« ist einer der erfolgreichsten Ghibli-Filme. Der jüngste »Ponyo – Das große Abenteuer am Meer«, kommt im September in die deutschen Kinos.

Wie ich flattr nutzte…

Es ist ja nun schon hinreichend diskutiert worden, ob man auf seiner Website einen Flattr-Button einsetzen sollte oder nicht. Viel zu wenig habe ich allerdings bisher über das flattrn—fürchterliches Wordkonstrukt, nebenbei bemerkt—selbst gehört, also das Klicken auf den Bettelbutton von flattr, auf anderen Webseiten. Es gibt dazu verschiedene Thesen, aber die Frage: »Wie flattrst wie verteilst Du Deine Kohle eigentlich«, hört man selten.

Letzte Woche habe ich mich mit einem Kollegen unterhalten, der wohl recht viel und nach dem Gießkannenprinzip verteilt. Dabei (daran meine ich mich zu erinnern), hat ein keinen besonders hohen Betrag auf sein Konto eingezahlt, klickt aber auf das Flattr-Knöpfchen, wo er es findet. Na klar, es gibt viele gute Sachen, vieles das Spass macht zu lesen, viele Dinge die prämiert sein wollen. Oder doch nicht?

Ich selbst stelle bei mir fest, dass ich es bei Flattr nicht anders mache, wie im richtigen Leben: wenn mir eine Sache ordentlich und mehrwertig erscheint, dann bin ich bereit dafür etwas zu zahlen. Soll heißen, ich bin nicht geizig, muss aber zugeben, dass ich in meiner persönlichen Flattr-Testphase noch beim Minimum verteilbaren Geld gestartet bin. Dafür klicke ich aber auch extrem selten auf den Flattr-Button. Freitag war ein Klick von mir noch einen ganzen 0.66 Euro wert, oder anders: ich habe diesen Monat erst zwei drei Seiten geflattred. Sorry.

Das hat natürlich mehr als einen Grund, zum Beispiel bin ich zur Zeit beruflich sehr beschäftigt, da komme ich weniger zum bloggen und zum Blogs lesen. Ich zahle aber auch noch in einigen anderen Währungen als Geld, und das mag der eigentliche Grund sein, dass ich mir die Seiten, denen ich Geld spende, sehr genau aussuche. Die erste Währung, die ich zu Verteilen habe ist Aufmerksamkeit. Das ich ein Blog regelmäßig konsumiere, ist jetzt noch keine Auszeichnung, aber in meiner Welt der relativ begrenzten schwer verwaltbaren Freizeit, ist es schon ein kleines Kunststück geworden auf meiner Shortlist zu stehen (damit sind nicht die etlichen Blogs in meinem Google Reader gemeint). Von diesen wenigen Autorinnen und Autoren lese ich alles. Sie haben also mit praktisch jedem Artikel meine volle Aufmerksamkeit. Von diesen, meinen Leuchttürmen aus, wandere ich dann weiter durchs Netz. Oft lerne ich dabei etwas, finde Denkanregungen, oder habe einfach Spass. Gerne verlinke ich dann solche Dinge, bspw. in Google Buzz. Mein eigenes Linkblog pflege ich im Moment leider gar nicht, dort waren und sind aber auch immer Artikel zu finden, die mir gefallen oder geholfen haben. Denn das ist die zweite, weniger gewichtigere, dafür aber sichtbarere Währung, die ich zu verteilen habe: Verlinkung vulgo Linkliebe. Wobei ich mir im Klaren bin, dass über Links von mir nur wenige Besucher kommen, aber es ist ein illustres und wertvolles Völkchen, das meinen Links folgt, das kann ich ohne weiteres versprechen.

Mir ist nun aufgefallen, dass Verlinkung eine Art Steigerung von Aufmerksamkeit ist, soll heissen, nur wer zuvor meine Aufmerksamkeit hatte (auch ohne auf der Shortlist zu stehen), kann auch verlinkt werden. Parallel dazu kann genauso nur geflattered werden, wen ich zuerst gelesen habe, Flattr ist also ebenso eine Steigerung. Beides scheint dabei also ungefähr den gleichen Wert zu besitzen, geht jedoch in verschiedene Richtungen. Verlinkung setze ich nämlich dann ein, wenn ich bspw. meinen wenigen Followern bei Buzz sagen will: seht diesen Artikel, er hat etwas zu bieten in einem der Fachgebiete die ich beackere, lest ihn Euch durch, lernt etwas! Eine Verlinkung im Blog bedeutet ungefähr dasselbe, dort allerdings auf ein größeres, aber auch heterogeneres Publikum bezogen. Flattrn dagegen ist mehr introvertiert. Keiner weiß, was ich geflattered habe, vielleicht finanziere ich heimlich die Taz, wer weiss? Na klar, über Geld redet man bekanntermaßen nicht, aber tatsächlich taucht man mit dem Klick auf den Button ab in eine gewissen Anonymität, man wird zu einer Zahl. Das ist einfacher, als Verlinkung. Und es könnte jeder machen, man braucht ja kein Blog dafür, keinen Ort, an dem man verlinken kann. Dafür scheint mir für mich Flattr weniger geeignet, die tradiotionelle Linkliebe zu ersetzen.

Trotzdem lege ich hohe Maßstäbe für das flattern an. Ich flattere nur für Informationen, die mir neu sind. Dieser 110ten Artikel über Flattr bspw. hätte es bei mir schon schwer. Aber mal im Ernst: ich lese dauernd Artikel, die nach dem zweiten Absatz eingestehen müssen, dass sie sich dem Thema nur sehr eindimensional genähert haben und man können unter URL xyz genaueres nachlesen. Sowas bekommt keine Spende. Oder wenn ich merke, dass aus englischsprachigen Blogs abgeschrieben wird: keine Spende. Wohl aber, wenn jemand etwas aus einem US-Blogs übernommene auf unsere Kreise anzuwenden oder gar zu erweitern weiss. Und so fort.

Am häufigsten muss ich jedoch feststellen, wenn ich dem Reflex unterliege, einer Seite eine Spende zuzuschieben: oft haben die Seiten gar keinen Flattr-Button. Das sollte vielleicht auch zu denken geben. Aber Geld ist ja auch nicht alles in der Welt…

Tour de france

L’enfer du Nord Paris-Roubaix (Some rights reserved by Loving Photography)

La Cote d’Azur et Saint Tropez (Some rights reserved by Plinkk)

Les Alpes et les Pyrennees (Some rights reserved by Lüfkens)

Derniere etape Champs-Elysees (Some rights reserved by Celso Flores)

Galibier et Tourmalet (Some rights reserved by Arlyn Asch)

En danseuse jusqu’au sommet (Some rights reserved by Joe Shlabotnik)

Pedaler en grand braquet (Some rights reserved by Joe Shlabotnik)

Sprint final a l’arrivee (Some rights reserved by malias)

Crevaison sur les paves (Some rights reserved by fdecomite)

Le velo vite repare (Some rights reserved by m4tik)

Le peloton est regroupe (Some rights reserved by Mikani – Nicolas Dumas)

Camarades et amitie (Some rights reserved by myahya)

[youtube https://www.youtube.com/watch?v=QLiai4gg_0Q&hl=de_DE&fs=1]

Ganz kurz: Bilder anklicken und Vive la france! und Hintergrundbild: Some rights reserved by FaceMePLS.