Erste Schritte mit HTML5

Erste Schritte mit HTML5
Diese Anleitung steht als kostenloses PDF zum Download bereit. Laden Sie diese Datei jetzt herunter . Fühlen Sie sich frei, dies zu kopieren und mit Ihren Freunden und Ihrer Familie zu teilen.

Inhaltsverzeichnis

§1. Einleitung





§2–Semantisches Markup



§3–Formulare





§4 – Mittel

§5–CSS3-Transformationen und Animationen



§6–Genug Javascript

§7–Creative Canvas



§8 – Wohin als nächstes?

1. Einleitung

Sie haben davon gehört: HTML5. Jeder benutzt es. Es wird als Retter des Internets gepriesen und ermöglicht es Menschen, reichhaltige, ansprechende Webseiten zu erstellen, ohne auf Flash und Shockwave zurückgreifen zu müssen.



Aber was ist es eigentlich?

Nun, das ist keine leicht zu beantwortende Frage. In diesem HTML5-Tutorial versuchen wir, einige Antworten zu geben. HTML5 wird verwendet, um eine wirklich vielfältige Gruppe von Dingen zu beschreiben. Es ist ein Standard zum Schreiben von Webseiten. Es ist eine Sammlung von APIs. Es ist eine neue Möglichkeit, Webseiten Interaktivität hinzuzufügen.

HTML5 ist all das und mehr. Worum geht es in diesem Buch?

In diesem HTML5-Tutorial gehe ich davon aus, dass Sie sich schon einmal mit HTML und CSS beschäftigt haben. Vielleicht haben Sie früher Ihr eigenes Wordpress-Theme erstellt oder ein MySpace-Layout bearbeitet. Vielleicht haben Sie den eigenen XHTML-Leitfaden von MakeUseOf gelesen. Der Punkt ist, ich gehe davon aus, dass Sie sich auf einer Webseite auskennen und dass Ihnen das, was wir in diesem Handbuch besprechen, nicht allzu fremd ist.

Das Ziel dieses Leitfadens ist nicht, Ihnen HTML5 in seiner Gesamtheit beizubringen. Das würde den Rahmen dieses Buches komplett sprengen. Ziel ist es, eine sanfte Einführung in diese erstaunlichen neuen Webtechnologien zu geben und Ihnen einige coole Möglichkeiten zu zeigen, sie in Ihre Websites zu integrieren.

Warum möchten Sie HTML5 lernen?

Es ist eine berechtigte Frage. Ist es in einer Welt von Smartphones und Apps wirklich wichtig zu lernen, wie man Webseiten programmiert?

Ob Sie es glauben oder nicht, es ist wirklich üblich, Smartphone-Anwendungen mit HTML5-Technologien zu schreiben. Bis vor kurzem wurde die Facebook-App für Android mit HTML5, CSS und Javascript geschrieben.

Blackberry ist ein weiteres großes Unternehmen, das sich sehr für HTML5 interessiert. Dies zeigt sich in der neuesten Iteration ihres mobilen Betriebssystems Blackberry OS 10, wo sie Entwickler aktiv ermutigen, Anwendungen für ihre Telefone mit Webtechnologien zu entwickeln.

Auch die neuen Firefox OS-Smartphones laufen komplett mit HTML5-Apps. Grundkenntnisse in HTML5 sind im heutigen Smartphone-Klima unerlässlich.

Darüber hinaus ist das Erlernen von HTML5 gut für Ihre Karriere. Glauben Sie mir nicht? Laut Indeed.com , beträgt das durchschnittliche Jahresgehalt eines HTML5-Entwicklers atemberaubende 89.000 US-Dollar. Da immer mehr Unternehmen ihre Websites auf HTML5-Technologien umstellen, sind Entwickler gefragt, die den HTML5-Stack kennen – mehr denn je.

1.1 Voraussetzungen

In diesem HTML5-Tutorial werden einige Dinge vorausgesetzt. Erstens setzt es voraus, dass Sie wissen, wie das Web funktioniert, und dass Sie wissen, wie man eine einfache Webseite erstellt. Sie sollten in der Lage sein, einige HTML-Elemente zusammenzufügen und einige Informationen in einem Webbrowser darzustellen. Sehen und

Tags ist nicht zu entmutigend, und Sie haben keine Angst davor, sich in Quellcode die Hände schmutzig zu machen.

Zweitens geht dieser Leitfaden davon aus, dass Sie wissen, was CSS ist und wie es funktioniert. Wir erwarten nicht, dass Sie Designgenies sind, noch wird von Ihnen erwartet, dass Sie die gesamte CSS-Spezifikation auswendig kennen. Sie sollten jedoch in der Lage sein, einem Element auf einer Webseite ein Styling zuzuweisen, auf eine CSS-Datei zu verlinken und den Unterschied zwischen einer ID und einer Klasse zu kennen und zu wissen, wie Sie jedes von ihnen stylen.

Machen Sie sich keine Sorgen, wenn Sie sich über das oben Gesagte am Kopf kratzen. Eines der besten Dinge an HTML und CSS ist, dass es wirklich, wirklich einfach ist. Tatsächlich hat MakeUseOf eine unglaubliche XHTML-Anleitung, die Sie wirklich schnell auf den neuesten Stand bringt.

Nachdem Sie diesen Leitfaden gelesen haben, sollten Sie sich auch die folgenden Artikel ansehen:

Außerdem benötigen Sie einen modernen Texteditor und Browser. Jede Version von Internet Explorer, die älter als IE 9 ist, und einige ältere Versionen von Safari, Chrome und Firefox haben Probleme mit vielen Funktionen, die Teil von HTML5 sind, und können Sie daran hindern, dieser Anleitung zu folgen.

Daher empfehlen wir Ihnen, einen modernen Browser herunterzuladen. Ich empfehle Google Chrome und werde es in jedem Beispiel verwenden.

