Erste Schritte mit HTML5

Dieser Leitfaden kann als kostenloses PDF heruntergeladen werden. Laden Sie Get Geted With HTML5 jetzt herunter. Fühlen Sie sich frei, dies zu kopieren und mit Ihren Freunden und Ihrer Familie zu teilen.

instagram viewer

und

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

Zweitens wird in diesem Handbuch davon ausgegangen, dass Sie wissen, was CSS ist und wie es funktioniert. Wir erwarten nicht, dass Sie Design-Genies sind, und Sie erwarten auch nicht, dass Sie die gesamte CSS-Spezifikation auf der Rückseite kennen. Sie sollten jedoch in der Lage sein, ein Element auf einer Webseite mit einem Stil zu versehen, eine Verknüpfung zu einer CSS-Datei herzustellen und die Unterschiede zwischen einer ID und einer Klasse sowie die Anwendung des Stils auf jedes Element zu kennen.

Machen Sie sich keine Sorgen, wenn Sie sich oben am Kopf kratzen. Eines der besten Dinge an HTML und CSS ist, dass es wirklich sehr, sehr einfach ist. In der Tat hat MakeUseOf eine unglaubliche XHTML-Anleitung Lernen Sie, "Internet" zu sprechen: Ihr Leitfaden für xHTMLWillkommen in der Welt von XHTML - Extensible Hypertext Markup Language - einer Markup-Sprache, mit der jeder Webseiten mit vielen verschiedenen Funktionen erstellen kann. Es ist die Hauptsprache des Internets. Weiterlesen das bringt dich sehr schnell auf den neuesten Stand.

Nach dem Lesen dieses Handbuchs möchten Sie möglicherweise auch die folgenden Artikel lesen:

• 8 Websites mit Beispielen für die Qualitätscodierung 8 besten Websites für Beispiele für hochwertige HTML-CodierungEs gibt einige großartige Websites, die gut gestaltete und nützliche HTML-Codierungsbeispiele und Tutorials bieten. Hier sind acht unserer Favoriten. Weiterlesen
• 6 Blogs für großartige Webdesigner 6 besten Webdesign-Blogs, denen Sie folgen sollten Weiterlesen

Sie benötigen außerdem einen modernen Texteditor und einen Browser. Jede Version von Internet Explorer, die älter als IE 9 ist, und einige ältere Versionen von Safari, Chrome und Firefox hat mit vielen Funktionen zu kämpfen, die Teil von HTML5 sind, und kann Sie möglicherweise daran hindern, dies zu befolgen leiten.

Daher wird empfohlen, einen modernen Browser herunterzuladen. Ich empfehle Google Chrome und werde es in jedem Beispiel verwenden.

Darüber hinaus brauchen Sie nur die Bereitschaft zum Lernen. Oh, und ein Texteditor.

1.2 Texteditoren für die Webentwicklung

Ihr Texteditor wird zum Schreiben Ihres Codes verwendet. Sie fragen sich vielleicht, was ein Texteditor ist.

Erstens ist es kein Textverarbeitungsprogramm. Programme wie Microsoft Word und Apples Seiten sind für die Webentwicklung völlig ungeeignet. Dies liegt daran, dass sie Ihren HTML-, CSS- und Javascript-Dateien zusätzliche Informationen hinzufügen, die das Lesen für Ihren Webbrowser erschweren.

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

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 wird mit vier verschiedenen Texteditoren geliefert. Diese heißen Vim, Emacs, Pico und Nano. Im Gegensatz zu Notepad funktionieren jedoch alle im Terminal.

Dies ist ein wenig einschüchternd für Leute, die neu in der Webentwicklung sind und nicht von Leuten verwendet werden sollten, die neu in der Softwareentwicklung sind. Wir werden sie in diesem Handbuch nicht verwenden. Wenn Sie jedoch etwas mehr Vertrauen in die Software- und Webentwicklung haben, lohnt es sich auf jeden Fall, einen Blick darauf zu werfen Vim Die 7 wichtigsten Gründe, dem Vim-Texteditor eine Chance zu gebenIch habe jahrelang einen Texteditor nach dem anderen ausprobiert. Sie nennen es, ich habe es versucht. Ich habe jeden dieser Editoren über zwei Monate lang als meinen primären täglichen Editor verwendet. Irgendwie ... Weiterlesen und Emacs. Sie sind beide leistungsstarke Texteditoren, und wenn Sie sie beherrschen, können Sie sehr viel Zeit sparen.

