Archiv des Autors Allan

Relaunch online: ekokosmetika.ru jetzt im Responsive Design

ekokosmetika

Desktop-Version

Bei diesem Projekt handelt es sich um ein werbefinanziertes Informationsportal zu Naturkosmetik für den russischen Markt mit Newsletter-Versand.

Die erste Version wurde von mir bereits 2009 erstellt. Es war also Zeit für eine Überarbeitung und Optimierung der Website. Vor allem die mobile Lösung mittels einer extra Website war bis dahin eher suboptimal. Dies sollte nun mit einem responsiven Design umgesetzt werden.

Die moderne Kacheloptik auf der Startseite, welche an Windows 8 erinnert, war für das Responsive Design allerdings eine Herausforderung. Um letztendlich für jede Auflösung die Kacheln beizubehalten, wurden insgesamt sechs feste Layouts erstellt.

ekokosmetika_mobil

mobile Version

Für eine bessere Navigation mit mobilen Endgeräten wird bei kleineren Layouts aus dem Hauptmenü ein Select-Feld.

Das Highlight der Website ist eine INCI-Suche. Hier kann nach Inhaltsstoffen in Kosmetikprodukten gesucht werden. Diese sind dann unabhängig bewertet und kommentiert. Über eine Merkliste können mehrere Incis gesammelt und anschließend als Liste gedruckt werden.

Als Werbebanner kommt der klassische Fullsize-Banner mit 486×60 Pixel zum Einsatz, sowie drei Square-Buttons mit je 125 Pixel. Die Größe dieser Buttons ergaben sich aus der Kachelgröße auf der Startseite und konnten so optimal integriert werden. Die Verwaltung der Werbebanner wurde von mir selbst programmiert, da fertige Module zu komplex in der Bedienung waren.

Das vor dem Relaunch verwendete CMS Joomla erwies sich bis dahin als zu unflexibel und nur schwer skalierbar. Auch durch die ständig neuen Sicherheitslücken entschied man sich letzendlich für ein neues CMS-System.

Die Wahl fiel auf das CMS Drupal. Vor allem solchen Anwendungen wie die INCI-Suche oder die Banner-Verwaltung sind mit diesem CMS relativ einfach umzusetzen. Daher sehen viele PHP-Entwickler Drupal auch als Framework.

Auch der Umgang mit mehreren Sprachen ist für mich bei Drupal optimal gelöst. Zwar ist die Ausgabesprache nur russisch, aber der Seitenbetreiber hat die Möglichkeit die Verwaltung in deutsch anzeigen zu lassen und kann vom System generierte Wörter und ganze Sätze selbst übersetzen.

Für den Newsletterversand wurde eine extra Anwendung installiert. Zum Einsatz kam hier der SuperWebMailer. Vor allem die Behandlung der Mail-Rückläufer (Bounces) ist hier sehr bequem. So werden falsche Adressen automatisch gelöscht und ein weiterer Versand unterbunden.

Projekt-Website: www.ekokosmetika.ru



blindwerk.de – der Partner für anspruchsvolle TYPO3-Websites

Logo TYPO3TYPO3 ist ein Content Management System (CMS) für die Entwicklung der unterschiedlichsten Webprojekte. Veröffentlicht als Open Source Projekt, ist TYPO3 frei verfügbar und kostenlos. Es basiert auf der Programmiersprache PHP und setzt bei der Datenbank vorrangig auf MySQL. Es können aber auch MariaDB, PostgreSQL oder Oracle verwendet werden.

Ein entscheidendes Merkmal ist der große Funktionsumfang und die Skalierbarkeit des Systems. Dies macht TYPO3 zu einem äußerst flexiblen CMS für nahezu alle Bereiche in der Webentwicklung. Zudem können mit den sogenannten Extensions beliebig viele weitere Funktionen hinzugefügt werden. Eigene Erweiterungen können problemlos selbst programmiert werden.

Ein standardkonformer Quellcode für barrierefreie Websites und schon integrierte Lösungen zur Suchmaschinenoptimierung (SEO) sind weitere Vorteile.

Das System ist multilingual, womit auch mehrsprachige Websites kein Problem sind. Im Gegensatz zu anderen Systemen, arbeitet TYPO3 aber nicht mit unübersichtlichen Sprachverzeichnissen. Die Übersetzungen aller Texte, inklusive des Menüeintrags, werden direkt in der Originalseite erstellt.

