Archiv

Archiv für den Monat November 2012

Globalen Attribute in HTML5

Attribute und Beschreibungen

    Neu

  • contextmenu Spezifiziert zusammenhängendes Menü für ein Element. Das Kontextmenü erscheint, sobald der Nutzer mit einem Rechtsklick auf das Element drückt.
  • contenteditable Spezifiziert ob ein Element bearbeitbar ist oder nicht
  • draggable Spezifiziert ob ein Element verschiebbar ist oder nicht
  • dropzone Spezifiziert ob die Daten kopiert, verschoben oder verlinkt wurden, wenn das Element benutzt wurde (z.B. gedrückt)
  • hidden Zeichnet ein Element aus, das jetzt nicht mehr oder nicht mehr länger relevant ist.
  • spellcheck <element spellcheck=“true|false“>Zeigt an, ob ein Element auf Grammatik und Rechtschreibung geprüft wurde oder nicht

    Bereits vorhandene

  • accesskey Spezifiziert einen Shortcut – Schlüssel um ein Element zu aktiveren oder fokussieren
  • class Spezifiziert einen oder mehrere Klassen für ein Element (die Referenz bzw. die Auszeichnung erfolgt hier in einem Stylessheet)
  • dir Spezifiziert den Text – Richtung f&uul; den Inhalt eines Elementes.
  • id Spezifiziert eine einzelne spezielle Id für eine Element, im Gegensatz zu class
  • lang Zeichnet die Landessprache des Inhaltes aus
  • style Zeichnet ein Inline Style für ein Element aus.
  • tabindex Bestimmt die Tabulator-Reihenfolge für Verweise
  • title Zeichnet den Titel eines Elementes aus
Advertisements

Drupal die opensource Software

Eine Lösung für Drupal um Kontaktdaten zusätzlich über das https Protokoll abzusichern

https_bildDas Modul Secure Pages für eine zusätzliche Absicherung von zum Formularen mit Benutzerdaten.
Mit diesem Modul lässt sich eine Domain einrichten, die für die sichere Verbindung angesteuert wird. Mit weiteren Einstellungen lässt sich dann das Umstellen auf einzelnen Seiten einrichten.
Voraussetzung ist eine entsprechende Server – Konfiguration.

Eigenes Interface für Videos und Audios mittels der JavaScript API der neuen Elemente programmieren

<!DOCTYPE html>
<video id="film" src="vido.mp4" width="50%">
<input type="button" value="Start/Sop" oncklick="start()">
<script>
var video=document.getElementById('film');
 var start = function(){
if(video.paused){
video.play();
}
else {video.pause();
}}
var stumm = function (){
if (video.stumm){
video.stumm =false;
}
else{video.stumm = true;
}
}
</script>

Als erstes wird ein Video mit dem Video Element und einige Eckdaten notiert.
Dann wird ein Start/Stop Button hinzugefügt. Auf dem Button mit dem Wert Start/Stop wird ein Onclick – Händler definiert.

< input type="button" value="Start/Stop" onclick="start()">

Jetzt wird noch die Funktion für diesen Button gebraucht.
Im Scriptblock wird die Variable Video gleichgesetzt mit document.getElementById – nehme das Element ins Dokument über die ID. Hiermit wird der Zugriff auf das Video geschaffen.

var video = document.getElementById('');
var start = function();

Nun muss noch die Play- und Pause – Funktion des Elementes aufgerufen werden

 video.play();
video.pause();

Jetzt muss nur noch abgefragt werden, ob das Video grade pausiert oder abspielt.

if(video.paused){
video.play();}
else{ 
video.pause();}

Wenn das video pausiert if (video.paused), dann spiele video.play as Video ab, wenn (es)nicht (abspielt) dann pausiere.
else{
video.pause();}

<!DOCTYPE html>
<p>
<video id="film" src="video.mp3" width="50%"></pre>
<input type="button" value="Start/Stop" onclick="start()">
<pre><input type="button" value="stumm schalten" oncklick="stumm()">
<script>
var video=document.getElementById('film');
 var start = function(){
if(video.paused){
video.play();
}
else {video.pause();
}}
var stumm = function (){
if (video.stumm){
video.stumm =false;
}
else{video.stumm = true;
}
}
</script>

In HTML5 ist es möglich, weitere Strukturierungen als h1 – h6 durchzuführen.
UM dieses schnell nach zu vollziehen, kann der H20 – outline- analysierer im Browser implementiert werden.
In der Browser leiste auf das outline-Symbol klicken und schon erscheint die Struktur der Seite.