Unter Linux variiert der Standardtexteditor zwischen den Distributionen. Unter Ubuntu ist dies wahrscheinlich Gedit gedit: Einer der funktionsreichsten Nur-Text-Editoren [Linux & Windows]Wenn Sie an Nur-Text-Editoren denken, ist das erste, was Ihnen in den Sinn kommt, die Windows-Editor-Anwendung. Es macht genau das, was in seiner Stellenbeschreibung angegeben ist - einfache Funktionen für einen einfachen Text ... Weiterlesen Dies ist 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.

Das erste ist Erhabener Text 2 Probieren Sie Sublime Text 2 für Ihre plattformübergreifenden Anforderungen an die Codebearbeitung ausSublime Text 2 ist ein plattformübergreifender Code-Editor, von dem ich erst kürzlich gehört habe, und ich muss sagen, dass ich trotz des Beta-Labels wirklich beeindruckt bin. Sie können die vollständige App herunterladen, ohne einen Cent zu zahlen ... Weiterlesen . Ich kann das ehrlich gesagt nicht genug empfehlen. Es kommt mit all den Dingen, die einem beginnenden Entwickler das Leben leichter machen. Erstens erleichtert es das Lesen Ihres Codes, indem bestimmte Teile eingefärbt werden. Zweitens können Sie einfach zwischen Dateien wechseln und ganze Projekte von Dateien verwalten. Dies ist ideal, um zwischen Dateien zu wechseln und mehrere Codebits im laufenden Betrieb zu bearbeiten.

Der dritte ist der Javascript-Konsole Finden Sie Website-Probleme mit Chrome Developer Tools oder Firebug herausWenn Sie bisher meinen jQuery-Tutorials gefolgt sind, sind möglicherweise bereits einige Codeprobleme aufgetreten, und Sie wissen nicht, wie Sie diese beheben können. Wenn man mit einem nicht funktionierenden Code konfrontiert wird, ist es sehr ... Weiterlesen das ist in Google Chrome integriert. Dies ermöglicht es uns, Javascript zu schreiben und zu sehen, dass es sofort ausgeführt wird, und wird verwendet, um grundlegende Programmierkonzepte zu erklären.

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

2. Semantisches Markup

In diesem Kapitel erfahren Sie mehr über Semantic Markup und wie Sie Ihren Code anhand seines Inhalts organisieren.

Bis vor kurzem wurde HTML-Code im Allgemeinen mit organisiert

Dies funktionierte, aber es gab Raum für Verbesserungen. Das Problem mit

Semantisches Markup ist eine neue Funktion in HTML5. Es werden neue Tags eingefügt, die wie ein "div" -Tag funktionieren, jedoch zum Markieren allgemeiner Teile einer Seite dienen.

Wie funktionieren sie? Betrachten Sie den folgenden Code.

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

Schauen wir uns einen Artikel über MakeUseOf an. Sie werden feststellen, dass ein Teil der Seite ausschließlich für die Navigation zu anderen Artikeln reserviert ist. Sie werden auch feststellen, dass ein anderer Teil der Seite die Wörter enthält, aus denen ein Artikel besteht. 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 Inhalt. Sie haben höchstwahrscheinlich einen Header.

Semantische Tags sind Tags, mit denen Sie Teile einer Website definieren können, die auf den meisten Websites häufig vorkommen. Sie fügen der Seite nichts hinzu, aber Sie können Tags basierend auf ihrem Inhalt gruppieren und diesen Gruppen Stile zuweisen.

Erinnerst du dich an den Code, den wir vorher hatten? Schauen wir uns das mit einem hinzugefügten semantischen Markup an.

Wie Sie sehen können, ist der Code viel einfacher zu lesen. Sie wissen, welche Teile welche sind und es gibt keine Mehrdeutigkeit. Dies ist wichtig, da es einfacher ist, guten, sauberen Code zu schreiben. Sollten Sie sich jemals dazu entschließen, ein professioneller Webdesigner zu werden, ist dies von größter Bedeutung - Sie wissen nie, wer die von Ihnen produzierte Arbeit lesen wird.

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

2.1 Abschnitt

