HTML5

Ein Slider in HTML5

Beim Erstellen von Internetseiten sind gelegentlich Werteeingaben zu realisieren, die man besser und ergonomischer mit einem Slider als mit einem Texteingabefeld realisieren kann. In HTML5 gibt es jetzt die Möglichkeit, mit dem neuen Input-Typ "range" einen solchen Slider zu realisieren. Der Code dazu hat mehrere Attribute. Mit "min" und "max" wird der Bereich eingegrenzt, mit "value" der Startwert angegeben und "step" bestimmt die Auflösung. <input min="0" max="50" value="0" step="5" id="slider" name="range" onchange="showValue(this.value)" type="range"> Ein wenig Javascript dazu sorgt dafür, dass hinter dem Slider der jeweils eingestellte Wert angezeigt wird: <span id="range">0</span><br> <script type="text/javascript"> function showValue(newValue) { document.getElementById("range").innerHTML=newValue; } </script> Wenn statt des Sliders ein einfaches Textfeld mit dem Startwert dahinter angezeigt wird, ist Ihr Browser noch nicht in der Lage, mit dem Input-Typ "range" umzugehen. Probieren Sie es zum Beispiel mit Chrome 21.0.x.

GSL-Team2012-07-30T10:51:32+02:00Juli 30th, 2012|HTML, Javascript|Kommentare deaktiviert

HTML5-Tag datalist

Mit der Einführung des <datalist> Elements in die HTML5 Spezifikation wurde ein Weg geschaffen, dem Benutzer eine freie Texteingabe in ein <input> Element zu ermöglichen. Dabei werden mit Hilfe der hinterlegten <option> Einträge die entsprechenden Eingabewerte angezeigt, und der Benutzer kann sie auswählen, wenn er es wünscht. Dabei kann das <datalist>-Tag nur in Verbindung mit einem <input> Element genutzt werden. Die Verknüpfung wird dabei durch das list-Attribut im <input> Element mit der id des <datalist> Elements realisiert. Ein Beispiel dazu: <input type="text" id="Nationen" list="Land"> <datalist id="Land"> <option value="Deutschland"> <option value="Deutschland"> <option value="Deutschland"> </datalist> Das neue Tag eignet sich auch besonders gut zur Realisierung von Vorschlagswerten für Eingabefelder wie beispielsweise bei Google Suggest.

GSL-Team2012-07-25T10:24:57+02:00Juli 25th, 2012|HTML|Kommentare deaktiviert

Zwei Wege zum HTML5-Standard

Die zwei Arbeitsgruppen, die sich mit der Standardisierung von HTML5 beschäftigen, gehen diametral entgegengesetzte Wege. Das World Wide Web Consortium (W3C) will in den nächsten Jahren eine Spezifikation für HTML5 veröffentlichen und die Web Hypertext Application Technology Working Group (WHATWG), die damals mit der Spezifikation begann, möchte HTML5 fortwährend standardisieren möchte. Sie arbeitet an ihrer "kanonischen" Dokumentation von HTML und möchte fortlaufend wichtige und brauchbare Neuerungen mit aufnehmen und dadurch eine fortwährende und besonders zeitgemäße Spezifizierung im Sinne des selbst ausgerufenen "HTML Living Standard" schaffen. Diese Positionen sind nicht neu und auch schon mehrfach detailliert beschrieben und begründet worden. Eigentlich kann es dem Ersteller von Internetseiten auch ziemlich egal sein, denn beide Wege sind parallel beschreitbar und die Entscheidung, wer was unterstützt, fällen ja erfahrungsgemäß die Browserhersteller und nicht die Standardisierer.

GSL-Team2012-07-24T07:52:28+02:00Juli 24th, 2012|HTML|Kommentare deaktiviert

HTML5-Tag output

Mit dem neuen HTML5-Tag <output> lassen sich nur dynamisch zum Beispiel mit Jacascript erzeugte Werte ausgeben. Ein typisches Fallbeispiel ist die Summe der Artikel in einem Warenkorb. Es besitzt ein value-Attribut, das durch DOM mit Javascript festlegen kann, was auf dem Bildschirm als Output erscheint. Das ist für den Programmierer durchaus bequemer und einfacher beim Erstellen von Internetseiten als die bisherigen Möglichkeiten. Hier ein Codebeispiel für eine Berechnung und die Ausgabe des Ergebnisses per Output-Tag: <form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)"> <input name="a" type="number" step="any"> + <input name="b" type="number" step="any"> = <output name="o"></output> </form> In diesem Codebeispiel wird auch das neue HTML5-Attribut "number" des Input-Tags benutzt…

GSL-Team2012-07-17T08:01:21+02:00Juli 17th, 2012|HTML|Kommentare deaktiviert

HTML5-Tags details und summary

Mit den Tags <details> und <summary> kann man etwas wirklich Neues in HTML5 machen, was bisher nur mit Javascript realisiert werden konnte. Viele Webseiten haben zwar schon Bereiche, die zunächst verdeckt sind und sich durch Anklicken öffenen (sogenannte expanding/collapsing-blocks), allerdings zurzeit von den Erstellern der Internetseiten noch fast durchgängig mit Javascript realisiert. Der Inhalt eines <details>-Elementes wird solange verborgen, bis das im <details>-Element vorhandene <summary>-Element angeklickt wird. Das <summary>-Element ist dabei immer sichtbar. Hier ein Beispiel dafür: <details> <summary>Details ein- oder ausblenden</summary> <p> Hier sehen Sie die Datails dazu. </p> </details> Das <details>-Tag macht das jetzt ohne jeglichen Zusatzprogramme einfach mit HTML5. Man kann erwarten, dass es auf die Dauer die Javascript-Lösungen für solche Funktionen vollständig ablösen wird.

