Google – Neue Schriftarten für deine Webseite

“Alle aktuellen Browser können Schriftarten per CSS vom Server holen, um die auf dem Rechner vorinstallierte Auswahl von Fonts zu ergänzen und Webdesignern typografische Handlungsfreiheit zu ermöglichen. In der Praxis scheitern diese Webfonts bisher aber oft am technischen Aufwand, an Lizenzfragen und an unterschiedlichen Implementierungen in den Browsern. Die auf der Google-Entwicklerkonferenz Google I/O vorgestellten Google Font API und Google Font Directory könnten dieser Technik endlich zum Durchbruch verhelfen und das Aussehen von Webseiten nachhaltig verändern.” – heise.de


Google Font Directory
Google Font Directory


Google Web Schriftarten sind mit folgenden Browsern kompatibel:

  • Google Chrome: 4.249.4+
  • Mozilla Firefox: 3.5+
  • Apple Safari: 3.1+
  • Microsoft IE: 6+


1.) Und -> hier <- gibt es ein kleines HowTo von Google, welches zeigt, dass man als erstes folgendes (ggf. Rennie Beanie gegen eine andere Schriftart austauchen) im HTML-Quellcode einfügen muss…



href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>


… du kannst diese Fonts/Schriftarten und auch die nachfolgenden Modifizierungen (CSS) mit WordPress auch über ein Plugin (WP Google Fonts) einstellen.


2.) Als nächstes können wir die Schriftart noch per CSS modifizieren …

.PostHeader a:link
{
font-family: 'Reenie Beanie', Arial, Sans-Serif;
font-size: 32px;
text-decoration: none;
text-align: left;
color: #265273;
}


3.) … und dies z.B. folgendermaßen als Überschrift für WordPress in der Datei (single.php) verwenden. Wie das Ergebnis am Ende aussieht, kannst du hier im Blog sehen. ;-)


<span><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1></span>


4.) Wer will kann auch erst eine normale Schrift anzeigen lassen und dann die Google-Fonts per JavaScript laden lassen… -> hier <- gibt es diesbezüglich weitere Infos.


<html>
 <head>
 <script type="text/javascript">
 WebFontConfig = {
 google: { families: [ 'Tangerine', 'Cantarell' ] }
 };
 (function() {
 var wf = document.createElement('script');
 wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
 wf.type = 'text/javascript';
 wf.async = 'true';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wf, s);
 })();
 </script>
 <style type="text/css">
 .wf-loading p {
 font-family: serif
 }
 .wf-inactive p {
 font-family: serif
 }
 .wf-active p {
 font-family: 'Tangerine', serif
 }
 .wf-loading p {
 font-family: serif;
 font-size: 16px
 }
 .wf-inactive h1 {
 font-family: serif;
 font-size: 16px
 }
 .wf-active h1 {
 font-family: 'Cantarell', serif;
 font-size: 16px
 }
 </style>
 </head>
 <body>
 <h1>This is using Cantarell</h1>
 <p>This is using Tangerine!</p>
 </body>
</html>

Das Soziale-Netz und die digitale Zukunft

Die digitale Zukunft und wie man diese schon heute nutzen kann. Ich will in diesem Blog-Post einen Überblick über das Web 2.0 geben und beschreiben wie man sich heute im Digitalen-Netz bewegt und wie man Daten / Informationen austauscht. Was Soziale-Netze im Internet sind, sollte den meisten bekannt sein (Facebook, StudiXYZ, Twitter und Co.) wer mit dem Begriff noch nichts anfangen kann, dem empfehle ich den Film “The Social Network”.




Android + Web 2.0
Android + Web 2.0


Allgemeine Infos: Digitale-Welt

Wenn man den Zahlen einer neuen Studie glauben schenken darf, kann man die deutsche Bevölkerung in folgende Gruppen einteilen.:

  • 28 Prozent – Digitale Außenseiter (Digitale Außenseiter sind meist älter und weiblich)
  • 28 Prozent – Gelegenheitsnutzer (Mehrheit noch nicht im digitalen Alltag angekommen)
  • 07 Prozent – Berufsnutzer
  • 20 Prozent – Trendnutzer (Trendnutzer auf dem digitalen Vormarsch)
  • 17 Prozent – Digitale Profis digitale Avantgarde

Link: http://t3n.de/news/digitale-aussenseiter-deutschland-288027/



Weitere Statistiken zeigen, dass die Internet-User immer regelmäßiger Online sind. Dieser Trend dürfte in den nächsten Jahren noch drastisch steigen, da Smartphones und Tablet-PCs momentan meist von Trendnutzern genutzt werden, in Zukunft jedoch in allen Gruppen ankommen werden…


Internetnutzung im Tagesverlauf 300x216 Das Soziale Netz und die digitale Zukunft allgemein



Internetnutzung im Tagesverlauf


… auch wenn sich signifikante Unterschiede in der Altersstruktur der Netze zeigen – eine wirklich scharfe Abgrenzung gibt es nicht.


bild2.jpg 3efb251d3ebc35a9 300x298 Das Soziale Netz und die digitale Zukunft allgemein



Altersstruktur der Netze


Laut dem Bundesverband Informationswirtschaft, Telekommunikation und neue Medien e.V. (Bitkom) (PDF) waren schon im März 2010, 30 Millionen Deutsche ab 14 Jahren Mitglied in mindestens einem Sozialem-Netz (Online-Community), die Gründe einer Community beizutreten können sich natürlich stark unterscheiden.


Gründer für die Nutzung von Sozialen Netzwerken 300x218 Das Soziale Netz und die digitale Zukunft allgemein



Gründer für die Nutzung von Sozialen-Netzwerken


Fazit: ”Soziale Netze können vieles sein – Nachrichtenmedium, Kontaktbörse, Visitenkarte für Freiberufler, Spielplatz, Teamwork-Plattform und Suchdienst für verlorene Freunde. Mitglieder nutzen ihre Netzwerke, um zu klatschen, um geschäftliche Kontakte zu pflegen oder um Tipps zum Hobby auszutauschen. Dank Facebook und Co. bleiben sie mit dem nach Übersee ausgewanderten Kumpel in Kontakt und verpassen mit ihrer Smartphone-App auch im Urlaub nicht, was im Freundeskreis zu Hause passiert.