Abschnitt ist ein wirklich nützliches Tag. Es wird verwendet, um große Mengen an Informationen und Inhalten abzurufen, 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. Enthält Inhalte wie einen Blog-Beitrag oder eine Nachricht. Dieser Inhalt sollte vom Rest des Blogs getrennt werden können und dennoch einen kohärenten Sinn ergeben.

2.3 Nebenbei

Dieses Tag ist für Inhalte reserviert, die sich auf die Webseite beziehen, jedoch nicht Bestandteil dieser Webseite sind. Dies können eine Reihe von Fakten sein, die sich auf eine Nachricht oder die Biografie eines Benutzers in einem Blog beziehen.

2.4 Header

Viele Webseiten haben oben auf der Seite eine Leiste, die ein Logo, einige Informationen zur Website und möglicherweise einige Links enthält. In Semantic Markup verwenden Sie ein Header-Tag, um all dies zu enthalten.

2.5 Nav

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

2.6 Fußzeile

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

2.7 Testen Sie sich

• 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 benutze ich?

3. Formen

Wenn Sie schon einmal ein bisschen Webdesign gemacht 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, verwenden und etwas damit tun können, indem Sie sie in eine Datenbank einfügen.

Formen sind enorm wichtig. Sie sind die Grundlage für die meisten Dinge, die wir im Internet tun. Jedes Mal, wenn Sie eine Statusaktualisierung 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 tun können, nur mit einfachem alten Markup.

Was ist 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 senden können. Nehmen wir also an, Sie haben eine Website für Ihre Mailingliste und möchten nur, dass Personen tatsächliche E-Mail-Adressen senden können. Sie können dies einfach mit HTML5 tun. Es ist wirklich unglaublich mächtig.

Drittens können Sie Ihre Formulare verbessern, indem Sie bestimmten Feldern einen Platzhalter geben. 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, wie wir es verbessern können.

Diese Form ist ziemlich einfach. Es nimmt einen Namen, eine E-Mail und eine Lieblingsfarbe an und ermöglicht es dem Benutzer, diese einzureichen. Es enthält keine Überprüfung, welche Informationen darin abgelegt werden, und nichts hindert Benutzer daran, dieses Formular mit einigen leeren Feldern zu senden. Lassen Sie uns das alles ändern.

Das erste, was wir tun möchten, ist sicherzustellen, dass das E-Mail-Feld nur eine E-Mail enthält. Dies war in der Tat eine ziemlich schwierige Aufgabe, da Sie alle Arten von arkanem Regex-Code erstellen mussten. Nun, nicht mehr. Sie müssen nur den Typ der Eingabe von "Text" in "E-Mail" ändern. Wenn Sie versuchen, dieses Formular mit Kauderwelsch einzureichen, 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 sich HTML5 ständig weiterentwickelt, ist es naheliegend, dass wir in naher Zukunft weitere Eingabetypen angeben können.

Darüber hinaus können Sie für Dinge wie Telefonnummern, die je nach Ort variieren, Muster für Eingaben angeben. Diese werden mit so genannten "regulären Ausdrücken" erstellt und sind ziemlich kompliziert, aber unermesslich leistungsfähig.

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 senden muss. Das ist wirklich einfach. Erstellen Sie einfach ein neues Attribut "Platzhalter" mit einer Beispiel-E-Mail-Adresse.

Wir werden sicherstellen, dass unser Feld "Lieblingsfarbe" erforderlich ist. Schreiben Sie in die letzte spitze Klammer (>) im E-Mail-Eingabe-Tag einfach "Erforderlich". Das ist es. Wenn Sie nun versuchen, Ihr Formular ohne Wert zu senden, wird eine Fehlermeldung angezeigt.

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. Wenn dies gewünscht ist, können Sie sie nach Bedarf anpassen.

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

Weiterführende Literatur:

• CSS-Tricks - Schreiben wir ein semantisches Markup
• HTML5 Doctor - Sprechen wir über Semantik

3.3 Testen Sie sich

Nächste Woche haben Sie Geburtstag und möchten ein Registrierungsformular erstellen, damit Sie wissen, wie viel Kuchen Sie erstellen 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. Erstellen Sie einen Platzhalter für das Allergiefeld mit dem Wert "Pollen, Eier, Quiche".

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

4. Medien

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

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

