yellowgreen designbüro

Empfehlungen für das Erstellen von Entwürfen im Webdesign

Tue, 15 May 2012 12:32:17 +0200

Grundsätzlich lässt sich alles realisieren, jedoch kann ein fachlich nicht korrekt erstellter Entwurf zu vielen Problemen führen:

Die Kosten für die Realisierung steigen deutlich, da das Material aufbereitet oder gar nacherstellt werden muss.
Die grafische Treue kann nicht eingehalten werden, da wichtige Informationen im Entwurf nicht klar ersichtlich sind (Schriftgröße, Schriftfarbe, Abstände etc.).
Die spätere Pflege mit einem Content-Management-System (CMS) wird erschwert oder ist in bestimmten Bereichen nicht möglich, da grundlegende technische Aspekte nicht bei der Gestaltung berücksichtigt wurden.

Es empfiehlt sich daher, einige Regeln einzuhalten und die technische Realisierung in der Entwurfsphase mitzudenken. Hier finden Sie einige Ratschläge – wenn Sie zudem Fragen haben sollten, können Sie mich gerne kontaktieren.

Wie breit darf und sollte das Layout sein?

Die Breite der Website ist grundsätzlich von der Monitorauflösung (Größe des Displays) abhängig. Hier sollte man vom niedrigsten Standard ausgehen, den Tablets und Netbooks vorgeben: 1024 px. Davon abziehen müssen Sie jedoch noch etwas Rand, links und rechts, sowohl für die Rollleiste als auch für den visuellen Eindruck. Damit kommt man auf die im Webdesign üblichen 960 px Maximalbreite. Dieser Wert hat sich in den letzten Jahren bewährt und etabliert.

Können Schatten und andere Effekte verwendet werden?

Grundsätzlich ja, jedoch sollten Sie immer davon ausgehen, dass solche Effekte nur in Bildform verwendet werden können. Nur wenige Effekte (wie Transparenz und Schlagschatten) können direkt in CSS, also mit technischen Mitteln auf der Website dargestellt werden. Wenn Sie also einen Text mit einem Schlagschatten versehen, müsste dieser als Grafik eingebunden werden, was aus vielerlei Hinsicht nicht zu empfehlen ist. Deshalb gilt: Effekte nur bei grafischen Elementen.

Um die Effekte später sauber als Grafiken exportieren zu können, belassen Sie diese bitte in der Quelldatei (PSD) und verwenden Sie die Effekte so, dass diese leicht exportiert werden können (ein Overlay zum Beispiel lässt sich unter Umständen nicht exportieren). Zudem ist es hilfreich, wenn die Einstellungen für den Effekt einsehbar sind, um zum Beispiel Schlagschatten mit CSS abbilden zu können.

Welche Schriftglättung soll ich verwenden?

Die beste Methode die Schriftglättung unter Windows in Photoshop nachzubilden, ist Sharp. Für Text, der später als Grafik eingebunden werden soll, sollte die Schriftglättung jedoch nicht nachgebildet werden. Smooth wäre hier die richtige Einstellung.

Die beste Methode die Schriftglättung des Browsers in Photoshop nachzubilden, ist die Einstellung scharf (sharp). Für Text, der später als Grafik eingebunden werden soll (wie zum Beispiel bei Logos), sollte die Schriftglättung jedoch nicht nachgebildet werden. Hier ist weich (smooth) zu wählen.

Welche Schriftarten können verwendet werden?

Grundsätzlich alle, die ausdrücklich für die Einbindung in Websites freigegeben wurden. Kommerzielle Schriften gehören hier seltener dazu. Aber auch nicht jede kostenlose Schrift darf eingebunden werden. Um sicherzustellen, dass es nicht zu rechtlichen Verstößen gegen die Lizenzen des Urhebers kommt, können Dienste wie Google Web Fonts (alle dort verfügbaren Schriften) oder auch Font Squirrel (alle Schriften mit dem Hinweis „@font-face compatible”) verwendet werden. Diese Dienste haben zudem den Vorteil, dass die Schriften nicht mehr konvertiert werden müssen und die Einbindung dadurch sehr einfach ist (was Zeit und Geld spart).