Wie im richtigen Leben gilt: Alles kann, nichts muss. Wer aber erst einmal einen persönlichen Strom aus geschäftlichen Nachrichten, Surf-Empfehlungen und privatem Klatsch eingerichtet hat, der kommt schwer davon wieder los. Manchmal hat es etwas von einer Mischung aus Tagesschau und „Gute Zeiten, schlechte Zeiten“ – wobei alle Inhalte aus dem persönlichen sozialen Netz stammen.” – heise.de


Warum ich so genau auch die Sozialen-Netze eingehe dürfte klar werden, wenn man sich anschaut wie viele Nutzer allein Facebook hat.

Facebook-User – Weltweit: ~574.460.480 (http://www.facebook.com/press/info.php?statistics)

Einwohner – Deutschland: ~82.167.000 (http://de.wikipedia.org/wiki/Liste_der_Staaten_der_Erde#Liste)


Spätesten jetzt dürften diese Dienste auch für Unternehmen interessant werden, denn wo gibt es sonst so viele potenzielle Kunden? Genauer will ich gar nicht auf den allgemeinen Teil und den Statistiken eingehen, dazu haben sich schon viele Leute ausgelassen, welche sich besser in der Digitalen-Welt auskennen als ich! Daher komme ich jetzt zum praktischen Einstig in die Digitale-Welt, auf das es in Zukunft weniger “Digitale Außenseiter” gibt.


Praktischer Einstig: Digitale-Welt

Ich habe hier eine Auflistung von bekannten Diensten im Internet zusammengeschrieben, welche man als User im Web 2.0 kennen sollte. Zudem sollte man sich zumindest kurz den Netzjargon anschauen, da man ansonsten ggf. in Chats, Foren und Sozialen-Netzen nicht weiß was jemand von einem will. icon wink Das Soziale Netz und die digitale Zukunft allgemein Daher muss du dich nicht wundern, wenn du bei einer Anfrage in einen Linux-Forum, als Antwort: “RTFM” bekommst („Read the fucking manual“ = „Lies das verdammte Handbuch“)



1.) Twitter

twitter Das Soziale Netz und die digitale Zukunft allgemein



twitter – Logo

“Twitter ist eine Anwendung zum Mikroblogging. Es wird auch als soziales Netzwerk oder ein meist öffentlich einsehbares Tagebuch im Internet definiert. Unternehmen und Pressemedien nutzen Twitter als Plattform zur Verbreitung von Nachrichten. Twitter wurde im März 2006 der Öffentlichkeit vorgestellt und gewann schnell international an Beliebtheit.” – Wiki



Leider kann man Twitter nicht wirklich so einfach definieren, da man einen “Twitter-Moment” miterleben muss, um zu verstehen worum es wirklich geht. Mein “Twitter-Moment” war z.B. als Strato ein größerer Server Ausfall hatte und auch mein V-Server betroffen war, ich hatte anfangs keine Idee was los war und warum ich meinen Server nicht erreichen konnte, dann habe ich kurzerhand bei Twitter nach dem Stichwort “Strato” gesucht und konnte mich mit vielen anderen Betroffenen live unterhalten und Infos austauschen!


Um Twitter einigermaßen Sinnvoll zu nutzen ist es meiner Meinung nach wichtig Listen zu erstellen, in welchen man andere Twitter-User (Nachrichten) nach Kategorien sortieren kann. Nachdem man einigen Usern folgt und auch selber einige Kurznachrichten (je 140 Zeichen) veröffentlicht hat. Kann man weitere User mit ähnlichen Interessen ausfindig machen:

twitter.com/who_to_follow

followfinder.googlelabs.com


Wichtig sind außerdem noch HashTags, dies sind Schlagwörter, welche zudem als Link (Suchwort) fungieren z.B. #NewTwitter. Desweiteren sollte man @replies verwenden, um einem anderen User zu Antworten, auch wenn dies auf Twitter meist nicht der Fall ist.


Es gibt eine Menge anderer Webseiten, welche Teilweise mit einer Twitter-Anbindung (API) arbeiten, um zusätzliche Funktionen anzubieten.

z.B.:

twitpic.com – Bilder hochladen, kommentieren und bei Twitter veröffentlichen

hootsuite.com – Twitter & Facebook Nachrichten besser organisieren

(hier noch eine Liste mit einigen Twitter-Anbindungen: twitter.pbworks.com)

Natürlich sollte man aufpassen, welchen Webseiten / Software man Zugriff auf seinen Account gewährt!


mein Twitter-Account: suckup_de



2.) Facebook

Facebook Das Soziale Netz und die digitale Zukunft allgemein



Facebook – Logo

“Facebook ist eine Website zur Bildung und Unterhaltung sozialer Netzwerke, die der Firma Facebook Inc. mit Sitz im kalifornischen Palo Alto gehört. Größte Anteilseigner sind Mark Zuckerberg (24 Prozent), Chris R. Hughes (12 Prozent), Peter Thiel (7 Prozent), Digital Sky Technologies (6,9 Prozent), Dustin Moskovitz (6 Prozent), Eduardo Saverin (5 Prozent) und Microsoft (1,6 Prozent).” – Wiki


Facebook hat zumindest in Deutschland Konkurrenz durch StudiVZ, MeinVZ, SchuelerVZ etc., wobei facebook meiner Meinung die bessere Qualität (Chat, HipHop-PHP, NoSQL, API, Places, Apps, Fan-Seiten…) bietet, wobei du bei StudiXYZ wahrscheinlich mehr von deinen Freunden und die lustigeren Gruppen-Namen finden dürftest. icon wink Das Soziale Netz und die digitale Zukunft allgemein