Darüber hinaus 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 nutzen, da diese für ihre Plattform nicht verfügbar waren.

Schließlich neigten sie dazu, langsam zu sein. Wenn Sie sich auf einem Computer mit geringer Leistung oder älter befinden, haben Sie keine gute Erfahrung beim Anzeigen von Videos mit diesen Frameworks. Flash war dafür besonders berüchtigt.

4.1 Wie HTML5 Video und Audio großartig macht

HTML5 hat dies geändert, indem Webentwicklern ermöglicht wurde, Video und Audio mit nur wenigen Codezeilen in ihre Webseiten aufzunehmen. Es funktioniert auf mobilen Geräten und in jedem modernen Webbrowser.

Infolgedessen nutzen große Unternehmen wie YouTube, Vimeo und Netflix die HTML5-Revolution. Warum machst du nicht mit?

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 aufzunehmen.

Erstens muss ich mit einer Einschränkung beginnen. Sie können HTML5-Videos zwar in jedem modernen Webbrowser verwenden, sie funktionieren jedoch nicht in jedem Webbrowser gleich. Die von jedem Browser verwendeten Codecs variieren. In Internet Explorer können Sie nur MP4-Videos verwenden. 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 klug sein, wie Sie Videos in Ihre Webseite einfügen. Mal sehen, wie es funktioniert.

4.3 Mit Video beginnen

Zunächst müssen Sie ein Öffnen und Schließen erstellen

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 Ihren Video-Tags dazu einfach das Attribut "Poster" mit dem Wert des Bildes, auf das Sie verlinken möchten. Es sollte so aussehen.

Als nächstes wollen wir einen Fallback erstellen. Was bedeutet das? Angenommen, Sie verwenden einen der älteren, weniger beeindruckenden Browser. Viele dieser älteren Browser unterstützen kein HTML5-Video und können daher kein HTML5-Video abspielen. Sie möchten ihnen eine Nachricht hinterlassen, in der sie darüber informiert werden, dass sie ihren Browser aktualisieren möchten und dass sie Ihr Video erst dann ansehen können, wenn sie dies tun.

Dazu schreiben Sie einfach Ihre Nachricht in Ihre Video-Tags. Sonst ist nichts erforderlich. Sobald Sie dies getan haben, bleibt Ihnen ein Code übrig, der so aussieht.

Fügen wir nun ein Video hinzu. Ich werde dies in Google Chrome testen und daher einen Link zu einem MP4-Film erstellen. Dazu erstelle ich ein Source-Tag und gebe ihm das Attribut src, das den Wert des Videos enthält, das ich einschließen möchte.

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

4.4 Audio hinzufügen

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

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

Anschließend fügen Sie der MP3-Datei, mit der Sie einen Link erstellen möchten, ein Quell-Tag hinzu. Sie müssen sich nicht wirklich um die Codec-Kompatibilität kümmern. Die neuesten Webbrowser bieten die Möglichkeit, MP3-Audio abzuspielen. Es wird jedoch empfohlen, für alle Fälle auch eine .ogg- und eine .wav-Datei einzuschließen.

Schließlich können Sie einen Fallback für ältere Browser erstellen. Dies geschieht auf die gleiche Weise, wie Sie den 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

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

Weiterführende Literatur:

• HTML5 rockt Video

5. CSS3-Transformationen und -Animationen

CSS wurde traditionell verwendet, um das zu handhaben Layout und Design einer Webseite 5 kleine Schritte zum Erlernen von CSS und zum Kick-Ass-CSS-ZaubererCSS ist die wichtigste Veränderung, die Webseiten im letzten Jahrzehnt erlebt haben, und es hat den Weg für die Trennung von Stil und Inhalt geebnet. Auf moderne Weise definiert XHTML die semantische Struktur ... Weiterlesen . Dies ist immer noch wahr, aber in seiner neuesten Iteration hat es die Fähigkeit erlangt, Animationen und Transformationen von Elementen und Bildern zu verarbeiten.

Die Leute haben mit CSS3 einige erstaunliche Dinge getan, von der Erstellung einer Digitaluhr bis zum Schreiben eines vollständigen Pong-Spiels. Jemand hat es sogar benutzt, um die Einführungskredite für Mad Men neu zu erstellen. Es ist eine wirklich leistungsstarke Technologie und kann, wenn sie beherrscht wird, verwendet werden, um Ihrer Webseite ein erstaunliches Maß an Funktionalität hinzuzufügen.

