David Hellmann - Grafikdesign, Webdesign, Webentwicklung, HTML, CSS, Wordpress » Tipps und Tricks

Screenr – Screencasts, Ben (Bauersart) gibt Gas!

David Hellmann — Sat, 07 Nov 2009 13:02:15 +0000

Screenr, ein online Tool um Screencasts zu erstellen. Es ist kostenlos und scheint spaß zu machen, wenn man sich täglich die Tweetflut neuer Screenr-Links von Ben (Bauersart) anschaut. Er zeigt ein paar Tricks und Kniffe zu jQuery, gibt Rede und Antwort zu dem ein oder Programm was er nutzt bzw. warum er es nutzt und pimpt hin und wieder auch mal bestehende Websites, um zu zeigen, da geht noch was!. Hier kommt ihr direkt zum Profil von Ben auf Screenr. Während ich hier schreibe, hat er auch schon den nächsten Screencast rausgehauen: Screencast: Form validation in 10 Minuten. Ich sag ja: "er gibt Gas".

Hier noch eine kleine Übersicht seiner Werke
• Meine Antwort für Matthias, der mir die besten SEO Tipps des Jahres ge«shared» hat.
• Part 1 #jQuery «Hide the Site» :-) Mini Video Tutorial im Schnelldurchlauf
• #jQuery #Screencast #Tutorial «Fancy Navigation» Part 1
• Den letzten Tweet mit jQuery auf die eigene Seite bringen: «latest Tweet»
• «Pimp Dwornis Navigation»
• Warum Coda ? Darum Coda !
• Screencast: jQuery Slideshow mit Fade transition in 3 Minuten
etc. etc. :)

Shalom Typo als Wordpress Theme

David Hellmann — Mon, 19 Oct 2009 16:40:59 +0000

Vor ein paar Wochen gab es ja seitens des Smashing Magazines einen Contest wo es darum ging ein Typo Design zu erstellen und das ganze als HTML / CSS Version zur Verfügung zu stellen. Dort machte ich damals mit aber schaffte leider nicht den Sprung in die Top3., Dennoch schien das Template einigen zu gefallen, denn ich bekam immer wieder Anfragen ob es das ganze als Wordpress Theme geben wird. Es gab aber auch einige, die fragten, ob Sie nicht ein Wordpress Theme daraus machen könnten. Dagegen hatte ich nichts einzuwenden solange meine Daten im Footer erhalten blieben. Doch bisher scheint es keiner wirklich gemacht zu haben.

Gestern bekam ich dann eine Mail von Sanid (www.ikab-mag.com) der sich der Sache angenommen hat und wirklich ein Theme - das Shalom Typo Theme (download) - aus dem Template gezaubert hat. Zwar sind nicht alle Sachen 100% identisch aber es ist wie ich finde sehr gut geworden. Ein Theme zu erstellen ist ja auch noch mal eine andere Sache als nur ein Template. Es ist auch schon die ein oder andere nützliche Funktion im Theme integriert. Sehr schöne Arbeit. Danke an Sanid für die Umsetzung.

Link zum Artikel bei Sanid: Shalom Typo Wordpress Theme
Direktlink zum Download: Shalom Typo Theme

Shalom Typography Template

Shalom Typography Wordpress Theme

Icon Dock geht online

David Hellmann — Sat, 21 Feb 2009 15:57:42 +0000

Nick La bringt sein nächstes Projekt online. Hierbei handelt es sich um IconDock dem Icon Shop. Sehr schön ist, dass man einzelne Icons aus den verschiedenen Icon-Packs downloaden kann. Auch free Icons gibt es somit sollte für jeden was dabei sein. Es gibt zwar noch nicht die große Auswahl aber ich denke über kurz oder lang wird sich hier noch was tun. Wer demnächst also das ein oder andere Icon braucht sollte doch mal einen klick riskieren: IconDock.

Neues Familienmitglied in der Tutorial Serie – AETuts

