Nachdem ich viele Techniken für Font Replacement ausprobiert habe, bin ich dann doch bei Typeface.js hängen geblieben, auch wenn das auch die ein oder andere Macke hat. Bei dem damals getesteten Typekit ist die Handhabung zwar sehr einfach allerdings sind hier die Ergebnisse zwischen Windows und Mac in Bezug auf das Rendering zu unterschiedlich, Performance technisch gesehen ist die Schrift auch zu spät da. Die Seite ist geladen und manchmal erst nach einigen Sekunden dann auch endlich die eingebundene Schrift. (Beim Artcoreblog zu sehen)

Jetzt benutze ich wenn es drauf ankommt lieber Bilder oder eben Typeface.js, die vielleicht auch vielen bekannt sein dürfte. Diese habe ich auch bei einem Schulprojekt namens Baboon (ein Jump and Run + Community im Alpha Version) eingesetzt. Vorteil ist ganz klar die Performance und gute Ansprache per CSS. Hier ist die Schrift sofort da. Sie wird im Menu und für Überschriften verwendet. Allerdings hat man manchmal kleine Probleme mit “unsichtbaren Margins” die diese “JSFonts” gerne mal nach unten abgeben.

Über Flash Alternativen lasse ich mich jetzt nicht aus, da für mich eigentlich keine nennenswerte Alternative. Und CSS3 gut und schön, aber wenn das nicht jeder Browser darstellt und dann auf eine nicht so hübsche Systemschrift zurückgreift ist es ebenso noch (!!) keine wirkliche Lösung die man in Erwähnung ziehen könnte.

Das Web will durch andere Schriftarten erobert werden. Was mich also brennend interessiert ist, wie geht ihr vor? Welche Methode zum Font Replacement benutzt ihr?

Wenn man Coda für den Mac als Editor benutzt, kann man diesen sehr gut an die eigenen Bedürfnisse anpassen. Ich benutze z.B. die Clips für Codeschnipsel doch recht häufig. Hier ist die Seite coda-clips.com recht nützlich und zu empfehlen. Dort kann man Codeschnipsel direkt in Coda importieren und hat sie beim arbeiten immer parat. Generell findet man auf David’s Schnipselseite noch gute Schnipsel, ebenfalls in vielen verschiedenen Kategorien. Coda lässt sich aber auh mit richtig neuen Funktionen bestücken, die die Arbeit mit vielen Sprachen noch vereinfacht. Auf der Panic Seite gibt es ein offzielles Pluginverzeichnis, das man auf jeden Fall mal durchgeguckt haben sollte. Mein Favorit ist auf jeden Fall das CSS Toolkit. So ich hoffe auch wenn der Beitrag hier schon Monate in meinen Entwürfen lag, hilft es trotzdem noch dem einen oder anderen :) Außerdem bin ich immer über Tips und Tricks von euch dankbar, also los gehts, was könnt ihr noch empfehlen?

Das bereits erwähnte Pulse CMS ist nun in der Version 1.3 zu haben. Es verfügt nun auch über eine rudimentäre Blogfunktion. Diese beherbt zwar nur eine Liste von Artikeln mit Titel und Inhalt, wird dann “wie gewohnt” per Include in die Seite eingebunden und besitzt eine Pagination. Ab 1.3 ist eine Lizenz allerdings kostenpflichtig. Um Pulse mit Blog zu nutzen muss man einmal 12$ berappen und besitzt dann eine lebenslange und upgradefähige Version, die zwischen Domains übertragbar ist. Ich denke es hat durchaus seine Daseinsberechtigung, gerade für sogenannte Singlepage Webseiten kann ich mir das echt praktisch vorstellen, aber ich denke es war zu früh, eine kostenpflichtige Version anzubieten. Da greift man dann warscheinlich doch lieber zu Freeware zurück…

Heute ist der letzte Tag, wo das nano Bundle 2 von MacHeist zu bekommen ist. Das Bundle beinhaltet mittlerweile 8 (Tweetie kam in letzter Minute noch dazu) und mit Twitteraktion sogar insgesamt 11 teilweise nützliche Apps für 19.95$. Das ein oder andere nützliche Programm ist auf jeden Fall dabei. Kaufgrund für mich war Flow, dessen Preis sonst allerdings höher ist (25$), als das ganze Bundle zusammen.

Flow ist ein wirklich gelungener FTP Client, der mit Benutzfreundlichkeit und schickem(!) Interface bei mir punkten konnte. MacJornal habe ich zwar getestet, aber auch gleich wieder gelöscht. Die WordPressanbindung war ein wenig umständlich und das Writepanel haute mir komische Inlinestyles rein und löschte dafür andere. Das I-Tüpfelchen ist auf jeden Fall Tales of Monkey Island, eigentlich DAS Spiel der Spiele. Coverscout ist zwar ganz praktisch (sucht Cover für iTunes Alben bei Google, Amazon usw.), aber die Extranmeldung echt nervig und es gibt eben auch Freewarealternativen. RipIt, Clips und RapidWeaver waren für mich eher uninteressant.

