dooz

Links…

dooz — Wed, 11 Aug 2010 10:38:54 +0000

7 Useful Resources to Help You Learn HTML5
http://webdesignledger.com/resources/7-useful-resources-to-help-you-learn-html5
Showcase Of Delicious Coffee Websites
http://www.smashingmagazine.com/2010/08/10/showcase-of-delicious-coffee-websites/
Who Needs University? The Best Nettuts+ Screencast Training Courses
http://net.tutsplus.com/articles/web-roundups/who-needs-university-the-best-nettuts-screencast-training-courses/
Building Persistant Sticky Notes with Local Storage
http://net.tutsplus.com/tutorials/html-css-techniques/building-persistant-sticky-notes-with-local-storage/
HTML5 Reset – A Base For HTML5-CSS3 Projects
http://www.webresourcesdepot.com/html5-reset-a-base-for-html5-css3-projects/
Wenn wir könnten, wie wir wollen
http://grochtdreis.de/weblog/2010/08/07/wenn-wir-koennten-wie-wir-wollen/
Complete Beginner’s Guide to Design Research
http://www.uxbooth.com/blog/complete-beginners-guide-to-design-research/
Complete Beginner’s Guide to Content Strategy
http://www.uxbooth.com/blog/complete-beginners-guide-to-content-strategy/
10 New High-Quality Fonts for Your Designs
http://webdesignledger.com/freebies/10-new-high-quality-fonts-for-your-designs

Das war’s! Etwas bunt zusammengemischt, aber das hat mich in letzter Zeit beschäftigt.

Falls euch ein Link besonders gefällt, schreibt einen Kommentar!

Freie Font-Datenbank Fontpark

dooz — Wed, 04 Aug 2010 08:09:37 +0000

Jeder kennt ja dafont.com, die eine freie Datenbank für Fonts, die einige gute Schriften beherbergt. Jetzt kommt frischer Wind mit “Fontpark” auf. Über 70000 Schriftarten befinden sich derzeit im neuen Schriftportal, die man – laut Aussage des Portals – für private und kommerzielle Zwecke frei verwenden kann.

Man merkt schnell, dass das Portal noch in den Kinderschuhen steckt und noch mit ein paar Problemen technischer Natur zu kämpfen hat, aber man sollte es definitiv im Auge behalten.

Link: http://www.fontpark.net/

Fontstück der Woche: Fontin

dooz — Mon, 02 Aug 2010 11:46:08 +0000

Ein wirklich schöner Font mit 4 Schriftvarianten. Zu Downloads geht auf die Seite http://www.josbuivenga.demon.nl/fontin.html

LESS: Jetzt mit GUI

dooz — Wed, 30 Jun 2010 10:51:13 +0000

Unglaublich! Jetzt gibt es eine GUI für das bekannte LESS, welches nicht nur CSS „erweitert“, sondern auch “kompiliert”. Mit LESS kannst du dein CSS schöner gestalten und mehr Magie und Ordnung reinbringen.

Variablen:

Wie oft hat man das: h1 und p bekommen die gleiche Farbe, ergo: Man muss zweimal color: #444; für beide Tags angeben, egal ob vererbt oder nicht, aber mit LESS sieht das Ganze so aus:

@brand_color: #444;
h1 {
color: @brand_color;
font-size: 1.5em
}
h2 {
color: @brand_color;
font-size: 1.2em
}
p {
color: @brand_color;
font-size: 1em;
}

Mixins (Funktionen)

Man kann auch Funktionen, sogenannte Mixins, benutzen, die auch mit Variablen arbeiten. Du kannst also eine Klasse oder ID mit einem Standardwert erstellen und diese dann weiteren Klassen oder IDs zur Verfügung stellen.

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}

Verschaltelte Regeln

Vererbung gibt es bei LESS auch. Es spart Tipperei und ist logischer aufgebaut.

#header {
color: red;

a {
font-weight: bold;
text-decoration: none;
}

}

Operationen

CSS und mathematische Operationen waren immer zwei verschiedene Paar Schuhe. Mit LESS kannst du rechnen!

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: (@base-color + #111) * 1.5;
}

Mehr dazu gibt es in der englischen Dokumentation.

Installation

Also wenn du einen Mac hast, brauchst du nur ein Terminal aufrufen und

sudo gem install less

eintippen. Damit installierst du dir den lessc, der eigentliche Compiler.

Mit der GUI LESS.app kannst du dann komfortabel die Dateien kompilieren. Einfach das Verzeichnis per Drag&Drop in das Fenster reinziehen und schon kann es losgehen.

Fontstück der Woche: Dekar

dooz — Tue, 29 Jun 2010 08:49:58 +0000

Das Fontstück der Woche: Dekar!

Man sieht, dass nicht alle Zeichen implementiert worden. Das “ß” scheint auch etwas stärker zu sein. Vielleicht kommt demnächst ein Update?

Zum Download

Links…

dooz — Tue, 29 Jun 2010 08:35:40 +0000

Und hier sind die Links für heute…

10 Tools für eine schnellere Webseite

Learning HTML5 at HTML5rocks.com

50 powerful time-savers for webdesigners

15 wildly convenient CSS items from CodeCanyon

15 Must-Have Minimalist Icon Sets

HTML 5 Starter Kit

dooz — Fri, 25 Jun 2010 11:08:17 +0000

Radu Chelarui von Sickdesigner.com hat ein schönes Startkit für HTML5 veröffentlicht. Dieses HTML5-Skelett bietet folgende Funktionen:

Browser-übergreifende Kompatibilität (auch IE 6)
Valides HTML5
Favicon
Reset CSS
CSS-Weiche für (mobile) Endgeräte
jQuery Framework via GDN
@font-face Unterstützung
IE6 & 7 Weichen (nur für den Fall, dass diese benötigt werden)
Wiederverwendbare Klassen

Ein Rund-Um-Sorglos-Paket für das nächste HTML5-Projekt.

HTML und Semantik

dooz — Wed, 23 Jun 2010 13:04:20 +0000

Ranjith Kumar, der ebenso wie ich die Lücke zwischen Designer und Programmierer ausfüllt, schrieb einen schönen Artikel über HTML(5) und Semantik. Er beleuchtet die Bedeutung der Semantik, warum wir Semantik brauchen und bietet praktische Bezüge. Ein sehr schöner, in englisch verfasster Artikel.

Zehn harte Wahrheiten über Firmenwebseiten

dooz — Wed, 23 Jun 2010 12:44:08 +0000

Paul Boag, Gründer der britischen Agentur Headscape, Autor des Website Owners Manual und Gastgeber des prämierten Webdesign-Postcast Boagworld hat ein schönen Artikel über Firmenwebseiten geschrieben.

Aus eigener Erfahrung musste ich fast allen Punkten seines Essays zustimmen. Ein sehr amüsanter und interessanter Artikel in englisch. Dr. Web-Autor Rene Schmidt hat diesen Artikel ins deutsche übersetzt, ist allerdings nur für Premium-Nutzer des Dr. Web-Portals verfügbar.