Darüber hinaus brauchen Sie nur die Bereitschaft zu lernen. Oh, und ein Texteditor.

1.2 Texteditoren für die Webentwicklung

Ihr Texteditor ist das, was Sie verwenden werden, um Ihren Code zu schreiben. Sie fragen sich vielleicht, was ein Texteditor ist.

Nun, erstens ist es kein Textverarbeitungsprogramm. Programme wie Microsoft Word und Apples Pages sind für die Webentwicklung völlig ungeeignet. Das liegt daran, dass sie Ihren HTML-, CSS- und Javascript-Dateien zusätzliche Informationen anhängen, die es Ihrem Webbrowser erschweren, sie zu lesen.

Ein Texteditor schießt Zeichen in eine Textdatei und sonst nicht viel. Auf diese Weise können Sie Dateien erstellen, die keine zusätzliche Formatierung haben und mit einer beliebigen Erweiterung Ihrer Wahl gespeichert werden können.

Ihr Computer wird bereits mit einem geliefert. Wenn Sie einen Windows-PC verwenden, ist Notepad der Texteditor, den Sie wahrscheinlich installiert haben.

Auf einem Mac ist die Situation etwas anders. OS X kommt zufällig mit vier verschiedenen Texteditoren. Diese heißen Vim, Emacs, Pico und Nano. Im Gegensatz zu Notepad funktionieren sie jedoch alle im Terminal.

Dies ist ein wenig einschüchternd für Leute, die neu in der Webentwicklung sind, und sollte nicht von Leuten verwendet werden, die neu in der Softwareentwicklung sind. Wir werden sie in diesem Handbuch nicht verwenden. Wenn Sie jedoch etwas sicherer in der Software- und Webentwicklung sind, lohnt es sich auf jeden Fall, einen Blick auf Vim und Emacs zu werfen. Beide sind leistungsstarke Texteditoren, und wenn Sie sie beherrschen, können Sie viel Zeit sparen.

Unter Linux variiert der Standardtexteditor zwischen den Distributionen. Unter Ubuntu ist es wahrscheinlich Gedit , ein recht angenehmer Texteditor, der sich nicht allzu sehr von Notepad unterscheidet.

In diesem Kurs werden wir unseren Code jedoch mit drei verschiedenen Tools schreiben.

Der erste ist Sublime Text 2 . Ich kann das ehrlich gesagt nicht genug empfehlen. Es kommt mit all den Dingen, die einem beginnenden Entwickler das Leben leichter machen. Erstens wird Ihr Code leichter lesbar, indem Sie bestimmte Teile einfärben. Zweitens können Sie einfach zwischen Dateien wechseln und ganze Dateiprojekte verwalten. Dies ist ideal, um zwischen Dateien zu wechseln und mehrere Code-Bits im Handumdrehen zu bearbeiten.

Die dritte ist die Javascript-Konsole, die in Google Chrome integriert ist. Dies ermöglicht es uns, Javascript zu schreiben und sofort auszuführen, und wird verwendet, um grundlegende Programmierkonzepte zu erklären.

Die zweite ist eine Website namens Codepen.io. Diese bemerkenswerte Website ermöglicht Ihnen das Programmieren von HTML, CSS und Javascript im Browser und ist kostenlos. Außerdem können Sie Ihre Änderungen sofort sehen.

2. Semantisches Markup

In diesem Kapitel erfahren Sie mehr über semantisches Markup und wie Sie Ihren Code basierend auf seinem Inhalt organisieren.

Bis vor kurzem war HTML-Code im Allgemeinen mit Tags organisiert. Diese ermöglichten es Ihnen, eine Gruppe von Elementen zu erstellen und dann Stile auf diese Elemente anzuwenden.

Dies funktionierte, aber es gab Raum für Verbesserungen. Das Problem mit Tags war, dass es nicht semantisch war. Div bedeutet eigentlich gar nichts.

Semantisches Markup ist eine neue Funktion in HTML5. Es fügt neue Tags hinzu, die auf die gleiche Weise wie ein 'div'-Tag funktionieren, aber zum Taggen gemeinsamer Teile einer Seite dienen.

Also, wie funktionieren sie? Betrachten Sie den folgenden Code.

In diesem Codestück haben wir eine Navigationsleiste, einen Titel und eine Liste. Dies ist den meisten Websites, die Sie wahrscheinlich jemals besuchen werden, nicht allzu unähnlich, wenn Sie darüber nachdenken.

So finden Sie heraus, welches Motherboard Sie haben

Schauen wir uns einen Artikel über MakeUseOf an. Sie werden feststellen, dass ein Teil der Seite vollständig für die Navigation zu anderen Artikeln reserviert ist. Sie werden auch feststellen, dass es einen anderen Teil der Seite gibt, der die Wörter enthält, die einen Artikel bilden. Oben auf der Seite sehen Sie eine Kopfzeile mit dem MakeUseOf-Logo und einigen anderen Links.

Wenn Sie darüber nachdenken, folgen viele Websites diesen Konventionen. Die meisten Websites haben einen Teil, der für die Navigation reserviert ist. Sie haben normalerweise einen Inhaltskörper. Sie haben höchstwahrscheinlich einen Header.

Semantische Tags sind Tags, mit denen Sie Teile einer Website definieren können, die häufig auf den meisten Websites zu finden sind. Sie fügen der Seite nichts hinzu, ermöglichen es Ihnen jedoch, Tags basierend auf ihrem Inhalt zu gruppieren und Formatierungen auf diese Gruppen anzuwenden.

Erinnern Sie sich an den Code, den wir vorher hatten? Betrachten wir es mit etwas hinzugefügtem semantischem Markup.