Wobei es bei Facekook, StudiXYZ und Co. geht liegt klar auf der Hand. Die einen wollten kontakt mit Freunden, Bekannten, Kommotionen, Mitschüler etc. pflegen andere nutzen diese Dienste als “Kontaktbörse” (siehe “The Social Network“) oder wie ich, um Informationen mit anderen auszutauschen, welche ähnliche Interessen (~> PC, Linux, Internet, Software) haben. icon smile Das Soziale Netz und die digitale Zukunft allgemein Es gibt natürlich auch viel Kritik an diesen Sozialen-Netzen. (z.B.: Datensammler) Du verlierst z.B. alle Rechte an deine Bilder, wenn du dieser bei facebook veröffentlichst, doch auch an dieser Stelle muss ich auf andere Leute mit mehr Ahnung von der Thematik verweisen, denn ich habe (leider) die AGBs nicht gelesen. Mit deinem Facebook-Account kannst du dich nun an vielen Webseiten direkt anmelden (z.B.: www.qype.com/user_login) oder andere Dienste mit deinem Facebook-Account verknüpfen. z.B.: Twitter-Verbindung herstellen apps.facebook.com/twitter & www.facebook.com/twitter oder man kann z.B. auch seine PS3 (Playstation-Network-Account) mit Facebook verbinden, so dass man seinen Freunden automatisch mitteilen, kann wenn man z.B. ein Spiel gewonnen hat. icon smile Das Soziale Netz und die digitale Zukunft allgemein


mein Facebook-Account: Lars-Moelleken



3.) status.net & identi.ca

Identi.ca logo Das Soziale Netz und die digitale Zukunft allgemein



Identi.ca – Lo

“Identi.ca ist ein Mikro-Blogging-Dienst und ein soziales Netzwerk, ähnlich wie Twitter. Identi.ca unterstützt den freien OpenMicroBlogging-Standard und ist die Referenzimplementierung und bedeutendste Plattform für StatusNet.” – Wiki


Identi.ca versucht die Nachrichten durch das anlegen von Gruppen zu organisieren, wobei du hier mehr Linux-User und Blogger findest (aber wahrscheinlich nicht so viele deiner Schulfreunde). Weiter unten in diesem Blog-Post gehe ich noch darauf ein, wie man identi.ca, twiiter und facebook miteinander verbindet, so dass deine Nachrichten automatisch auf den verschieden Webseiten verteilt werden. identi.ca ist nur eine (die größte) von vielen Seiten, welche auf der freien Software “status.net” und somit dem offenes Protokoll “OStatus” aufbaut. Im Grunde kann sich jeder die PHP-Software auf seinem Server installieren und eine eigene Community gründen und diese dann z.B. Twitter und anderen status.net-Seiten verbinden.



mein identi.ca-Account: voku



4.) Flickr

Flickr Das Soziale Netz und die digitale Zukunft allgemein



Flickr – Log

Flickr (von englisch to flick through something, „etwas durchblättern“, also etwa „Vorrichtung zum Durchblättern“ bzw. „Durchblätterer“ oder von englisch to flicker, „flimmern“) ist ein kommerzielles Web-Dienstleistungsportal mit Community-Elementen, das es Benutzern erlaubt, digitale und digitalisierte Bilder sowie Videos mit Kommentaren und Notizen auf die Website zu laden und so anderen Nutzern zur Verfügung zu stellen. Neben dem herkömmlichen Hochladen über die Website können die Bilder auch per E-Mail oder vom Fotohandy aus übertragen und später von anderen Webauftritten aus verlinkt werden.” – Wiki


Ich nutzte Flickr nur um Bilder hochzuladen, welche längere Zeit zur Verfügung stehen sollen, um diese dann z.B. in Blogs, Foren, E-Mails etc. zu verlinken. Man kann den Zugriff auf bestimmte Bilder auch auf bestimmte Gruppen oder User einschränken und natürlich gibt es eine Anbindung an Twitter und Facebook, so dass alle direkt erfahren, wenn du ein neues Bild hochgeladen hast. icon smile Das Soziale Netz und die digitale Zukunft allgemein Wenn du auf “Facebook”, “Twitter” und Co. direkt veröffentlichen möchtest, wenn du ein neues Foto hochgeladen hast, kannst du dies hier tun: www.flickr.com/account?tab=extend


mein flickr-Account: 41342799@N05



5.) last.fm

Last.fm  Das Soziale Netz und die digitale Zukunft allgemein



Last.fm – Logo

“Last.fm ist ein Internetradio auf Basis von sozialer Software, das entwickelt wurde, um Nutzern aufgrund ihrer Hörgewohnheiten neue Musik, Menschen mit ähnlichem Musikgeschmack und Konzerte in ihrer Umgebung empfehlen zu können. Es ist eine ehemalige Schwesterseite von Audioscrobbler, mit dem es sich früher eine Musikdatenbank teilte. Plattenfirmen und Musiker werden ermuntert, Last.fm Lizenzen zum Abspielen ihrer Musik zu erteilen. Last.fm hat derzeit ein Verzeichnis von über 80 Millionen einzelner Stücke und davon sieben Millionen für sein Internetradio zum Streaming sowie 150.000 kostenlose MP3-Downloads vorrätig.

[…]

Hört ein Nutzer von Last.fm einen Musiktitel, so wird dessen Bezeichnung (Titelzeile und Interpret) an Last.fm übertragen und dort im Nutzerprofil gespeichert und anderweitig statistisch ausgewertet. Diesen Übertragungsvorgang bezeichnet Last.fm als „scrobbeln“ (to scrobble).

Last.fm-Streams können im MP3-Format mit 128 kbit/s bei einer Abtastrate von 44,1 kHz abgerufen werden.” – Wiki


Nachdem man auf Last.fm einige Musik-Titel gehört hat bzw. auf anderem Wege einige Titel gescrobbelt hat, (build.last.fm/category/For+your+Desktop – für Linux empfehle ich “Clementine“ als Musik-Player) kann man Leute finden, welche einen ähnlichen Musikgeschmack haben oder auch ähnliche Künstler. Ein weitere Dienst, welche ein ähnliches


Als alternative will ich hier noch kurt www.simfy.de ansprechen, welcher mit Facebook-Anbindung, Last.fm-Anbindung (scrobble) daherkommt.

Nun kannst du für 7 Tage jeden Titel und alle Applikationen nutzen. Nach diesen 7 Tagen kostenloser Premium Mitgliedschaft kannst du auf der Webseite immer noch über 6 Millionen Songs direkt hören. Auch deine Freunde, Playlists und Charts werden natürlich nicht gelöscht.
 
