Designpicks :: Designs, Tutorials & Webdevelopment » Designpicks http://www.designpicks.de Designpicks, deine Quelle für gute Webdesign und Entwicklungs- Tips & Tricks Sat, 17 Dec 2011 14:32:02 +0000 en hourly 1 http://wordpress.org/?v=3.3 Web 2.0 Vernetzung (oder wie ich mir doppelte Arbeit sparen kann) http://www.designpicks.de/web-2-0-vernetzung-oder-wie-ich-mir-doppelte-arbeit-sparen-kann/ http://www.designpicks.de/web-2-0-vernetzung-oder-wie-ich-mir-doppelte-arbeit-sparen-kann/#comments Sun, 30 Aug 2009 19:46:59 +0000 Designpicks http://www.designpicks.de/?p=712 netzwerkeSocial Media ist aktuell DAS Hype-Thema im Internet. Jeder hat schon mal von StudiVZ, Mister Wong, Xing, Flickr oder Twitter gehört oder ist dort schon aktiv. Es gibt immer mehr dieser Dienste und die Nutzerzahlen explodieren regelrecht. Auch ich nutze diese Plattformen, um Wissenswertes auszutauschen und mit Freunden, Kollegen und Bekannten zu kommunizieren.
Ein Grund für die steigende Popularität der Plattformen ist die sehr einfache Möglichkeit mit einer großen Gruppe von Menschen in Verbindung zu treten. Der Nutzer muss lediglich ein Profil anlegen und erhält dann eine eigene Seite im Netzwerk, welche er nach seinem persönlichen Gusto gestalten kann. Auf dieser Seite kann er anderen Nutzern das mitteilen, was er für mitteilungswürdig hält.

Manche Nutzer betreiben auch eine private Website im Internet. Die Attraktivität einer Website hängt, genauso wie das Profil in einem Netzwerk, von der Qualität der Inhalte ab. Die regelmäßige Pflege beider Seiten kann sehr aufwändig sein und viel Zeit kosten.

Wir wollen drei Möglichkeiten aufzeigen, wie man Inhalte von Social Media Diensten auf der eigenen Homepage einbinden kann. Allerdings empfehlen wir dies nur für versierte Internetuser, die sich mit der Erstellung von Webseiten und der Integration von Scripten gut auskennen.