Wie Sie sehen, ist der Code viel einfacher zu lesen. Sie wissen, welche Teile welche sind und es gibt keine Unklarheiten. Dies ist wichtig, da es das Schreiben von gutem, sauberem Code erleichtert. Sollten Sie sich jemals entscheiden, ein professioneller Webdesigner zu werden, ist dies von größter Bedeutung – Sie wissen nie, wer Ihre Arbeit liest.

Schauen wir uns also einige weitere semantische Markup-Tags an.

2.1 Abschnitt

Abschnitt ist ein wirklich nützliches Tag. Es wird verwendet, um riesige Mengen an Informationen und Inhalten zu erfassen, die mit einer Überschrift oder einem Titel gekennzeichnet sind. Stellen Sie sich das wie ein Kapitel in einem Buch vor. Ein Kapitel hat einen Titel und kann auch Bilder, Diagramme, Grafiken und Wörter enthalten. Ein Abschnitts-Tag würde verwendet, um all das zu enthalten.

2.2 Artikel

Das Artikel-Tag wird für das verwendet, wonach es sich anhört; Mit Inhalten wie einem Blogbeitrag oder einer Nachrichtenmeldung. Dieser Inhalt sollte sich vom Rest des Blogs abkoppeln lassen und trotzdem schlüssig Sinn machen.

2.3 Beiseite

Dieses Tag ist für Inhalte reserviert, die sich auf die Webseite beziehen, aber kein integraler Bestandteil der Webseite sind. Dies können eine Reihe von Fakten sein, die sich auf eine Nachrichtenmeldung oder die Biografie eines Benutzers in einem Blog beziehen.

2.4 Kopfzeile

Viele Webseiten haben oben auf der Seite eine Leiste, die ein Logo, einige Informationen zur Site und vielleicht einige Links enthält. Im semantischen Markup würden Sie ein Header-Tag verwenden, um all dies zu enthalten.

2.5 Navigation

Dieses Element ist für den Navigationsbereich Ihrer Website reserviert. Dies würde Links zu anderen Websites oder zu anderen Seiten der Website enthalten. Im Kontext von MakeUseOf könnte dies der Teil der Seite sein, der sich unter der Kopfzeile befindet.

Dieses Tag ist für den unteren Teil der Seite reserviert. Hier können Sie einige Kontaktdaten, Copyright-Informationen, eine Karte oder Links zu Ihrer 'Über mich'-Seite einfügen.

2.7 Testen Sie sich selbst

  • Was ist Semantic Markup und wofür wird es verwendet?
  • Ich erstelle eine Webseite und möchte ein semantisches Tag verwenden, um eine Biografie über mich zu enthalten. Welches verwende ich?

3. Formulare

Wenn Sie sich schon einmal mit Webdesign beschäftigt haben, wissen Sie wahrscheinlich, wie man ein einfaches Formular in HTML erstellt. Wenn Sie wirklich schlau sind, wissen Sie wahrscheinlich, wie Sie die Informationen, die Sie aus Ihrem Formular erhalten, aufnehmen und etwas damit anfangen können, z. B. in eine Datenbank.

Formulare sind enorm wichtig. Sie sind die Grundlage für die meisten Dinge, die wir im Internet tun. Jedes Mal, wenn Sie ein Status-Update in Ihrem bevorzugten sozialen Netzwerk erstellen, etwas bei Amazon kaufen oder eine E-Mail senden, haben Sie wahrscheinlich ein HTML-Formular verwendet.

Was Sie wahrscheinlich nicht wussten, ist, dass sich die Art und Weise, wie wir Formulare erstellen, in HTML5 radikal geändert hat. Es ist auch deutlich besser. In diesem Kapitel werden wir uns einige der coolen Dinge ansehen, die Sie jetzt mit einfachem alten Markup tun können.

Was ist also so cool an der neuen Art, wie wir Formulare in HTML5 schreiben können? Erstens können Sie sicherstellen, dass einige Felder zum Senden ausgefüllt werden müssen, indem Sie einfach das Markup des Formulars selbst ändern. Außerdem müssen Sie dafür keine Berge von JavaScript oder PHP mehr schreiben. Es ist trivial einfach.

Zweitens können Sie sicherstellen, dass Ihre Benutzer nur bestimmte Arten von Informationen an Ihr Formular übermitteln können. Angenommen, Sie haben eine Website für Ihre Mailingliste und möchten, dass die Leute nur echte E-Mail-Adressen übermitteln können? Sie können dies tun, indem Sie einfach HTML5 verwenden. Es ist wirklich unglaublich mächtig.

Drittens können Sie Ihre Formulare besser aussehen lassen, indem Sie bestimmten Feldern einen Platzhalter zuweisen. Dadurch werden sie wesentlich intuitiver, da Sie Ihren Benutzern ein Beispiel dafür zeigen können, was Sie von einem Formular erwarten.

3.1 Ein Formular verbessern

Schauen wir uns also ein Formular an und sehen wir, wie wir es verbessern können.

Dieses Formular ist ziemlich einfach. Es nimmt einen Namen, eine E-Mail und eine Lieblingsfarbe auf und ermöglicht es dem Benutzer, diese zu senden. Es enthält keine Überprüfung, welche Informationen darin eingegeben werden, und es gibt nichts, was Benutzer davon abhält, dieses Formular mit einigen leeren Feldern abzusenden. Lass uns das alles ändern.

Als erstes sollten wir also sicherstellen, dass das E-Mail-Feld nur eine E-Mail akzeptiert. Dies war in der Tat früher eine ziemlich schwierige Aufgabe, da Sie alle möglichen arkanen Regex-Codes erstellen mussten. Nun, nicht mehr. Sie müssen lediglich die Art der Eingabe von 'Text' auf 'E-Mail' ändern. Wenn Sie versuchen, dieses Formular mit Kauderwelsch zu senden, wird es sich beschweren und darauf bestehen, dass Sie eine E-Mail senden.

