Mar 08

Fügt man in TemplaVoila mehrere Elemente vom Typ “Content Elements” in ein “Page Template” oder “Flexible Content Element (FCE)” ein, so werden diese in der Seiten-Ansicht im Backend nebeneinander dargestellt. Für den Kunden ist es allerdings nicht intuitiv, wenn er Elemente aus beispielsweise dem Header links vom Inhalt, statt über dem Inhalt im Backend vorfindet. Übersichtlicher wäre es, wenn man im Backend die selbe Anordnung der Elemente festlegt, wie sie im Frontend ausgegeben werden.

Zuerst wechselt man zum Modul “Web > TemplaVoila” und im Seitenbaum (Pagetree) zum Ordner/SysFolder, in dem die “Data Structure (DS)” und “Template Object (TO)” gespeichert sind – üblicherweise nennt sich dieser Ordner “Storage Folder”. Dort bekommt man unter anderem die XML-Konfiguration zu sehen, wenn man die entsprechende DS editiert. In diesem XML fügt man im Bereich “<meta type=”array”>” den Abschnitt “<beLayout>” mit etwas HTML ein. Das XML sieht anschließend in etwa wie folgt aus:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
	<meta type="array">
		<langDisable>1</langDisable>
		<beLayout><![CDATA[
			<table border="0" cellpadding="2" cellspacing="2" width="100%">
				<tr>
					<td valign="top" width="100%" style="border: 1px dashed #000; padding: 5px 5px 5px 5px;" colspan="2">###field_headerads###</td>
				</tr>
				<tr>
					<td valign="top" width="50%" style="border: 1px dashed #000; padding: 5px 5px 5px 5px;">###field_content###</td>
					<td valign="top" width="50%" style="border: 1px dashed #000; padding: 5px 5px 5px 5px;">###field_rightsidebar###</td>
				</tr>
			</table>
              ]]></beLayout>
	</meta>
	<ROOT type="array">
		[...]
	</ROOT>
</T3DataStructure>

Der HTML-Code ist in diesem Fall zwar nicht sauber, entspricht aber der Standardausgabe von TemplaVoila mit ein paar Modifikationen. Platzhalter setzen sich aus dem Feldnamen und drei Raute-Zeichen davor und danach zusammen. Die Elemente field_headerads und field_content bzw. field_rightsidebar werden untereinander dargestellt, d.h. field_headerads in der ersten Zeile, field_content und field_rightsidebar in der zweiten Zeile.

Dec 15

Um einzelnen Inhaltselementen (Content Elements) ein unterschiedliches Aussehen verpassen zu können gibt es in TYPO3 die Eigenschaft “Rahmen” (“Border” im englischen Backend ). Diese können mit ein paar Zeilen TypoScript einfach hinzugefügt werden. Zuerst muss in der “TSconfig” (Web > Seite; “Seiteneigenschaften bearbeiten”; Registerkarte “Optionen”) der Hauptseite (Rootpage) der neue Rahmen definiert werden:

TCEFORM.tt_content.section_frame {
  removeItems = 1,5,6,10,11,12,20,21
  addItems {
    100 = Roter Teaser
    110 = Blauer Teaser
  }
}

Standardmäßig vorhandene Rahmen werden mit “removeItems” entfernt, neue mit “addItems” hinzugefügt – in diesem Fall werden ein “Roter Teaser” mit der ID 100 und ein “Blauer Teaser” mit der ID 110. Es empfiehlt sich IDs über 100 zu verwenden, damit es zu keinen Überschneidungen mit den vordefinierten Rahmen kommt, sollten diese auch verwendet/benötigt werden.

Als nächstes muss im “Setup” (Web > Template; “Setup bearbeiten”) der Hauptseite das nötige HTML mittels TypoScript hinzugefügt werden, damit das Inhaltselement mit dem ausgewählten “Rahmen” dargestellt werden kann:

tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
  key.field = section_frame

  100 = TEXT
  100.value = <div class="teaser-red"> | </div>

  110 = TEXT
  110.value = <div class="teaser-blue"> | </div>
}

Im CSS, das bereits eingebunden sein sollte, kann nun das Aussehen der beiden Teaser festgelegt werden:

div.teaser-red {
  border: 1px solid #ff0000;
  color: #ff0000;
}
div.teaser-blue {
  border: 1px solid #0000ff;
  color: #0000ff;
}
Dec 14

Seit Internet Explorer 7 (IE 7) wird ClearType (Anti-Aliasing) unter Windows unterstützt, auf anderen Plattformen (z.B. Mac OS X) ist das standardmäßig der Fall. Das hat zur Folge, dass Schriften durch das Anti-Aliasing geglättet dargestellt werden, was besonders auf LCD-Monitoren zu einer besseren Lesbarkeit führt. Bei relativ kleinen Schriften tritt dabei allerdings das Problem im IE 7 auf, dass aufgrund des Anti-Aliasings so gut wie kein Unterschied zwischen normaler und fetter Schrift mehr besteht, wie dies dem folgenden Bild entnommen werden kann:

Anti-Aliasing

Grundsätzlich sollte man nicht in die (bevorzugten) Einstellungen eines Benutzers eingreifen und diesen selbst entscheiden lassen, ob er ClearType verwenden möchte oder nicht. Allerdings gibt es Kunden die die Vorzüge der Benutzer ignorieren, Hauptsache die Seite sieht in allen Browsern möglichst ähnlich aus, auch wenn die Schrift nicht so schön und nicht so gut lesbar dargestellt wird. ClearType kann man unter Windows mit ein paar Zeilen CSS sehr einfach unterbinden:

body {
  background: #fff;
  filter: alpha(opacity=100);
  opacity: 1.0;
}

Als Hintergrund kann selbstverständlich auch ein Bild oder eine andere Farbe gewählt werden.

Zuerst sollte man allerdings den Kunden darauf hinweisen, dass es sich bei ClearType um eine Benutzerpräferenz handelt und diese übergangen werden sollte. Die Einstellung hierfür kann man unter “Extras > Internetoptionen”, Registerkarte “Erweitert” unter der Gruppe “Multimedia” mit dem Punkt “Immer ClearType für HTML verwenden” festlegen (Ein Neustart des Browsers ist erforderlich):

Immer ClearType für HTML verwenden
Aug 24

Im Web findet man sehr oft kleine JavaScript-Snippets die beim Aktivieren eines Textfeldes den Standard-Wert entfernen und bei leerem Feld diesen wieder einfügen. Der Code dazu sieht in etwa wie folgt aus:

<input type="text" name="text" value="Standard"
  onfocus="if (this.value == 'Standard') { this.value = ''; };"
  onblur="if (this.value == '') { this.value = 'Standard'; };" />

Das hat meiner Meinung nach zwei sehr große Nachteile: Zum einen geht der Standard-Wert automatisch verloren und man kann diesen nicht bearbeiten (sollte man diesen brauchen), zum anderen ist es nicht möglich das Feld leer zu lassen, außer der onblur-Event wird nicht eingefügt.

Abhilfe schafft die JavaScript-Funktion select() die den Text des Eingabefeldes markiert – der Code sieht dann in der einfachsten Form wie folgt aus:

<input type="text name="test" value="Standard" 
  onfocus="this.select();" /> 

Möchte man den HTML-Code frei von JavaScript-Funktionen halten, so kann man dies für alle Textfelder sehr einfach, in diesem Fall mit MooTools realisiert, bewerkstelligen:

window.addEvent('domready', function() {
  $$('input[type=text]').addEvents({ 'focus': function() { this.select(); } });
});
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.

May 16

Transparente PNG-Dateien werden im Internet Explorer 6 bzw. 5.5 standardmäßig nicht unterstützt. Anstelle der Transparenz wird eine graue Fläche angezeigt. Trotzdem möchte man sehr oft transparente PNG-Bilder benutzen, denn transparente GIFs erlauben keine Halbtransparenz (z.B. bei Schlagschatten) bzw. Ränder von Rundungen werden pixelig dargestellt. Damit transparente PNGs auch im Internet Explorer 6 bzw. 5.5. korrekt dargestellt werden, kann man einen PNGfix (z.B. von http://homepage.ntlworld.com/bobosola/) als JavaScript in die HTML-Seite integrieren:

<script defer type="text/javascript" src="js/pngfix.js"></script>

Das bringt jedoch den großen Nachteil, dass Hyperlinks auf bzw. um PNG-Bilder nicht mehr klickbar sind. Abhilfe schafft jedoch folgender CSS-Code in der Datei lt-ie7.css, der den Hyperlink wieder in der Vordergrund bringt (kann mit zusätzlichen Tags erweitert werden):

a {
  position: relative;
  z-index: 9999;
}

Dieser Code wird wie folgt in die HTML-Seite integriert:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/lt-ie7.css" />
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

Hintergrundgrafiken im CSS können für Internet Explorer 6 bzw. 5.5. (in der Datei lt-ie7.css) ohnehin recht einfach transparent gemacht werden, ein Fix ist somit hierfür nicht notwendig:

div#content {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/content-bg.png', sizingMethod='crop');
}

Zuerst wird das bereits für andere Browser vorhandene Hintergrundbild entfernt und dieses mit “filter” für den IE kompatibel wieder eingefügt.

Jan 20

Die sich noch in der Entwicklung befindlichen Browser Internet Explorer 8 und Firefox 3 bestehen den Acid2 Browser-Test. Bei diesem Test geht es darum CSS 2.1 korrekt zu interpretieren und ein Smiley samt Text, wie im nachstehenden Bild gezeigt, korrekt darzustellen. Weiterlesen »