Per Pfeiltasten auf Webseite navigieren mit Jquery!
geschrieben am 30. September 2011
Manchmal möchte man seinen Besuchern die Möglichkeit geben auch mit dem Keyboard auf einer Webseite zu navigieren. Man möchte aber vielleicht nicht unbedingt dem User eine Keymap einblenden so dass er sehen kann welche Knöpfe es nun zu drücken gilt, um vor und zurück zu kommen. Es bieten sich also die Pfeiltasten an, da diese bereits ohne Erklärung für vor und zurück stehen. Da diese Tasten aber leider schon von den meisten Programmen vorbelegt sind muss man den Umweg über Javascript gehen um eine vernünftige, halbwegs kompatible Lösung an den Start zu bekommen. Dieses kleine Script ermöglicht die Pfeiltastennavigation mit den Cursor-Tasten Rechts und Links
$(document).ready(function() {
var nextPage = $(”#next_page_link”)
var prevPage = $(”#previous_page_link”)
nextUrl = nextPage.attr(”href”)
prevUrl = prevPage.attr(”href”)
});
Durch Tastendruck werden nun die Links mit den IDs “previous_page_link” und “next_page_link” ausgeführt.
Viel Spaß beim navigieren!
Niemand scrollt auf Webseiten?
geschrieben am 1. September 2011
Viele Kunden sind der Meinung, der komplette Inhalt ihrer Webseite solle ohne zu scrollen zu lesen sein, da man ja dem angeblich so “scrollfaulen” Leser nicht zumuten möchte, das kleine Mausrädchen zu benutzen.
Es wird also die Behauptung aufgestellt niemand würde auf Webseiten scrollen.
Dieses Vorurteil ist nicht nur falsch, sondern stellt den Grafikdesigner vor eine meist sehr schwierig zu lösende Aufgabe: Die Inhalte einer Webseite samt Logo, Claim und Content auf einen kleinen Bildschirm unter zu bringen und natürlich dann auch noch übersichtlich, nicht überladen und klar strukturiert.
Mademyday hat mit einer Webseite mit dem gleichen Titel eindrucksvoll bewiesen, dass das Vorurteil nicht stimmt: Versuchen Sie es selbst: mal sehen ob Sie scrollen
Oft kommt der ambitionierte Webdesigner in die Verlegenheit “Screenshots” seiner Arbeit an Kunden zu senden. Meistens passt aber eine Webseite nicht komplett auf einen Screen – man ist also gezwungen mehrere Screenshots einer Webseite herzustellen und diese dann anschließend im Grafikbearbeitungsprogramm zu einem großen Bild zusammen zu setzen. Das kann ganz schön nervig sein. Vor allem wenn die Webseiten größer und länger werden…
Durch das wunderbare AddOn “Screengrab” für Firefox kann man diese Aufgabe mit nur 2 Klicks erledigen. Sehr praktisch findet WebdesignHamburg:
so sieht das Ganze aus, wenn man die Startseite von Webdesignhamburg mit dem AddOn bearbeitet:
Google Squared – eine neue Dimension in der Websuche!
geschrieben am 7. September 2010
Google hat wieder zugeschlagen; Google Squared sieht auf den ersten Blick gleich extrem vielversprechend aus. Dabei ist der Name Programm. Squared macht aus Suchergebnissen nach Kategorien sortierte Übersichtstabellen. So können schnell interessante Parameter von einzelnen Ergebnissen wunderbar miteinander verglichen werden oder die von Google erzeugten Tabellen auch noch mit eigenen weiteren sinnvollen Tabellenspalten (Kategorien) erweitert werden. Alles unklar? Nun gut – versuchen wir es anhand eines Beispiels zu veranschaulichen.
Man sucht über Google Squared nach Hunderassen. Squared erzeugt uns eine Tabelle mit den Spalten, Rassenname, Bild, Beschreibung, Herkunftsland, Lebenszeit, Gewicht,….. So bekommt man ohne große Recherche eine tabelarische Übersicht über alle von Google auffindbaren Hunderassen präsentiert, die man noch mit einer beliebigen Spalte erweitern kann.
Gut nicht wahr? Das Ganze kann man natürlich auch wunderbar als Produktvergleich, Kaufberatung oder zum Preisvergleich und dergleichen nutzen. Wichtig dabei wäre nur, dass man eben eine Spalte Preis mit erzeugt wenn diese nicht schon von vorneherein von Google erstellt worden ist. Google erweitert also das Suchen um eine Dimension – die verticale – ab jetzt neu: 2 Dimensionale Suchergebnisse von Google. Ausprobieren lohnt sich unter: http://www.google.com/squared/
Wie sieht meine Seite im Internetexplorer aus?
geschrieben am 11. August 2010
Wir Webdesigner lieben den Internetexplorer – diese Liebe geht hauptsächlich auf Version 6 dieses tollen Programms zurück, welche Jahrelang allen Webdesignern weltweit das Leben schwer machte. Der Internetexplorer 6 und Konsorten unterstütz viele Standards nicht und zeigt manchen astreinen HTML und CSS Code einfach völlig anders an als jeder normale Browser.
Trotzdem muss man immernoch Webseiten so erstellen, dass Sie auf diesem Browser “gut” aussehen, da es immernoch Menschen gibt, die diesen Browser verweden und immer noch nicht auf die bereits erschienen Version 8 geupdated haben.
Was macht man aber wenn man als Entwicklungsumgebung gar nicht Windows benutzt oder auf seinem Windows den Internetexplorer bereits auf eine neuere Version geupdated hat? (Microsoft macht es einem extrem schwer, mehrere Versionen des gleichen Programms gleichzeitig installiert zu haben)
Richtig! Man sucht sich einen Service im Netz, der einem die Seiten in jeder beliebigen Version des Internetexplorers rendert!
Der IE-Renderer ist die ideale Software für diese Zwecke:
zu finden und auszuprobieren gibts diese hier: http://ipinfo.info/netrenderer/
Font-Family-Styles für mehrere Betriebssysteme.
geschrieben am 3. Mai 2010
Die Zeiten in denen es genügte eine Font-Family in seinem Stylesheet zu deklarieren sind vorbei. Früher waren Systeme wie z.B. Linux oder sogar Apple nur als verschwindend kleinen Prozentsatz bei den Besuchern einer Webseite vertreten. Da aber Open-Source Software und freie Betriebssysteme immer besser und Apple Computer immer beliebter werden und auf diesen nicht zwangsläufig die gängigen Websafefonts einer Windowsinstallation installiert sind muss man im Stylesheet Alternativen deklarieren. Dies geschieht ganz einfach in dem man im “Font-Family:” Tag einfach mehrere “Families” per Komma getrennt hintereinander deklariert. Der Browser wählt dann immer die erste Familie aus, die auf dem Computer gerade installiert ist. Anbei nun eine Liste mit den (Windows) Schriftarten und den dazu gehörigen Pendants für Mac und Linux:
Das neue Ubuntu wird bald erscheinen! Wir sind schon ganz gespannt darauf!
Viel Spaß beim ausprobieren!
verschiedene Stylesheets für verschiedene Bildschirmauflösungen.
geschrieben am 21. April 2010
Ich habe ein ganz wunderbares Script gefunden welches ermöglicht verschiedene Stylesheets für je nach Bildschirmgrößen zu laden. Dadurch kann man zum Beispiel ein seperates Stylesheet für Iphone und ähnliche mobile Geräte zur Verfügung stellen
<code>
<script type=”text/javascript”>
function getcss(cssfile){
loadcss = document.createElement(’link’)
loadcss.setAttribute(”rel”, “stylesheet”)
loadcss.setAttribute(”type”, “text/css”)
loadcss.setAttribute(”href”, cssfile)
document.getElementsByTagName(”head”)[0].appendChild(loadcss)
}
if(screen.width <= ‘480′)
// Stylesheet für mobile Geräte wie zB Iphone mit Bildschirmauflösung kleiner gleich 480 Pixel)
{
getcss(’css/style_iphone.css’)
}
else if(screen.width > ‘800′ && screen.width < ‘1280′)
// Stylesheet für Bildschirmauflösungen zwischen 800 Pixel und 1280 Pixel
{
getcss(’css/style_normal.css’)
}
else
{
getcss(’css/style_wide.css’)
//Für alle Bildschirme größer als 1280 Pixel breite
}
</script>
</code>
Das ganze kommt natürlich in den Head bereich der Webseite – die Stylesheets liegen im Verzeichnis /css
Animierte Favicons sind eine feine Sache – gerade für Surfer, die etliche Tabs gleichzeitig offen haben (so wie ich).
Da verliert man schnell mal die Übersicht – gerade wenn eine Seite gar kein Favicon einsetzt.
Mit Hilfe von animierten Favicons kann man die eigene Seite noch etwas deutlicher im Browser hervorstechen lassen. Das Ganze lässt sich eigentlich ganz einfach realisieren. Man erstellt zunächst ein statisches Favicon mit Hilfe eines Online Favicon Generators – zusätzlich erstellt man ein animiertes Gif names “animiertes_favicon.gif” oder so ähnlich – welches die Animation beinhalten soll.
Nun läd man beide Dateien in den Wurzelordner der Webseite und fügt dem Headerbereich folgende HTML-Tags hinzu
Viel Spaß beim ausprobieren!
Online Flash Generator 4 free!
geschrieben am 27. März 2010
Ab und an kommt man einfach nicht drum herum Flash zu benutzen. Möchten man zum Beispiel einen kleinen Film auf seine Webseite tun dann ist es einfach sehr viel praktischer dies eben mit Flash zu machen als gleich einen ganzen Player und so weiter in sein Webdesign zu integrieren. Ebenfalls gibt es mit Flash auch ein paar hübsche Möglichkeiten, die man mit anderen Scriptssprachen wie zum Beispiel Jquery nur mit sehr viel mehr Aufwand hinbekommt.
Flash ist aber ein großes und kompliziertes Programm. Nicht zuletzt kostet es auch ne ganze Stange Geld und findet sich sicher nicht in Originalversion auf dem Computer eines jeden Webdesigners.
Hier kommt der FX Free Flash Effect Generator ins Spiel.
Mit diesem Online Tool lassen sich ganz leicht einfache Effekte, Filmsequencen, Fotos, Lauftexte, usw in eine Webseite integrieren. Das ganze kostet nichts und macht dazu noch wirklich Spaß! Das Programm ist einfach zu bedienen und ist wirklich wert dass man es sich mal anschaut! Ich habe in 2 Sekunden eine wunderbare Typewriter Demo für WebdesignHamburg.net erstellt.
Viel Spaß damit!
Mehrspaltige Layouts mit Javascript und CSS3
geschrieben am 25. März 2010
Was in Zeitungen und Zeitschirften oft der Standard ist macht im Internet nur ab und zu Sinn – Mehrspaltiger Textfluss.
Normalerweise wird ein Text in einer Spalte dargestellt, damit der Leser nicht ständig runter und dann wieder hoch scrollen muss, wenn er am Ende einer Textspalte angekommen ist.
In seltenen Fällen (wenn ein Textabschnitt sowieso ganz auf 1 Seite (ohne Scrollen passt) ist es wünschenswert einen mehrspaltigen Text darstellen zu können.
Der W3C arbeitet nun an einem Mehrspalten-Modul, welches mithilfe von CSS3 und Javascript mehrspaltige Layouts erlaubt.
Anbei ein paar interessante Links zu diesem Thema: Ein Beispiel List Apart über Multicolumn Layouts W3C – Artikel über mehrspaltige Layouts
Umweltfreundlich im Internet suchen: http://www.ecosia.org/
geschrieben am 24. März 2010
Das die Suche im Internet nicht nur zur Informationsbeschaffung dient haben wir mitlerweile kapiert. Die großen Suchmaschinenkonzerne zählen nicht nur zu den einflussreichsten Unternehmen unserer Zeit sondern erwirtschaften auch durch das Einblenden von bezahlter Werbung bei den Suchergebnissen eine Menge Geld.
Nun gibt es eine Suchmaschine, die sich auf die Fahnen geschrieben hat 80% der erwirtschafteten Gewinne in den Schutz des Regenwalds zu stecken. Dies finden wir sehr sehr löblich und möchten an dieser Stelle alle Suchenden auffordern, doch zumindest ab und an die Suchmaschine von Ecosia zu benutzen und pro Suche ca. 2m^2 Regenwald damit zu schützen. So einfach kann es sein.
Eben stolperte ich über ein sehr interessantes Projekt Names JTL-WaWi. WaWi steht für Warenwirtschaft und dahinter verbirgt sich ein freies Warenwirtschaftssystem welches einen beachtlichen Funktionsumfang und eine Schnittstelle für die gängigen und ebenfalls freien Online-Shop-Systeme bietet. So werden zum Beispiel
OS-Commerce, Zen Cart, Ol Commerce und Virtuemart von Haus aus unterstützt – und JTL-WaWi bietet ebenfalls eine Ebay Schnittstelle. Der Funktionsumfang ließt sich beeindruckend. JTL-WaWi scheint also die ideale Ergänzung für den Mietshop von Webdesignhamburg welcher wohl bald auch mit freier Warenwirtschaftsanbindung zu haben sein wird. Mehr dazu an dieser Stelle.
Folgende Grafik zeigt schematisch den Umfang von JTL-Wawi:
Tja – das Thema Rechtssicherheit im Onlineshops ist leider sehr komplex – gerade in Deutschland – oft hat man das Gefühl vieles sei bei uns etwas überreguliert und kaum zu durchblicken.
Wer ohne einen Anwalt mit seinem Online-Shop an den Start gehen möchte setzt sich oft einem großen Risiko aus – unser Gesetz bietet doch zuviele Fallstricke und wer selbst bei der Widerrufsbelehrung Hand anlegt oder seine AGB selber schreiben möchte macht sich anfällig für eine Abmahnung die mitunter nicht ganz billig sein kann.
Das Bundesministerium der Justiz bietet nun auf einer Webseite eine Musterwiderrufsbelehrung an – der man zwar nicht unbedingt zu 100% vertrauen sollte (auch der Gesetzgeber selber durschaut sein Regelwerk ja nicht immer), die man aber zumindest als Vorlage zur Ausarbeitung der eigenen Widerrufsbelehrung heran ziehen kann.
Ein Blick auf diese Seite lohnt sich also in jedem Fall.
Schon wieder soll es hier um die URLs gehen – genauer gesagt um deren Eindeutigkeit und die Indizierung dieser durch die Suchmaschinen. Gerade bei größeren Seiten kann es durchaus schwierig sein immer eindeutige URLs zu haben – es ist durchaus denkbar, dass ein und diesselbe WebSeite über mehrere URLs erreichbar ist – dies kann aus mehreren Gründen (kompliziert) der Fall sein – denken wir zum Beispiel nochmal an den Post vom 21.01.2010 und das Mehrsprachigkeitsproblem. Ebenso könnten Mehrdeutigkeiten wegen verschiedenartiger Navigationen (über Kategorien, Tags, Archive, etc…) auftreten.
Das Problem das dabei entsteht ist, dass sich die URLs (obwohl sie auf die gleiche Seite verweisen) gegenseitig die Linkpower klauen – dublicate Content ist entstanden und dieser soll ja bekanntlich vermieden werden.
Das Canonical Tag liefert hier Abhilfe – so kann man der Suchmaschine mitteilen, welches denn nun die zu indizierende Haupseite (auch für Unterseiten anwendbar) sei. Dafür müssen wir nicht viel tun außer das folgende Tag in den header unserer Seite schreiben:
In diesem Beispiel von der Offiziellen Google Seite werden folgende Links alle auf das Hauptcanonical:
http://www.example.com/product.php?item=swedish-fish
indiziert.
http://www.example.com/product.php?item=swedish-fish&category=gummy-candy
Social Media – die schnelle Revolution im Internet
geschrieben am 4. Februar 2010
Das unsere Welt in ständigem Wandel ist, ist nun keine weltbewegende Neuigkeit. Das Social Media allerdings die wohl am schnellsten eintretende Veränderung für Menschen und Märkte mit sich bringt und viel schneller wächst als jedes andere davor dagewesene Massenmedium wie Fernsehen oder Radio ist doch sehr bemerkenswert. Dies hat unter anderem zur Folge dass Kunden sich heute anders verhalten: Meinungen über Produkte werden heute größtenteils nicht mehr über Werbung sondern über Rezensionen und Bewertungen von anderen Kunden gebildet – so schaut man zum Beispiel doch gerne zunächst bei Amazon nach was andere Kunden zum gewünschten Produkt gesagt haben und welche Bewertung sie abgegeben haben. Fällt die Bewertung hier schlecht aus, sehen auch die Absatzzahlen des Produkts schlecht aus.
Dies ist aber nur ein Faktor wie Social Media die Welt verändert.
In dem folgenden Film vom Michael Ehlers Verlag werden einige der Veränderungen die Social Media mit sich bringt dargestellt:
Viel Spaß beim anschauen!
URL-Paramterbehandlung und Doppelter Content
geschrieben am 21. Januar 2010
Ein komplexes Thema ist für viele Suchmaschinenoptimierer das Thema doppelter Content (Inhalt). Oft sind Seiten – im Speziellen wenn Sie mit einem CMS (Wordpress ist hier sehr anfällig) umgesetzt worden sind davon betroffen: Identische Seiten können über mehrere URLs erreicht werden – (Man beachte ich spreche hier nur von Interner Verlinkung – von außen dürfen es ja nicht genug Seiten sein die auf eine Seite verlinken) dies ist oft der Fall wenn so genannte SEO-Plugins eingesetzt werden. So genannter doppelter Content ist natürlich grundsätzlich schlecht! Woher soll die Suchmaschine wissen welches nun die Hauptseite ist die im Index erscheinen soll? Wie wird vermieden dass Seiten doppelt vorliegen und sich somit gegenseitig den Linkjuice klauen?
Die eleganteste Möglichkeit ist es natürlich darauf zu achten, dass es keine verschiedenen URLs gibt, die auf ein und dieselbe Seite verweisen – wenn das nicht möglich ist oder der Programmierer einfach überfordert ist kann man unserer Lieblinssuchmaschine Google auch beibringen einige Parameter zu ignorieren und somit gewisse URLs gar nicht mehr als verschieden aufzufassen. Zum besseren Verständnis ein Beispiel:
Sagt man nun Google es solle den Parameter “language” einfach ignorieren ist das Problem gelöst! Es können bis zu 15 Parameter gesetzt werden – dies geschieht in der Google Webmaster Zentrale.
1. Bei Google anmelden
2. Webmaster Zentrale ansurfen
3. Wählen Sie Ihre Seite im Dashboard aus
4. Klicken Sie auf Webseiten-konfiguration
5. weiter gehts zur Parameterbehandlung
6. Wählen Sie den Paramter aus der auf ignorieren gestellt werden soll oder fügen Sie diesen einfach hinzu wenn er nicht bereits automatisch von google gesetzt wurde.
7. Abspeichern und gut!
Google bietet auf dem Google Code Playground Entwicklern ein sehr schickes Tool um mit der Google Api zu spielen und den geschriebenen Code in Echtzeit zu testen – das macht Freude und anhand der Beispiele kann man schnell zum Beispiel sein eigenens kleines Übersetzungsprogramm schreiben welches sogar ganze Sätze übersetzt.
Hier ein Beispiel: der Google Api Translator
Google, SEO und die personalisierte Suche.
geschrieben am 6. Januar 2010
Google hat vor einigen Wochen die so genannte personalisierte Suche eingeführt – das schöne daran ist, dass Google die User darüber nicht direkt informiert hat – dies hat bei vielen Webmastern für kurze Zeit zu einem absoluten Stimmungshoch geführt – war ihre eigene Seite (zumindest auf dem eigenen Rechner) für ein paar Tage (bis man die personalisierte Suche wieder ausgeschaltet hat) auf den fordersten Plätzen bei Google zu finden. Was hat sich verändert?
Google speichert die Suchanfragen die ein User stellt in einem Cookie auf dem eigenen Rechner. Die gespeicherten Daten werden nun dazu genutzt dem User schneller zu präsentieren was er wirklich gesucht hat – ein Beispiel:
Ein Webdesigner sucht seine eigene Seite in Google um sein Ranking zu checken. Er gibt also “Webdesign Hamburg” bei google ein. Er bekommt ganz normal die ersten 10 Ergebnisse auf der ersten Ergebnisseite angezeit – er findet seine Seite zum Beispiel auf Platz 4 und klickt darauf – dies merkt sich Google und geht in Zukunft davon aus, dass der User genau diese Seite gesucht hat und wird diese in Zukunft noch weiter oben präsentieren. Eigentlich eine sinnvolle Sache – nur der SEO oder Webmaster der sein Ranking checken will könnte aus dem “personalisierten Ergebnis” Fehlschlüsse ziehen. Weiß man bescheid – alles kein Problem!
Aber – man kann die personalisierte Suche ja auch einfach ausschalten – man muss allerdings zunächst wissen dass es sie gibt und zweitens sollte man wissen wie man sie deaktivieren kann.
Man gehe im nicht bei Google eingelogden Zustand nach einem Suchvorgang oben rechts auf Webprotokoll und schaltet die personalisierte Suche aus. Dies muss man allerdings nach jedem Löschen von Cookies immer wiederholen.
Viel Spaß!