3.2 Eingabetypen und Muster

Es gibt andere Eingabetypen, die Sie benötigen können. Dazu gehören Telefonnummern, Webadressen, Suchformulare und sogar Farbwähler! Da HTML5 sich ständig weiterentwickelt, liegt es nahe, dass wir in naher Zukunft mehr Eingabetypen angeben können.

Darüber hinaus können Sie für Dinge wie Telefonnummern, die je nach Ort variieren, Muster für Eingaben festlegen. Diese werden mit sogenannten „Regulären Ausdrücken“ erstellt und sind ziemlich kompliziert, aber unermesslich mächtig.

Wir möchten auch ein Beispiel für eine E-Mail in unserem Bereich bereitstellen, damit der Benutzer keine Unklarheiten darüber hat, was er oder sie übermitteln muss. Das geht ganz einfach. Erstellen Sie einfach ein neues Attribut von 'Platzhalter' mit einer Beispiel-E-Mail-Adresse.

Wir werden sicherstellen, dass unser Feld 'Favorite Color' erforderlich ist. In die letzte spitze Klammer (>) im E-Mail-Eingabe-Tag schreiben Sie einfach 'erforderlich'. Das ist es. Wenn Sie nun versuchen, Ihr Formular ohne einen Wert zu senden, wird eine Fehlermeldung ausgegeben.

Das wirklich Unglaubliche an diesen Fehlermeldungen ist, dass der Benutzer sie nicht schreiben oder Code schreiben muss, um sie zu erstellen. Sie ändern einfach ein Feld, um es erforderlich zu machen, und es funktioniert einfach. Trotzdem ist es möglich, sie anzupassen, wenn Sie möchten.

Das war eine unglaublich kurze Einführung in die Möglichkeiten von Formularen in HTML5. Wenn Sie mehr lesen möchten, empfehle ich Ihnen, diese Links zu besuchen.

Weiterlesen:

  • CSS-Tricks – Schreiben wir semantisches Markup
  • HTML5 Doctor – Reden wir über Semantik

3.3 Testen Sie sich selbst

Sie haben nächste Woche Geburtstag und möchten ein Anmeldeformular erstellen, damit Sie wissen, wie viel Kuchen Sie backen müssen. Öffnen Sie Ihren Texteditor und erstellen Sie ein Formular mit den folgenden Feldern.

  • Name
  • E-Mail-Addresse
  • Telefonnummer
  • Allergien

Stellen Sie sicher, dass die Felder Name, E-Mail und Telefonnummer obligatorisch sind und dass die Felder E-Mail und Telefonnummer mit den Eingabetypen 'E-Mail' und 'Tel' festgelegt sind. Legen Sie einen Platzhalter für das Allergiefeld mit dem Wert 'Pollen, Eier, Quiche' an.

Spielen Sie mit dem Formular herum. Versuchen Sie, die erforderlichen Felder als leer zu übermitteln, und versuchen Sie, nicht numerische Zeichen in das Telefonnummernfeld einzufügen. Geben Sie in das E-Mail-Feld etwas ein, das keine E-Mail-Adresse ist. Was geschieht?

4. Durchschnitt

Früher gab es eine Zeit, in der Sie nur mit Flash, Shockwave oder SilverLight etwas Video oder Audio in eine Webseite einfügen konnten.

Das war nicht ideal. Erstens funktionierte keines dieser Frameworks auf mobilen Geräten so gut. Sie waren einfach nicht für die moderne Welt der Smartphones und Tablets gerüstet.

Was ist eine Hintergrundaktualisierung der App auf dem iPhone?

Außerdem handelte es sich um proprietäre Formate. Infolgedessen konnten Benutzer von Linux und OS X eine ziemlich zweitklassige Erfahrung machen oder wurden sogar daran gehindert, Mediendienste zu konsumieren, da sie für ihre Plattform nicht verfügbar waren.

Schließlich neigten sie dazu, langsam zu sein. Wenn Sie sich auf einem leistungsschwachen oder älteren Computer befinden, werden Sie mit diesen Frameworks keine gute Erfahrung mit dem Betrachten von Videos machen. Flash war dafür besonders berüchtigt.

4.1 Wie HTML5 Video und Audio großartig macht

HTML5 änderte dies, indem es Webentwicklern ermöglichte, mit nur wenigen Codezeilen Video und Audio in ihre Webseiten einzubinden. Es funktioniert super auf mobilen Geräten und funktioniert auf jedem modernen Webbrowser.

Infolgedessen nutzen große Unternehmen wie YouTube, Vimeo und Netflix die HTML5-Revolution. Warum schließen Sie sich ihnen nicht an?

4.2 Alles über Codecs

In diesem Kapitel erfahren Sie, wie Sie die Leistungsfähigkeit von HTML5 nutzen, um Audio und Video in Ihre Webseiten einzubinden.

Zuerst muss ich mit einer Einschränkung beginnen. Obwohl Sie HTML5-Video in jedem modernen Webbrowser verwenden können, funktioniert es nicht in jedem Webbrowser gleich. Die von jedem Browser verwendeten Codecs variieren. In Internet Explorer sind Sie auf die Verwendung von MP4-Videos beschränkt. Chrome ist etwas großzügiger und ermöglicht die Verwendung von WebM-, MP4- und Ogg Theora-Videos. Opera ist etwas restriktiver und erlaubt nur die Verwendung von Theora- und WebM-Videos.

Daher müssen Sie ein wenig clever sein, wie Sie Videos in Ihre Webseite einfügen. Sehen wir uns also an, wie es funktioniert.

4.3 Beginnen mit Video