Durch die individuelle Vergabe von Zugriffsrechten für unterschiedlicher Benutzer, eignet sich TYPO3 vor allem auch für große News- und Portalseiten, an denen mehrere Personen mitwirken. Daher setzen auch große internationale Konzerne gerne auf das TYPO3 CMS.

TYPO3 bietet zahlreiche Möglichkeiten zur Anbindung an vorhandene Systeme und auch die Verwendung im Intranet ist durchaus möglich. Dadurch ist TYPO3 vor allem beim Einsatz in komplexen Geschäftsprozessen ein kostengünstige Lösung.

Seit seiner Einführung im Jahr 1998 ist TYPO3 zu einem der am meisten eingesetzten CMS-Systeme weltweit geworden. Durch die Beliebtheit und die hohe Akzeptanz im Web, bieten mittlerweile viele Provider spezielle TYPO3-Hostings oder One-Click-Installationen an. Zudem haben sich zahlreiche Agenturen auf die Open Source Lösung spezialisiert. Eine davon ist die Agentur blindwerk.de.

blindwerk---neue-medienAls TYPO3 Agentur setzt blindwerk.de schon seit vielen Jahren auf das Open Source CMS. Zusätzlich ist die Agentur auch als “TYPO3 Gold Member” gelistet und Mitglied in der TYPO3 Association. Dadurch trägt blindwerk.de maßgeblich zur Weiterentwicklung des Systems bei. Dies alles spricht für höchsten Qualitätsanspruch bei der Entwicklung eines TYPO3-Projekts.

Zur Website blindwerk – neuen Medien.



Geld verdienen mit Backlinkseller

Geschrieben von am 15. März 2013 | 6 Kommentare »

Backlinks verkaufen mit BacklinksellerWie am Namen schon zu erkennen ist, handelt es sich bei Backlinkseller um einen Anbieter zum Verkaufen und Kaufen von Backlinks. Hier möchte ich nun meine Erfahrungen mit diesem Anbieter schildern und Backlinkseller näher vorstellen.

Warum sind Backlinks notwendig?

Für Google sind Backlinks ein wichtiges Kriterium beim Bewerten einer Website. Einfach formuliert bedeuten viele Backlinks für Google, dass so eine Seite sehr beliebt ist und vergibt dadurch ein besseres Ranking.

Daher besteht schon seit längerer Zeit ein großer Markt um solche Backlinks für die eigene Website zu kaufen um das Ranking zu verbessern. Doch dazu sind natürlich Internetseiten notwendig, welche diese Backlinks auch anbieten. So kann man auf einfache Art mit seiner eigenen Website auch Geld verdienen.

backlinkseller registrierungDie Registrierung bei Backlinkseller

Bei der Registrierung werden die üblichen Daten verlangt. Zuerst wird ein Benutzername, die E-Mail-Adresse und das Passwort eingegeben. Danach sind dann die persönlichen Daten dran. Gewerbliche Nutzer können auch ein Firmennamen und eine Umsatzsteuer-ID angegeben. So werden später die Umsätze mit der Umsatzsteuer ausgezahlt.

Dann nur noch die AGB bestätigen und auf “Registrieren” klicken. Anschließend erhält man noch eine E-Mail um die Registrierung abzuschließen. Danach ist der Service von Backlinkseller sofort nutzbar.

backlinkseller-website-anmeldenWebseiten anmelden

Um Backlinks zu Verkaufen müssen natürlich erst die Websites bei Backlinkseller angelegt werden.

Dies ist aber genau so einfach wie die Registrierung. Verlangt wird nur die URL der Website, die Anzahl der möglichen Backlinks pro Unterseite und eine Auswahl von Themen, welche später als Backlinks zugelassen werden sollen. Hier ein kleiner Tipp: Einfach zuerst alle Themen auswählen und dann die nicht benötigten wieder löschen. So geht es deutlich schneller.