Was muss ich bei Abständen und Maßeinheiten beachten?

Ein Entwurf wird im Webdesign immer als Vorlage (Template) angesehen und entsprechend realisiert, wobei Textformatierungen und Abstände als Vorgaben oder Stile definiert sind. Erstellt ein Benutzer dann im Content-Management-System eine Hauptüberschrift, muss er nicht erst Schriftart, Farbe, Größe usw. angeben. Die Website stellt die Überschrift automatisch so wie in der Vorlage definiert dar.

Aus diesem Grund ist es wichtig einheitliche und saubere Formatdefinitionen im Entwurf anzugeben und alle Angaben müssen auch einsehbar sein, um sie übertragen zu können. Zudem ist darauf zu achten, dass Abstände einer gewissen Logik folgen und ebenso einheitlich sind. Im Idealfall verwenden Sie Abstände in Teilschritten: 10 px, 25 px, 50 px, 100 px usw. Damit erhält Ihr Entwurf automatisch ein gewisses Raster, das auch proportionale Aspekte berücksichtigt.

Welche Informationen müssen dem Entwurf zu entnehmen sein?

Grundsätzlich alle verfügbaren, weshalb Sie Effekte möglichst nicht einrechnen oder Formatierungen „von Hand” vornehmen sollten. Sämtliche Elemente des Entwurfs sollten leicht zu exportieren und weiterverarbeitbar sein. Text, der zum Beispiel in Majuskeln (Großbuchstaben) ausgegeben werden soll, sollte auch mit der entsprechenden Funktion hierfür im Entwurf angelegt und nicht mit gedrückt gehaltener Shift-Taste geschrieben werden.

Was muss ich bei der Positionierung von Elementen beachten?

Die Tatsache, dass in Grafikprogrammen alles frei positionierbar ist, verleitet schnell dazu willkürlich Elemente im Entwurf zu platzieren. Die technische Realisierung unterliegt jedoch gewissen Regeln. Wenn Sie für das Web gestalten, gehen Sie eher von einem Textdokument und den hier gegebenen Positionierungsmöglichkeiten aus. Wenn Ihr Entwurf grundsätzlich in einem Textdokument realisierbar ist, stellt auch die Realisierung als Website keine Probleme dar.

Was muss ich bei Textboxen bzw. Textrahmen beachten?

Die Schriftgröße ist im Web grundsätzlich ein relativer Wert. Er kann vom Benutzer individuell geändert werden, um das Schriftbild zum Beispiel durch größere Schrift lesefreundlicher zu machen. Aber auch die einzelnen Betriebssysteme (Windows, Max OS X, Linux) bringen leichte Abweichungen mit sich. Deshalb sollten Schriftgrößen immer so eingesetzt werden, dass „Luft” nach oben bleibt. Passgenaue Umbrüche ergeben keinen Sinn, da der Umbruch bei Erhöhung der Schriftgröße an anderer Stelle erfolgen würde. In Textboxen bzw. -rahmen mit fester Höhe wird der Text schnell abgeschnitten oder läuft über die Abgrenzung hinaus, wenn er überraschenderweise eine weitere Zeile benötigt, da die Schrift im Browser etwas größer ausfällt als im Entwurf geplant. Letzteres können Sie übrigens umgehen, indem die Höhe solcher Textelemente nicht fix sondern flexibel realisiert wird.

Mitglieder (Frontend-Benutzer)

Mon, 17 Oct 2011 11:13:00 +0200

Registrierung

Über ein Benutzerkonto auf unserer Website erhalten Sie Zugang zu ansonsten gesperrten Bereichen und können sich im Onlineshop anmelden, was die Bestellung erheblich vereinfacht, da Sie nicht mehr bei jeder Bestellung Ihre persönlichen Daten (Name, Anschrift etc.) an der „Kasse” angeben müssen. Die Registrierung ist selbstverständlich kostenlos und jederzeit kündbar.