Nicht mehr benutzen kannst du die mobilen Applikationen für Smartphones, iPod touch sowie die Desktop App für PC und Mac. Deswegen raten wir dir simfy jetzt auf Herz und Nieren zu testen. Du trägst kein Risiko. Diese kostenlose Test-Mitgliedschaft endet automatisch.
 
Eine dauerhafte Premium Mitgliedschaft, kannst du hier für nur 9,99 €<em>/Monat unter http://www.simfy.de/premium/</em> freischalten lassen.
simfy – überall einfach Musik hören!


mein last.fm-Account: voku1987


6.) Google (Buzz, Reader, hotpot, friendconnect, mail, latitude, docs)

Google Account-Übersicht: www.google.com/accounts/ManageAccount?hl=de (PS: hier kannst du dich auch direkt Regieren, falls du noch kein Google-Account hast)


6.1) Google Buzz

“Google Buzz ist eine Website der Google Inc. zur Unterhaltung von sozialen Netzwerken im Internet. Sie ist eine Erweiterung des E-Mail-Dienstes Gmail. Die Benutzer können Nachrichten, Bilder, Videos, Statusnachrichten und Kommentare austauschen.” – Wiki


mein Google-Buzz-Account: voku1987


6.2) Google Reader

“Google Reader ist ein webbasierter Feedreader. Der Nutzer hat die Möglichkeit, aus favorisierten Nachrichten verschiedener Quellen einen eigenen Feed für andere Leser zu erzeugen. Bis September 2007 war der Google Reader nur in Englisch verfügbar und befand sich im Testbetrieb in Google Labs.” – Wiki


Mit Google Reader kann man als nur RSS-Feed lesen und verwalten!!! Du kannst anderen Nutzern folgen, so dass du Ihre Empfehlungen lesen kannst, nachdem du einige RSS-Feed abonniert hast, schlägt dir Google Reader weitere RSS-Feed (Webseiten, Blogs…) vor, welche dich ggf. auch interessieren könnten. Zudem gibt


mein Google-Reader-Account: voku1987


6.3) Google Hotpot

Google Hotpot dient als Bewertung von Hotels, Restaurants, Öffentlichen Plätzen etc.. Es gibt natürlich bereits andere Dienste, welche einen ähnlichen Dienst anbieten und da bisher sind noch nicht viele Bewertungen bei Hotpot abgegeben wurden, kann ich momentan z.B. als alternative “www.qype.com/de” (mit Facebook-/ Google-/ Yahoo- … Anbindung) empfehlen.


6.4) Google Friend Connect

Google Friend Connect kann genutzt werden, um ähnlich wie auf Facebook-Seiten, Communities zu gründen. und zu verwalten. Hier noch ein Beispiel, wie man diese Fan-Seiten in seiner Webseite integrieren kann (in der rechte Widget-Leiste) -> suckup.de/about


6.5.) Google Mail

“Gmail (in Deutschland: Google Mail) ist ein kostenloser E-Mail-Dienst des Suchmaschinenbetreibers Google Inc.” – Wiki


Wer bisher seine E-Mail Adresse auf gmx.de, web.de etc. hatte sollte sich als alternative einmal “Google Mail” (Sie nutzen derzeit 75 MB (1 %) von Ihren 7526 MB.) ansehen.


chat callout Das Soziale Netz und die digitale Zukunft allgemein



Google Mail + Chat



6.6) Google Latitude

Zeigt auf der Google-Maps Karte deine bzw. die Position deiner Freunde an. Aus Datenschutztechnischen-Gründen kann man diese Funktion z.B. in dem Android Google-Maps App natürlich ein- und ausschalten. icon wink Das Soziale Netz und die digitale Zukunft allgemein


6.7) Google Docs / Google Text & Tabellen

“Google Text & Tabellen (engl. Google Docs) ist eine von Google Inc. angebotene Webanwendung zur Textverarbeitung, Tabellenkalkulation, Präsentation, Erstellung von Formularen und Erstellen von Zeichnungen. Sie ermöglicht Nutzern, Textdokumente, Tabellen und Präsentationen gemeinsam mit anderen Nutzern in Echtzeit online zu erstellen und zu bearbeiten.” – Wiki


z.B.: https://docs.google.com/document/d/1sNeEIBgIHj-d7SOlpYY0Agi1NAUxfOFMD13qD7tIftg/


— weitere Google Dienst —


Google bietet natürlich noch viele weitere Dienst an, welche ich hier noch nicht erwähnt habe z.B.:

Google Webmster: eigene Webseite analysieren

Google Earth + Google Street View: Satelliten-/Luftbilder/Fotos unterschiedlicher Auflösung mit Geodaten, überlagert + einem digitalen Höhenmodell

Google Feedburner: RSS-Feed neu verpacken z.B. http://feeds.feedburner.com/suckup

Google Kalender: ein sehr guter kostenloser Online-Kalender

…und noch vieles mehr…



7.) gravatar.com

“Bei einem Gravatar handelt es sich um einen global verfügbaren Avatar (Globally Recognized Avatar), welcher mit der E-Mail-Adresse des Benutzers verknüpft ist. Verschiedene Seiten bieten den Nutzern an, Avatare auf ihre Server zu laden und mit ihren E-Mail-Adressen zu verknüpfen. So kann ein Benutzer des Internets in jedem Blog oder anderen System seinen globalen Avatar hinterlassen, ohne sich extra bei jedem Blog zu registrieren und dann ein Bild hochzuladen. Für viele Blogsysteme oder andere Internetangebote gibt es Plug-Ins, die das Einbinden solcher kleiner Bilder, die normalerweise eine Größe von 80×80 Pixeln haben, erleichtern.

Es besteht aber auch Kritik an Gravataren. Durch die Verwendung bei unterschiedlichen Internetaktivitäten ist dem Betreiber des Dienstes die Erstellung eines umfassenden Benutzerprofiles des Benutzers möglich, das der Anbieter beispielsweise für Werbezwecke verwenden kann. Auch Ermittlungsbehörden können dadurch auf einfache Art und Weise umfassenden Einblick in die Aktivitäten des Benutzers gewinnen.” – Wiki