Zunächst müssen Sie einige öffnende und schließende Tags erstellen. Hier werden Sie zu Ihren Videodateien verlinken. Aber zuerst möchten Sie ein Poster einstellen. Was bedeutet das?

Nun, wenn Sie darauf warten, dass Ihr Video geladen wird, kann die Person, die Ihre Website besucht, ein Bild sehen, das sich auf das Video bezieht. Geben Sie dazu einfach Ihren Video-Tags das Attribut 'Poster' mit einem Wert des Bildes, zu dem Sie verlinken möchten. Es sollte so aussehen.

Als nächstes möchten wir einen Fallback erstellen. Was bedeutet das? Angenommen, Sie verwenden einen der älteren, weniger großartigen Browser auf dem Markt. Viele dieser älteren Browser unterstützen kein HTML5-Video und können daher kein HTML5-Video wiedergeben. Sie möchten ihnen eine Nachricht hinterlassen, die sie darüber informiert, dass sie ihren Browser aktualisieren möchten und dass sie bis dahin Ihr Video nicht ansehen können.

Dazu schreiben Sie einfach Ihre Nachricht in Ihre Video-Tags. Nichts anderes ist erforderlich. Sobald Sie dies getan haben, werden Sie mit Code zurückbleiben, der wie folgt aussieht.

Jetzt fügen wir ein Video hinzu. Ich werde dies in Google Chrome testen, also werde ich auf einen MP4-Film verlinken. Dazu erstelle ich ein Source-Tag und gebe ihm ein Attribut von src, das einen Wert des Videos hat, das ich einschließen möchte.

Meine Seite kann nun in meinem Webbrowser geöffnet werden. Ich habe einen Film verlinkt, der wirklich sehr groß ist und daher beim Öffnen nur das Poster zu sehen ist.

4.4 Audio hinzufügen

Audio kann auf eine Weise in Ihre Webseite eingefügt werden, die sehr daran erinnert, wie wir Videos in unsere Seite eingefügt haben.

Zunächst erstellt man einige Audio-Tags. Diese Audio-Tags enthalten ein Attribut von 'controls'. Dies gibt dem Benutzer, der die Seite besucht, die Möglichkeit, das wiedergegebene Audio anzuhalten, zurückzuspulen und vorzuspulen.

Anschließend fügen Sie der MP3-Datei, zu der Sie verlinken möchten, ein Quell-Tag hinzu. Wenn es um die Codec-Kompatibilität geht, müssen Sie sich nicht allzu viele Sorgen machen. Die meisten neueren Webbrowser können MP3-Audio wiedergeben, obwohl es sich empfiehlt, auch eine '.ogg'- und eine '.wav'-Datei einzufügen – nur für den Fall.

Schließlich können Sie einen Fallback für ältere Browser erstellen. Dies geschieht auf die gleiche Weise, wie Sie das Fallback für Ihr Video erstellt haben.

Das Endergebnis sieht ein bisschen so aus.

Wenn Sie dies in Ihrem Webbrowser öffnen, sollte es ungefähr so ​​aussehen.

4.5 Testen Sie sich selbst

  • Was ist der Zweck eines Posters in Ihren Video-Tags?
  • Welche Codecs können Sie im Internet Explorer nicht verwenden?
  • Wenn ich die Möglichkeit haben möchte, Audio anzuhalten, welches Attribut würden Sie zu Ihrem 'Audio'-Tag hinzufügen?

Weiterlesen:

5. CSS3-Transformationen und Animationen

CSS wurde traditionell verwendet, um das Layout und das Design einer Webseite zu verwalten. Dies gilt immer noch, aber in seiner neuesten Version hat es die Fähigkeit erlangt, Animationen und Transformationen von Elementen und Bildern zu verarbeiten.

Die Leute haben mit CSS3 einige erstaunliche Dinge erreicht, von der Entwicklung einer digitalen Uhr bis hin zum Schreiben eines vollständigen Pong-Spiels. Jemand benutzte es sogar, um die einleitenden Credits zu Mad Men neu zu erstellen. Es ist eine wirklich leistungsstarke Technologie, die, wenn sie beherrscht wird, verwendet werden kann, um Ihrer Webseite ein erstaunliches Maß an Funktionalität hinzuzufügen.

In diesem Kapitel werde ich Ihnen eine kurze Einführung in CSS3 geben und Ihnen zeigen, wie Sie Ihrer Seite erstaunliche Effekte hinzufügen können.

Navigieren Sie zunächst zu codepen.io und erstellen Sie einen neuen Stift. Wir werden dies für die Dauer dieses Kapitels als unseren Arbeitsbereich verwenden.

Wir beginnen einfach und erstellen eine einfache Bildtransformation, die ein Bild um 3 Grad dreht, wenn der Mauszeiger darüber bewegt wird. Erstellen Sie zunächst ein div-Tag und geben Sie ihm eine ID. Im folgenden Beispiel habe ich ihm die ID 'muo' gegeben.

5.1 CSS-Hover-Effekte

Fügen Sie in diesem Div ein Bild Ihrer Wahl ein. Ich habe eine Kopie des Logos für MakeUseOf eingefügt.

Sie müssen dann einige Stylesheet-Regeln schreiben. Im folgenden Beispiel habe ich einen oberen und linken Rand erstellt, um dem Bild etwas Platz zu geben. Ich habe auch eine merkwürdig aussehende Stylesheet-Regel eingefügt, die mit '#muo:hover' beginnt. Was ist das?

Wenn Sie ':hover' an eine Stylesheet-Regel anhängen, sei es an ein Element, eine ID oder eine Klasse, weisen Sie den Browser effektiv an, dieses Styling anzuwenden, wenn Ihre Maus das Element steuert. Ziemlich cool, oder?

Innerhalb der '#muo:hover'-Regel haben wir eine Zeile mit der Aufschrift '-webkit-transform: rotation(3deg)'. Wie Sie sicher erraten haben, weist dies den Browser an, dieses div-Element um drei Grad zu drehen.

