Meine aktuellen TOP 5 Firefox Webdesign Extensions. Natürlich alle Open Source.

User Agent Switcher

Der Name saget alles. Der User Agent Switcher ermöglicht das einfache und schnelle Ändern des User Agent Strings im Browser. Von Haus aus hat er Browserkennungen für Desktop- und Mobile-Browser im Gepäck.

Web Developer Toolbar

Die Web Developer Toolbar stellt eine Toolbar bereit in der vom Lineal bis hin zu Optionen von Caches, CSS, Bildern etc. alles dabei ist.

Firebug

Mit Firebug, wer kennt ihn nicht, lassen sich HTML Dokumente in echtzeit im Browser inspizieren und modifizieren. Zusätzlich verfügt Firebug über einen Javascript Debugger, ein HTTP-Anfragen Analyse Tool und vieles mehr.

CSS Usage

CSS Usage ist ein Firebug Plugin zum analysieren der CSS Verwendung. Hiermit kann auch überflüssiger CSS gefunden werden.

Poster

Poster ermöglicht es gemütlich über ein Formular beliebige POST Anfragen via Firefox an HTTP Server senden.

Keine Kommentare »
 

Dem Besucher die Möglichkeit zu geben die Anfahrt zu einem Unternehmensstandort berechnen zu lassen ist heut zu tage ein muss für jede Unternehmens Webseite. Unschön ist ein weiteres Fenster / Pop-Up das sich öffnet nur um eine Anfahrtsskizze über die Google Maps Funktion anzuzeigen. Im selben Fenster wollen wir Google Maps nicht öffnen. Wir wollen den Besucher nicht von der Webseite weg manövrieren.

Ein Lösungsvorschlag von mir ist das öffnen von Google Maps in einer Highlighting-Box wie der Shadowbox. Als angenehm empfunden haben viele Besucher einen zweiten Link für die Google Routen Berechnung. Bei den Vorhaben seine Anfahrtsroute zu berechnen sollte man dem Besucher nicht im Interface / Platz beschneiden.

Hierzu habe ich mithilfe von jQuery ein kleines Script geschrieben, das am besten in den Header des Dokumentes, nach dem jQuery Framework und der Shadowbox, eingebunden wird. Ein paar HTML Elemente müssen wir ebenfalls auf der Webseite platzieren um dem Besucher Interaktion zu ermöglichen.

Das Beispiel auf dieser Seite beeinhaltet die Anzeige der Anfahrt, dargestellt in der Shadowbox, ins Watergate nach Berlin.

Anfahrt anzeigen • Route berechnen
Fremd Beispiel 2:PSD zu WordPress Theme(unten auf der Seite)

Die Einrichtung um Google Maps in der Shadowbox öffnen zu lassen gestaltet sich, wenn man weiß wie, sehr einfach.
Das jQuery Framework und die Shadowbox müssen vor Script Aufruf in das HTML Dokument eingebunden werden. Dies geschieht im Kopfbereich folgerndermaßen:

<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="shadowbox.js" type="text/javascript"></script>

Aktuelle Downloads findest du hier:

Dieses Script bindet das „click“ Event an den Link und macht es uns möglich nach einem Klick eines Benutzers mit einer eigenen Funktion zu reagieren. In unserer Funktion werden wird der Wert des Formularfeldes ermittelt und als GET Parameter (Adresse) für den iFrame der Shadowbox verwendet.

Das zweite „click“ Event öffnet ein neues Fenster / Tab mit der Adresse aus dem Formularfeld für die Google Routen Berechnung.

jQuery(document).ready(function() {
   Shadowbox.init({
       handleOversize: 'drag',
       modal: true
   });
   jQuery('#google-route-b').bind('click', function() {
       Shadowbox.open({
	   content: jQuery(this).attr('href')+jQuery('#google-route-f').attr('value'),
  	   player:  'iframe'
      });
      return false;
   });
   jQuery('#google-route-d').bind('click', function() {
	jQuery(this).attr('href', jQuery(this).attr('href')+jQuery('#google-route-f').attr('value'));
	return true;
   });
});

Der Selektor #google-route-b steht hierbei für den Link auf den geklickt werden muss um unser „Formular“ abzusenden. #google-route-f bezeichnet das Feld mit der Adresse des Besuchers. Die Rückgabe von „false“ am Ende der Funktion verhindert das öffnen von den Google Routen im selben Fenster.

#google-route-d kennzeichnet den Link um die Google Routen Berechnung. Nach dem Einfügen der Adresse aus dem Input Feld in den Link wird „true“ zurück gegeben um dem Browser zu signalisieren weiter mit seiner standard Link Routine zu arbeiten.