Bei aller Kritik finde ich den Dienst trotzdem ziemlich hilfreich, da man über seine E-Mail Adresse, welche man bei den Webseiten angeben muss, um einen Kommentar zu schreiben, direkt ein Profilbild übergibt, zudem kann man dies relativ einfach in jeder Webseite einbauen kann. -> de.gravatar.com/site/implement




8.) disqus.com

Disqus, wie der Name schon verrät geht es hier um Diskussionen (Kommentare) auf Webseiten, Blogs etc.. Ich setze den Dienst auch in diesem Blog ein, so dass ich bisher so gut wie keinen Spam-Kommentar hatte, jeder einen Kommentar ohne vorherige Registrierung abgeben kann und wer will kann anstatt seine E-Mail etc. anzugeben sich per Facebook, Twitter, Yahoo … authentifizieren. Zudem gibt es eine “Akismet“ Integration und eine Menge weitere Features.




9.) foursquare.com & gowalla.com

Dies sind jeweils zwei Dienste welche auch konkurieren, da beide eine Mischung aus “GPS-Ortung” und dem bereits erwähnten qype.com/de (Bewertung/Empfehlung von Orten und Läden) ist. Dies macht natürlich erst Sinn, wenn man z.B. ein Handy mit Internet-Zugang + GPS hat, so dass man Empfehlungen andere User in seiner Nähe sehen kann oder sich anzeigen lassen kann so seine Freunde gerade sind. (ähnlich dem ebenfalls bereits erwähnten “Google Latitude”) Aber auch bei aller Kritik an solchen Dienst, finde ich es ziemlich hilfreich und informativ, wenn man sich z.B. nicht in Krefeld auskennt und dort einen Friseur sucht:

http://gowalla.com/spots#q=Friseur&l=Krefeld

http://foursquare.com/search?q=friseur&near=Krefeld,+Germany

http://www.qype.com/dea14/search/Friseur?suppress_category_redirect=true



10.) youtube.com


YouTube Das Soziale Netz und die digitale Zukunft allgemein



YouTube – Logo

“Auf der Internetpräsenz befinden sich Film- und Fernsehausschnitte, Musikvideos sowie selbstgedrehte Filme. Sogenannte „Video-Feeds“ können in Blogs gepostet oder auch einfach auf Webseiten über eineProgrammierschnittstelle (API) eingebunden werden. […] Am 9. Oktober 2006 wurde YouTube vom Suchmaschinenbetreiber Google für umgerechnet 1,31 Milliarden Euro (in Aktien) gekauft. Die Marke YouTube soll bestehen bleiben; der Betrieb mit 67 Mitarbeitern – darunter die Gründer Chad Hurley und Steve Chen – wird die Geschäfte vorerst unabhängig weiterführen.” – Wiki


YouTube ist über die Jahre gewachsen und hat einige wirklich sehr sehr gute Video zu bieten z.B. “Volker+Pispers“, “poetry+slam” (Andy Strauß muss man gesehen haben ^^) oder wer etwas Mathe lernen will “WieFunktioniertMathe“ … Wenn du YouTube mit “Google Reader”, “Twitter”, “Buzz” und “Facebook” verbinden möchtest, so dass deine Freunde (Un-/Bekannten) direkt sehen können welches Video dir gefällt, kannst du deine Account hier mir einander Verbinden: www.youtube.com/account?feature=mhum#sharing/activity


An dieser Stelle möchte ich auch noch vimeo.com und myvideo.de erwähnen! icon smile Das Soziale Netz und die digitale Zukunft allgemein


mein YouTube-Account: Voku1987



11.) meebo.com

“meebo ist ein auf libpurple basierender Ajax-Instant Messaging-Client und führt AOL Instant Messenger-, ICQ-, Yahoo! Messenger-, Windows Live Messenger-, XMPP-, MySpaceIM und Google Talk-Konten auf einer Seite im Messengerstil zusammen.” – Wiki


ICQ sollte bekannt sein, (alternative XMPP/Jabber) doch nicht jeder kennt meebo.de, hier kannst du auf einer Webseite z.B. über dein ICQ-Account mit deinen Freunden chatten… an dieser Stelle möchte ich auch noch “www.skype.com” erwähnen, auch wenn das Programm eigentlich den Punkt 12.) verdient hätte. icon smile Das Soziale Netz und die digitale Zukunft allgemein Es handelt sich hier um eine unfreie Software zur Internet-Telefonie. Mit Skype ist es möglich, mit den Kontakten zu chatten, ihnen Dateien zu senden, zu telefonieren und auch Videotelefonate zu führen. Alle Daten werden bei Skype verschlüsselt übertragen. Weitere Dienste (z.B. Anrufe in oder aus dem Festnetz oder das Verschicken von SMS) sind kostenpflichtig. Die Grunddienste sind jedoch kostenlos und bedürfen lediglich einer Registrierung. (Quelle: wiki.ubuntuusers.de/skype)


meebo 300x161 Das Soziale Netz und die digitale Zukunft allgemein



meebo



12.) mister-wong.de & digg.com & t3n.de/socialnews/ & webnews.de

Verweise auf Neuigkeiten (Blog-Einträge, Pressemitteilungen oder Nachrichten). Es gibt mittlerweile Unmengen an Nachrichten im Internet, einige sind weniger andere von größerer Bedeutung. Diesen Blog-Post den du gerade list, werde ich auch auf einiger der genannten Webseiten veröffentlichen und andere User können diesen dann Bewerten/Kommentieren und ggf. weiterempfehlen, so dass die User entscheiden was wichtig ist. Nachdem man sich ein wenig mit dem Thema auseinandergesetzt hat, stellt man jedoch schnell fest, dass kleine Webseiten, wie diese hier eine ist nicht viel Zuspruch erhalten. Da ich z.B. meistens nicht schreibt, was die Mehrheit lesen will: Linux. Ubuntu, C-Programmierung… gibt es für solche Webseiten andere Methoden, Informationen zu verbreiten, aber dazu kommen ich im nächsten Punkt (13.).



