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!

Der jQuery Code

$("a#print").click(function() {
    $('head').append('<link rel="stylesheet" href="print.css" type="text/css" />');
});

Das wars dann auch schon. Das Einbinden passiert in meinem Beispiel durch ein Klick auf den Link mit der id="print".

Jetzt noch ein wenig HTML & CSS

Den Link wie folgt auf der Seite (z.B. im Footer) platzieren:

<a id="print">Drucken</a>

Im Stylesheet print.css blenden wir nun Elemente wie z.B. Header, Sidebar, Footer und Bilder aus, da diese ja bei der Druckansicht nicht benötigt werden. z.B. so:

/* Unser Druckstylesheet */

body { background:none;}
#header, #sidebar, #footer {display:none;}

Für alle die es noch schöner machen wollen, können für den Fließtext noch eine Serifenschriftart, für bessere Zeilenbildung nehmen und die Breite des Textcontainers verbreitern (100%). So, viel Spass damit :)

Ich bin in den letzten Tagen auf eine nette Idee bei der Umsetzung einer Javascript Library gestoßen. Das Ganze nennt sich MoreCSS und bietet Javascript Deklaration in CSS Syntax. Das ist natürlich gerade für Einsteiger eine feine Sache. Mit insgesamt nur 8 KB Größe ist es sogar relativ schlank, wenn man es mal mit den großen Brüdern vergleicht. Zusätzliche Funktionen kann man sich auch leicht via Plugin dazu holen. Im Grunde ist es ganz einfach. Man hat eine MoreCSS Datei, die Javascript Library Datei und eventuell noch Plugin Dateien, die man wie folgt in den <head> – Bereich einbindet (siehe offiziellen Doku) .

<link rel="MoreCSS" href="MoreCSS.css" />
<script type="text/javascript" src="MoreCSS.js"></script>
<script type="text/javascript" src="MoreCSS.plugin.js"></script>

Nebenbei bemerkt ist MoreCSS meiner Meinung nach sehr gut dokumentiert und man findet eine übersichtliche Ansicht der ünterstützten Selektoren und Eigenschaften. Mit dem folgenden Quellcode möchte ich euch mal 3 Beispiele zeigen:

1. More CSS List-Style-Color

#meineliste {
list-style-color: #90B329;
color:#666;}

2. More CSS Tooltip

#example-link a {
	tooltip: '<div class="ttcontainer">%title</div>';
	tooltip-class: example-tooltip;
	tooltip-opacity: 0.75;}

2. More CSS AddClass

a#gruen:active => #werdetgruen strong { add-class: gruen;}
a#normal:active => #werdetgruen strong { remove-class: gruen;}

Demo

Ich denke für kleine Projekte ist es durchaus sinnvoll zu MoreCSS zurückzugreifen, denn man kann schnell Sachen wie opacity (Deckkraft) browserübergreifend definieren. So und abschließend würde es mich natürlich interessieren, ob ihr davon schon gehört habt und wie ihr die MoreCSS Library findet?

Auf stylespion.de gibt es im Moment eine nette Aktion namens “Ein ♥ für Blogs“. Man soll andere Blogger vorstellen um das “Miteinander” wieder zu stärken und vielleicht die ein oder andere Blogperle aufzudecken. Ich bin sehr gespannt wie viele dem Aufruf folgen werden. Das Ganze soll genau heute, dem 21.04 stattfinden. Deswegen werde ich nun 3 Blogs vorstellen, die teilweise zwar schon bekannt sein dürften, aber für mich sehr interessant und auf jeden Fall lesenswert sind.

Frank Bültge

Wenn ich was für Wordpress suche, guck ich erst bei bueltge.de und dann erst in der offziellen Dokumentation. Das beschreibt eigentlich genau den Stellenwert, den er in der deutschen Wordpress-Szene einnimmt und so kann man seinen Blog auch am besten beschreiben. Tipps & Tricks zu Wordpress HTML & CSS stehen an der Tagesordnung.

Peter Kröner

Auf der Seite von Peter Kröener findet man immer sehr nützliche Sachen zu HTML, CSS und unter anderem auch Wordpress. Der große Vorteil hier ist meiner Meinung nach, das er ein großartiges Contentdesign bietet und sich so auch lange Texte sehr gut lesen lassen. Ich bin damals durch den Artikel zu HTML5 auf seinen Blog aufmerksam geworden.

David Hellmann

David stellt sich auf seiner Seite vor und bietet neben seinem durchweg sehr gelungenen Portfolio auch interessante Beiträge über Privates aber eben auch Webdesign und Webentwicklung inkl. HTML, CSS und Mac. Auch David besticht durch ein grossartiges Blogdesign, was grandios in Wordpress umgesetzt wurde.

So das waren meine aktuellen Favoriten. ich hoffe die Aktion frisst sich schön durch die gesamte Blogsphäre und hoffe, das ich wenigstens einmal auch irgendwo genannt werde ;)

Zu guter letzt könnt ihr gerne eure Favoriten in die Kommentare schreiben.

Wordpress lässt sich ja mittlerweile nicht nur als reines Blog-System verwenden, sondern auch super als klassisches CMS . Da ich in letzter Zeit viel mit diesem Thema konfrontiert war, gibts hier nun eine kleine Liste an Plugins, Tutorials und Artikeln die mir dabei geholfen haben, Wordpress noch effektiver zu nutzen. (keine bestimmte Reihenfolge)

• Flutter – (CMS Plugin)
• Using WordPress as a CMS – (Artikel von nometech.com)
• Wordpress als CMS – (Artikel von sw-guide.de)
• Page Link Manager (Menü Plugin)
• Wordpress als CMS – ein Fallbeispiel – (Artikel von netzspielwiese.de)
• Wordpress Seiten und Unterseiten abfragen (Artikel von bueltge.de)
• Buddypress (Wordpress basiertes CMS für soziale Netzwerke)
• Layer-Navigation mit wp_list_categories – (Artikel von wordpress-magazin.de)
• WPLite (Userrechte Plugin)
• WordPress Theme in Abhängigkeit wechseln (Artikel von bueltge.de)
• Wordpress als CMS: ein Beispiel – Teil 2 – (Artikel von perun.net)
• Pico CMS – (klassisches CMS Template für Wordpress)
• Breadcrumb NavXT – (Breadcrum Plugin)
• Kategorie leitet autom. auf den einzigen Artikel – (Artikel von stefanmoeller.com)
• Wordpress als CMS – (Artikel von augenschoner.de)
• Einfach zur professionellen Website – mit Wordpress als CMS – (Online-Workshop)
• CMS-Like Admin Menu – (Plugin für CMS Admin Menü )
• Wordpress as CMS tutorial – (Artikel von robertbasic.com)
• WordPress as a CMS – (Video Screencast von css-tricks.com)
• Tiny MCE Advanced – (erweiterter Tiny MCE Editor)
• PageMash – (Plugin für Seitenmanagement)