twitterAuf der eigenen Website zwitschern
Tweets aus dem Microblogging-Dienst Twitter können mithilfe von Javascript an jeder beliebigen Stelle auf der eigenen Website eingebunden werden.
Hierfür benötigen Sie zwei Dateien aus dem Internet. Anschließend stehen Ihnen folgende Funktionen zur Verfügung:

  • Tweets werden schnell geladen und angezeigt
  • Darstellung von bis zu 100 Tweets auf einmal
  • Avatar kann eingeblendet werden
  • Tweets filtern nach Namen
  • Tweets filtern nach Suchbegriffen
  • Form des Tweets wird angezeigt (@ = Mentions)
  • URL’s werden automatisch verlinkt
  • Suchbegriffe mit einer Raute (#) werden automatisch zu der Kategorie verlinkt
  • Darstellung der Tweets mit CSS anpassbar

code

Und so wird es gemacht:

Das Javascript-Framework jQuery kann hier heruntergeladen werden. Diese Datei muss danach auf Ihren Webserver hochgeladen werden.
Die Datei jquery.tweet.js führt die eigentliche Funktion aus. Diese Datei erhalten Sie hier. Hierbei laden Sie ein ZIP-Archiv herunter, es enthält ein Verzeichnis mit mehreren Dateien. Laden Sie anschließend das gesamte Verzeichnis auf Ihren Webserver hoch.

1. Folgendes Script muss in den <head> Tag der HTML-Seite eingefügt werden:

<script language=”javascript” src=”HYPERLINK “http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js” type=”text/javascript”></script>

2. Diese Zeile muss ebenfalls im <head> vorhanden sein:

<script language=”javascript” src=”jquery.tweet.js” type=”text/javascript”></script>

3. Dieser Code muss auch im Bereich Ihrer Seite für Ihre Tweets integriert und angepasst werden. Die englischen auto_join_… Texte können Sie nach Bedarf „eindeutschen“. Testen Sie einfach, welche automatischen Texte für Ihre Seite am besten geeignet sind.

<script type=’text/javascript’>
$(document).ready(function(){
$(“.tweet”).tweet({
username: “eurowebgroup”, // Hier muss Ihr Accountname stehen, sonst werden auf Ihrer Seite die Tweets der eurowebgroup eingeblendet
avatar_size: 32, // die Größe des dargestellten Avatars
count: 3, // Wie viele Tweets sollen dargestellt werden?
join_text: “auto”, // Abstand zwischen Datum und Tweet, hier automatisch
auto_join_text_default: “we said,”, // Automatischer Text
auto_join_text_ed: “we”, // Automatischer Text
auto_join_text_ing: “we were”, // Automatischer Text
auto_join_text_reply: “we replied to”, // Automatischer Text
auto_join_text_url: “we were checking out”, // Automatischer Text
loading_text: “tweets werden geladen…” // Anzeige beim Laden der Tweets
});
});
</script>

3. Diese Zeile muss im <body> Tag der HTML-Seite stehen (hiermit werden die Tweets dargestellt):

<div class=”tweet”></div>

4. Die Stylesheets müssen noch im <head> Tag der HTML-Seite eingebunden werden:

<link href=”jquery.tweet.css” media=”all” rel=”stylesheet” type=”text/css”/>

Und schon sind die Tweets auf Ihrer Homepage!

buttonsLesezeichen mit anderen Nutzern tauschen
Mit Bookmarks kann man besuchte Webadressen speichern und jederzeit wieder abrufen. Wenn mehrere Internetuser Ihre Bookmarks untereinander austauschen, nennt sich dies Social Bookmarking. Um den Austausch von Bookmarks besser zu koordinieren, wurden sogenannte Social-Bookmark-Dienste (z.B. oneview.de oder delicious.com) ins Leben gerufen.
Hier findet ein User Links zu interessanten Websites, Nachrichten, Videos und Blogbeiträgen, die von anderen Usern empfohlen werden. Gerade für Blogbetreiber mit interessanten Texten ist dies sehr wichtig, um neue Leser auf ihre Seite zu lenken.
Um die Weitergabe von Links zur eigenen Site zu vereinfachen, können Betreiber einer Website oder eines Blogs kleine Symbole (Buttons) auf ihren Seiten einbinden. Klickt ein Besucher auf einen Button, wird der Link zur Seite automatisch im Social-Bookmarking-Dienst oder einem sozialen Netzwerk (z.B. Facebook) gespeichert. Der Besucher muss in diesem Dienst auch einen Account besitzen.
Wenn Sie diese Funktion auf Ihrer Homepage oder in Ihrem Blog anbieten wollen, gehen Sie folgendermaßen vor:

1. Besuchen Sie die Website http://www.social-bookmark-script.de. Stellen Sie mit einem Generator die Buttons zusammen, die Sie auf Ihren Seiten anbieten wollen (z.B. Facebook + Mister Wong + Delicious) und passen Sie die Optionen an.
2. Klicken Sie auf der Website auf “Script erstellen”
3. Fügen Sie den ausgegebenen HTML-Code auf Ihren Seiten an den entsprechenden Stellen ein.

Das war’s schon.

flickrFlickr
Einer der erfolgreichsten Web 2.0 Dienste im Internet ist Flickr, gerne auch als Photo Sharing Dienst bezeichnet. Hier können User Bilder einstellen und Bilder von anderen Usern kommentieren. Die Dateien können auch per E-Mail oder Handy auf die Flickr-Plattform hochgeladen werden. Betreiber von Blogs binden gerne Bilder von Flickr auf ihren Seiten ein, um Botschaften oder Thematiken ihrer Texte visuell besser darzustellen.

Das Einbinden von Flickr-Bildern auf der eigenen Homepage ist auch möglich. Die Bilder können u.a. nach Begriffen und Benutzernamen gefiltert werden. Sie müssen dafür einen Flickr-Account besitzen.

Und so geht’s:

1. Loggen Sie sich in Ihrem Flickr-Account ein.
2. Gehen Sie auf die Seite http://www.flickr.com/badge.gne
3. Wählen Sie den HTML-Modus
4. Bestimmen Sie, ob alle Fotos angezeigt werden sollen, oder filtern Sie nach öffentlichen Fotos, Fotos mit bestimmten Begriffen oder Fotos eines bestimmten Albums.
5. Legen Sie dann fest, ob das Account-Bild, zufällige Fotos oder die neuesten Bilder dargestellt werden sollen. Passen Sie die Größe der Bilder an.
6. Anschließend wird ein HTML-Code generiert, den Sie auf Ihrer Seite einbinden müssen.

<!– Start of Flickr Badge –>
<style type=”text/css”>
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id=”flickr_badge_uber_wrapper” cellpadding=”0″ cellspacing=”10″ border=”0″><tr><td><a href=”http://www.flickr.com” id=”flickr_www”>www.<strong style=”color:#3993ff”>flick<span style=”color:#ff1c92″>r</span></strong>.com</a><table cellpadding=”0″ cellspacing=”10″ border=”0″ id=”flickr_badge_wrapper”>
<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=t&layout=v&source=user&user=DEINE FLICKR USER ID HIER“></script>
</table>
</td></tr></table>
<!– End of Flickr Badge –>

WICHTIG: Im Code muss bei “DEINE FLICKR USER ID HIER” die eigene Flickr-ID eingetragen werden!

7. Sie müssen für den Flickr-Badge eine eigene Sytlesheet-Datei anlegen. Kopieren Sie folgenden Code in die CSS-Datei:

#flickrPicContent {width:280px; padding:15px 0 0 0; background:#78B3A8}
#flickrPicContent {padding:0 20px 0 20px; font-size:13px; font-family:Georgia,”Times New Roman”,Times,serif; color:#FFF; font-style:italic}
#flickrPicContent a {color:#4A412C}
#flickrPicContent a:hover {color:#FF564A}
#flickr_badge_wrapper {width:261px; padding:0 19px 0 0; background:#78B3A8; overflow:hidden}
.flickr_badge_image {width: 65px; height: 70px; float: left; background:url(images/Backgrounds/flickrPicBg.jpg) left top no-repeat; padding:5px 0 0 22px; float: left;}
.flickr_badge_image img {width: 60px; height: 50px;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}

Und schon sind die Flickr-Bilder auf Ihrer Seite.
Falls Sie Bilder von Flickr in einem WordPress-Blog einbinden wollen, verwenden Sie das Plugin Flickr Photo Album for WordPress.

Viel Spaß beim Ausprobieren!

Gastautor dieses Beitrags ist Duy Tran, Webdesigner bei der Euroweb Internet GmbH in Düsseldorf, dem Full-Service-Internetdienstleister für Deutschland und Österreich.
Zwitschern mit Duy und der Euroweb Group geht auch.

]]> http://www.designpicks.de/web-2-0-vernetzung-oder-wie-ich-mir-doppelte-arbeit-sparen-kann/feed/ 2 Tutorial-Buch für CSS-Design zu gewinnen http://www.designpicks.de/tutorial-buch-fur-css-design-zu-gewinnen/ http://www.designpicks.de/tutorial-buch-fur-css-design-zu-gewinnen/#comments Wed, 18 Jun 2008 09:15:58 +0000 Designpicks http://www.designpicks.de/tutorial-buch-fur-css-design-zu-gewinnen/ CSS-DesignIm Webstandardblog könnt ihr mit etwas Glück in einer Verlosung ein CSS-Buch mit über 30 Tutorials gewinnen. Voraussetzung ist lediglich das Schreiben eines Kommentares zu dem Themenbereich Webentwicklung / Webdesign. Bei der am 15.07.2008 endenden Aktion können sie dieses Buch gewinnen. Mehr zu den Teilnahmebedingungen gibt es im aktuellen Beitrag des Blogs.

]]> http://www.designpicks.de/tutorial-buch-fur-css-design-zu-gewinnen/feed/ 0 Erstelle deine eigenen Graffiti Kreationen http://www.designpicks.de/erstelle-deine-eigenen-graffiti-kreationen/ http://www.designpicks.de/erstelle-deine-eigenen-graffiti-kreationen/#comments Thu, 29 May 2008 09:00:19 +0000 Designpicks http://www.designpicks.de/erstelle-deine-eigenen-graffiti-kreationen/ Graffiti