Ist die Website angelegt, wird sie zuerst von Backlinkseller auf Einhaltung bestimmter Richtlinien geprüft. Hier kurz die wichtigsten Kriterien:

  • Erlaubt sind nur Seiten mit deutschsprachigem Inhalt
  • Die Website muss mindestens 6 Monate alt sein
  • Die Startseite muss einen PageRank haben
  • Die Seite muss auf einer eigenen Domain liegen (z.B.: www.meineWebsite.de)
  • Ein Impressum muss vorhanden sein

So eine Überprüfung kann aber schonmal einige Tage dauern. Hier ist Geduld gefragt.

backlinkseller-website-codeWar die Prüfung erfolgreich muss noch eine kleiner PHP-Code in den Quelltext der Seite eingefügt werden. In den meisten Fällen kommt bei der Umsetzung einer Website ein CMS zum Einsatz. Hier wird der Code dann im Template oder Theme an die entsprechende Stelle gesetzt, an deren später die Backlinks angezeigt werden. Für CMS-Systeme wie WordPress, Drupal oder Joomla gibt es auch gute Anleitungen für das Einbinden des Codes.

Zusätzlich kann der Code auf einen Testmodus eingestellt werden, um die fehlerfreie Ausgabe auf der Website zu überprüfen.

Zu beachten ist auch die Position des Codes im Quelltext. Je weiter oben die Textlinks erscheinen, je höher wird später der erreichbare Preis beim Verkaufen der Backlinks.

Geld verdienen

Ist der PHP-Code einmal erfolgreich eingebunden, geschieht alles weitere von ganz alleine. Zuerst werden die einzelnen Unterseiten von Backlinkseller indexiert und in das Angebot für den Verkauf von Backlinks aufgenommen. Danach kann der Verkauf beginnen – und alles geschieht völlig automatisch. Doch bis die ersten Buchungen erscheinen, können schonmal mehrere Wochen ins Land gehen. So war es auf jeden Fall bei mir. Allerdings bleiben einmal gebuchte Backlinks in der Regel auch über einen längeren Zeitraum bestehen.

Abgerechnet wird mit einem Punktesystem. Dabei haben 1.000 Punkte einen Gegenwert von 1 EUR. Ausgezahlt wird ab 20.000 Punkte, also 20 EUR. Eine Auszahlung ist auf ein Bankkonto oder per PayPal möglich. In der Regel wird innerhalb von wenigen Tagen bezahlt. Hier ist Backlinkseller vorbildlich.

Geld verdienen mit BacklinksellerWieviel Geld kann man verdienen?

Vorweg muss ich gleich sagen, dass man mit diesem Backlink-Verkauf nicht gleich zum Millionär wird. Es dient eher als eine zusätzliche Möglichkeit um Einnahmen auf der eigenen Website zu generieren. Die Höhe der Einnahmen sind abhängig vom PageRank, von der Position der Backlinks, der Anzahl der Websites und deren Unterseiten. Hier sind allerdings die Erfahrungen sehr unterschiedlich.

Ich selbst habe zur Zeit drei Seiten im Angebot. In einem guten Monat sind das ca. 40 EUR. Doch dafür muss ich nichts tun, denn die Seite sind ja sowieso im Internet. Und da sehe ich auch den entscheidenden Vorteil beim Verkaufen von Backlinks: Bestehende Seiten generieren von ganz alleine stetige Einnahmen ohne etwas dafür zu tun.

Google und die Backlinks

Hier sei deutlich gesagt, dass Google das Kaufen von Backlinks nicht gerne sieht und dies auch in seinen Richtlinien untersagt. Daher kann ein massiver Einsatz von gekauften Backlins zu einer Abstrafung von Google führen. Doch wenn man sich den Markt zum Kaufen und Verkaufen von Backlinks anschaut, ist deren Einsatz eher die Regel als die Ausnahme. Allerdings ändert dies natürlich nichts an der Meinung von Google. Daher ist der Einsatz von gekauften Backlinks mit Vorsicht zu genießen.

Beim Verkaufen von Backlinks ist dagegen darauf zu achten, dass diese nicht als solche bezeichnet werden. Denn auch die Webseiten welche solche Links anbieten stehen nicht in der Gunst von Google.

Zur Website von Backlinkseller



Links zum Teilen für Facebook, Twitter & Google+ ohne WP-Plugin