<input type="text" name="saddr" title="Ihre Adresse" class="input-text" id="google-route-f">
<a href="http://maps.google.de?daddr=***DEINE STRAßE, DEINE STADT***&amp;&output=embed&saddr=" title="Anfahrt anzeigen" id="google-route-b" target="_blank">Anfahrt anzeigen</a>
<a href="http://maps.google.de?daddr=***DEINE STRAßE, DEINE STADT***&amp;saddr=" title="Route berechnen" id="google-route-d" target="_blank">Route berechnen</a>

***DEINE STRAßE, DEINE STADT*** ist natürlich durch die jeweilige Firmenadresse zu ersetzen.

Keine Kommentare »
 

Ob es ratsam ist externe Links in neuem Fenster / Tab zu öffnen bzw. Verweise generell in neuen Tabs / Fenstern zu öffnen ist umstritten. Grundsätzlich werden dabei zwei sinnvolle Ansätze vertreten.

  • Ansatz A

    Dem Benutzer ist es selbst überlassen wie sich Links nach anklicken verhalten. Alle Links öffnen sich im selben Fenster.

  • Ansatz B

    Dem Benutzer wird die Entscheidung abgenommen und externe Links öffnen sich in einem neuen Fenster / Tab. Hierbei wird die eigentliche Seite nicht verlassen.

Ich selbst tendiere zu Ansatz B. Sollte es, aus welchen Gründen auch immer, nicht möglich sein ein target=“_blank“ Server seitig in das HTML Dokument einzufügen verwende ich eine Javascript Funktion auf jQuery Basis.

Externe Links in neuem Fenster öffnen –extendable

Diese Methode ist insbesondere interessant wenn verschiedene Faktoren für die Prüfung eines Links erforderlich sind.

/* Nicht vergessen das jQuery Framework vor diesem Snippet einzubinden  */
jQuery(document).ready(function() {
	var getdomainname = function(url) {
		return url.split('/')[2].split(':')[0];
	}
	var targetblank = function() {	
		if (window.location.host != getdomainname(jQuery(this).attr('href')))
			jQuery(this).attr('target', '_blank');
	}
	jQuery('body a').each(targetblank);	
});

Mithilfe dieser Funktion können jederzeit auch einzelne Bereiche der Internetseite angesprochen werden. Strukturen ohne externe Links sollten auch aus Performance Gründen nicht von der Funktion überprüft werden.

Weitere Informationen zur Funktion getdomainname() findest du in meinem vorherigen Post: Javascript: Domain Name ermitteln (JS: get domain name) via URL

Externe Links in neuem Fenster öffnen – quicky

/* Nicht vergessen das jQuery Framework vor diesem Snippet einzubinden  */
jQuery(document).ready(function() {
        jQuery("a[href^='http']:not([href^='"+window.location.host+"'])").attr('target', '_blank');
});

Diese Methode fügt allen a Tags mit einem http:// am Anfang des href Attributes das nicht der aktuellen Domain entspricht das target=“_blank“ hinzu. Nicht zu vergessen ist, das auch hier mit Hilfe des Selektors aus einzelne Bereiche des HTML Dokuments angesprochen werden können. Dieser Vorgehensweise fehlt es leider an Erweiterbarkeit. Insbesondere für Filter Regeln zur die Auswahl der Links.

5 Kommentare »
 

Die Verbreitung der eignen Blog-Inhalte über Soziale Netzwerke gehört inzwischen zum Pflichtprogramm für jeden Blogger und ist auch für Firmenpräsentationen oder Online Shops ein wichtiges Werbemittel geworden.

Social Bookmark Dienste kristallisieren sich inzwischen als Hype heraus. Google Bookmarks, Digg oder Mr. Wong haben weniger Verbreitung oder sind Nutzern gänzlich unbekannt. Draus resultiert, das diese Dienste nicht den gewünschten Besucherstrom bringen.

Google+, twitter und facebook. Die 3 Großen im Netz, die jedem bekannt sind, auf diese möchte ich meinen Focus in diesem Blog Eintrag legen.

Für die Integration dieser Buttons stellen die 3 Communities jeweils Button Generatoren und gut verständliche Anleitungen zur Integration bereit.

Jeder dieser Buttons läd ein Script vom Server des jeweiligen Anbieters um die Buttons mit Funktionalität auszustatten. Das laden der Scripte kann, je nach Last der Ressourcen der Drittanbieter (Google, twitter, facebook), den Aufbau der Seite bremsen.

Google stellt zur Integration seines Buttons von Haus aus die Möglichkeit für eine asynchrone Integration bereit. Auf Basis dieses kleinen Javascriptes ist es ein leichtes den twitter tweet und den facebook Like Button ebenfalls asynchron in unsere Webseite zu integrieren.

Folgendes Script läd Google+, twitter tweet & facebook Like Button asynchron von den Drittanbieter Servern:

window.___gcfg = {lang: 'de'}; // google+
var socials = ['https://apis.google.com/js/plusone.js', 'http://platform.twitter.com/widgets.js', 'http://connect.facebook.net/de_DE/all.js#xfbml=1'];	
for (var i = 0; i < socials.length; i++) {
  	var po = document.createElement('script');
  	po.type = 'text/javascript';
  	po.async = true;
	po.src = socials[i];
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(po, s);
}