David Hellmann — Wed, 17 Dec 2008 09:06:00 +0000

Familien sind ja ständig am wachsen. So auch die der Tutorials. Als neustes Mitglied der schon vorhanden (PSDTuts, Nettuts etc.) gibt es seit neusten auch AETuts - die Tutorial Seite rund um After Effects. Die Jungs da wollen in der Woche 2-3 Tutorials veröffentlichen. (mehr hier zu lesen). Teilweise find ich die häufigkeit an Tutorials aber übertrieben (PSDTuts). Somit geht der Fokus auf ein bestimmtes Tutorial ein wenig unter. Aber die Luft ist auch schon wieder etwas raus da das hohe Tempo nicht gehalten werden konnte. Gut so! :)

Google Chrome mit Google Bookmarks nutzen

David Hellmann — Fri, 12 Dec 2008 01:25:26 +0000

Gestern kam auch Google Chrome als Final raus. Man hat somit relativ schnell den Betastatus verlassen was für Google ja nicht das normalste ist. Ich find den Browser einfach klasse. Wirklich ein ganz schneller und wenig Müll bisher was ihn aufbläht. Was mich aber dann doch stört sind einige Plugins an die man sich bei Firefox gewöhnt hat. Sehr wichtig sind für mich Google Bookmarks, leider ist es in Chrome nicht wirklich praktisch diese zu nutzen und zu verwalten. Per Google Bookmarks arbeite ich zum Beispiel mit Makebetterwebsites und da stört es mich schon das ich diese Funktion nicht gewohnt nutzen kann. Aber es gibt abhilfe und noch ein bisschen mehr.

Google Bookmarks nutzen

Man muss nur in Chrome ein Lesezeichen hinzufügen (Lesezeichenleiste sollte immer eingeblendet sein) und folgenden Code anstelle der URL einfügen:

javascript:(function(){var a=window,b=document,c=encodeURIComponent, d=a.open("http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk="+c(b.location)+ "&title="+c(b.title),"bkmk_popup","left="+((a.screenX||a.screenLeft)+10)+", top="+((a.screenY||a.screenTop)+10)+",height=420px,width=550px, resizable=1,alwaysRaised=1");a.setTimeout(function(){d.focus()},300)})();

Dieser öffnet ein Popup wo man wie gewohnt seine Lesezeichen hinzufügen kann und diese auch Labels zuordnen kann. Sehr feine Sache und geht super. Ich hab mir auch die Google Bookmark Datei gezogen und diese dann einfach in Chrome importiert und habe somit meine ganzen Lesezeichen auch in Chrome. Das geht wie folgt:

Diese Datei runterladen (man muss mit Google Account eingeloggt sein):
Google Bookmarks (HTML Datei)

Jetzt in Chrome auf den Schraubenschlüssel > Lesezeichen-Manager > Tools > Lesezeichen Importieren und dann die eben runtergeladene Datei auswählen. Geht auch super. Man müsste die halt immer mal wieder neu importieren aber vielleicht gibt es auch ne andere Möglichkeit um das ganze automatisch zu machen.

Google Fakebar

Wer die Google Toolbar bisher eingesetzt hat wird diese vermissen vermutlich. Ein Projekt Names Google Fakebar könnte vielleicht ein paar Sachen zumindest ähnlich bereit stellen. Das ganze ist recht simple gemacht aber durchaus nutzbar. Zwar nicht so schön wie die eigentliche Toolbar aber immerhin.

35 Webseiten mit Papier-Elementen

David Hellmann — Tue, 16 Sep 2008 11:00:27 +0000

Papier ist in aller Munde, es sieht schön aus und gibt den Webseiten oft einen persönlichen touch. Hier mal eine Sammlung von Webseiten diese hier und da auf Elemente von Papier, Klebestreifen, Pappe und allerahnd anderer Sachen setzen.

Design Jobs on the Wall

Illunatic

Tischlerei Klehn

Rafael van der Vaart

Helmy Bern

Orange Label