Es ist jedoch erwähnenswert, dass dieses Tag nur in Chrome und Safari funktioniert. Wenn Ihr Code in Firefox oder Internet Explorer 9 und höher funktionieren soll, sollten Sie Ihre CSS-Datei so ändern, dass sie die folgenden Zeilen enthält.

Wenn Sie nun mit der Maus über das Bild fahren, sieht es so aus:

5.2 Verwenden von CSS3 zum Ändern der Größe von Bildern

Warum also hier aufhören? Wussten Sie, dass Sie auch die Methode 'Transformieren' verwenden können, um ein Bild zu vergrößern oder zu verkleinern. Lassen Sie uns unsere CSS-Datei so ändern, dass sie die folgenden Zeilen enthält.

Wie Sie sehen, haben wir jetzt eine neue Transformationsregel eingefügt, aber diesmal weisen wir sie an, etwas namens 'Skalieren' zu tun. Dies ist eine wirklich schöne Möglichkeit, die Größe eines Bildes zu erhöhen. Es benötigt zwei Parameter (die Zahlen, die Sie zwischen diesen Klammern sehen) und sie repräsentieren den Betrag, um den Sie die Höhe und Breite des Elements erhöhen.

Wie Sie dem Code entnehmen können, werde ich die Größe des MakeUseOf div-Logos um 50% erhöhen. Sie können dies testen, indem Sie mit der Maus darüber fahren. Sie werden sehen, dass das 'MakeUseOf'-Logo jetzt deutlich gestreckter ist.

Dies war eine sehr sanfte Einführung in CSS3-Transformationen. Obwohl CSS3 in der Tat sehr neu ist, können Sie jetzt sehen, dass Sie viele sehr interessante Manipulationen damit machen können.

5.3 Testen Sie sich selbst

  • Wie wenden wir beim Schweben ein Styling auf ein Element an?
  • Wie dreht man ein Bild mit CSS3?
  • Wie skaliert man ein Bild mit CSS3?
  • Was passiert, wenn Sie Ihre Transformationsmethode 'translate(50px, 50px)' übergeben?

Weiterlesen:

HTML5 Rocks - Präsentation

6. Gerade genug Javascript

Wenn Sie Skripte in Ihrem Webbrowser verwenden möchten, müssen Sie Javascript verwenden. Es gibt leider keine zwei Möglichkeiten. Es ist eine Sprache, die viele Fans und auch viele Kritiker hat. Wie Sprachen gehen, hat es viele Warzen. Es gibt einen Grund, warum das bemerkenswerteste Buch über die Sprache 'Javascript: The Good Parts' heißt.

Es wird unmöglich sein, Ihnen in einem einzigen Kapitel die Verwendung von Javascript beizubringen. Das ist hier nicht das Ziel. Ziel ist es, Ihnen genügend Javascript beizubringen, damit Sie das nächste Kapitel verstehen können, in dem es darum geht, eine Technologie namens Canvas zum Erstellen von Zeichnungen und Animationen zu verwenden.

6.1 Zugriff auf die Konsole

Dazu verwenden wir die Javascript-Konsole, die in jede Kopie von Google Chrome integriert ist. Um darauf zuzugreifen, können Sie mit der rechten Maustaste auf eine beliebige Webseite klicken und dann auf „Element prüfen“ klicken. Klicken Sie dann auf 'Konsole'. Das solltest du sehen.

Es ist Tradition, dass das erste Programm, das ein angehender Entwickler jemals schreibt, das Programm „Hello World“ ist. Dies ist ein einfaches Programm, das die Phrase 'Hello World' ausgibt, und nicht viel anderes. Geben Sie in Ihrer Konsole 'console.log('Hello world!');

6.2 Ihr erstes Programm

Also, was haben wir genau gemacht? Als erstes haben wir etwas namens 'console.log' genannt. Dies ist ein kleiner Code, der in den Computer eingebaut ist und einfach ausdruckt, was immer Sie ihm sagen. Wir haben dann einige Klammern angehängt und das in doppelte Anführungszeichen gesetzte 'Hello World' eingefügt. Dies wird als 'Argumente übergeben' bezeichnet, und der Typ des übergebenen Arguments wird als String bezeichnet. Wenn Sie etwas mit Buchstaben und Sonderzeichen machen möchten, müssen Sie einfach einfache Anführungszeichen verwenden. Wenn Sie jedoch Zahlen verwenden möchten, müssen Sie normalerweise keine Anführungszeichen verwenden, wie unten gezeigt.

6.3 Variablen in JavaScript

Sie können auch Variablen an 'console.log' übergeben. Variablen klingen kompliziert, aber sie sind in Wirklichkeit nur ein Platz zum Ablegen von Informationsblöcken. Dies sind oft Zahlen oder Buchstaben. Dazu deklarieren Sie eine Variable mit dem Schlüsselwort 'var', geben ihr einen Namen und dann mit einem Gleichheitszeichen einen Wert. Also werde ich eine Variable namens 'hello' erstellen und ihr dann den Wert 'Hello World!' geben. Das übergebe ich dann an console.log.

Beachten Sie, dass ich 'hello' nicht in Anführungszeichen an console.log übergeben habe. Das liegt daran, dass ich den Inhalt von 'hello' und nicht 'hello' selbst auf die Konsole ausgeben wollte.

6.4 Welche Funktionen haben

Es kann etwas mühsam sein, immer wieder den gleichen Codeabschnitt neu zu schreiben, deshalb schreiben wir Funktionen. Funktionen sind einfacher als Sie denken. Alles, was sie sind, sind Codeblöcke, die wir wiederverwenden können, ohne den gleichen Code erneut schreiben zu müssen. Unten haben wir eine Funktion namens 'sup' erstellt und übergeben ihr ein Argument mit Klammern, das dann auf dem Bildschirm protokolliert wird. Wir rufen 'sup' auf, indem wir 'sup('Hello world!');' an die Konsole senden.