Zu beachten ist das nur neuere Browser wie der ie9 und neuere Chrome, firefox, opera und Safarie Browser diese Struktur richtig interpretieren können zudem funktioniert sie nur mit nav, section, article und aside.

Die Strukurierung der Elemente mit Hmtl5 ist nicht nur für die eigene Ordnung wichtig, sondern ist diese Auszeichnung Maschienenlesbar, daher sie kann von Suchmaschienen optimal bewertet und von Screenreadern gut erfasst werden.

Beispiel einer Verschachtelung mit Outline Elementen

Einführung

Artikel

diese ist der erste Artikel der Seite

Zweiter Artikel

diese ist der zweite Artikel der Seite

<section>
<h2>Einführung</h2>

<article>
<h3>Artikel</h3>
diese ist der erste Artikel der Seite
</article>

<article>
<h3>Zweiter Artikel</h3>
diese ist der zweite Artikel der Seite
</article>

</section>

<section id="sidebarleft"> 
<aside>
<h3 >
 Linke Sidebar 
</h3>
Werbung 
</aside >
</section >

 

Hier wird verdeutlicht, wie die h1- h6 Schriftauszeichung in den einzelnen Elementen dargestellt wird.


<!DOKTYPE HTML>

<html>
<head>
</head>

<section>
<h1>H1 des Section Elementes</h1>
<article><h1>h1 im Artikel unter dem Element section</h1> </article>
</section>
<h6>diese H6 kommt als erstes im Source - Code.</h6>

<h1>diese H6 kommt als letztes im Source - Code</h1>
<aside>
<h1>das ist eine H1 in aside - Element</h1>
<article><h1>h1 im Artikel</h1> </article>

</html>

dastellung der Schriftgroessen h1 - h6

<!DOCTYPE html>

<form action="xx.html">

<input type="tel" name="test" value="Telefonummer eintragen">

<input type="submit"  value="absenden">

</form>

Der Vorteil der Verwendung des Typen „tel“ ist das damit die Browser etwas anfangen könnten zum Beispiel zur aut. Vervollständigung oder bei Mobiltelefonen, könnte man auf das Adressbuch zugreifen.

<!DOCTYPE html>

<form action="input-url.html">

<input type="url" name="test" value="Web -adresse eintragen">

<input type="submit"  value="absenden">

</form>

Hier macht das Formularfeld schon mehr, es lässt nur absolute Web – Adressen zu. (nicht valide: google.de – nicht valide: http://www.google.de – valide: http://www.google.de)

<!DOCTYPE html>

<form action="email-url.html">

<input type="email" name="test" value="Email -Adresse eintragen">

<input type="submit"  value="absenden">

</form>

Hier läßt der Type email nur Email- Adressen zu.

<!DOCTYPE html>

<form action="number-url.html">

<input type="number" name="test" max="7" min="0" step="o.5"
value=" Nr. eintragen">

<input type="submit"  value="absenden">

</form>

Der Type Number läßt nur Zahlen zur, zudem lassen sich diese Zahlen mit den neuen Attributen min und max einschränken. Mit step, lassen sich die gültigen Schritte bestimmen. Zum Beispiel wäre 6,5 eine Gütige Nummer, 6,2 nicht.

<!DOCTYPE html>

<form action="input-range.html">

<input type="range" name="test" max="7" min="0" step="2">

<input type="submit"  value="absenden">

</form>

Zum Number gibt es noch die Alternative und zwar das Range – Input. Hier stellt sich die
Formulare HTML automatische Formular- Validierung nicht. Im Grunde ist es ein einfacher Schieberegler, dem man die Schritt-zahl mitgibt. Im Gegensatz zum Type Number, sind beim Range – Input die Zahlen nicht sichtbar.

<!DOCTYPE html>
<!--<style>p {font-site:1.5em;} input {margin-zop:1em; 
font-size:inherit;}</style>-->

<form action="input-date.html">

<input type="date" name="test1">

<input type="month" name="test2">

<input type="week" name="test3">

<input type="time" name="test4">

<input type="datetime" name="test5">

<input type="datetime-local" name="test6">

<input type="submit"  value="absenden">

</form>

weitere Links:
http://www.heise.de/ix/artikel/Auswahlscheibe-1667689.html

www.drweb.de/magazin/formulare-gestalten-und-validieren-mit-html5-und-css3/

ähnliche Links:
http://www.drweb.de/magazin/ideal-forms-2-0-html5-formular-framework-auf-jquery-basis-34469/
http://www.usability-tipps.de/info/index.php/formulare-fur-mobilgerate-optimieren-mit-html5/
http://www.html5rocks.com/de/tutorials/forms/html5forms/
http://www.selfhtml5.org/html5-tag-systematik/