Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 Grundkurs

Fortschrittsbalken

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Fortschritt eines Prozesses kann mit zwei HTML5-Elementen angezeigt werden, sei es ein Fortschrittsbalken oder eine statische Anzeige. Die Browser unterstützen so etwas allerdings nicht einheitlich.
05:50

Transkript

Von den gezeigten Elementen abgesehen, gibt es Formular, technisch noch ein paar weitere Optionen, die neu sind in HTML5. Zwei davon will ich noch kurz vorstellen und zwar bei beiden, geht es um eine Art von Statusbalken, ähnlich aber unterschiedlich, deswegen werfen wir einen Blick drauf und zwar die beiden Elemente, heißen zum einen progress und zum anderen meter. Das Besondere ist, wir verlassen jetzt die Welt von input type ist gleich. Das sind eigene Elemente, progress der eine und meter der andere. Bei diesen Balken, die standardmäßig von null bis eins gehen, also sozusagen von 0% bis 1%. Wir können das aber auch angeben, zum Beispiel können sagen die Fortschrittsbalken geht bis, sagen wir mal 10 und ist gerade bei Position 3, also 30% und dito könnten wir bei meter minimum und maximum angeben, sagen wir mal von 1 bis 5. Gut werfen wir einfach mal ein Blick darauf, was der Browser davon hält und dann schlussfolgern wir, was jetzt der Unterschied ist und wann das zum Einsatz kommt und wir werden noch eine vielleicht etwas überraschende Eigenschaft feststellen. Also up in den Browser, Datei war formular.html und jetzt sehen wir hier den Fortschrittbalken in der normalen 100% Darstellung sehen wir ungefähr auf 30% tatsächlich und das ist hier dieser Meter. nun passen wir den Meter mal ein bisschen noch an, in dem wir noch ein Wert geben, also ist es vielleicht gerade bei 3 von 5. Laden neu und jetzt haben wir hier entsprechend den Meter, als sozusagen Fortschrittzustand und hier noch den Fortschrittbalken und wenn ich jetzt die Größe anpasse, passt es auch ein bisschen von Zoom Einstellungen. Dann sehen wir gut, sind dass eben zwei verschiedene Möglichkeiten irgendein Status anzuzeigen Es interessanter wird, dass wenn wir das im anderen Browser verifizieren. Dann ergibt sich auch der Unterschied ein bisschen schöner. Schauen wir zuerst, ein Firefox erreicht und dann sehen wir hier schon den Unterschied, der Meter schaut sehr ähnlich aus, wie im Chrome. Der Progressbalken, der bewegt sich, der hat also noch so eine innere Animation. Das kennen Sie vielleicht von irgendwoher, geben wir mal dem dritten Browser noch eine Chance, Internet Explorer. Dateiname kommt aus der Zwischenablage und und jetzt sehen wie hier auch einen kleinen Unterschied, nämlich meter wird gar nicht angezeigt und progress sieht wieder so aus wie im Windows Phone 8 Betriebssystem und zum Teil auch unter Windows 8. Sie hatten also wieder die System UI-Elemente verwendet und besonders schön finde ich, sieht man das eben beim Firefox, der eben beides unterstützt und auch den Unterschied ganz klar macht, meter sagt einfach ein Zustand. Also stellen Sie sich vor, Registrierungsformular besteht aus fünf Seiten, wir sind bei der dritten, dann können Sie per meter angeben, wo man sich gerade befindet, wie weit man ist. also etwas, was einen momentanen Zustand, der sich auch gerade nicht verändert darstellt. Progress ist dagegen ein Fortschritt und Sie sehen diese innere Animation, die kennen wir auch vom Betriebssystem selber, da passiert also was. Das heißt dieser Fortschritt der wird sich, so hoffen wir, auch ändern, wenn wir also beispielsweise ein Video abspielen und vielleicht anzeigen wollen wie weit das video bereits ist, würde das Progress-Element in Frage kommen. Wenn wir irgendeine Berechnung durchführen und wir wollen zeigen, wie weit diese Berechnung schon ist, dann ist dieses Progress-Element natürlich ein Kandidat, den wir verwenden könnten und wollen. Da meter im Internet Explorer nicht unterstützt wird, würde ich persönlich davon so oder so Abstand nehmen, aber eben progress lässt sich sehr sehr gut einsetzen. Haben wir gesehen, die Darstellung ist jeweils auch immer so ein bisschen spezifisch, danach wer den Browser entwickelt. Aber eins ist gleich, es ist ein konsistentes Layout jeweils Browser und Betriebssystem spezifisch das ebenso ein Fortschritt darstellen kann Ein kleiner Haken ist natürlich die Situation mit älteren Browsern, also zum Beispiel mit einem IE9, der zeigt da natürlich progress gar nicht an, kennt nämlich das Element noch nicht. Aber auch hier gibt es noch einen Ausweg und das ist der klassische Ausweg, den wir in der Web Programmierung immer haben, nämlich wir können bei unbekannten Elementen, einfach etwas in die Mitte schreiben, also drei von zehn. Das könnten wir theoretisch per JavaScript doch anpassen wenn der Fortschritt sich, wenn die Seite offen ist sozusagen, ändert, aber was heißt das im Browser, der Internet Explorer ignoriert, wie üblich, das ihm unbekannte Element. Wir sehen auch wenn wir hier reinschauen in unseren Inspektor, dass wir hier dieses Progresselement sozusagen haben, mit Text als innerem Subelement sozusagen. Wenn wir dagegen, aber wieder umschalten auf den IE10, dann erscheint der Fortschrittsbalken bei drei von zehn, aber eben dieser innere Text wird nicht mehr angezeigt. haben also einen wunderbaren Fallbackmechanismus, der sich eben auch für viele der anderen neuen Elemente verwenden lässt sofern man natürlich sicherstellt, dass man auch für diese älteren Browser, dann die zugehörige Funktionalität darbietet. Also beispielsweise bei einem Fortschritt, der sich verändert, per JavaScript dafür zu sorgen, dass der jeweilige Zustand so und so viel Prozent bereits fertigt, dann auch wieder angezeigt wird, wenn der Browser eben nicht per Fortschrittsbalken automatisch dann auf 40% beispielsweise springt. Das ist also noch zwei balkenähnliche Elemente aus dem HTML5 Formular Bereich.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!