Die Einbindung des Scriptes sollte im Kopfbereich (head-Tag) unseres Dokumentes erfolgen.

Ein Beispiel für die jeweiligen HTML Tags stellt dieser Code Block hier da, welcher in den Inhalts Bereich (body-Tag) des Dokumentes eingebunden werden kann:

<div class="g-plusone" data-size="medium" href="***LINK***"></div>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="***LINK***" data-count="horizontal" lang="de">Tweet</a>
<div class="fb-like" href="***LINK***" width="450" show_faces="false" action="like" font="verdana"></div>

Der Platzhalter ***LINK*** ist hierbei durch den Verweis zu ersetzen, der an Google, twitter oder facebook weitergereicht werden soll. Anpassungen der Buttons in Aussehen, Sprache oder Funktionalität können von den jeweiligen Anbietern ersehen werden. Siehe Generatoren und Anleitungen der jeweiligen Anbieter. (siehe oben im Artikel)

Google+, twitter tweet & facebook Like für WordPress

In diesem WordPress Blog-System ist Google+, twitter tweet & facebook Like auf die bereits aufgezeigte Weise implementiert. Um den Short-Link des jeweiligen Artikels in einem WordPress Template zu ermitteln verwende ich die Funktion wp_get_shortlink(). Der Rückgabe Wert dieser Funktion oder die Funktion selber muss lediglich durch den ***LINK*** Platzhalter ersetzt werden.

Keine Kommentare »
 

Während der Arbeit für Werbeagenturen ist mir aufgefallen, dass die meisten Designs als CSS Layout mit 100% Höhe am schönsten zur Geltung kommen. Eine prozentuale Breite für ein Web-Layout, das ursprünglich eine feste Breite hatte, lässt sich selten umsetzen. Eine prozentuale Höhe jedoch schon. Von prozentualen Maßen wollen Werbeagenturen in der Regel auch nichts wissen. Denn im Print Bereich, in welchem die Wurzeln der Agenturen liegen gibt es so etwas nicht. Was dabei nicht beachtet wird ist das der Designer bei einem Printmedium weiß wie groß die zu bedruckende Fläche ist. Im Web ist das anders. Die Größe und Auflösung des Bildschirm der Betrachter stehen nicht fest.

Das folgende HTML Grundgerüst wird hierfür benötigt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Horizontal zentriertes 100% Höhe CSS Layout</title>
</head>
<body>
	<div id="wrapper">
		Inhalt
		<div id="footer">
			Fußzeile
		</div>
	</div>
</body>
</html>

Dieser CSS Quellcode muss noch in den Style Tag des Dokuments eingefügt oder aus einer seperaten CSS Datei eingebunden werden:

/* Mit dem Universalselektor standardmäßige Innen- und Außenabstände entfernen */
* {
	margin: 0;
	padding: 0;
}
 
/* Scrollbar einblenden, damit die Seite bei langem Inhalt nicht springt */
html {
	overflow: -moz-scrollbars-vertical; /* Firefox */
	overflow-y: scroll;
}
 
/* Ohne diese Angaben kann der Wrapper keine 100% Höhe haben */
html, body {
	height: 100%;
}
 
/* Keine Rahmen um Bilder anzeigen */
img {
	border: 0;
}
 
/* Gestrichelte Rahmen beim Klicken von Links entfernen */
:focus {
	outline: none;
}
 
div#wrapper {
	position: relative; /* Wird für den Footer benötigt */
	margin: 0 auto; /* Horizontales zentrieren des Wrappers */
	width: 995px; /* Ohne Breitenangabe kann der Wrapper nicht zentriert werden */
	background: #f0f0f0; 
	height: auto !important;
	height: 100%; /* Verhält sich wie min-height im IE6 */
	min-height: 100%;
}
 
div#footer {
	position: absolute;
	width: 100%;
	bottom: 0; /* Footer am Ende des Browsers festsetzen */
	background: #dddddd;
	border-top: 6px double gray;
}

Das padding-bottom des Inhalt DIV’s, das nicht im Quellcode vorhanden ist, muss mindestens so groß sein wie die Höhe Footers. Beachtet man dies nicht verschwindet ein Teil des Inhalts hinter dem Footer. Zusätzlich sollten noch Schriftart und Schriftgrößen im CSS definiert werden. Da hierbei sonst Abweichungen in den verschiedenen Browsern entstehen. Eine Demo findest du hier.

Mit dieser Layout Vorlage sollte es dir ein leichtes sein eine Webseite mit zentriertem Inhalt und 100% Höhe zu erstellen. Ich hoffe das ist ein schönes nachträgliches Weihnachtsgeschenk für dich. Frohe Weihnachten noch. 🙂

Keine Kommentare »