of bits and bytes » Web-Design

Fremde Webseite online editieren

Roland Bär — Tue, 21 Jun 2011 20:17:38 +0000

Ein kleiner Trick im Firefox (getestet mit Version 4.0.1):

Einfach eine Webseite laden und dann folgende Zeile in das Adress-Feld eingeben und Enter drücken:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Erstmals ist keine Änderung ersichtlich. Man kann jetzt aber z.B. einen Text markieren und editieren. So kann man einfach kleine Änderungen vornehmen. Diese werden natürlich nicht gespeichert sondern gehen beim nächsten reload wieder verloren.

Weitere Tricks nehme ich gerne in den Kommentaren entgegen.

Internet Explorer Standard Support Dokumentation

Roland Bär — Sun, 04 Apr 2010 16:37:23 +0000

Kurz nachdem ich den Verweis auf den Artikel über die CSS-Unterschiede in den verschiedenen Internet Explorer Versionen publiziert hatte habe ich den Artikel bei heise online entdeckt, der auf die Dokumentation von Microsoft verweist. Diese dokumentiert unter anderem auch die verschiedenen Erweiterungen gegenüber den Standards bei CSS, JavaScript und DOM. Es empfiehlt sich, die PDF-Version der Artikel zu lesen, da in der HTML-Version jedes Unterkapitel auf einer einzelnen Seite dargestellt wird.

CSS Unterschiede der Internet Explorer Versionen 8, 7 und 6

Roland Bär — Sun, 28 Mar 2010 16:59:32 +0000

Der Internet Explorer 9 steht zwar schon in den Startlöchern, aber die älteren Versionen 6 und 7 werden immer noch benutzt. So haben auf meiner Webseite die alten Versionen immer noch einen Anteil von 27% (IE7) bzw. 15% (IE6) aller Internet Explorer Zugriffe (Marktanteil auf meiner Seite: 16%; alle Angaben gemessen seit Anfang 2010).
Bei Smashing Magazine habe ich eine gute Übersicht der Unterschiede der letzten drei Internet Explorer Versionen gefunden (in Englisch). Diese Übersicht hat mir auch bei der Erstellung des ‘Bildbeschreibung über Bild anzeigen’-Effektes sehr geholfen.

My first SilverStripe-Website

Roland Bär — Wed, 03 Mar 2010 19:52:07 +0000

Am 1. März wurde meine erste SilverStripe-basierte Website online geschaltet, die Website von Trescor Treuhand Kt. Schwyz AG. Dabei kam auch der ‘Bildbeschreibung über Bild anzeigen’-Effekt zum Einsatz.

Update zu ‘Bildbeschreibung über Bild anzeigen’

Roland Bär — Mon, 15 Feb 2010 22:41:47 +0000

Der Code im Artikel Bildbeschreibung über Bild anzeigen hat noch zwei Probleme bei älteren Versionen des Internet Explorers:

Internet Explorer 7:

Beim Internet Explorer 7 kann es passieren, dass der Block mit dem Text neben oder verschoben auf dem Bild angezeigt wird. Dadurch wird der Textblock teilweise durch nachfolgende Elemente verdeckt. Durch die explizite Positionsangabe und dem Wechsel von der Variante des Versteckens mittels display-Style zum visibility-Style konnte ich diese Probleme beheben:

div.switch div.mouse
{
width: 130px;
height: 100px;
display: block;
visibility: hidden;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
left: 0px;
}
div.switch:hover div.mouse
{
visibility: visible;
}

Internet Explorer 6:

Hier ist das Problem schwerwiegender. Der Internet Explorer 6 unterstützt keine Unterselektoren nach einem Pseudo-Element. Somit funktioniert das entscheidende Style Sheet nicht. Als Workaround zeige ich den Text im Internet Explorer 6 als ToolTip an. Der JavaScript-Code und die Styles können der aktualiserten Datei entnommen werden.

HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif

Bildbeschreibung über Bild anzeigen

Roland Bär — Tue, 25 Aug 2009 20:02:31 +0000

Mit einem einfachen Aufbau kann ein netter Mouse-Over Effekt erzeugt werden. Dabei werden zwei Elemente definiert, die dann die gleiche Grösse erhalten und das zweite Element vorerst nicht sichtbar ist.

Der HTML-Code:

Das CSS:

div.switch div
{
display: block;
float: left;
}
div.switch
{
position: relative;
}
div.switch div
{
width: 150px;
height: 120px;
}
div.switch div.mouse
{
width: 130px;
height: 100px;
display: none;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
}