Falls Sie bereits registriert sind und Ihre persönlichen Daten lediglich bearbeiten möchten, können Sie dies hier tun: Persönliche Daten. Falls Sie sich erneut registrieren und ein neues Benutzerkonto erstellen möchten, melden Sie sich bitte zuerst ab und kehren Sie dann zu dieser Seite zurück.

Registrierung: Bestätigung

Danke für Ihre Anmeldung. Bevor wir Ihr Benutzerkonto freischalten können, ist es nötig Ihre E-Mail-Adresse zu überprüfen, um einen Missbrauch dieser ausschließen zu können. Wir haben Ihnen hierfür soeben eine E-Mail geschickt. Bitte klicken Sie den Link (Verweis) in der E-Mail an, um Ihre E-Mail-Adresse zu bestätigen. Ihr Benutzerkonto ist anschließend freigeschaltet und uneingeschränkt nutzbar.

Registrierung: E-Mail-Bestätigung

Vielen Dank für Ihre Registrierung auf ##domain##.

Bitte klicken Sie auf diesen Link ##link## um Ihre Registrierung abzuschließen und Ihr Konto zu aktivieren. Wenn Sie keinen Zugang angefordert haben, ignorieren Sie bitte diese E-Mail. Wir löschen Ihre Daten dann selbständig nach einiger Zeit aus unserem System.

--
Signatur

Registrierung: Abgeschlossen

Die Aktivierung Ihres Benutzerkontos war erfolgreich und Ihre Registrierung für unsere Website ist abgeschlossen. Wenn Sie Ihren persönlichen Zugang vervollständigen oder anderweitig bearbeiten möchten, können Sie dies hier tun: Persönliche Daten.

Anmeldung

Wenn Sie bereits einen persönlichen Zugang für unsere Website haben, können Sie sich hier mit Ihrem Benutzernamen und Passwort anmelden. Falls Sie einen neuen Zugang erstellen möchten, können Sie dies hier tun: Benutzerregistrierung.

Passwort vergessen

Falls Sie Ihr Passwort für Ihren persönlichen Zugang für unsere Website vergessen haben sollten, können Sie hier ein neues erstellen lassen und erhalten so wieder Zugang zu Ihrem Benutzerkonto. Sie benötigen hierfür nur Ihre E-Mail-Adresse, mit der Sie sich bei uns registriert haben. Wir senden Ihnen dann an diese Adresse eine E-Mail mit den nötigen Daten, um Ihr Passwort ändern oder gegebenenfalls wiederherstellen zu können.

Passwort vergessen: Bestätigungs-E-Mail

Sie haben ein neues Passwort für Ihren persönlichen Zugang auf ##domain## angefordert.

Bitte klicken Sie auf diesen Link ##link## um das neue Passwort zu erstellen.

Wenn Sie diese E-Mail nicht angefordert haben, kontaktieren Sie uns bitte umgehend, da eventuell Ihr Benutzerkonto missbräuchlich verwendet wurde.

--
Signatur

Passwort vergessen: Bestätigung

Wir haben soeben eine E-Mail an die von Ihnen angegebene E-Mail-Adresse versendet, mit der Sie ein neues Passwort für Ihren persönlichen Zugang erstellen können. Um das neue Passwort zu erstellen, klicken Sie bitte auf den Link in der E-Mail. Sie werden dann zur entsprechenden Eingabemaske weitergeleitet.

Passwort vergessen: Abgeschlossen

Ihr Passwort wurde aktualisiert. Bitte verwenden Sie zukünftig nicht mehr das alte Passwort für Ihre Anmeldung. Falls Sie Ihr Passwort zu einem anderen Zeitpunkt noch einmal ändern müssen, können Sie dies hier tun: Persönliche Daten.

Persönliche Daten

