Oct 21

Flash wird in letzter Zeit wieder populärer, so wird es auf beinahe jeder neugestalteten Startseite von Firmen (z.B. A1 (zeitweise auch ohne Flash), aon, Dell,…) eingesetzt um neueste Produkte zu präsentieren. Der von Flash generierte Code zur Einbindung des Films hat bis jetzt noch nie einem vom W3C verabschiedeten Standard entsprochen, seit der letzten Version von Flash wird zusätzlich auch noch JavaScript zum Einbinden verwendet – der generierte Code sieht dann in etwa wie folgt aus:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>flash</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--Im Film verwendete URLs-->
<!--Im Film verwendeter Text-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("Diese Seite erfordert die Datei \"AC_RunActiveContent.js\".");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '676',
			'height', '405',
			'src', 'flash',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'flash',
			'bgcolor', '#ffffff',
			'name', 'flash',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'flash',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="676" height="405" id="flash" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<embed src="flash.swf" quality="high" bgcolor="#ffffff" width="676" height="405" name="flash" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>
</body>
</html>
Betrachtet man ausschließlich den “noscript”-Teil (der für die Einbindung ausreichend wäre), so findet man bereits hier zwei verschiedene Ansätze der Einbindung vor. Zum einen mittels “classid” über ActiveX, zum anderen mittels “embed”-Tag. Der “embed”-Tag stellt kein valides (X)HTML dar, ActiveX ist reine Windows-Technologie und grenzt somit andere Betriebssysteme (diese greifen auf das nicht valide “embed” zurück) aus.
Mit dem MIME-Type “application/x-shockwave-flash” kann allerdings dem Browser mitgeteilt werden, dass es sich beim vorhandenen “object” um einen Flash-Film handelt. Dieser weiß anhand einer hinterlegten Tabelle, wie er mit diesem Format (z.B. auch mit “text/plain”, “image/jpeg”,…) umzugehen hat. Zufälligerweise Glücklicherweise kann dem “object”-Tag der MIME-Type mitgeteilt werden. Die valide Lösung sieht dann wie folgt aus:
<object width="676" height="405" id="flash" data="flash.swf" type="application/x-shockwave-flash">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
</object>
Aus Gründen der Kompatibilität mit diversen Browsern muss der Dateiname sowohl im “object”-Tag (data) als auch mit einem “param”-Tag (movie) angegeben werden.
Aug 08

Die Web Developer Toolbar von Chris Pederick ist unverzichtbar für jeden Webentwickler. Sie ist kostenlos erhältlich und lässt sich in die Browser Firefox, Flock und Seamonkey integrieren. Bei der Web Developer Toolbar handelt es sich um eine umfangreiche Sammlung von nützlichen Werkzeugen, für die zuvor einige Plug-Ins installiert werden mussten, um die selben Ergebnisse erreichen zu können. So ist es damit möglich einige Einstellungen (Cache, Java, JavaScript,…) auf die Schnelle zu (de-)aktivieren. Weiters nützlich bei der Verwaltung von Cookies, Entwicklung von CSS, Erstellung/Änderung von Formularen und Einbindung von Grafiken. Mit einigen Einstellungen lässt sich die Seite so darstellen, wie sie eine Suchmaschine, oder auf Text-Browser angewiesene Menschen sehen würden. Sonstige Funktionen sind die Darstellungen mit unterschiedlichen Bildschirmauflösungen, hervorheben von Elementen, Benutzung von Lupe und Lineal. Leider konnte ich nur einen kurzen Überblick geben, denn die Möglichkeiten sind praktisch unendlich.

Jul 26

Bei der Entwicklung von Webseiten werden (logischerweise) sehr oft Änderungen an HTML, CSS, JS, etc. durchgeführt. Dabei kann es passieren, dass Änderungen nach dem erneuten Laden der Seite (Refresh/Reload) nicht angezeigt werden, da die Seite bzw. die eingebundenen Dateien aus dem Cache des Browsers und nicht wie gewünscht erneut vom Server geladen werden. D.h. es sieht so aus, als ob die durchgeführten Änderungen (auch) nicht den gewünschten Effekt hervorrufen, obwohl sie das (wenn die komplette Seite vom Server geladen werden würde) vielleicht machen.

Abhilfe schafft es, wenn man den lokalen Cache im Browser deaktiviert. Dafür kann man entweder in den Einstellungen des Browsers die gewünschte Einstellung vornehmen, was aber beim Besuch von anderen Webseiten (beim “normalen” Surfen) nicht unbedingt erwünscht ist.