Nun zu euch

Konntet ihr aus dem Bundle überhaupt ein Programm gebrauchen, und wenn ja, welche?

Das neue Design vom Artcore Blog sollte man sich auf jeden Fall nicht entgehen lassen! Sieht super aus! Die Breite ist nun auf knapp 500px angehoben worden und es gibt auch ein neues Logo zu bewundern, was ich für sehr gelungen halte, auch wenn das für Viele bestimmt nicht “minimal” genug sein dürfte, aber es handelt sich ja schliesslch um Illustration. Nicht vergessen! Es gibt ne Menge coole Wallpaper inklusive verschiedenen Auflösungen (1280, 1440, 1600) zum Download.

Gestern beim Surfen gefunden: PulseCMS. Man kann nicht viel machen, aber das was man kann, macht Sinn. Das Herz des kleinen Systems sind eigentlich die Inhaltsblöcke, welche einfach als HTML Dateien in einem bestimmten Ordner abgespeichert werden und dann einfach an die gewünschte Stelle includet werden. ebenso funktioniert das mit hochgeladenen Bildern. Für die Sicherheit kann man Bilder und Blöcke noch backuppen. Zum Laufen bekommt man Pulse quasi einfach indem man es auf seinen Webspace lädt. Super. Ausserdem: Sehr hübsches Backend. in der offiziellen Anleitung kann man noch Näheres erfahren. ich habe das Teil auch schon auf deutsch übersetzt, falls Interesse besteht.

Vorraussetzung: gültige E-Mail angeben und möglicherweise etwas Geduld (ich hab gehört Google verschickt sie jetzt aber schon schneller) für die Wartezeit!

Dank David habe ich eine Typekit Einladung bekommen. Da ich nun selber noch 3 Einladungen über habe möchte ich sie gerne loswerden. Mit Typekit kann man verschiedenste Fonts ganz einfach für das Web benutzen. Einfach 2 Zeilen JS in den HTML-Kopf einbinden und los gehts. Ein Beispiel seht ihr hier. Wer also Interesse hat, einfach maln Kommentar schreiben und es werden dann 3 nach Zufallsprinzip ausgewählt.

Mitmachen kann man bis aehm, sagen wir bis Freitag, den 06. Sonntag, den 08. November.

Die 3 Einladungen gehen nach de Zuffallsprinzip an:

• Arcance (#1)
• Maxi (#4)
• Kurzi (#7)

Viel Spass damit!

Die Performance ist auch noch nicht so optimal, so darf ich teilweise nach dem Tippen dem Cursor folgen und sehen was ich vor einigen (2-3) Sekunden verfasst habe. Einige Funktionen aus dem Video konnte ich auch noch nicht wiederentdecken. Direktes “Drag and Drop”  von Bildern habe ich jedoch mit Gears zum Laufen bekommen. Dann macht das Ganze schon mehr Spass.

Allerdings dauerte es manchmal einige Zeit, damit diese auch der/die Wavepartner zu sehen bekam(en). Die Benutzeroberfläche gefällt mir jedoch sehr gut: schön aufgeräumt und selbst auf einem 13″ Display zu ertragen. Aber gut, ist ja noch eine Beta/Preview. Ich bin gespannt wie sich das noch entwickelt. Was meint ihr zum aktuellen Stand?

Wir mussten als Hausaufgabe das Thema “Konzept/Konzeption” als Produkt darstellen um den zu festigen. Hier könnt ihr mein Ergebnis sehen. jQuery war mir auch diesmal ein guter Freund. Getestet lediglich in Firefox 3+ & Safari 4 ;)

Über Nadja wusste ich ja schon zu berichten. Ihren neuen Blog findet ihr unter blog.artcore-illustrations.de. Dort gibt es immer mal wieder nette Canvas, Fotos, Illustrationen, Skateboards und Skizzen zu sehen. Also unbedingt ansehen, am besten kommentieren und abonnieren. Läuft natürlich ebenfalls unter WordPress.

Code in der footer.php

<ul>
    <?php wp_list_bookmarks('categorize=0&title_li=&orderby=rand&limit=8'); ?>
<ul>

Vielleicht zur weiteren Erklärung: before gibt an was mittelbar vor dem Link steht und categorize=0 gibt an, ob die Links in Kategorien gegliedert werden sollen oder nicht. In meinem Fall hat der Parameter den Wert 0, also werden sie nicht berücksichtigt. Über Tweets und Kommentare freue ich mich natürlich ;)

Dann ändert ihr in Zeile 29 den Ausdruck '&source=' in '&source='. Das Gleiche (Maskieren) macht ihr dann noch mit den “& – Zeichen” in folgenden Zeilen: 33, 35, 39, 43. Dann spuckt der w3c Validator auch das erhoffte”successfully checked” aus..

update: Für alle die das Plugin noch nicht haben, können das auf Elmastudio per Anleitung nacholen!

Wie ihr seht, erstrahlt die Seite in ganz neuem Glanze. Nachdem ich über ein Jahr mit dem gleichen Design gefahren bin, gibts nun mal eine kleine Auffrischung. Das Layout ist im großen und Ganzen (!) das Gleiche geblieben, jedoch ein wenig breiter (um genau zu sein 100px), ein wenig andere Farben (und von 3 auf 2), die Kategorien sind rechts in die Sidebar als Tabmenu gewandert und die Seite besitzt diesmal einen “richtigen” Footer, indem noch Top Kommentatoren ( also legt euch mal ins Zeug ;) ) und Links  zu finden sind.