13.) RSS-Feed – Planet (z.B.: planet.ubuntuusers.de & planet.debianforum.de & planetsuse.org)

Im Grunde kann jeder mit der folgenden Software einen Planet auf seiner Webseite eröffnen. -> http://www.planetplanet.org/ <- Es geht darum RSS-Feeds zu einem bestimmten Thema zusammen zu fassen und somit eine Zusammenstellung aus mehreren Blogs etc. zu einem Themengebiet zu erhalten. Somit landen meine “Ubuntu-Themen” automatisch auf dem “ubuntuusers.de – planet” und Themen zu Debian werden auf dem “debianforum.de – planet” veröffentlicht.



14.) Wikipedia und Co.

Die meisten kennen die Webseite Wikipedia.org, doch wissen nicht, dass man sich die Software worauf diese Webseite basiert auch einfach installieren kann, um z.B. ein privates-Wiki oder ein Firmen-Wiki zu erstellen. Eine Webseite, wo Leute zusammen an einem Dokument arbeiten können und man die Veränderungen an dem Dokument stets nachvollziehen und ggf. Rückgängig machen kann. Wiki-Software-Beispiele:

www.mediawiki.org

www.dokuwiki.org


Wer sich über ein spezielles Thema informieren will, sollte sich einmal auf den verschiedenen Wiki-Seiten umsehen, welche es bereits gibt, hier ein paar Beispiele:

ArchLinux – Wiki

ubuntuusers.de – wiki



15.) slideshare.net

Auf der Seite www.slideshare.net kann man seine Präsentationen und Dokumente mit anderen teilen, aufgebaut ist das System ähnlich wie YouTube mit dem Unterschied, dass man direkt Präsentationen (.ppt .pdf) hochladen kann.


An dieser Stelle möchte ich auch noch prezi.com erwähnen, da man hier sehr ansprechende Präsentationen erstellen kann. Hier direkt eine sehr gute Präsentation zu diesem Thema.




WordPress Editor TinyMCE optimieren

In diesem Blog-Post beschreibe ich, wie du den Editor von WordPress verbessern kannst und somit auch deine Beiträge interessanter & übersichtlicher gestalten kannst.

 

1.) TinyMCE Advanced

Als erstes installieren wir “TinyMCE Advanced“, dieses Plugin erweitert den Funktionsumfang des WordPress-Editors.

  • Advanced hr
  • Advanced Image
  • Advanced Link
  • Kontextmenü
  • Emotionen (Smilies)
  • Datum und Uhrzeit
  • IESpell
  • Layer
  • Nonbreaking
  • Drucken
  • “Suchen und Ersetzen”
  • Tabellen
  • Visual Charaktere
  • XHTML Extras
  • […]

Diese Funktionen kannst du nun per “drag and drop” in der TinyMCE-Symbolleisten organisieren, indem du im Admin-Bereich unter “Einstellungen” -> “TinyMCE Advanced” folgende Optionen findest.

Des-weitern hat das Organisieren der Symbole noch den Vorteil, dass man den Editor auch auf kleinen Auslösungen (z.B. mit Netbook) verwenden kann, dazu wird passend zu deiner Auflösung angezeigt, wie viele Symbole du in einer Zeile einstellen kannst. (alternativ kann man auch im “Vollbildschirmmodus” einen Blog-Post erstellen)


TinyMCE Advanced - Optionen
TinyMCE Advanced - Optionen - 1


TinyMCE Advanced - Optionen - 2
TinyMCE Advanced - Optionen - 2




 

 

 

 

 

 

Im linken Bild siehst du, was ich zuvor beschrieben habe (Optionen – 1), unter diesen Optionen findet man auch noch das rechte Bild (Optionen – 2). Dort kannst du “Advanced Image”, “Advanced Link” und das “Kontextmenü” aktivieren, außerdem kannst du eigene CSS-Klassen (Styles) erstellen, welche dann im Editor verwendet werden können. Zu guter letzt kann man dem Editor noch beibringen “p-” / “br”-Tags nicht einfach zu entfernen. ;-)

 

2.) Special Text Boxes

Als nächstes installieren wir “Special Text Boxes“, mit diesem Plugin können wir nun schöne “Warnungen”, “Hinweise” etc. in unseren Blog-Posts einfügen.

 

3.) WP-Syntax & WP-Syntax Button

Als nächstes installieren wir diese beiden Plugin (WP-Syntax & WP-Syntax Button), so dass wir Quelltexte besser darstellen können.

Tipp: Wenn du Probleme beim Einfügen von Quelltexten hast, da WordPress den ganze Code zusammenfasst und die Einrückungen dann weg sind, wechsel einfach in den HTML-Modus und füge dort den Quelltext ein und verwende dort den Button “pre (WP-Syntax)”, um das highliting zu aktivieren.


WP-Syntax
WP-Syntax


Beispiele:

 

 

 

 

 

 

 










Wenn jemand noch weitere hilfreiche Tipps & Tricks zum Thema “WordPress Editor” kennt, würde ich diese gerne hören…

Nginx + WordPress