Hier können Sie Ihre Registrierungsdaten vervollständigen oder anderweitig bearbeiten, um zum Beispiel Ihr Passwort oder Ihre E-Mail-Adresse zu ändern. Falls Sie stattdessen Ihr Konto löschen möchten, können Sie dies hier tun: Konto löschen.

Konto löschen

Wenn Sie den Zugang zu unserer Website dauerhaft nicht mehr nutzen möchten, können Sie hier Ihr persönliches Benutzerkonto löschen. Wir entfernen daraufhin alle Daten sicher aus unserem System.

Konto löschen: Abgeschlossen

Ihr Benutzerkonto und damit Ihr Zugang zu unserer Website wurde erfolgreich gelöscht. Ihre Daten werden bis zur nächsten routinemäßigen Bereinigung der Datenbank in unserem System belassen. Falls Sie Ihr Konto irrtümlich gelöscht haben und es wiederherstellen lassen möchten, kontaktieren Sie uns bitte. Ebenso können Sie uns kontaktieren, um die endgültige Löschen Ihrer Daten aus dem System vorzeitig zu veranlassen.

Falls Sie unser Angebot zu einem anderen Zeitpunkt wieder nutzen möchten, können Sie sich jederzeit erneut registrieren: Registrierung.

JPEGmini: Weniger Kilobyte, schnellere Ladezeit

Thu, 15 Sep 2011 11:27:38 +0200

Programme und Webdienste, die schwergewichtigen Bildern und Grafiken auch noch die letzen Kilobyte aussaugen, gibt es viele. Im Grunde halten sie aber alle nicht mehr, als jedes einfache Progrämmchen auch verspricht. Die 3 KB, die eventuell gegenüber der „Für-Web-speichern”-Funktion in Photoshop eingespart werden, rechtfertigen in der Regel nicht den Extraufwand. Für JPEGmini wurde laut Betreiber jedoch ein völlig neuer Algorithmus entwickelt, der nicht nur ein paar Kilobyte aus den Bildern quetscht, sondern die Dateien um das bis zu Fünffache verkleinert.

Im Test mit 15 Bildern (alle bereits in Photoshop für die Web optimiert) konnte ich immerhin das bis zu Dreifache herausholen. Testobjekt waren 910 × 235 px große Bilder, die in einem Header untergebracht rotieren. Bei vier Bildern brachten es zuvor auf knapp 500 KB, die der Header allein verschlungen hätte. Nun, nach der Reduktion, werden dem Besucher nur noch rund 250 KB zugemutet.

JPEGmini arbeitet also durchaus effizient – und regt geradezu die Phantasie an, was bei einer derartigen Reduktion im Bereich Webdesign / Layout alles so möglich wäre …

Link: JPEGmini

Rechnungen per E-Mail bald auch ohne Signatur rechtlich zulässig

Wed, 29 Jun 2011 09:49:53 +0200

Wie viele andere verschicke ich meine Rechnungen ohnehin der Einfachheit geschuldet per E-Mail und nur auf direkte Anfragen per Post. Bisher war dieses Verfahren ohne eine digitale Signatur (eine Art digitales Zertifikat) für den E-Mail-Verkehr jedoch nicht zulässig – weshalb die Anschaffung einer solchen Signatur immer irgendwie auf meiner Agenda stand. Nun hat sich das aber erledigt.

Nach rund elfjähriger Pflicht soll am 30. Juni die Zwangssignatur enden. Die Beweisführung der „Echtheit der Herkunft” per E-Mail versandter Rechnungen ist dann dem Unternehmen selbst überlassen. Und dafür könne „bereits ein entsprechend eingerichtetes Rechnungswesen als geeignetes Kontrollverfahren dienen”.

Ein Aber sei jedoch erwähnt: Das neue Steuervereinfachungsgesetz, das die Neuregelung für 2011 und rückwirkend (!) gültig machen soll, ist zwar bereits vom Bundestag verabschiedet worden, die Zustimmung des Bundesrates fehlt jedoch noch. Es sei aber zu erwarten, dass der entsprechende Artikel im neuen Steuervereinfachungsgesetz die Hürde nimmt und damit rechtskräftig wird.

