{ christian kolos // design blog }

Make your New Year's resolution learning to code.
Sign up on Code Year to get a new interactive programming lesson sent to you each week and you'll be building apps and web sites before you know it.

Digitpaint bieten in ihrem Adventskalender täglich neue Tipps und Tricks rund um Html5 und CSS3 an. Bin mit dieser Entdeckung wohl etwas spät dran, aber die bisherigen Türchen lassen sich ja trotzdem öffnen ;)

InstaCSS ist eine simpel gehaltene Website, welche alle CSS properties inklusive Beschreibung und Code-Beispielen dokumentiert. Ein Muss für alle, die sich mit CSS beschäftigen, und selten benutzte oder neue (CSS3) Eigenschaften nachschlagen wollen:



» via WebResourcesDepot

Wer mittels Html und CSS schon einmal versucht hat Formular-Elemente für alle Browser zu vereinheitlichen und zu stylen wird garantiert den ein oder anderen Fluch weit unter der Gürtellinie ausgestossen haben.
Das Mini-Framework Ideal Forms, basierend of jQuery, schafft Abhilfe:

- Ideal Forms is a small framework to build powerful and beautiful online forms.
- It's very easy to use and requires minimal html syntax.
- Absolutely everything is stylable with css, no images needed.
- Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+.
- Degrades gracefully with javascript disabled.

Neben den neulich vorgestellten "Android Application Development" Video Tutorials hat TheNewBoston auch ein wirklich umfangreiches und zudem kostenloses Video Tutorial zu jQuery im Angebot. In 200 Videos mit einer Gesamtlaufzeit von über 20 Stunden kann man sich so Schritt für Schritt in jQuery einarbeiten.



Hier geht´s los mit Folge 1 - die gesamte Playlist gibt´s unter www.youtube.com/playlist?list=PL0EFA1232C66601D7:



Das sind übrigens nicht die einzigen Themen von TheNewBoston - unter Tutorials befinden sich noch zahlreiche weitere kostenlose Videos zu Dreamweaver, Photoshop, Html & CSS, iPhone Development, Java, PHP und vielem mehr.

Im YouTube Channel von TheNewBoston gibt es einen 200-teiligen Videokurs zur Entwicklung von Android Apps. Bei einer Gesamtlaufzeit von fast 20 Stunden wird alles Wichtige erklärt.

Hier geht´s gleich mal los mit Teil 1:



» via vinzv

Mit der Mobilizer Desktop-App (Adobe Air benötigt) ist es möglich Websites mit verschiedenen mobilen Endgeräten zu testen bzw. simultan zu vergleichen. Im Moment sind zwar nur iPhone 4, Palm Pre, HTC Evo und Blackberry Storm integriert, aber weitere Geräte sollen schon bald folgen.

Ich würde mir zwar noch ein paar weitere Funktionen wie z.B. eine horizontale Ansicht, Zoom-Funktion oder Simulierung der Ladezeit wünschen, für einen ersten Eindruck ist Mobilizer allerdings sicherlich nicht schlecht. Das Tool bietet ausserdem einen PNG-Export von Screenshots an, was beispielsweise für das eigene Portfolio wirklich nützlich sein kann.



Hier noch ein kurzes Video zu Mobilizer:

Preview mobile websites, design mockups, and local HTML on Mac or PC.

» via WebResourcesDepot

Umfangreicher Überblick bei noupe mit zahlreichen nützlichen, browserbasierten CSS3 und Html5 Tools:

Mit dem Vegas Background jQuery Plugin lassen sich Bilder in voller Größe als Websitehintergrund integrieren. Dabei werden die Bilder nicht nur automatisch je nach Bildschirmauflösung skaliert - es lassen sich zudem auch Slideshows und Textoverlays integrieren. Demo, Download und eine umfangreiche Dokumentation gibt´s auf der Entwickler-Website.



» via t3n

Welcher Designer oder Entwickler kennt es nicht? Die (Web-)Layouts sind bereits erstellt, aber der eigentliche Inhalt in Form von Text und Bild lässt noch auf sich warten. So füllt man die Designs für die Abnahme eines Kunden üblicherweise mit Lorem Ipsum Blindtext.

Beispiel eines Blindtext-Generators: lipsum.com



Bei Platzhalter-Bildern sah es bisher allerdings eher mau aus - lorempixum.com könnte aber genau diese Lücke füllen:

Alle Bilder werden als Creative Commons License (CC BY-SA) geliefert und sind über den Online-Generator in beliebigen Grössen verfügbar. Darüberhinaus können Bilder auch aus verschiedenen Kategorien wie People, Technics, Nightlife, Nature, Fashion, Sports etc. generiert werden, um noch besser zum Inhalt des jeweiligen Projekts zu passen.



Der Einbau der Grafiken auf einer Website wurde dabei denkbar einfach gelöst:

http://lorempixum.com/400/200 --- to get a random picture of 400 x 200 pixels
http://lorempixum.com/g/400/200 --- to get a random gray picture of 400 x 200 pixels
http://lorempixum.com/400/200/sports --- to get a random picture of the sports category
http://lorempixum.com/400/200/sports/1 --- to get picture no. 1/10 from the sports category

» via Webwork-Tools