Ich habe bereits in einem vorherigem Blog-Post erklärt, wie du “Nginx” (Webserver) unter Debian und / oder Ubuntu installierst. Heute zeige ich mit einigen Beispielen, wie du Nginx konfigurierst, diese Einstellungen werden in dem entsprechendem “Virtual Host” (/etc/nginx/sites-enabled/*.conf) durchgeführt.

## Slash am Ende anfuegen
if ($request_uri ~* "^[\w\-\/]+[^\/?]$") {
    rewrite ^(.*)$ $scheme://$host$1/ permanent;
}
## entferne doppel-slashes //
if ($request_uri ~* "\/\/") {
    rewrite ^/(.*) $scheme://$host/$1 permanent;
}
## www eifuegen
if ($host !~* ^(www|subdomain)) {
    rewrite ^/(.*)$ $scheme://www.$host/$1 permanent;
}
## www vorne entfernen
if ($host ~* ^www\.(.*)) {
    set $host_without_www $1;
    rewrite ^(.*)$ http://$host_without_www$1 permanent;
}
## immer SSL verwenden
    rewrite ^(.*) https://$server_name$1 permanent;
## immer HTTP verwenden
    rewrite ^(.*) http://$server_name$1 permanent;
## WordPress3
if (!-e $request_filename) {
    rewrite ^(.+)$ /index.php?q=$1 last;
    break;
}
## WordPress3 MU
if (!-e $request_filename) {
    rewrite ^.+/?(/wp-.*) $1 last;
    rewrite ^.+/?(/.*\.php)$ $1 last;
    rewrite ^(.+)$ /index.php?q=$1 last;
    break;
}
## WordPress3 Multi-Domain
rewrite ^.*/files/(.*)$ /wp-includes/ms-files.php?file=$1 last;
if (!-e $request_filename) {
    rewrite ^.+/?(/ms-.*) $1 last;
    rewrite ^/files/(.+) /wp-includes/ms-files.php?file=$1 last;
    rewrite ^.+/?(/wp-.*) $1 last;
    rewrite ^.+/?(/.*.php)$ $1 last;
    rewrite ^(.+)$ /index.php?q=$1 last;
    break;
}
location ~* ^.+.(htm|html|jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|rtf|js)$ {
    access_log off;
    expires max;
    root /var/www/www.domain.de/web/;
    rewrite ^/.(/wp-.*/.*.(html|jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|rtf|js))$ $1 last;
    rewrite ^.*/files/(.*(html|jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|rtf|js))$ /wp-includes/ms-files.php?file=$1 last;
    if (!-e $request_filename) {
        rewrite ^.+/?(/wp-.*) $1 last;
        rewrite ^.+/?(/.*.php)$ $1 last;
        rewrite ^(.+)$ /index.php?q=$1 last;
        access_log off;
        expires max;
        break;
    }
}
## WordPress-Forum
if (!-e $request_filename) {
    rewrite ^/forums/topic/(.*)$ /forums/topic.php?q=$1 last;
    rewrite ^/forums/forum/(.*)$ /forums/forum.php?q=$1 last;
    rewrite ^/forums/profile/(.*)$ /forums/profile.php?q=$1 last;
    rewrite ^/forums/view/(.*)$ /forums/view.php?q=$1 last;
    rewrite ^/forums/tags/(.*)$ /forums/tags.php?q=$1 last;
    rewrite ^/forums/rss/(.*)$ /forums/rss.php?q=$1 last;
    rewrite ^/forums/bb-admin/ /forums/bb-admin/index.php last;
    rewrite ^/forums/ /forums/index.php last;
    break;
}
## Feedburner
if ($http_user_agent !~ FeedBurner) {
    rewrite ^/comment/feed/?$ http://feeds.feedburner.com/domain last;
    rewrite ^/feed/?$ http://feeds.feedburner.com/domain last;
}
## WordPress W3 Total Cache
set $totalcache_file '';
set $totalcache_uri $request_uri;
if ($request_method = POST) {
    set $totalcache_uri '';
}
if ($query_string) {
    set $totalcache_uri '';
}
if ($http_cookie ~* "comment_author_|wordpress|wp-postpass_" ) {
    set $totalcache_uri '';
}
if ($totalcache_uri ~ ^(.+)$) {
    set $totalcache_file /wp-content/w3tc-$http_host/pgcache/$1/_default_.html;
}
if (-f $document_root$totalcache_file) {
    rewrite ^(.*)$ $totalcache_file break;
}

ggf. kann man auch gzip-Dateien ausgeben lassen: set $totalcache_file /wp-content/w3tc$http_host/pgcache/$1/_default_.html.gzip;

## WordPress SuperCache
set $supercache_file '';
set $supercache_uri $request_uri;
if ($request_method = POST) {
    set $supercache_uri '';
}
if ($query_string) {
    set $supercache_uri '';
}
if ($http_cookie ~* "comment_author_|wordpress|wp-postpass_" ) {
    set $supercache_uri '';
}
if ($supercache_uri ~ ^(.+)$) {
    set $supercache_file /wp-content/cache/supercache/$http_host/$1index.html;
}
if (-f $document_root$supercache_file) {
    rewrite ^(.*)$ $supercache_file break;
}
if (!-e $request_filename) {
    rewrite . /index.php last;
}
location ~* ^.+.(htm|html|jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|rtf|js)$ {
    access_log off;
    expires max;
    root /var/www/www.domain.de/web/;
}
## .htaccess & .htpassword sperren
location ~ /\.ht {
    deny  all;
}


Weitere Infos findest du im Wiki von nginx: wiki.nginx.org/Wordpress

Webseiten beschleunigen – Übersicht

Der Artikel beschreibt, wie man seine Webseite bzw. seinen Server analysiert und optimiert um Performance zu gewinnen, Ladezeit zu reduzierten bzw. Traffic einzusparen. Man kann einiges an Performance gewinnen, indem man z.B. Bilder im richtigen Format abspeichert bzw. komprimiert, CSS- / JS-Dateien kombiniert und ebenfalls komprimiert oder auch bestimmt Daten vorkomprimiert zur Verfügung stellt.

1.) Webseiten Analyse
1.1) Webseiten Benchmark

2.) Komprimierung
2.1) Bilder komprimieren
2.1.1) Bilder Sprites
2.1.2) PNG-Bilder komprimieren
2.1.3) JPEG-Bilder komprimieren
2.1.4) Bilder komprimieren – Online
2.2) JavaScript/CSS komprimieren
2.2.1) JavaScript/CSS komprimieren – serverseitig
2.2.2) JavaScript/CSS komprimieren – Online
2.3) Apache gzip-Kompression
2.3.1) Aktiviere mod_deflate (gzip) – serverseitig
2.3.2) Aktiviere mod_gzip – serverseitig
2.3.3) Aktiviere gzip – manuell

3.) JavaScript richtig im HTML-Code platzieren

4.) Browser-Cache nutzen
4.1) Browser-Cache manuell einstellen
4.2) Browser-Cache serverseitig einstellen

5.) Webserver beschleunigen
5.1) Apache-Module deaktivieren
5.2) Reverse Proxy (Nginx)
5.3) Nginx als Webserver
5.4) Nginx mit Varnish (Proxy)