(Quellen: heise online, Bundesfinanzministerium [1], [2])

Geht’s auch ohne Scrollen?

Tue, 31 May 2011 09:31:20 +0200

Die Seiten sind jetzt reine Scrollseiten. Kann man das ändern, so dass nicht gescrollt werden muss?

Die Unterscheidung in Scollseiten und Nicht-Scrollseiten ist eher ungewöhnlich. Letztlich ist es abhängig von der Größe des Displays, ob man eine Seite scrollen muss oder nicht. Je nachdem, wie viel von der Seite auf das Display passt. Bei einem Netbook, mit den üblichen mageren 10 Zoll, muss man zum Beispiel relativ viel scrollen. Bei einem ausgewachsenen Display, sagen wir 30 Zoll, muss man hingegen kaum noch oder gar nicht mehr scrollen – und hat nach unten immer noch Platz.

Das ist der grundlegende Unterschied zwischen Print und Web: Das Medium besitzt kein real definierbares Format, wie zum Beispiel eine Broschüre oder ein Blatt in DIN A4. Im Web ist eben alles relativ … zum Medium. Das in letzter Instanz dann das Browserfenster des Nutzers ist.

MoreCSS 1.0.3 mit Text / Font resizer

Thu, 24 Mar 2011 14:43:33 +0100

Für MoreCSS, die kleine JavaScript-Bibliothek für all die kleinen Dinge zwischendurch, gab es nun sehr lange keine Aktualisierung mehr. Beinahe zwei Jahre nach der letzten Version, gibt es nun ein paar Bugfixes und eine ganz neue Funktion: text-resize. Letztere war dann auch der Anstoß die nun aktuelle Version 1.0.3 zu veröffentlichen.

Alle Änderungen sind wie immer im Changelog beschrieben und die neue Funktion kann hier ausprobiert werden: text-resize

Pagemap Imagewall 1.0

Sat, 17 Jul 2010 15:06:52 +0200

Für die kleine Web-Galerie zwischendurch gibt es nun Pagemap Imagewall, das drüben bei getpagemap.com seit heute kostenlos und zur freien Verfügung steht. Eine vollwertige Galerie, in einer rund 50 KB kleinen Datei, die nur in ein Verzeichnis mit Bildern kopiert werden muss — und schon generiert das Skript Thumbnails in drei konfigurierbaren Größen und bietet mit Lytebox sogar eine Diashow-Funktion an.

Über eine einfache Konfigurationsdatei kann die Galerie vielfältig angepasst werden. Zum Beispiel zusätzliche Links zu Home, Contact und Imprint im Footer platzieren, ein Logo oder Header mit Link zur Startseite einbinden, eine Hintergrundfarbe oder eine Hintergrundgrafik angeben … und noch einiges mehr.

Pagemap Imagewall ist eine Weiterentwicklung von MOSAIC MINI, das sich seit seiner Veröffentlichung im Jahr 2006 großer Beliebtheit erfreut und rund 390.000 aktive Nutzer zählt. In dem Skript sind nun sämtliche Ideen und Wünsche von Nutzern zusammengeflossen, die sich im Laufe der Zeit angesammelt hatten und für spätere Updates geplant waren.

Zum kostenlosen Download

Uploads (uploads)

Tue, 17 Jun 2008 14:20:43 +0200

Standardmeldungen unterdrücken

Entfernt standardisierte Hinweise bei Uploads.

tt_content.uploads.20.classes {
   addFirst = 0
   addLast = 0
   addOdd = 0
   addEven = 0
   ext.prefixIfFirstNumber =
}

Eigenes Template (mit Größen-Formatierung)

Weist TYPO3 an, die angegebene Template-Datei mit zusätzlicher Angabe der Dateigröße zu verwenden.

