Wir suchen eine/n engagierte/n  (Junior)Programmierer/in für Fixanstellung (20-40Stunden Woche) mit folgenden Anforderungen:

•           – fließend PHP, MySQL etc.

•           – sauberes XHTML und CSS

•           – HTML 5, Mobile

•           – JavaScript, Ajax, XML

•           – Vorteil: WordPress Know-How

•           – Kentnisse Web 2.0 APIs – Facebook, Twitter, Youtube

Es erwarten dich sehr spannende Web 2.0 Projekte, Ausbildungsmöglichkeiten, zukunftsorientierte Arbeitsweise, offene Strukturen, angenehmes Arbeitsumfeld.

Bei Interesse bitte melden unter office@liechtenecker.at oder ganz einfach mit einem Kommentar.

Dazu werden folgende Tags geboten: <abbr> und <acronym>

abbr

<abbr> verwendet man bei Abkürzungen, bei denen jeder Buchstabe einzeln ausgesprochen werden soll. Example: USA. <abbr>USA</abbr> wäre die korrekte Auszeichnung.

acronym

<acronym> ist dagegen für Wörter gedacht, die ganz ausgesprochen werden. Example: GUI. <acronym>GUI</acronym> wäre die korrekte Auszeichnung.

CSS

Aktuell ist in der letzten Spezifikation vom W3C <acronym> nicht mehr enthalten und wird durch <abbr> zusammengefasst. Ich verwende trotzdem noch beide Varianten, da Screenreader diese meistens richtig ausgeben. Diese beiden Tags lassen sich dementsprechend im CSS visualisieren.

In diesem Fall:

acronym, abbr { letter-spacing: .07em; border-bottom: .1em dashed #2ECCFF; cursor: help; }

http://www.abbreviations.com/

Ein neues Übersichtsportal bzw. Suchmaschine für Abkürzungen ging vor kurzem live und bietet eine Art Lexikon nach sortierten Rubriken http://www.abbreviations.com/

Die Befragung ergab auch, dass trotz meiner Vermutung CSS und Webstandards seien mehr verbreitet, noch immer 62,6% der Webseitenbesitzer mit veralteten Tabellenlayouts arbeiten. 32,8% nutzen für den Font-Tag sogar Inline-Styles. Stark verschachtelte Tabellenlayouts führen ebenso zu Ladeverzögerungen weil Browser die Konstrukte richtig zu Rendern versuchen, also bitte Webstandards und CSS büffeln!

84,8% der Web-Seiten haben Java-Script im Einsatz. Die durchschnittliche Größe der Skripte beträgt 9KB unkomprimiert und 6KB komprimiert. Die durchschnittliche Zahl der externen Skripte war 7.

Besonderen Anstieg hatte in den letzten Jahren Streaming-Media, die Verwendung wuchs um mehr als 600%. Interessant ist, dass 88% der Besucher einen Stream nach durchschnittlich 10 Sekunden wieder verlassen, insgesamt haben die Videos eine Laufzeit von 30 Sekunden.

Das "schöne" Web 2.0 hat mit seinen Technologien zu dem Wachstum an Objekten und JavaScripts beigetragen. Mit der Verbreitung von Breitband, wird heute grundsätzlich davon ausgegangen, dass jeder eine solch schnelle Verbindung genießen kann. In US sind noch immer 43% der Internetbenutzer Dial-up User. In Österreich lag 2007 die Breitband-Durchdringung nur bei 27%.

Bitte durchatmen und Webseiten so gut wie möglich auf kürzere Ladezeiten optimieren, der DFÜ-User wird dankbar sein, außerdem kommt bald der Sommer.

Aus aktuellem Anlass (für eine Modellrechnungsapplikation), hab ich mich entschlossen meinen Bloglesern die wichtigsten Eckdaten für eine zugängliche und strukturierte Tabelle nicht vorzuenthalten.

Tabellenzusammenfassung

<summary>Das ist die Zusammenfassung des Inhaltes der Datentabelle </summary>

Dieses Attribut wird direkt innerhalb des <table> Tags angewendet und soll als Inhaltsbeschreibung dienen. Das Summary ist besonders wichtig für die Barrierefreiheit, da es Screenreadern exklusiv zur Verfügung steht. Vergleichen kann man das Attribut mit dem ebenso sehr unerlässlichem “Alt-Text” von Bilddateien in Webseiten.

Tabellenbezeichnung und Zusammenfassung

<caption>Das ist die Tabellenüberschrift</caption>

Dieser Tag fungiert als Tabellenbezeichnung oder Überschrift, in diesem Fall würde ich aber empfehlen lieber über die Tabellen (zusätzlich oder stattdessen) ein klassisches Überschriften-Element zu setzen. (h1, h2..), da Screenreader-Benutzer besser zu solchen Überschriften springen können.

Struktur der Tabelle

Die 3 logischen Bereiche

• <thead> Tableheader
• <tbody> Tablebody
• <tfoot> Tablefooter

bieten die Möglichkeit einer passenden Aufteilung in die Bereiche: Kopf, Inhalt und Footer. Wichtig: Wenn Tableheader oder -footer verwendet werden muß unbedingt ein Tablebody-Element festgelegt werden, die 3 funktionieren nur zusammen. Eine Tabelle darf nur einen <thead> oder <tfoot>, aber mehrere <tbody>, um mehr Überschaubarkeit festzulegen.

Zeilen- oder Spaltenformatierung

Die Elemente <colgroup> und <col> ermöglichen eine spezifische Darstellung der Spalten. Für eine Formatierung einer ganzen Zeile kann das <tr> Element zum Ansteuern verwendet werden. Das Element <colgroup> ermöglicht eine oder mehrere mit dem <col> Element ausgezeichneten Spalten. Hier gibts ein paar Einbußen bei älteren Browsern.

Praxisbeispiel


<h2>Tabelle Performance</h2>
<table summary="Wie entwickelt sich mein Sparvertrag bei verschiedener Aktienperformance">
<caption>Performance</caption>
<colgroup>
<col id="Jahre" />
<col id="Performance_3" />
<col id="Performance_4" />
</colgroup>
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">3%</th>
<th scope="col">4%</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">2</th>
<th scope="col">3%</th>
<th scope="col">4%</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>10000</td>
<td>20000</td>
</tr>
<tr>
<td>2</td>
<td>20000</td>
<td>30000</td>
</tr>
<tr>
<td>3</td>
<td>30000</td>
<td>40000</td>
</tr>
</tbody>
</table>


Formatierung

In der CSS-Spezifikation gibt es 2 Varianten von Tabellenrahmen:

• seperate
• collapse

Bei seperate erhält jede Zelle einen eigenen Rahmen, während bei collapse die Zellen sich Ränder teilen, welches ich nützlicher finde. Damit die Tabelle ein Rasterlayout behält, sollte auch eine feste Breite festgelegt werden, der Rahmen hilft sicher optisch besser abzugrenzen und ein Padding verbessert das Lesen der Zellendaten. Alle anderen oben genannten Elemente können wie üblich mit CSS gestylt werden. Empfehlen kann ich die CSS Table Galler, ausprobieren lohnt sich.

Referenzen

• W3C-Empfehlung für Tabellen
• Web Standards Solutions
• Building Accessible Websites
• CSS Table Gallery
• Für Faule: Tabellencreator