Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 3. Juni 2014

Cody – Freie Bibliothek mit HTML5-Juwelen zur sofortigen Verwendung

Cody ist ein groß­ar­ti­ges Projekt für Designer und Entwickler. Die bei­den Webworker Claudia Romano und Sebastiano Guerriero aus London stel­len damit eine Bibliothek auf die Beine, die HTML5-Lösungen zur sofor­ti­gen Verwendung bereit stellt. Dabei lie­fern die bei­den Entwickler nicht nur den Download der jewei­li­gen Elemente, son­dern stets auch sehr aus­führ­li­che Erläuterungen dazu mit. So ist Cody ins­be­son­de­re all denen zu emp­feh­len, die nicht nur nach einer Instantlösung für ein aktu­el­les Designproblem suchen, son­dern sich tat­säch­lich inhalt­lich wei­ter­bil­den wol­len. Die Auswahl ist noch klein, aber die Herangehensweise weiß zu beein­dru­cken…

ASaasAS

Cody: Umfassende Erläuterungen zu jeder einzelnen Lösung

Claudia Romano und Sebastiano Guerriero, Web-Entwickler und UI-Designer aus Italien, sind die Gründer des Londoner Zwei-Mann-Studios Amber Creative. Während sich die bei­den ganz kon­ven­tio­nell von Designaufträgen ernäh­ren, fan­den sie den­noch Zeit und Muße, ein außer­ge­wöhn­li­ches Projekt zu star­ten. Ende Mai 2014 ent­lie­ßen sie es in die freie Wildbahn des Netzes. Es hört auf den Namen Cody.

Cody ist ange­legt als Bibliothek nutz­ba­rer HTML5-Teillösungen. Aktuell fin­den sich ledig­lich sechs Elemente, dar­un­ter ein moda­les Fenster mit einem Login-/Signup-Formular und ein Einkaufswagen, der von der rech­ten Bildschirmseite off-can­vas rein­ani­miert wird. Zwei wei­te­re Lösungen kün­dig­te Claudia Romano via Twitter für die­se Woche an. Zudem gilt der Aufruf an uns alle, sich qua­si etwas zu wün­schen oder sogar selbst tätig mit­zu­wir­ken.

cody-latestresources

Neben der Bereitstellung der gezipp­ten Downloads der jewei­li­gen Lösung, erklä­ren die bei­den Betreiber in auf­wän­di­gen Beiträgen Schritt für Schritt die Vorgehensweisen, die erfor­der­lich sind, um das jewei­li­ge Element in die eige­ne Seite ein­zu­bau­en. Dabei erhal­ten Sie auch die wich­ti­ge Information, wel­cher Browser in der Lage ist, feh­ler­frei damit umzu­ge­hen. Ein Changelog unter jedem Beitrag doku­men­tiert den Stand der Bearbeitung. Etwa auf­ge­tre­te­ne Fehler und Inkompatibilitäten wer­den dort fest­ge­hal­ten und mit ihrem Korrekturdatum ver­merkt. Disqus wird als Kommentarsystem ein­ge­setzt. In den Kommentaren leis­ten Claudia und Sebastiano sogar noch Support.

cody-example

Das ist alles sehr vor­bild­lich und extrem auf­wän­dig. Deshalb wol­len wir uns mal nicht dar­über beschwe­ren, dass sich bis­lang ledig­lich sechs Elemente in der Bibliothek fin­den las­sen. Eine Freitextsuchfunktion ist jeden­falls schon mal imple­men­tiert, bis­lang natür­lich nicht erfor­der­lich.

Sollte der Élan das Projekt nicht ver­las­sen, ent­wi­ckelt sich hier sicher­lich eine der span­nen­de­ren Ressourcensammlungen für Designer und Developer, die mit eng­lisch­spra­chi­gen Texten etwas anzu­fan­gen wis­sen. Cody ist jeden­falls ein Pflicht-Bookmark, ins­be­son­de­re für die Lernbegierigen unter Ihnen.

Links zum Beitrag:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

5 Kommentare

  1. Bin mal gespannt wie sich die­se Beispiele im zusam­men­spiel mit Bootstrap und mobi­len Endgeräten ver­hal­ten. Danke für den Link & Beitrag.

  2. Die Back-To-Top Lösung ist ja wohl “nur geil” ;-)

  3. Für alle, die nach dem Link gesucht haben (wie ich): http://codyhouse.co/

  4. Also irgend­wie ist das gan­ze HTML5 inzwi­schen genau so “Bäh” wie es Flash ist/war. Alles ani­miert und fla­ckernd.

    Mein Lieblingsartikel dazu ist auch schon über 10 Jahre alt und immer noch aktu­ell:

    http://www.kommdesign.de/texte/animation.htm

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.