Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Basiswissen

HTML5: der aktuelle Standard

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
HTML5 ist der aktuelle Standard für die Erfassung und Strukturierung von Inhalten auf Webseiten. Die Sprache bietet zudem Schnittstellen, um Inhalte einzubinden und Funktionen zu ermöglichen, die mit HTML bislang undenkbar waren.

Transkript

Nachdem Sie nun einen Überblick darüber gewonnen haben, wie HTML, CSS und JavaScript zusammenarbeiten, wird es Zeit, nun einen Blick auf die Besonderheiten von HTML5 zu werfen. Denn HTML5 ist nicht einfach nur eine Sprache zur Strukturierung von Inhalten, sondern bietet auch Schnittstellen, um Inhalte einbinden und Funktionen zu ermöglichen, die weit über das hinausgehen, was eine normale Auszeichnungssprache zu leisten in der Lage ist. Diese Schnittstellen werden API genannt. API steht für Application Programming Interface. APIs sind ganz allgemeine Schnittstellen eines Programms, über die Dienste und Komponenten von außerhalb dieses Programms benutzt werden können. Im Web stellen viele große Anbieter solche APIs zur Verfügung, damit sie in ihren Webseiten Funktionen bereitstellen können, die für sie ansonsten unerreichbar wären. Beispiele sind ja etwa Amazon, eBay, Twitter, Google Maps, Facebook und zahlreiche andere. HTML5 bietet eine Reihe von eigenen APIs. Über jede Schnittstelle ist es möglich, dass Ihre Webseite mit Inhalten interagieren und Funktionen bieten können, die es in reinem HTML eigentlich gar nicht gibt, für die man früher eigene Plug-ins, wie etwa Flash oder SilverLine einsetzen musste. Nun ist der Einsatz von API, ist zwar alles andere als trivial, und setzt einige Programmierkenntnisse voraus, aber das sollte uns nicht davon abhalten, uns zumindest einen Überblick darüber zu verschaffen, was HTML5 hier zu bieten hat. Schauen wir uns also einige der wichtigsten APIs einmal etwas genauer an. Da wäre zuerst einmal das Media-API. Wie der Name schon sagt, ist das Media-API zuständig für die Wiedergabe und Steuerung von Medien, also von Audio- und Video-Dateien. Das Media-API ermöglicht nicht nur die Einbindung solcher Daten in HTML, sondern stellt auch gleich die benötigten Steuerelemente für die Wiedergabe zur Verfügung. Möglich ist über dieses API auch der Zugriff auf eine externe Kamera, oder das Microphon Ihres PCs. Das zweite wichtige API ist das Drag & Drop-API. Damit können Sie Elementen auf einer Webseite ziehen und abnehmen, zum Beispiel Textkästen und Bilder umplazieren, und nicht nur das, es ist auch möglich, Inhalte von außerhalb des Browserfensters, etwa ein Bild oder ein Dokument, in die Webseite zu ziehen und die Datei etwa auf einen Server zu laden. Das App-Cache-API ermöglicht es, Daten im Browser lokal zu speichern. So ist es möglich, Applikationsdaten lokal abzulegen. Die entsprechenden Programme laufen auch dann im Browser, wenn der Rechner offline ist. Nehmen wir an, Sie benutzen eine Textverarbeitung, die als Webapplikation im Browser läuft, die Texte werden auf dem Server des Anbieters gespeichert. Nun sind Sie zum Beispiel im Flugzeug, also offline, doch dann per App-Cache-API können Sie die Textverarbeitung weiterhin benutzen, Texte schreiben und speichern. Die Daten werden in diesem Fall im Speicherbereich des Browsers auf Ihrer Festplatte abgelegt. Sobald Sie wieder Internetzugang haben, werden die lokal gespeicherten Daten automatisch mit Ihrem Text auf dem Server Ihres Anbieters synchronisiert. Das Geolocation-API ist ein unabhängiges, aber mit HTML5 eng verbundenes API. Damit ist es möglich, die aktuelle Position des Anwenders zu bestimmen und darauf zu reagieren. So kann Ihnen etwa eine Wetterkarte im Web automatisch den Wetterbericht für Ihren aktuellen Aufenthaltsort liefern, oder eine Karten-Applikation in kürzesten Weg von Ihrem Standort zu Ihrem Ziel verraten. Das vielleicht interessanteste API ist das Canvas-API. Auch dies ist ein unabhängig von HTML5 entwickletes, aber aufs Engste mit HTML5 verbundenes API. Das Canvas-API tut das, was sein Name verspricht. Es erzeugt eine "Leinwand" im Browserfenster, auf der Sie malen und zeichnen können. Das Canvas-API öffnet die Tür zu völlig neuen Einsatzgebieten eines Browsers und einer Webseite. Ganz ohne Zusatzprogramme oder Plug-ins ermöglicht es die Entwicklung von Spielen, Animationen und Effekten, bis hin zu kompletten Grafikprogrammen, und alles, was Sie dazu benötigen, ist ein standardkonformer, moderner Browser. Das waren jetzt nur einige in der zahlreichen Neuerungen, mit den HTML5 aufzuwarten weiss. Da die meisten APIs unabhängig von HTML5 entwickelt werden, wird es hier in naher Zukunft mit Sicherheit noch einiges neues geben. HTML5 wird die Entwicklung ganz fundamental verändern. Stärker als es jede HTML-Version und jedes Plug-in bislang getan hat. Mit HTML5, CSS und JavaScript sind Sie als Webdesigner nun in der Lage Webseiten zu gestalten, die alles in den Schatten stellen, was wir bislang unter Webseite verstanden haben. Und alle Webseiten werden weit eher wie ein Programm agieren, als wie eine einfache normale Webseite.

Grundlagen der Webprogrammierung: Basiswissen

Lernen Sie die wichgsten Technologien und Begriffe des World Wide Web kennen und sehen Sie, wie Sie sie selbst anwenden können.

2 Std. 21 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!