In diesem Kapitel werde ich Ihnen einen kurzen Überblick geben Einführung in CSS3 Top 5 Websites, um CSS online zu lernen Weiterlesen und zeigen Ihnen, wie Sie Ihrer Seite einige 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 Arbeitsbereich verwenden.

Wir werden einfach beginnen und eine einfache Bildtransformation erstellen, die ein Bild beim Bewegen um 3 Grad dreht. 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 dieses div ein Bild Ihrer Wahl ein. Ich habe eine Kopie des Logos für MakeUseOf beigefügt.

Anschließend müssen Sie einige Stylesheet-Regeln schreiben. Im folgenden Beispiel habe ich einen oberen und einen 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 einer Stylesheet-Regel ": hover" hinzufügen, sei es einem Element, einer ID oder einer Klasse, weisen Sie den Browser effektiv an, dieses Styling anzuwenden, wenn Ihre Maus das Element steuert. Ziemlich cool, oder?

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

Beachten Sie jedoch, dass dieses Tag nur in Chrome und Safari funktioniert. Wenn Sie möchten, dass Ihr Code in Firefox oder Internet Explorer 9 und höher funktioniert, möchten Sie Ihre CSS-Datei so ändern, dass sie die folgenden Zeilen enthält.

Wenn Sie jetzt mit der Maus über das Bild fahren, sieht es folgendermaßen aus:

5.2 Verwenden von CSS3 zum Ändern der Bildgröße

Warum also dort aufhören? Wussten Sie, dass Sie mit der Transformationsmethode auch ein Bild vergrößern oder verkleinern können? Ändern wir unsere CSS-Datei so, dass sie die folgenden Zeilen enthält.

Wie Sie sehen können, haben wir jetzt eine neue Transformationsregel eingefügt, aber dieses Mal fordern wir sie auf, etwas zu tun, das als "Skalieren" bezeichnet wird. Dies ist eine wirklich schöne Möglichkeit, ein Bild zu vergrößern. Es werden zwei Parameter benötigt (die Zahlen, die Sie zwischen diesen Klammern sehen), und sie geben den Betrag an, um den Sie die Höhe und Breite des Elements erhöhen.

Wie Sie dem Code entnehmen können, werde ich das MakeUseOf div-Logo um 50% vergrößern. Sie können dies testen, indem Sie den Mauszeiger darüber halten. Sie werden sehen, dass das MakeUseOf-Logo jetzt deutlich stärker gedehnt 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 durchführen können.

5.3 Testen Sie sich

• 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?

Weiterführende Literatur:

HTML5 Rocks - Präsentation

6. Nur genug Javascript

Wenn Sie ein Skript in Ihrem Webbrowser verwenden möchten, müssen Sie es verwenden Javascript Was ist JavaScript und wie funktioniert es? [Technologie erklärt] Weiterlesen . Leider gibt es keine zwei Möglichkeiten. Es ist ein Sprache, die viele Fans hat 5 Umfangreiche JavaScript-Codebibliotheksoptionen für Entwickler Weiterlesen und viele Kritiker auch. 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 ist unmöglich, 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 um die Verwendung einer Technologie namens Canvas zum Erstellen von Zeichnungen und Animationen geht.

6.1 Zugriff auf die Konsole

Zu diesem Zweck 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 überprüfen" klicken. Klicken Sie anschließend auf "Konsole". Du solltest das sehen.

Es ist traditionell, dass das erste Programm, das ein angehender Entwickler jemals schreibt, das Programm "Hello World" ist. Dies ist ein einfaches Programm, das den Ausdruck "Hallo Welt" druckt und sonst nicht viel. Geben Sie in Ihre Konsole "console.log" ("Hallo Welt!") Ein.

6.2 Ihr erstes Programm