Da wären wir auch schon beim eigentlichen Thema, wer Bock auf ein Oldschool Linktausch hat, kann sich gerne melden! Oder wer sogar Lust hat einen netten 125×125 Banner zu tauschen (Für ein Beispiel mal nach rechts gucken), kann auch zu mir kommen.

So, jetzt geht hier also wieder die Post ab. Jetzt noch das obligatorische “Viel Spass” und los.

Frank hat bis zum 31. August im Rahmen eines Gewinnspieles dazu aufgerufen für sein Plugin Wartungsmodus ein eigenes Design zu gestalten. Da ich die Idee echt gut fand und mir Davids erster Entwurf ebenfalls gut gefiel, war ich angespornt und leistete auch meinen Beitrag, den ihr hier schonmal in einer kleinen Vorschau bestaunen könnt! Das Theme, welches auf den Namen “Paint” hört ist auch schon integriert und  ihr könnt es nun fleissig benutzen! Hier könnt ihr alle bisher integrierten Designs sehen! Sehr schöne dabei.. Welches ist euer Favorit?

Nun gibt es sie endlich, die 2. Version von Nadjas Portfolio. die Seite ist unter www.artcore-illustrations.de zu erreichen. Die neue Seite ist sehr grafikorientiert und horizontal aufgebaut, was neben dem wunderschönen Portfolio eben auch schon ganz alleine für einen guten ersten Eindruck der Fähigkeiten sorgt. Bei der Umsetzung habe ich viel mit jQuery gearbeitet, z.b bei der Newsansicht, Galleryansicht, Ajax Formlar oder eben Einblenden von Impressum und Haftungsausschluss. Ich habe es in allen aktuellen(!) Browsern getestet und es lief ohne Probleme. Viel Spass beim Durchklicken!

Nachdem ich durch Tweetdeck auf den Geschmack gekommen bin Webanwendungen auch ohne Browser zu nutzen, hat sich die Liste meiner Adobe Air Anwendungen stetig erhöht. Da gibt es mittlerweile so eine Menge an Tools, die mir das Arbeiten erleichtern. Ausserdem kommt man so auch als Windows Nutzer mal in die Lage von schönem Interface Design. Hier also meine 6 Favoriten:

Doomi

Doomi hat es mir echt angetan. Die kleine Todo Liste kommt mit sehr nettem Design, guter Übersicht und einfacher Bedienbarkeit daher, das es mich wirklich überrascht hat. Man kann Todos eintragen, sortieren, ein Ablaufdatum zuweisen und auch alle anzeigen lassen, die man bereits abgehakt hat. Da ich schon seit geraumer Zeit auf der Suche nach einer kleinen & simplen Lösung für dieses Problem war, bin ich ich mit Doomi wirklich sehr zufrieden. Zu empfehlen!

Tweetdeck

Tweetdeck sollte jedem ein Begriff sein. Für mich der beste Twitter Desktop Client mit riesigem Funktionsumfang und schöner Benachrichtigung bei neuen Tweets im minimierten Zustand. Must Have!

ReadAir

Als Webdesigner muss man natürlich immer auf dem aktuellsten Stand sein. Wie soll man das ohne Feedreader heutzutage noch schaffen? ReadAir ist sozusagen die Desktop Variante des Google Readers. Bietet sehr nettes Mac Design und sogar noch bessere Übersicht als das Original. Zu empfehlen!

Shrink O’ Matic

Mit Shrink O’ Matic kann man Bilder sehr bequem in ihrer Größe verändern. Einfach Ausgabegröße und Ausgabename (beibehalten oder automatisch neubenennen), nach Wunsch noch einen Ordner angeben, Qualität und Format einstellen und los. Man zieht die Bilder per Drag and Drop ins Fenster und fertig. Wirklich komfortabel und gute Qualität. Gerade wenn man mal so 100 Bilder in der Größe ändern muss und nicht alle einzelnd bearbeten will! Sehr Gut!