6.5 Wiederholen einer Aktion mit einer 'For'-Schleife

Angenommen, Sie möchten dieselbe Aktion eine bestimmte Anzahl von Malen ausführen. Aus diesem Grund verwenden wir eine for-Schleife. Sie sehen auf den ersten Blick beängstigend aus, sind aber so einfach zu machen, wenn man sie erst einmal verstanden hat. Sie beginnen mit dem Schreiben von 'for()'.

In diesen Klammern möchten wir eine Variable erstellen, die zählt, wie oft wir eine Aktion ausgeführt haben. Wir erhalten also etwas, das wie folgt aussieht 'for(var i = 0;)'.

Wir wollen dann prüfen, ob i eine Bedingung nicht erfüllt hat. In diesem Fall möchten wir also sehen, dass es weniger als 10 ist. Also schreiben wir nach dem Semikolon 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Wenn i kleiner als 10 ist, möchten wir es um eins addieren und dann etwas tun. Also setzen wir 'i = i + 1'. Unsere Schleife ist fast fertig: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Danach wollen wir eine Aktion durchführen. Also schreiben wir nach den letzten Klammern einige geschweifte Klammern und dazwischen werden wir den Wert von i in console.log schreiben. Dadurch wird ein Zähler erstellt, der bis neun zählt.

Die letzten beiden Programmierkonstrukte, die wir uns ansehen werden, sind 'if'-Anweisungen und 'while'-Schleifen.

6.6 Wenn-Anweisungen

Eine 'if'-Anweisung führt eine Aktion aus, wenn ein bestimmtes Kriterium erfüllt ist. Sie ähneln in der Konstruktion 'for'-Schleifen und funktionieren wie folgt. Angenommen, Sie haben eine Variable namens „Cheeseburgers“ und möchten sehen, ob sie den Wert „tasty“ hat. Wenn dies der Fall ist, möchten Sie 'lecker, Cheeseburger' auf dem Bildschirm protokollieren. Dazu würdest du so etwas schreiben.

Beachten Sie, wie ich 'if(cheeseburgers == 'tasty')' geschrieben habe. Sie verwenden doppelte oder dreifache Gleichheit, um die Gleichheit zu überprüfen, und einfache Gleichheit, um einen Wert zuzuweisen.

6.7 While-Schleifen

Schließlich führt eine 'while'-Schleife eine Aktion aus, solange ein Kriterium erfüllt ist. Stellen Sie sich also vor, Sie möchten 'lecker, Cheeseburger' einloggen, während Cheeseburger genauso lecker sind. Dazu würden Sie Folgendes schreiben.

Es ist erwähnenswert, dass dies in eine Endlosschleife eintreten würde, und Sie sollten vermeiden, eine Aktion für einen Wert auszuführen, der sich wahrscheinlich nicht ändern wird. Dies kann dazu führen, dass Ihr Browser blockiert oder Ihr Code nicht funktioniert.

Wie ich bereits erwähnt habe, war dies eine sehr kurze Einführung in die Programmierung von Konstrukten in Javascript. Sie werden ermutigt, mehr über dieses faszinierende, wenn auch riesige Thema zu lesen.

6.8 Testen Sie sich selbst

  • Ich möchte von 30 herunterzählen. Schreiben Sie eine 'for'-Schleife, die das tun würde.
  • Ich möchte eine Variable namens 'makeuseof' erstellen und ihr den Wert 'awesome' geben. Wie wird das gemacht?
  • Ich möchte eine Funktion erstellen, die beim Aufruf 'MakeUseOf Is Awesome' ausgibt. Schreiben Sie diese Funktion.

Weiterlesen:

7. Kreative Leinwand

Canvas ist eine coole Technologie, mit der Sie Bilder zeichnen und Animationen erstellen können, ohne auf Flash oder Silverlight zurückgreifen zu müssen. Die Leute haben es benutzt, um bizarre und wundervolle Dinge zu erschaffen, darunter einen Haartrockner-Simulator und verschiedene Videospiele. Es ist ein wunderbares und unergründlich großes Stück Technologie, in diesem Tutorial werde ich Ihnen eine kurze Einführung geben.

Es ist erwähnenswert, dass Canvas nur in modernen Webbrowsern funktioniert. Wenn Sie eine alte Version von IE, Chrome oder Firefox verwenden, können Sie diesem Kapitel möglicherweise nicht folgen. Wenn dies der Fall ist, sollten Sie die neueste Version von Google Chrome herunterladen, dem Webbrowser, in dem ich dieses Tutorial erstellt habe.

7.1 Erste Schritte mit Canvas

Zunächst müssen Sie Ihren Webbrowser öffnen und zu codepen.io navigieren. Erstellen Sie einen neuen Stift.

Jetzt müssen wir ein Canvas-Element deklarieren. Erstellen Sie zwei öffnende und schließende Canvas-Tags. Darin sollten Sie drei Attribute übergeben. Dies sind die Breite und Höhe des Canvas-Elements, zusammen mit der ID, die Sie ihm geben. Wie zuvor, wenn Sie ein Video eingefügt haben, sollten Sie eine Fallback-Nachricht einfügen.

Jetzt wollen wir etwas Javascript-Code schreiben, der etwas auf den Bildschirm zeichnet. Wir beginnen mit den Grundlagen und erstellen ein einfaches rotes Quadrat.

Wir werden eine Variable erstellen (ich habe sie 'Demo' genannt) und dann das Canvas-Element auswählen und es dieser Variablen zuweisen. Dazu verwenden Sie document.getElementByID() und übergeben die ID des Elements, das Sie auswählen möchten.