Wer einen Blog betreibt, will natürlich auch, dass seine Artikel bekannt werden. Neben der Verlinkung von anderen Websites, sind die Empfehlungen auf den Social Networks mittlerweile Pflicht und auch sehr wirkungsvoll.

Die modernen Themes von WordPress haben hierzu die entsprechenden Links zu Facebook und Co. schon integriert. Zu finden sind diese meist direkt unter dem Artikel.

Zum Nachrüsten existieren aber auch eine Menge Plugins. Aber man sollte auch wissen, dass mit jedem weiteren Plugin der Code der Website aufgebläht wird. Um dies in diesem Fall zu vermeiden, können diese Links auch direkt im Template eingebunden werden. In der Regel wird dies die single.php sein.

Folgend die entsprechenden Code-Schnipsel für Facebook, Twitter und Google+:

 

Facebook

Für den Link zu Facebook werden URL und TITLE übergeben:
facebook.com/sharer.php?u={URL}&t={TITLE}

Um einen Textlink einzubinden verwende folgenden Code …

<a href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo urlencode(get_the_title()); ?>" target="_blank">auf Facebook teilen</a>

für den Aufruf in einem Popup …

<a href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo urlencode(get_the_title()); ?>" onclick="javascript:window.open(this.href, '', 'width=700,height=300');return false">auf Facebook teilen</a>

 

Twitter

Bei Twitter übergeben wir einen kompletten Tweet bestehend aus TITLE und URL:
twitter.com/home?status={TITLE}: {URL}

Verwende folgenden Code für einen Textlink …

<a href="http://twitter.com/home?status=<?php echo urlencode(get_the_title($post->ID)); ?>: <?php echo urlencode(get_permalink($post->ID)); ?>" target="_blank">retweet</a>

oder für einen Aufruf im Popup …

<a href="http://twitter.com/home?status=<?php echo urlencode(get_the_title($post->ID)); ?>: <?php echo urlencode(get_permalink($post->ID)); ?>" onclick="window.open(this.href, '', 'width=700,height=350');return false">retweet</a>

 

Google+

Für eine Empfehlung beim Social Network von Google wird lediglich die URL übergeben:
plus.google.com/share?url={URL}

Mit dem folgenden Code wird ein Textlink eingebunden …

<a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>" target="_blank">auf Google+ teilen</a>

oder einen Aufruf im Popup …

<a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>" onclick="javascript:window.open(this.href, '', 'height=500,width=600');return false">auf Google+ teilen</a>


Die 7 besten Firefox Add-ons für Webentwickler

Schon seit den ersten Versionen war der Mozilla Firefox bei Webdesignern sehr beliebt und eine große Hilfe bei der Entwicklung von Internetprojekten.

Mit den richtigen Add-ons kann der Internetfuchs aber noch um viele nützliche Funktionen erweitert werden. Auf der Add-on Seite von Firefox gibt es dazu eine spezielle Kategorie: https://addons.mozilla.org/de/firefox/extensions/web-development

Web Developer Toolbar

Die wohl bekannteste Toolbar unter den Webentwicklern:

Die Web Developer Toolbar ist ein mächtiges Werkzeug zur Analyse von Websites. Alles hier aufzulisten würde den Rahmen sprengen. Daher mal nur die für mich hilfreichsten Funktionen:

  • Abschalten von Javascript, Redirects, etc.
  • Anzeigen und Löschen von Cookies und Sessions
  • Anzeigen des Quellcodes bei Formularen direkt auf der Website
  • Anzeigen von width, height, Dateigröße und alt-Attribut bei Bildern
  • Anzeigen aller div-Elemente mit Angabe der #id und Pixel-Werte
  • Lupenfunktion und Messwerkzeug
  • Darstellung der Website bei verschiedenen Auflösungen.
  • Extra Seite für Responsive-Designs mit den wichtigsten Auflösungen
  • HTML- und CSS-Validierung

Sehr hilfreich ist auch die Live-Anzeige des Kompatibilität-Modus, CSS- und Javascript-Fehler, welche sich ganz rechts in der Toolbar befindet.

Download Webdeveloper Toolbar | Entwickler-Website

Firebug

Für mich das wichtigste Werkzeug zum Entwickeln von Websites.