tt_content.uploads.20.layout {
   global = ###FILE###
   
   fileSize {
      layout = (###CLASS###, ###SIZE### ###SIZEFORMAT###)
      char = none
      format = auto
      desc = Bytes|kB|MB
      round = 0
   }
   
   file >
   file.cObject = COA
   
   file.cObject{
      wrap = |

      10 = TEXT
      10.value = ###DESCRIPTION### ###FILESIZE###
   }
}

E-Mail-Formular (mailform)

Tue, 17 Jun 2008 14:18:50 +0200

Checkboxen links positionieren

Ordnet in Formularen Checkbox und Labels neu an.

tt_content.mailform.20.CHECK.layout = 
###FIELD### ###LABEL###

CSS-Klassen für spezifische Felder definieren

Fügt bestimmten Feldern eigene CSS-Klassen hinzu.

tt_content.mailform.20.params.input = class="text"
tt_content.mailform.20.params.check = class="checkbox"

Suche (tx_indexedsearch)

Tue, 17 Jun 2008 14:16:43 +0200

Global definieren

Aktiviert die Indexierung der Seiten für die Suchmaschine.

page.config.index_enable = 1

Template definieren

Weist TYPO3 an, die angegebene Template-Datei zu verwenden.

plugin.tx_indexedsearch.templateFile = fileadmin/templates/search.html

Hinweise deaktivieren

Entfernt die textlichen Hinweise in den Suchergebnissen.

plugin.tx_indexedsearch.show.rules = 0

News (tt_news)

Tue, 17 Jun 2008 13:43:27 +0200

Für die News gibt es verschiedene Ausgabearten (wie zum Beispiel „LIST”, „LATEST”, „SINGLE” usw.) die getrennt von einander in TypoScript konfiguriert werden. Achten Sie in den Beispielen auf die Angabe der Ausgabeart, um diese zu verändern. Zum Beispiel kann „displayList” in „displayLatest” geändert werden.

Template definieren

Weist TYPO3 an, die angegebene Template-Datei zu verwenden.

plugin.tt_news.templateFile = fileadmin/templates/news.html

Untertitel ohne Absatz und andere überflüssige Tags entfernen

Entfernt überflüssige Tags und trägt somit dazu bei, den HTML-Quelltext sauber zu halten.

plugin.tt_news.general_stdWrap >
plugin.tt_news.displaySingle.title_stdWrap.wrap >

Datum und Zeit formatieren

Ermöglicht die individuelle Ausgabe von Datum- und Zeitangaben in den News.

plugin.tt_news.displayList.time_stdWrap.strftime = %R
plugin.tt_news.displayList.date_stdWrap.strftime = %d.%m.%y

Anzeige auf X Beiträge begrenzen

plugin.tt_news.latestLimit = 3

Textplatzhalter anpassen

Ermöglicht die individuelle Angabe von Platzhaltern wie „more”.

plugin.tt_news._LOCAL_LANG.de.more = … mehr
plugin.tt_news._LOCAL_LANG.de.backToList = zurück zum Thema %s

Pagebrowser ohne Tabelle und Standardausgaben

Bereinigt den Quelltext von veralteten HTML-Methoden und -Tags.

plugin.tt_news.usePiBasePagebrowser = 1

plugin.tt_news.pageBrowser {
    showResultCount = 0
    showFirstLast = 0
    showRange = 0
    browseBoxWrap = |

    activeLinkWrap = |
}

Navigation (HMENU, TMENU, GMENU)

Tue, 17 Jun 2008 13:36:11 +0200

Text-Navigation mit nummerierten IDs und Tags im Link

Fügt einer Textnavigation eindeutige Klassen und IDs zu.

page.10.marks.NAVIGATION = HMENU
page.10.marks.NAVIGATION {
      1 = TMENU
      1.noBlur = 1
      1.wrap = |

      
      1.NO = 1
      1.NO.stdWrap.prepend = HTML
      1.NO.stdWrap.prepend.value = 
      1.NO.stdWrap.append = HTML
      1.NO.stdWrap.append.value = 
      1.NO.allWrap = |

      1.NO.allWrap.insertData = 1
}

Grafische Navigation

Generiert über die Grafikfunktionen von PHP oder ImageMagic Bilddateien für die Navigation in beliebigen Schriftarten.

# Create a TYPO3 marker in your HTML template, for example: 

page.10 {   
   marks.YOUR_NAVIGATION = HMENU
   marks.YOUR_NAVIGATION.1 = GMENU
   marks.YOUR_NAVIGATION.1.NO {
      backColor = #FFFFFF
      XY = 163,25
      imgParams = class="normal"

      5 = IMAGE
      5.file = fileadmin/navigation-background.gif

      10 = TEXT
      10.fontColor = #000000
      10.text.field = title
      10.fontFile = fileadmin/Arial.ttf
      10.fontSize = 15
      10.offset = 0,18
      10.align = center
      10.text.case = upper
   }
}

Brotkrumen-Navigation (Breadcrumb)

Generiert eine so genannte Brotkrumen-Navigation (Breadcrumb), der als Navigationspfad dient.

# Create TYPO3 marker in your HTML template, for example: 

page.10.marks.YOUR_BREADCRUMB = HMENU
page.10.marks.YOUR_BREADCRUMB {
      special = rootline
      special.range = 0|-1
      includeNotInMenu = 1
      
      1 = TMENU
      1.wrap = |

      
      1.NO.allWrap = |

      1.CUR = 1
      1.CUR.allWrap = |

}

Individuelle Navigation (z.B. für Footer)

Generiert eine individuelle Navigation aus beliebigen Seiten.

# Create a TYPO3 marker in your HTML template, for example: 

page.10.marks.YOUR_FOOTER = HMENU
page.10.marks.YOUR_FOOTER {
      special = list
      special.value = 11 # Set page ID
      includeNotInMenu = 1
      
      1 = TMENU
      1.NO.allWrap = |
}

Header und Content (config, page, lib)

Tue, 17 Jun 2008 13:15:01 +0200

Saubere Quelltexte in XHMTL und UTF-8

Ändert den DOCTYPE in XHTML Transitional, die Zeichenkodierung in UTF-8, setzt die Standardsprache und entfernt unnötiges JavaScript sowie HTML-Kommentare.

config {
   doctype = xhtml_trans
   metaCharset = UTF-8
   additionalHeaders = Content-Type:text/html;charset=utf-8

   htmlTag_langKey = de-de
   language = de
   locale_all = de_DE

   removeDefaultJS = 1
   disablePrefixComment = 1
}

tt_content.stdWrap.dataWrap >

Eigene Angaben im Header-Comment

Fügt dem HTML-Header einen Kommentar hinzu.

config.headerComment (
    Made by yellowrgreen.de
)

META-Tags hinzufügen

Fügt dem HTML-Header beliebige META-Tags hinzu.

page.meta.copyright = yellowgreen.de

Seitentitel anpassen

Ermöglicht eine individuelle Gestaltung des Seitentitels, welcher in der Browser-Seitenleiste angezeigt wird.

config.noPageTitle = 2
page.headerData.5 = TEXT
page.headerData.5.field = subtitle // title
page.headerData.5.wrap = Static page title // |

Stylesheets einbinden

Erzeugt automatisch die nötigen Tags im HTML-Header zum Einbinden von CSS-Dateien.

page.includeCSS {
   file10 = fileadmin/templates/screen.css
   file10.media = screen
   file20 = fileadmin/templates/print.css
   file20.media = print
}

Individuelle Header-Angaben

Fügt dem HTML-Header beliebige Angaben hinzu.

page.headerData.30 = TEXT
page.headerData.30.value (
   
)

Template definieren

Weist TYPO3 an, die angegebene Template-Datei zu verwenden.

page.10 = TEMPLATE
page.10 {
   template = FILE
   template.file = fileadmin/templates/index.html
}

TYPO3-Inhalte (content elements) ausgeben

Bindet die in TYPO3 vordefinierten Spalten (links, rechts etc.) in das Template ein.

# Create TYPO3 markers in your HTML template, e.g. 

page.10 {
   # Content from main column
   marks.YOUR_CONTENT = CONTENT
   marks.YOUR_CONTENT < styles.content.get

  # Content from left column
  subparts.YOUR_CONTENT_LEFT < styles.content.getLeft

  # Content from right column
  subparts.YOUR_CONTENT_RIGHT < styles.content.getRight
}

Text oder HTML ausgeben

Gibt beliebigen Text oder HTML an der Position des Markers aus.

# Create a TYPO3 marker in your HTML template, e.g.

# Text output
page.10.marks.YOUR_MARKER = TEXT
page.10.marks.YOUR_MARKER.value = yellowgreen
page.10.marks.YOUR_MARKER.insertData = 1

# HTML output
page.10.marks.YOUR_MARKER = HTML
page.10.marks.YOUR_MARKER.value =

yellowgreen

page.10.marks.YOUR_MARKER.insertData = 1

Grafische Überschriften

Generiert über die Grafikfunktionen von PHP oder ImageMagic Bilddateien für Überschriften in beliebigen Schriftarten.

Header1 = IMAGE
Header1 {
  file = GIFBUILDER
  file {
    XY = [10.w]+5,55
    transparentColor = #F3F4F7
    backColor = #F3F4F7

    10 = TEXT
    10.text.field =
    10.text.current = 1
    10.fontSize = 34
    10.offset = 0,45
    10.fontFile = fileadmin/Arial.ttf
    10.fontColor = #182963
  }
}

lib.stdheader.10.1 < Header1

Sprachenabhängige Ausgabe

Konfiguriert TYPO3 für eine mehrsprachige Website.

# Basic config for multi language support

config.linkVars = L
config.sys_language_uid = 0
config.language = de

[globalVar = GP:L = 1]
   config.sys_language_uid = 1
   config.language = en
[global]

# Special output in different languages
# Create TYPO3 markers in your HTML template, for example: 

page.10.marks.YOUR_MARKER = TEXT

[globalVar = GP:L = 1]
   page.10.marks.YOUR_MARKER.value = I speak English!
[else]
   page.10.marks.YOUR_MARKER.value = Ich spreche Deutsch!
[global]

Spam-Schutz für E-Mail-Adressen

Wandelt E-Mail-Adressen die über den RTE eingegeben wurden so um, dass sie von den meisten Spam-Spidern nicht mehr gelesen werden können.

# Change @ to own char …

config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)

# … or convert into ASCII

config.spamProtectEmailAddresses = ascii

Vordefinierte Inhalte für den RTE

Ersetzt Marker im RTE durch beliebige Inhalte.

# Write ###test### in RTE to include 

constants.test = Test!

Seitentitel innerhalb einer Seite ausgeben

Gibt den aktuellen Seitentitel über einen Marker aus.

# Change page level with "leveltitle:X"

page.10.marks.TITLE = COA
page.10.marks.TITLE {
   10 = TEXT
   10.data = leveltitle:1
   20 = TEXT
   20.value = /
   30 = TEXT
   30.data = leveltitle:2
}

Externe Verweise in neuem Fenster öffnen

Konfiguriert TYPO3 so, dass standardmäßig alle Links im selben Fenster geöffnet werden.

# Put this in constants

styles.content.links.target = _self

Seiten (config)

Tue, 17 Jun 2008 12:51:34 +0200

Cache deaktivieren

Deaktiviert den Seiten-Cache für die gesamte Website.

config.no_cache = 1

Sprechende URLs

Generiert URLs nach dem Muster yellowgreen.de/test.html.

config.simulateStaticDocuments = 1
config.simulateStaticDocuments_noTypeIfNoTitle = 1