Und das alles entscheidende Style Sheet:

div.switch:hover div.mouse
{
display: block;
}

Dadurch wird der Block mit dem Text sichtbar gemacht. Zur besseren Sichtbarkeit wird ein halbtransparentes/halbweisses Hintergrundbild verwendet.

Die Dateien können hier heruntergeladen werden:
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif

Blöcke zentrieren mit CSS

Roland Bär — Sun, 01 Apr 2007 21:25:33 +0000

Um Block-Elemente wie div oder p zu zentrieren muss man folgende CSS-Anweisungen verwenden:

margin-left:auto; margin-right:auto;

Dadurch wird der linke und der rechte Rand gleichmässig verteilt und der Block steht zentriert gegenüber seinem Eltern-Block.

Verschwundener Text im Internet Explorer

Roland Bär — Mon, 11 Sep 2006 06:07:19 +0000

Ein Fehler, der bei mir schon öfters aufgetreten ist:

Der Internet Explorer (Version 6.0) stellt den Inhalt nicht dar, wenn die CSS-Eigenschaft

clear

verwendet wird und der umschliessende Block eine Hintergrundfarbe oder ein Hintergrundbild enthält. Auf den Hintergrund zu verzichten ist keine Alternative, aber der Holly Hack schon:

Beim umgebenden Block einfach die Höhe mit

height: 1%;

angeben, und ein Bug frisst den anderen…

Gute Position bei Google und Co.

Roland Bär — Sun, 14 May 2006 18:02:03 +0000

Wenn neue Webseiten aufgeschaltet werden stellt sich immer wieder die Frage:

Wieso werde ich bei Google nicht gefunden?

Die Antwort darauf ist relativ einfach, die Lösung dagegen mit Aufwand verbunden.

Google bewertet die verschiedenen Seiten, die der googlebot findet. Wie diese Bewertung genau ausieht ist ein Geschäftsgeheimnis von Google. Es basiert aber hauptsächlich auf dem Inhalt und der auf die Seite weisenden Links. Dabei werden Links, die von Seiten kommen, die ein ähnliches Thema behandeln, stärker gewichtet als Links, die von Seiten kommen, die keinen direkten Bezug haben. Zudem wird auch beachtet, wie die verlinkende Seite selber bewertet ist. Andere Suchmaschinen benutzen meist ähnliche Bewertungsalgorithmen.

Daraus habe ich die CCC-Regel abgeleitet:

Content – Connections – Check

Content:

Ohne Inhalt läuft nichts. Der Inhalt ist der Teil, der den Besucher interessiert und deshalb auch vom Such-Roboter bevorzugt beachtet wird. Dabei sollte der Inhalt auch aktuell sein und regelmässig aktualisert und erneuert werden.

Connections:

Verknüpfungen auf die Seite zeigen der Suchmaschine, dass der Inhalt für das Thema relevant ist und deshalb auch den Suchmaschinen-Benutzern angezeigt werden soll. Dabei besteht natürlich ein Henne-Ei Problem. Wenn niemand meine Seite kennt, setzt auch niemand einen Link auf meine Seite. Abhelfen können zum Teil Kontakte, die man mit Leuten mit gleichen interessen hat. Wenn diese auf ihren Wenseiten auf die Inhalte der eignen Webseite verweisen und man selber auf die Inhalte der anderen verweist ist beiden geholfen. Linklisten auf einer Seite sind dabei aber weniger wirkungsvoll als Verknüpfungen innerhalb eines Fliesstextes, welcher von dem von der eigenen Seite behandelte Thema handelt.

Check:

Nur durch regelmässiges Überprüfen kann der Erfolg der Anstrengungen überprüft werden. Dabei sollte einerseits die Position der Seite bei den jeweiligen Suchmaschinen für die relevanten Suchbegriffe überprüft werden. Dabei kann man auch Tools einsetzten, die einem diese aufwändige Arbeit abnehmen. Andererseits sollte auch überprüft werden, mit welchen Suchbegriffen man gefunden wird. Denn möglicherweise suchen die Besucher gar nicht mit den Begriffen, die man selber vermutet.

Gute Suchmaschinen-Plazierungen können nicht einmal erreicht und dann behalten werden, mann muss für Sie regelmässig arbeiten. Dass heisst, immer für neuen Inhalt besorgt sein, versuchen neue Links auf die eingene Seite verweisen zu lassen und regelmässig den Erfolg überprüfen.