Dieses Add-on hilft bei der Fehlersuche und der Analyse und ermöglicht das direkte Bearbeiten des HTML- und CSS-Code. Die Änderungen können sofort live auf der Website beobachtet werden. Sehr gerne nutze ich auch die Debugging-Funktion für Javascript.

Standardmäßig wird das Add-on nach der Installation mit F12 im unteren Bereich des Browserfensters eingeblendet.

Download Firebug | Entwickler-Website

Page Speed

Die Funktionalität des Add-on Firebug kann durch zusätzliche Extensions erweitert werden. Eine davon ist das von Google entwickelte Add-on Page Speed.

Nach der Installation ist Page Speed in einer weiteren Registerkarte im Firebug zu finden.

Die Analyse eine Webseite muss explizit gestartet werden.  Danach erfolgt eine Bewertung der Performance mit einem Wert vom max. 100 Punkten. Zusätzlich werden hilfreiche Tipps zur Optimierung der Ladezeit ausgegeben.

Download auf der Entwickler-Website

CSS Reloader

Ich will gar nicht wissen, wie viel Zeit ich schon vor sich neuladenden Webseiten saß. Mit diesem kleinen aber feinen Add-on konnte diese Zeit erheblich verringert werde.

Wie der Name schon sagt, können damit nach dem Ändern der Stylesheets diese neu geladen werden, ohne aber die komplette Website laden zu müssen. Das ist vor allem dann hilfreich, wenn z.B. die Seite nach einer Formularauswertung überarbeitet werden muss. So müssen nicht jedes Mal die Eingaben im Formular neu gemacht werden.

Nach der Installation findet man einen neuen Eintrag im Kontextmenü oder man startet den Reload der Stylesheets einfach mit F9.

Download CSS Reloader

SEOquake

Hier noch eine Toolbar, welche bei der Suchmaschinenoptimierung zum Einsatz kommt:

Damit bekommt man alle wichtigen SEO-Daten auf einen Blick. Auf Wunsch können diese Werte auch in den Suchergebnislisten von Google und Co. angezeigt werden. So kann die Konkurrenz direkt mit der eigenen Seite verglichen werden.

Zusätzlich gibt es in der Toolbar eine Option zum Ermitteln der Keyworddichte. Sehr nützlich ist hier die Anzeige der Keywords in einer Wortwolke. So erkennt man auf einen Blick, welche Keywords am häufigsten vertreten sind.

Neben den vielen Einstellungs-Möglichkeiten können in der Toolbar auch eigenen Funktionen hinzugefügt werden. So gibt es bei mir noch zwei Links auf die W3C-Seite um den HTML- und CSS-Code zu überprüfen.

Download SEOquake | Entwickler-Website

SearchStatus

Diese Add-on verwende ich als Alternative zu SEOquake. Im Gegensatz zu dessen Toolbar werden bei SearchStatus die Funktionen über ein Kontext-Menü aufgerufen.

Nach der Installation wird die Erweiterung in die Add-on-Leiste gelegt. In den Optionen kann aber die Position frei bestimmt. Bei mir hat SearchStatus einen festen Platz nach dem Home-Button (siehe Grafik).

Anzeigen lass ich mir nur den Google PageRank als ständige Information. Mit Rechtsklick auf das Icon bekomme ich die weiteren Möglichkeiten zur Analyse der Website. Besonders interessant ist Funktion “Show other Domains on IP”. Liegt die Website auf einem normalen Webhosting, kann ich so schnell die anderen Domains auf dem Server ermitteln, falls die Performance der Website Schwierigkeiten macht.

Download SearchStatus | Entwickler-Website

ColorZilla

Zum Schluß noch ein hilfreiches Add-on um Farbwerte direkt von einer Website zu nehmen.

Mittels einer Pipette, wie sie aus Photoshop & Co. bekannt ist, kann mit diesem Add-on ein beliebiger Farbwert direkt in die Zwischenablage kopiert werden.

Sehr nützlich ist auch die Funktion “DOM Color Analyzer”. Damit wird die Website auf alle Farben überprüft und eine Farb-Palette ermittelt, welche gespeichert werden kann (siehe Grafik rechts).

Download ColorZilla | Entwickler-Website

Soweit mal meine Favoriten. Mit welchen Add-ons macht ihr euch das Leben einfacher?



© 2014 Webdesign Blogger