Also, was genau haben wir gemacht? Zuerst haben wir etwas namens "console.log" genannt. Dies ist ein Teil des Codes, der in den Computer integriert ist und einfach alles druckt, was Sie ihm sagen. Wir haben dann einige Klammern angehängt und das in doppelte Anführungszeichen stehende "Hallo Welt" eingefügt. Dies wird als "Übergeben von Argumenten" bezeichnet, und die Art des übergebenen Arguments wird als Zeichenfolge bezeichnet. Wenn Sie etwas mit Buchstaben und Sonderzeichen tun möchten, müssen Sie einfach einfache Anführungszeichen verwenden. Wenn Sie jedoch etwas mit Zahlen tun möchten, müssen Sie normalerweise keine Anführungszeichen verwenden, wie unten dargestellt.

6.3 Variablen in JavaScript

Sie können Variablen auch an "console.log" übergeben. Variablen klingen kompliziert, aber alles, was sie wirklich sind, ist ein Raum, in dem Informationsblöcke abgelegt werden können. Dies sind oft Zahlen oder Buchstaben. Dazu deklarieren Sie eine Variable mit dem Schlüsselwort "var", geben ihr einen Namen und geben ihr mit einem Gleichheitszeichen einen Wert. Also werde ich eine Variable namens "Hallo" erstellen und ihr dann den Wert "Hallo Welt!" Geben. Ich werde das dann an console.log weitergeben.

Beachten Sie, dass ich "Hallo" nicht mit Anführungszeichen an console.log übergeben habe. Das liegt daran, dass ich den Inhalt von "Hallo" und nicht "Hallo" selbst auf die Konsole drucken wollte.

6.4 Was Funktionen tun

Es kann etwas mühsam sein, immer wieder denselben Codeabschnitt neu zu schreiben. Aus diesem Grund schreiben wir Funktionen. Funktionen sind einfacher als Sie denken. Alles, was sie sind, sind Codestücke, die wir wiederverwenden können, ohne denselben Code erneut zu schreiben. Im Folgenden haben wir eine Funktion namens "sup" erstellt und übergeben ihr ein Argument in Klammern, das dann auf dem Bildschirm protokolliert wird. Wir rufen "sup" auf, indem wir "sup (" Hallo Welt! ") An die Konsole senden.

6.5 Wiederholen einer Aktion mit einer For-Schleife

Angenommen, Sie möchten dieselbe Aktion für eine festgelegte 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 Sie sie erst einmal verstanden haben. 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 so aussieht: "for (var i = 0;)".

Wir wollen dann überprüfen, ob ich eine Bedingung nicht erfüllt habe. In diesem Fall möchten wir also sehen, dass es weniger als 10 sind. Nach dem Semikolon schreiben wir also "i <10". Unsere Schleife sieht jetzt so aus: 'for (var i = 0; i <10;).

Wenn ich kleiner als 10 bin, wollen wir es um eins hinzufügen und dann etwas tun. Also setzen wir "i = i + 1". Unsere Schleife ist fast fertig: „für (var i = 0; i <10; i = i + 1) “. Beachten Sie, dass der letzte Teil kein Semikolon enthält.

Danach wollen wir eine Aktion ausführen. Nach den letzten Klammern schreiben wir einige geschweifte Klammern und dazwischen werden wir den Wert von i auf console.log setzen. Dadurch wird ein Zähler erstellt, der bis zu neun zählt.

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

6.6 If-Anweisungen

Eine if-Anweisung führt eine Aktion aus, wenn bestimmte Kriterien erfüllt sind. Sie ähneln den for-Schleifen in der Konstruktion und funktionieren wie folgt. Angenommen, Sie haben eine Variable namens "Cheeseburger" und möchten sehen, ob sie den Wert "lecker" hat. Wenn dies der Fall ist, möchten Sie "lecker, Cheeseburger" auf dem Bildschirm anmelden. Dazu würden Sie so etwas schreiben.

Beachten Sie, wie ich "if (Cheeseburger ==" lecker ")" geschrieben habe. Sie verwenden doppelte oder dreifache Gleichheit, um die Gleichheit zu überprüfen, und einzelne Gleichheit, um einen Wert zuzuweisen.

6.7 While-Schleifen

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

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 ändert. Dies kann dazu führen, dass Ihr Browser abstürzt 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 große Thema zu lesen.

6.8 Testen Sie sich

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

Weiterführende Literatur:

• "Javascript: Die guten Teile" von Douglas Crockford
• MDN Javascript-Handbuch

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 damit bizarre und wundervolle Dinge geschaffen, darunter einen Haartrocknersimulator und verschiedene Videospiele. Es ist eine wundervolle und unergründlich große 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. In diesem Fall sollten Sie die neueste Version von Google Chrome herunterladen. Dies war der Webbrowser, in dem ich dieses Lernprogramm 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. In ihnen sollten Sie drei Attribute übergeben. Dies sind die Breite und Höhe des Canvas-Elements sowie die ID, die Sie ihm geben. Wie zuvor, wenn Sie ein Video eingefügt haben, sollten Sie eine Fallback-Nachricht einfügen.

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

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

In der zweiten Zeile unseres Skripts wird eine weitere Variable mit dem Namen "context" erstellt und anschließend "demo.getContext (" 2d ")" aufgerufen. Dies teilte dem Browser mit, dass wir an einem 2D-Bild arbeiten und dann die erforderlichen Funktionen übergeben, die zum Zeichnen auf dem Bildschirm erforderlich sind.

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

Das ist allerdings 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

Löschen wir unsere vierte Zeile und ersetzen sie durch eine, die unser Rechteck in der oberen linken Ecke platziert und es über die Länge unserer Leinwand ausdehnt.

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

Dies ist ein guter Anfang, aber MakeUseOf wird überhaupt nicht erwähnt. Wir werden also Text hinzufügen. Erstellen wir eine Variable mit "makeuseof" und nennen diese Variable "MakeUseOf".

Wir werden dann eine weitere Kontextvariable erstellen wollen. Nennen Sie dieses "Kontext2" und stellen Sie sicher, dass es 2d ist. Dies ist es, in das wir unseren Text schreiben werden.

Wir möchten, dass unser Text blau gefärbt wird und unser rotes Quadrat überlagert wird. Also, genau wie zuvor, werden wir ihm einen Füllstil von "Blau" geben wollen. Jetzt werden wir die Merkmale unseres Textes auswählen. Wir möchten, dass es 20 Pixel groß, fett formatiert und mit einer Arial-Schriftart versehen ist. Wir rufen font auf context2 auf und weisen ihm den Wert "fett 20px arial" zu.

Da dieser Text unser vorheriges rotes Feld überlagern soll, müssen wir "textBaseLine" in context2 aufrufen und ihm den Wert "top" geben. Sobald dies abgeschlossen ist, rufen wir "fillText" für context2 auf und übergeben ihm die Variable, die unseren Text sowie die x- und y-Koordinaten enthält, in denen wir unseren Text platzieren möchten. Das Endergebnis unseres Codes ist ungefähr so.

Das vom Code erzeugte Bild sieht folgendermaßen aus.

7.3 Ein Wort auf Leinwand

Dies war zwar eine unglaublich grundlegende Einführung in Canvas, aber Sie sollten verstehen, dass es sich auch um eine unglaublich große Technologie handelt und eine unglaublich leistungsstarke, um zu booten. Dieser Leitfaden diente lediglich als Einführung in die Erstellung von Grafiken mit dieser neuen Technologie.

7.4 Testen Sie sich

• 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. Überprüfen Sie, ob Sie Ihre Zeichnung pixelweise über die Leinwand verschieben können.
• Wickeln Sie Ihre Zeichnung in eine Funktion ein. Was passiert, wenn Sie es nicht anrufen?

Weiterführende Literatur:

• HTML5 Rocks - Integration von Canvas in Ihre Web-Apps.
• Baumhaus - Wie man mit Leinwand zeichnet

8. Wohin als nächstes?

Vielen Dank, dass Sie meinen unglaublich kurzen Leitfaden zu den neuen Technologien in HTML5 gelesen haben. Es ist nicht zu leugnen, dass HTML5 die Technologie der Zukunft ist. Es wird von den meisten Technologien übernommen, da es einfach zu schreiben und unermesslich leistungsfähig ist. Die Leute machen die ganze Zeit unglaubliche Dinge damit, und ich habe keinen Zweifel daran, dass Sie in Zukunft einer dieser Leute sein werden. Es ist mir eine Ehre, Teil Ihrer Reise in die wilde und wundervolle Welt von HTML5 gewesen zu sein.

Ich flehe dich an, weiter zu lernen. Codieren Sie weiter. Steigen Sie weiter auf und verbessern Sie sich. In kürzester Zeit werden Sie die in dieser Kurzanleitung vorgestellten Technologien verwenden, um wunderbare Produkte zu entwickeln.