Für auf der Gecko-Engine basierende Mozilla-Browser gibt es die Web Developer Toolbar von Chris Pederick. Diese erlaubt es den Cache sehr einfach zu deaktivieren bzw. auch wieder zu aktivieren:

Eine weitere und wohl die bequemste Möglichkeit ist es, die Tastenkürzel der einzelnen Browser zu verwenden, die nicht nur die Seite neu laden, sondern auch den lokalen Cache der aktuellen Seite löschen:

  • Internet Explorer: Strg + F5 (Windows)
  • Firefox: Strg + F5 oder Strg + Umschalt + R (Windows) bzw. Cmd + Umschalt + R (Mac)
  • Safari: Cmd + Umschalt + R (Mac)
May 02

Im Internet Explorer wird standardmäßig eine vertikale Scrollbar angezeigt, selbst wenn der Inhalt der Webseite nicht länger als das Browserfenster ist. Das hat den Vorteil, dass eine zentrierte Webseite nicht “springt”, wenn der Inhalt je Seite länger/kürzer als die Höhe des Browserfenster ist. Manche Kunden, vor allem aber Grafiker stört das “springen” der Seite, aber es gibt einen einfache Workaround um das zu verhindern.

Lösung für den Firefox:

Hierfür fügt man im Stylesheet folgenden Code ein:

html {
  overflow: -moz-scrollbars-vertical;
}

Leider funktioniert diese Lösung nur im Firefox und wird von allen anderen Browsern ignoriert.

Die Allround-Lösung:

Im Stylesheet setzt man die Höhe von html auf 100% und fügt einen Außenabstand von 1px ein:

html {
  height: 100%;
  margin-bottom: 1px;
}

Diese Lösung funktioniert in allen gängigen Browsern, allerdings entsteht dadurch ein Scrollbereich von 1px. Auch das kann als gleich störend empfunden werden, wie das “Springen” der Seite selbst.

Die CSS3-Lösung:

Auch diese Lösung kann man als “Allround-Lösung” bezeichnen. Obwohl die overflow-y-Eigenschaft erst in CSS3 enthalten sein wird, wird sie von den gängigsten Browsern (Firefox 1.5+, Safari 1.0+, Konqueror 3.3+,…) bereits unterstützt:

html {
  overflow-y: scroll;
}

In diesem Fall wird die Scrollleiste deaktiviert dargestellt, wenn der Inhalt der Seite kürzer als die Höhe des Browserfenster ist, andernfalls wie gewohnt eine Scrollleiste dargestellt.

Opera interpretiert diese Eigenschaft leider (noch) nicht, weshalb man in diesem Fall die “Allround-Lösung” als Workaround für Opera in die Seite integrieren muss. Hierfür fügt man diesen in opera.css ein und integriert ihn wie folgt in die Seite:

<link rel="stylesheet" href="opera.css" type="text/x-opera-css" />
Mar 10

In Europa sind die Marktanteile des alternativen Firefox-Browser auf 28 Prozent Durchschnitt gestiegen, wobei die Anteile mit 15-45% je Land sehr unterschiedlich sind. So konnte der Browser nicht nur in beinahe allen Ländern zulegen, sondern der Trend zeigt in allen Ländern nach oben. Weiterlesen »

Mar 06

Wie berichtet besteht nun auch der Internet Explorer in der Version 8 als letzter der weitverbreiteten Browser den Acid2 Browser-Test. Deshalb war es an der Zeit einen neuen Test zu entwerfen, um die Fähigkeiten der Browser zu überprüfen. Acid3 möchte nun mehr als nur ein per CSS erzeugtes Lächeln von den Browsern sehen. Weiterlesen »

Feb 23

Auf FreeRice.com kann man spielend englische Vokabel lernen und als netter Nebeneffekt werden für jedes richtig assoziierte Wort 20 Reiskörner gespendet. Zu einem englischen Wort muss man aus vier Begriffen den dazupassenden auswählen. Die richtige Aussprache des ursprünglichen Wortes kann angehört und somit geübt werden. Weiterlesen »

Feb 22

Der quelloffene Browser Firefox hat die Marke von 500 Mio. Downloads seit der Veröffentlichung der Version 1.0 im November 2004 überschritten. Erst letzte Woche wurde Firefox 3 Beta 3 veröffentlicht, die stabile Version von Firefox 3 wird bereits demnächst erscheinen und die Downloads erneut ankurbeln. Weiterlesen »