Graffitis. Für die einen sind es Schmierereien, für die anderen ist es Kunst. Für bestimmte Designs ist es manchmal notwendig grafische Elemente wie diese zu verwenden. Je nach Ausrichtung und Zielgruppe oder persönlichen Vorlieben der Webseitenbetreiber, können Abbildungen von Graffitis schmückende Elemente in einem Screendesign sein.

Neben der Erstellung eigener Graffitis bspw. via Illustrator, gibt es auch die Möglichkeit den “Graffiti-Creator” zu nutzen. Dieser bietet dem Nutzer die Möglichkeit zwischen 6 verschiedenen Stilrichtungen wählen zu können. Im nächsten Schritt gibt man den gewünschten Text ein, skaliert diesen in Höhe und Breite und lässt ihn ggf. noch etwas rotieren. Dann kann man im nächsten Schritt die einzelnen Bereiche der jeweiligen Buchstaben gestalten. Nach Fertigstellung des Schriftzuges, kann die “Arbeit” dann auch noch ausgedruckt werden.

Schneller und umweltfreundlicher, kann man Graffitis kaum erstellen. Probiert’s mal aus.

]]> http://www.designpicks.de/erstelle-deine-eigenen-graffiti-kreationen/feed/ 0 Indiana Jones Icon-Set for free http://www.designpicks.de/indiana-jones-icon-set-for-free/ http://www.designpicks.de/indiana-jones-icon-set-for-free/#comments Wed, 21 May 2008 06:35:09 +0000 Designpicks http://www.designpicks.de/indiana-jones-icon-set-for-free/ indianajones.jpgPassend zum Start des Kinofilms “Indiana Jones und das Königreich des Kristallschädels”, wirft Iconfactory mehrere Icon-Sets mit dem Thema “Indiana Jones” und den uns allen bekannten Isignien der Filmreihe auf den Markt. Aber auch ein Wallpaper für Widescreen, Fullscreen und das iPhone, mit dem Titel “Indy’s Desk”, liegt bei der Iconfactory zum Download bereit.

]]> http://www.designpicks.de/indiana-jones-icon-set-for-free/feed/ 0 Icons for free http://www.designpicks.de/icons-for-free/ http://www.designpicks.de/icons-for-free/#comments Wed, 14 May 2008 13:52:59 +0000 Designpicks http://www.designpicks.de/icons-for-free/ iconsets.jpg

Auf fasticon.com findet ihr zahlreiche sehenswerte Icons-sets von Dirceu Veiga aus Brasilien, die ihr unter Angabe eines Links für eigene Projekte und Designs benutzen könnt. Jedes Set besteht aus einer individuellen Anzahl an Icons, in verschiedenen Größen.

]]> http://www.designpicks.de/icons-for-free/feed/ 0