GSL-Team2012-07-06T09:04:31+02:00Juli 6th, 2012|HTML|Kommentare deaktiviert

HTML5-Tags Article und Section

Auch mit den semantischen HTML5-Tags <article> und <section> kann man die Suchmaschinen-Sichtbarkeit beim Erstellen von Internetseiten genau wie mit <header> und <footer> deutlich verbessern. Artikel können aus mehreren Sektionen zusammengestellt werden, und eine Sektion kann auch über mehrere Artikel verfügen. Das klingt erstmal etwas verwirrend – ist es aber nicht. Ein Artikel stellt einen vollen Inhaltsblock dar, und eine Section ist ein Stück eines größeren Ganzen. Schaut man sich beispielsweise ein Blog an, hat die Startseite z.B. eine Sektion, die Liste aller Postings, und jedes einzelne Posting kann wieder ein Artikel sein, der zwei Sektionen beinhaltet, zum einen eben diesen Artikel und zum anderen die Kommentare dazu.

GSL-Team2012-06-30T09:20:28+02:00Juni 30th, 2012|HTML|Kommentare deaktiviert

Media Queries unter CSS3 freigegeben

Als Empfehlung (Recommendation) für den endgültigen Standard wurden vorgestern vom World Wide Web Consortium die Media-Queries freigegeben. Diese Empfehlung entspricht einer CSS3-Spezifikation und definiert, wie Ersteller von Internetseiten ihre Stylesheets für verschiedene Geräteklassen zuordnen können. Grundsätzlich war das ja auch schon bisher unter HTML4 und CSS2 möglich. Mit den neuen HTML5-Media Queries kann der Programmierer oder Designer die Zuordnung eines Stylesheets von weiteren Eigenschaften des aufrufenden Gerätes abhängig machen. Hat man zum Beispiel eine CSS-Datei erstellt, die nur für mobile Geräte zugeordnet werden soll, die mindestens 1000 Pixel Bildschirmbreite haben, sieht das jetzt so aus: <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="ab1000px.css" /> Neben der Und-Verknüpfung mit "and" wie im Beispiel gibt es auch noch eine Verneinung mit "not". Eine Oder-Verknüpfung ist nicht vorgesehen.

GSL-Team2012-06-21T17:13:31+02:00Juni 21st, 2012|CSS, HTML|Kommentare deaktiviert

HTML5-Tags Header und Footer

Mit <header> und <footer> wurden zwei neue semantische Tags in HTML5 eingeführt. Beide Tags machen im Grunde nichts anderes als das bekannte <div>-Tag und zeigen ihre Inhalte auch genauso auf dem Bildschirm. Aber der Einsatz wird auf längere Sicht mit besseren Ergebnissen für Ihre Internetseite bei den Suchmaschinen belohnt, denn die Suchmaschinen sind bei Verwendung der Tags <header> und <footer> in der Lage zwischen Content und Dingen, die zwar für den Benutzer wichtig, aber eben kein Content sind, zu unterscheiden. Vor HTML5 musste man zur Abgrenzung von Kopf und Fuß vom eigentlichen Content DIVs mit entsprechenden IDs benutzen. Damit haben die beiden neuen Tags jetzt Schluss gemacht.

GSL-Team2012-06-18T10:37:03+02:00Juni 18th, 2012|HTML|Kommentare deaktiviert

HTML5-Tag Canvas

Der Tag <canvas> erzeugt unter HTML5 eine Bitmap-Oberfläche, mit der man ähnlich wie mit GDI+ oder .NET Image Object arbeiten kann. Canvas ist eine ausgezeichnete Methode, wenn es darum geht, Kurven und Grafiken zu zeichenen, die traditionell unter reinem HTML kaum realisierbar waren. Auch für Kundengrafiken ist Canvas gut geeignet. Mit Canvas kann man außer Linien und Rechtecken auch Kreisbögen, Bezierkurven, Farbverläufe und Grafiken auf den Schirm bringen. Tranzparenz ist in Abstufungen möglich, natürlich auch Texte. Objekte und Gruppen davon lassen sich in Canvas verschieben, skalieren und drehen. Auch Animationen mit Javascript sind möglich.

GSL-Team2012-06-12T07:48:17+02:00Juni 12th, 2012|HTML|Kommentare deaktiviert

Firefox 15 mit nativer PDF-Unterstützung
Firefox 15 mit nativer PDF-Unterstützung

Allgemein, Webwerkzeuge

Firefox 15 mit nativer PDF-Unterstützung

Firefox 15 ist jetzt im Aurora-Kanal zu haben. Die neue Version von Mozillas Browser enthält jetzt als Highlight die native Unterstützung von Adobe's PDF. Viele HTML5-Elemente wurden in den neuen Firefox integriert, um den Browser weiter zu entwickeln. Zu den HTML5-Neuerungen gehören die Implementierung des Opus Audio Codecs und die Einführung der HTML5-Tags <source>, <audio> und <video>. Dabei bindet der Tag <source> die Multimedia-Dateien in den <audio>- oder <video>-Tag ein. Das von Google stammende SPDY-Protokoll wird mit Firefox 15 in der Version 3 unterstützt. Zwei neue Modi wurden für Programmierer geschaffen. Im Layout-Modus lassen sich die Größen einzelner Elemente veranschaulichen und im Responsive-Modus kann man eine Seite bei verschiedenen Auflösungen unabhängig von der tatsächlichen Fenstergröße anzeigen lassen.

Support-Team2012-06-12T07:36:13+02:00Juni 12th, 2012|Allgemein, Webwerkzeuge|Kommentare deaktiviert