Prague Guide

Coalmarch

Revolution Church

Tennessee Vacation

etonDIGITAL

Square Circle

Erica Wilson Photography

Design Sponge

Bcandullo

L’Associazione Culturale Crocevia

Church on the Rock

Bell 2 Lodge

Cornerstone Church

Boulevardia

Chemistry Recruitment

CGVietnam

Cassys Design

Casio Exilim Lab

Bisley Perfect Order

Band Push

Alex Cohaniuc

AIGA HI 50

Ginger Beards

Team Viget

PSYOP

Red & Blu

Dawghouse Design Studio

Strhess Clothing

Slabovia TV

Mehr Seiten aller Art zu finden auf Make Better Websites

Weiterer Zuwachs in der Tutorial Familie! Audio- und Vectortuts online

David Hellmann — Thu, 03 Jul 2008 11:00:03 +0000

Die Reihe rund um PSDTuts hat nun weiteren Zuwachs bekommen. Schon etwas länger online ist die Seite rund um Vektor Tutorials: www.vectortuts.com. Ganz Neu hingegen ist die Seite für Audio Tutorials welche den Namen www.audiotuts.com trägt (na wer hätte er erraten?). Für mich sind es die bekanntesten Tutorial Seiten mit qualitativ hochwertigem Content. Auf jedenfall sollte man diese Seite in seine Bookmarks mit aufnehmen und hin und wieder mal einen Blick riskieren.

PSDTuts bekommt Nachwuchs – NETtuts

David Hellmann — Thu, 24 Apr 2008 11:00:47 +0000

Wer PSDtuts kennt, wird mir zustimmen, das diese Seite einfach erstklassige Photoshop Tutorials zu bieten hat. Es gibt eine Menge Seiten im Internet die Tutorials anbieten aber bisher ist mir keine untergekommen, die das so gut und mit solch einer hohen Qualität tut. NETtuts ist nun der kleine Bruder von PSDtuts und man kann erahnen das auch dort die gleiche Qualität zu finden sein wird. Es wird sich hier um Tutorials im Bereich "Web Entwicklung" handeln (HTML / CSS Techniques, Javascript / AJAX) was für viele Designer wohl genauso interessant ist wie gute Photoshop Tutorials.

Hier gehts zur Webseite: http://www.nettuts.com

Mach es Grau: GrayBit

David Hellmann — Fri, 11 Apr 2008 11:00:28 +0000

Heute Morgen auf Dr.Web gefunden und gleich mal gestestet. Bei GrayBit handelt es sich um ein Tool mit dem man eine bestimmte Webseite komplett in Graustufen darstellen kann. Oft fällt der Begriff Barrierefreiheit dieser auch hier wieder zum tragen kommt. Funktioniert die eigene Webseite auch ohne Farbe? Sachen müssen auch zur Geltung kommen, ohne das durch Farbe auf Sie hingewiesen wird. Die Frage kann man sich nun schnell und einfach selbst beantworten.

Zur GrayBit Webseite

Modernes Webdesign

David Hellmann — Sun, 16 Mar 2008 11:00:52 +0000

In letzter Zeit überkommt es mich des öfteren das ich den Drang verspühre, mir ein Buch zu kaufen. Diesmal fiel die Entscheidung ziemlich einfach, da Manuela Hoffmann ihr Buch Modernes Webdesign in die Bücherregale stellte. Leider fehlt mir die Zeit das komplette Buch auf einmal durchzulesen. Was bisher aber gelesen wurde hat vollkommen überzeugt! Sehr schön und verständlich geschrieben und immer wieder mit prima Beispielen unterlegt das ganze. Wohl eines der besten Bücher am Markt im Moment.

Ich freue mich schon auf freie Minuten wo ich wieder zum lesen kommen werde. Wer auch gern mal einen Blick riskieren möchte, kann sich hier eine kleine Leseprobe gönnen.

Links zum Thema: Webseite zum Buch: Modernes Webdesign | Leseprobe