6.) PHP optimieren/caching
6.1) PHP-Daten zwischenspeichern
6.2) SQL-Abfrage mittels PHP zwischenspeichern
6.3) PHP-Module deaktivieren
6.4) php.ini (Konfiguration) optimieren

7.) MySQL optimieren
7.1) MariaDB (MySQL-Fork)


Zusammenfassung

Abschließend möchte ich diesen Thema noch einmal kurz zusammenfassen, so dass man ggf. selber weitere Möglichkeiten erkennt, die Ladegeschwindigkeit seiner Webseite zu verbessern, jedoch nicht auf die Technische Umsetzung eingehen.

Kenne deinen Feind !!!

80 bis 90% der schlechten Performance liegt an der Webseite selber und nicht auf der Serverseite, solange nur wenig Besucher auf deiner Webseite sind, braucht man sich eigentlich um einen Revere-Proxy oder eine alternative zu Apache keine oder zumindest nur wenig Gedanken machen, da die Performance erst mit steigender Besucherzahl einbricht. Jedoch sollte man in jedem Fall die gzip-Komprimierung und den Browser-Cache nutzen.

Externe Dateien (Bilder, JS, CSS, Videos…)

Jeder Aufruf einer Datei kostet Performance und Bandbreite, daher sollte man im allgemeinen weniger Requests produzieren, indem man z.B. JS- bzw. CSS-Dateien kombiniert. Dieser negative Einwirkung steigt dramatisch bei externen Dateien von andern Servern und besonders dann, wenn dieser gerade mal nicht erreichbar ist.

Scripte

Immer wenn eine Browser eine Webseite abruft und im HTML-Code ein Script finde, wird das weitere laden der Webseite eingestellt und erst-einmal die JavaScript Engine damit beansprucht, diesen zu interpretieren. Daher sollte man diese Dateien erst am Ende der Webseite laden lassen, so dass der User die Webseite früher sehen kann, auch wenn z.B. die Animation des Menüs erst nach nachgeladen werden muss. Mit diesem Ansatz, erscheint es nur Sinnvoll CSS-Daten am Anfang laden zu lassen, so dass sich die Webseite dem User direkt im korrektem Layout präsentiert.

Bilder

Ein weites großer Bereich sind Bilder, dabei muss man jedoch ein gutes Mittelmaß an Text und Bildern finden, da die User zwar Bilder immer schön finden.. Logo, Hintergrundbild u.s.w. jedoch macht es nur wenig Sinn seine selbst jeder kleine Datei zu optimieren, wenn man oben über der Webseite ein 300 KB großes Bild eingefügt hat. Wie bereit im Artikel beschrieben gibt es jedoch zahlreiche Methoden (PNG- und JPEG-Dateien) diese zu optimieren.

Yahoo hat zudem eine sehr umfassende Liste von weiteren Regeln zusammengestellt, welche man beachten sollte.

neues Kommentarsystem für meinen Blog – disqus

Wer die Kommentar auf seiner Webseite selber verwaltet, wird schnell merken, dass nicht alle Kommentare auf deiner eigenen Webseite ablaufen (z.B. Twitter, FriendFeed, Digg oder YouTube) zudem muss man sich meistens auf Webseiten registrieren und seine E-Mail Adresse validieren und dennoch muss man dafür sorgen, dass die Kommentar nichts böswilliges oder illegales enthalten. Für alle diese Probleme gibt es eine Lösung: disqus

Verbinde deine Gespräche:

disqus nutzt folgende Dienst um Aktivitäten auf z.B. Twitter, FriendFeed, Digg oder YouTube wieder mit Ihrem Kommentarsystem zu vernetzen. Somit kann man mit uberVU und BackType Kommentare in sozialen-Netzen wiederfinden.

disqus - Bild 1
disqus - Bild 3

Kommentare können schnell geschrieben werden:

Es gibt Millionen Leute die bereits bei Facebook Twitter oder OpenID registriert sind, daher macht es nur Sinn, diese Accounts zum posten von Kommentaren zu nutzen, da die Echtheit der Personen somit sichergestellt ist und andererseits du dein Soziales-Netz weiter ausbauen kannst.

disqus - Bild 2
disqus - Bild 2

Erlebe Echtzeit-Diskussionen:

Echtzeit-Geschwätze werden dadurch möglich, dass die neuen Beiträge sofort aktualisiert werden. Mit umfangreichen interaktiven Features wie sofort Antwort auf einen Beitrag oder Kommentaren zu Antworten.

Moderiere alle Kommentare über das Web-Panel:

Das Moderation-Web-Panel wurde dafür konzipiert, sowohl auf kleinen Blogs als auch auf großen Community-Webseiten zu laufen. Funktionen wie Multi-Site-Moderation, mehrere Moderatoren und vieles mehr ist standardmäßig enthalten.

disqus - Bild 3
disqus - Bild 3

WordPress-Plugin:

wordpress.org/extend/plugins/disqus-comment-system/

Alternative:
intensedebate.comwordpress.org/extend/plugins/intensedebate/

SmarterFox – für deine Webseite

SmarterFox – was das ist, kann man am besten erklären, wenn man es einfach ausprobiert… markiere einfach mit der Maus irgendeine Textpassage auf dieser Webseite.

Man kann die markierte Textpassage…

… anderen per Twitter mitteilen.

… bei Google suchen.

… und bei Wikipedia recherchieren.

… ….

Um diese Funkton in WordPress zu integrieren, gehst du folgendermaßen vor.

1) Gehe zur “Widgets” Seite im Admin-Bereich
2) Füge ein “Text” Widget hinzu
3) Und füge folgenden Inhalt in das leere Feld ein

<script type="text/javascript">var finderfoxConfig = {
version: "1.0.0",
key: "11e1d48022ddf425000001224c6e099a"
};
document.write(unescape('%3Cscript type="text/javascript" src="'+
('https:'==document.location.protocol?'https://ssl.':'http://')+
'finderfox.smarterfox.com/finderfox.js"%3E%3C/script%3E'));
</script>

Link:

smarterfox.com/widget