Snippely

Snippely ist, wie man dem Name nach warscheinlich schon vermutet, ein Codeschnipselverwalter. Was man als Erstes auf jeden Fall positiv bewerten muss ist die gute Übersicht. Die Schnipsel lassen sich nach selbst erstellten Gruppen ordnen, was sehr praktisch ist um z.B. die unterschiedlichen Sprachen zu sortieren. Des weiteren kann man jedem Snippet ein Name, Beschreibung und mehrere Notiz- und Codeblöcke zuweisen. So braucht man für verschiendene Doctypes z.b. nicht mehrere Snippets anzulegen. Sehr gelungen! Was allerdings fehlt ist SyntaxHighlighting und ein Button um die Codes gleih in die Zwischenablage zu kopieren! Gut!

Websnapshot

Mit Webnsnapshot lassen sich Webseiten “fotografieren”. Einfach die URL eingeben und fertig. Nettes kleines Feature ist, dass er dieses in Thumbnailgröße, Browsergröße und Gesamtgröße tut. Einfach und Nett!

Weitere Anwendungen

• GeeMail
• Icon Generator
• Desktop Color Finder
• Pixus

Fazit

Hoffe der Artikel hat euch gefallen und ich habe dem Einen oder Anderen noch was Nettes gezeigt. Über Social Bookmarks würde ich mich freuen!

Nun natürlich die Frage aller Fragen, Benutzt ihr überhaupt Air Applikationen? Wenn ja, welche? Und welche findet ihr besonders hilfreich?

Da Viele immernoch nicht wissen, dass man die Schriftgröße im Browser auch ganz bequem per Tastur einstellen kann, hier mal eine kleine und simple Lösung, wie man dem Benutzer eine kleine Schriftgrößeneinstellung direkt af der Webseite anbieten kann. Also erst einmal erstellen wir 3 Links auf der Seite auf der wir den Fontsizer einbauen wollen und versehen diese Links mit 3 verschiedenen Klassen, in diesem Falle .standard, .middle und .big

<a class="standard">a</a>
<a class="middle">a</a>
<a class="big">a</a>

Das werden unsere Links, die die Größe ändern. Nun kommen wir zum jQuery Teil.

jQuery einbinden

In den Kopf der HTML Datei wie gewohnt das Framework einbinden, siehe jQuery

<script type="text/javascript" src="pfadzu/jquery.js"></script>

Nächster Schritt wird sein, den JS Teil zu schreiben, der die Größe mit Klicks auf die eben erstellten Links ändert. Für den Bereich, den die Links einschliessen sollen, legen wir am Anfang die Variable container fest. Also meistens body für die komplette Seite.

var container = "body";

Die Klickfunktionen

der 3 Links, mit den enstprechenden 3 Größen:

$(document).ready(function(){

  // Schriftgröße Normal
  $(".standard").click(function() { $(container).css('font-size', 12); });

  // Schriftgröße Mittel
  $(".middle").click(function() { $(container).css('font-size', 16); });

  // Schriftgröße Groß
  $(".big").click(function() { $(container).css('font-size', 20); });
});

Damit man auch sieht welcher Link für welche Größe zuständig ist, noch ein wenig CSS für die Darstellung:

.standard { font-size: 12px;}
.middle { font-size: 16px;}
.big { font-size: 20px;}

Demo

Ein Beispiel findet ihr hier: Demo

Das wars…

..auch schon. Natürlich kann man jetzt noch ein Cookie setzen, damit man beim nächsten Besuch der Seite die selbe Einstellung hat, oder den aktiven Link noch markieren. Aber sollte ja auch eigentlich nur ein kleiner Denkanstoss werden. Aber wenn Interesse besteht, wird das natürlich gerne nachgereicht ;)

Wie löst ihr solche Probleme, wenn der Kunde einstellbare Schriftgrößenveränderung haben möchte? würde mich mal interessieren…

Wer kennt es nicht? Für viele Projekte bauch man immer wieder den gleiche Code, da es nun mal Sachen gibt, die man auf allen bzw. fast allen Webseiten braucht. Hier kann die Idee von David & Thomas Abhilfe schaffen. Mithilfe von WordPress wurde hier eine kleine Sammlung angelegt, die genau das Problem löst. Man findet Codeschnipsel für z.b. CSS, jQuery, WordPress, HTML & PHP, die einem das Leben leichter machen.David hat mir ebenalls einen einen Account gemacht und ich werde sehen, was ich dazubeitragen kann. Auf jeden Fall mal auschecken!