blog.bartlweb - a technologist's external brain

Thema: Webentwicklung

RSS-Feed einbinden

Damit ein Browser das RSS-Icon für die Webseite anzeigt muss der existierende RSS-Feed mittel Header-Eintrag bekannt gegeben werden:

<link rel="alternate" type="application/rss+xml" title="my RSS-Feed" class="bw_link_external" target="_blank" href="http://www.domain.com/folder/feed.xml" />

XHTML Grundgerüst einer Webseite

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xHTML-Site</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    ...
  </body>
</html>

Definition Lists: dl, dt, dd

Definition Lists werden in HTML zum gruppieren von zusammengehörigen Elementen verwendet. Des weiteren kann man mit Ihnen das aussehen von Tabellen imitieren. Doch der eigentliche Sinn ist wie der Name bereits andeuten lässt die Auflistung von Definitionen, z.b. in einem Glossar oder Wörterbuch.

Beispiel

<dl>
  <dt>Christian</dt>
  <dd>ein Name</dd>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
</dl>

Beispiel – Mehrfachverwendung von dt

<dl>
  <dt>Christian</dt>
  <dt>Martin</dt>
  <dd>ein Name</dd>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
</dl>

Beispiel – Mehrfachverwendung von dd

<dl>
  <dt>Christian</dt>
  <dd>ein Name</dd>
  <dt>HTML</dt>
  <dd>eine Auszeichnungssprache</dd>
  <dd>Hyper Text Markup Language</dd>
</dl>

Sidebar von MediaWiki anpassen

Um die Sitebar von Mediawiki, die das Menü enthält, zu bearbeiten muss im Browser die Seite

http://www.domain.com/index.php/MediaWiki:Sidebar

aufgerufen und bearbeitet werden.

unrelavante Suchworte

Unten finden sie für Deutsch und Englisch die gängisten Bindewörter die in Suchanfragen verwendet werden und getrost aus dem Suchstring herausgefiltert werden können

Deutsch

am, auf, an, bei, wie, wo, was, wer, wann, in, die, das, der, ein, eine, zu, nach, ich, von, vom

Englisch

a, about, an, and, are, as, at, be, by, from, how, i, in, is, it, of, on, or, that, the, this, to, was, we, what, when, where, which, with

Meta-Tags mit Typo3 generieren

Typo3 bietet die Möglichkeit Description und Keywords für jede Seite individuell in den Seiteneigenschaften festzulegen. (Bei Typo3 Versionen < 4.2 muss auf den Seitentyp "Advanced" umgestellt werden um die Eingabefelder zu bekommen)

Das folgende TypoScript schreibt dabei die auf der Seite definierten Keywords und Description in den Header. Sollten auf der aktuellen Seite diese Informationen nicht gefunden werden, werden diese automatisch von der Seite mit der ID 1 (1 durch eine beliebige ID ersetzbar) verwendet.

page.meta {
  keywords = TEXT
  keywords.data = DB:pages:1:keywords
  keywords.override {
    required = 1
    data = field:keywords
  }
  description = TEXT
  description.data = DB:pages:1:description
  description.override {
    required = 1
    data = field:description
  }
  
  language = de
  revisit-after = 10 days
  robots = index, follow
}

robots.txt – Suchmaschinenverhalten für die eigene Webseite definieren

Es gibt für Suchmaschinen den Codex sich an den Meta-Tag robots bzw. an die Datei robots.txt beim Indizieren einer Seite zu halten. Über diese beiden Möglichkeiten kann man gezielt steuern welche Seiten von Suchmaschinen erfasst werden und welche nicht. Es ist auch die Kombination von robots.txt und Meta-Tags möglich, hier muss allerdings auf Abhängigkeiten geachtet werden.

robots.txt

Die Datei robots.txt muss im Root-Verzeichnis des Webservers liegen und damit unter http://www.domain.com/robots.txt erreichbar sein.

Focus mittels jQuery im InternetExplorer emulieren

IE6 und IE7 können die Pseudoklasse :focus nicht auf Formularelemente anwenden. Diese kann jedoch sehr einfach per jQuery und den Methoden focus() und blur() nachgerüstet werden.

Ein Problem gibt es hier allerdings mit den Selectboxen. Wird hier das focus()-Event ausgelöst schließt sich die Selectbox sofort wieder und erst ein zweiter Klick öffnet diese dann wirklich. Um dieses Problem zu umgehen kann das Event mousedown() anstatt focus() verwendet werden.

Screenreader

Ein Screenreader ermöglicht blinden oder stark sehbehinderten Personen die Benutzung eines Computers in dem dieser Bildschirminhalte vorliest. Unten finden Sie eine Liste mit den gängigsten kommerziellen und nicht kommerziellen Programmen.

kommerziele Screenreader

OpenSource Screenreader

Barrierefreie Links mit CSS

Um Links nicht nur per Maus-Hover sondern auch per Focus mit der Tastatur hervorzuheben muss für jeden link a:hover und a:focus definiert werden. IE6 kann kein a:focus, dafür wird a:active bei erhaltenem Focus angewandt.

Generell können die Pseudo-Klassen :hover und :focus auf alle HTML-Elemente angewandt werden, wobei :focus nur bei Links und Formularelementen zum Einsatz kommt. Zu beachten ist: IE6 kennt kein :focus und IE7 kennt :focus nur für Links.

:hover - mit der Maus über dem Element

:focus - Element hat focus

:active - Element ist angeklickt