Die zweite Zeile in unserem Skript erstellt eine weitere Variable namens 'context' und ruft dann 'demo.getContext('2d')' darauf auf. Dies teilte dem Browser mit, dass wir an einem 2D-Bild arbeiten werden, und gab dann die notwendigen Funktionen weiter, die wir zum Zeichnen auf den Bildschirm benötigen würden.

Die dritte und vierte Zeile sind diejenigen, die tatsächlich auf dem Bildschirm zeichnen. Die dritte Zeile füllt ein Rechteck mit der Farbe Rot, während die vierte Zeile fillRect aufruft, das es positioniert und seine Länge und Breite definiert.

Das ist aber nicht beeindruckend. Lassen Sie uns etwas fortgeschritteneres tun und die Magie von Javascript und Canvas verwenden, um MakeUseOf ein brandneues Logo zu erstellen.

7.2 Formen und Text

Lassen Sie uns unsere vierte Zeile löschen und durch eine ersetzen, die unser Rechteck in der oberen linken Ecke platziert und über die Länge unserer Leinwand streckt.

Die ersten beiden Argumente definieren, wo wir die x- und y-Achse der Form positionieren möchten. Lassen Sie uns diese beiden vorerst auf '0' setzen. Das dritte Argument bezieht sich auf die Breite der Form. Lassen Sie uns das auf '200' setzen und dann das vierte Argument auf '50' belassen. Sie sollten jetzt etwas haben, das ein bisschen so aussieht.

Dies ist ein großartiger Anfang, aber MakeUseOf wird darin überhaupt nicht erwähnt. Also fügen wir etwas Text hinzu. Lassen Sie uns eine Variable erstellen, die 'makeuseof' enthält, und wir nennen diese Variable 'MakeUseOf'.

Wir wollen dann eine weitere Kontextvariable erstellen. Nennen Sie dies 'context2' und stellen Sie sicher, dass es 2d ist. In diese schreiben wir unseren Text.

Unser Text soll blau gefärbt sein und unser rotes Quadrat überlagern. Also, genau wie zuvor, wollen wir ihm einen fillStyle von 'blue' geben. Jetzt werden wir die Eigenschaften unseres Textes auswählen. Wir möchten, dass es 20px groß, fett formatiert ist und eine Arial-Schrift verwendet. Wir rufen font on context2 auf und weisen ihm den Wert 'bold 20px arial' zu.

Da dieser Text unser vorheriges rotes Kästchen überlagern soll, müssen wir 'textBaseLine' in context2 aufrufen und ihm den Wert top zuweisen. Sobald dies abgeschlossen ist, rufen wir 'fillText' auf context2 auf und übergeben ihm die Variable, die unseren Text und die x- und y-Koordinaten enthält, in denen wir unseren Text platzieren möchten. Das Endergebnis unseres Codes ist in etwa so.

Das vom Code erzeugte Bild sieht so aus.

7.3 Ein Wort auf Leinwand

Obwohl dies eine unglaublich grundlegende Einführung in Canvas war, sollten Sie verstehen, dass es sich auch um eine unglaublich umfangreiche Technologie und eine unglaublich leistungsstarke Technologie handelt. Diese Anleitung diente lediglich als Einführung in die Erstellung von Grafiken mit dieser neuen Technologie.

So verbergen Sie den Online-Status bei WhatsApp

7.4 Testen Sie sich selbst

  • Fügen Sie dem von Ihnen erstellten Bild den folgenden Slogan hinzu: 'Die beste Tech-Site aller Zeiten!'
  • Erstellen Sie eine 'for'-Schleife, die zehn Iterationen lang ausgeführt wird. Sehen Sie, ob Sie Ihre Zeichnung Pixel für Pixel auf der Leinwand nach unten verschieben können.
  • Wickeln Sie Ihre Zeichnung in eine Funktion ein. Was passiert, wenn Sie es nicht anrufen?

Weiterlesen:

8. Wo als nächstes?

Vielen Dank, dass Sie meinen unglaublich kurzen Leitfaden zu den neuen Technologien in HTML5 gelesen haben. Es ist unbestreitbar, dass HTML5 die Technologie der Zukunft ist. Es wird von den meisten Technologien übernommen, da es einfach zu schreiben und über alle Maßen leistungsstark ist. Die Leute machen die ganze Zeit unglaubliche Dinge damit, und ich habe keinen Zweifel daran, dass Sie in Zukunft einer dieser Menschen sein werden. Ich fühle mich geehrt, Teil Ihrer Reise in die wilde und wunderbare Welt von HTML5 gewesen zu sein.

Ich bitte Sie, weiter zu lernen. Codieren Sie weiter. Steigen Sie weiter auf und verbessern Sie sich, und im Handumdrehen werden Sie die Technologien, die in dieser kurzen Anleitung vorgestellt wurden, verwenden, um wunderbare Produkte zu erstellen.

Teilen Teilen Tweet Email Lohnt sich ein Upgrade auf Windows 11?

Windows wurde neu gestaltet. Aber reicht das aus, um Sie davon zu überzeugen, von Windows 10 auf Windows 11 umzusteigen?

Weiter lesen Verwandte Themen
  • WordPress & Webentwicklung
  • HTML5
  • Lange Form
  • Langform-Führer
Über den Autor Matthew Hughes(386 veröffentlichte Artikel)

Matthew Hughes ist ein Softwareentwickler und Autor aus Liverpool, England. Er ist selten ohne eine Tasse starken schwarzen Kaffees in der Hand zu finden und liebt sein Macbook Pro und seine Kamera absolut. Sie können seinen Blog unter http://www.matthewhughes.co.uk lesen und ihm auf Twitter unter @matthewhughes folgen.

Mehr von Matthew Hughes

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren