Grundlagen der mobilen Webentwicklung

Auf dem Chrome Dev Summit 2014 wurden eine ganze Reihe von Themen behandelt, von denen viele über die neuesten APIs gingen. Aber es war nicht alles, was gerade angesagt war.

Wenn Sie ein neuer Webentwickler oder selbst ein erfahrener Entwickler sind, der gerade dabei ist, neue APIs zu erkunden, führen Sie wahrscheinlich diese drei Schritte aus: Lernen, Erstellen und Iterieren.

Matt Gaunt berichtet vom Team der Chrome-Entwicklerplattform über die laufenden Bemühungen zur Lösung dieser Probleme.

Lernen

WebFundamentals auf HTML5Rocks

Web Fundamentals bietet eine Reihe von Dokumentationen, die auf Anwendungsfällen basieren und eine Reihe von Themen behandeln. Das Hauptziel besteht darin, Entwickler ohne oder mit wenig Wissen dazu zu bringen, Best Practices so schnell wie möglich umzusetzen.

Eines der Hauptziele der Web Fundamentals besteht darin, sicherzustellen, dass Sie mit einem Thema noch nicht vertraut sind. Addy Osmani deckt das bei Pastry Box perfekt ab.

Wenn Sie Probleme mit der Website oder deren Inhalten feststellen oder ein bestimmtes Thema von Web Fundamentals behandelt werden soll, geben Sie uns Feedback auf GitHub.

Build

Web Starter Kit für Range-Geräte

Um Sie beim Start eines neuen Webprojekts zu unterstützen, haben wir das Web Starter Kit entwickelt. Es enthält alles, was Sie brauchen:

  • Ein solider Erstellungsprozess
  • Boilerplate-HTML
  • Gestaltungsrichtlinien

Der Build-Prozess

Wenn Sie noch nicht mit dem Erstellen von Prozessen vertraut sind, können Sie sich einen Build-Prozess am einfachsten als ein Programm vorstellen, das eine Reihe von Dateien verwendet, bestimmte Aufgaben damit ausführt und neue Versionen an einem anderen Speicherort ausgibt. Die Aufgaben optimieren die Dateien, um Ladezeiten zu verbessern, auf mögliche Fehler zu prüfen oder Aufgaben zu verarbeiten, die automatisiert werden können.

Im Web Starter Kit gibt es folgende Prozesse:

Diagramm zum Erstellungsprozess für Web Starter-Kits

CSS und JavaScript werden komprimiert und verkettet, damit der Browser die Datei schnell abrufen kann. JavaScript wird auch über JSHint ausgeführt, um Best Practices für JavaScript und häufige Codierungsfehler zu prüfen. Bilder werden mit Imagemin minimiert und Sie können damit eine hohe Dateigrößenreduzierung erreichen. Wir haben auch einen Prozess zum Erstellen des Styleguide-CSS-Codes.

Standardtext für HTML-Code für mehrere Geräte

Der erste Satz von HTML-Code, den Sie für eine neue Seite schreiben, entspricht ziemlich weit von der Standardseite. Wahrscheinlich erhalten Sie schnell eine gebrauchsfertige HTML-Datei, die auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert.

Im Web Starter Kit möchten wir alle Funktionen unterstützen, durch die die Grenzen zwischen der Plattform und Ihrer Website verwischt wurden. Deshalb unterstützen wir das Hinzufügen zum Startbildschirm und Startbildschirme für Android, Windows Phone, iOS und Opera Coast.

Beispiel für das Hinzufügen eines Web Starter Kits zum Startbildschirm

Gestaltungsrichtlinien

Styleguide für das Web-Starterkit auf Chromebook Pixel

Der letzte Teil des Web Starter Kits ist der Styleguide.

Dadurch erhält jedes neue Projekt eine Reihe von Standardstile und ‐komponenten, die eine stilorientierte Entwicklung fördern. Sie können vorhandene Stile für Elemente ändern und eigene hinzufügen.

In der nächsten Version von WSK, die Anfang nächsten Jahres veröffentlicht werden soll, arbeiten wir intensiv daran, die Zusammenführung des Styleguides zu vereinfachen und zu einem Material Design-Erscheinungsbild zu wechseln. Matthatzu Beginn auf dem Chrome Dev Summit gezeigt, wie dies aussehen könnte. Unten siehst du ein Beispiel dafür.

Material Design-Styleguide-Mock des Web-Starterkits.

Verbessern und wieder testen

Sobald Sie damit begonnen haben, Ihr neues Wissen in die Praxis umzusetzen, sollten Sie die Entwicklertools verwenden, um Fehler zu beheben, Ihre Arbeit zu verbessern und zu warten.

In den Entwicklertools landen einige gewaltige neue Funktionen und Matt schaut sich diese etwas genauer an.

Gerätemodus

Der Gerätemodus ist ein neuer Abschnitt in den Entwicklertools, in dem Sie schnell sehen können, wie Ihre Website auf verschiedenen Mobilgeräten funktioniert, während Sie sich die Medienabfragen in Ihrem CSS ansehen.

Screenshot der Gerätemodusfunktion in den Chrome-Entwicklertools.

Eine der besten Funktionen des Gerätemodus ist die Möglichkeit, die Netzwerkgeschwindigkeit zu drosseln. So können Sie das Erlebnis eines Nutzers mit einer GPRS-, EDGE-, 3G-, DSL- oder WLAN-Verbindung simulieren.

Screenshot der Netzwerkdrosselung in den Chrome-Entwicklertools

Farbprofiler

Wenn Sie schon einmal den Tab „Zeitachse“ geöffnet und auf die Aufnahmeschaltfläche geklickt haben, sind Ihnen wahrscheinlich verschiedene Paint-Ereignisse im Wasserfall aufgefallen. Normalerweise wäre dies ein schwarzer Kasten, ohne dass Sie wissen könnten, warum der Browser oder was er getan hat.

Die Paint-Profiler-Nr. liefert Ihnen weitere Informationen darüber, was genau der Browser während dieses Painting-Vorgangs tut.

Screenshot des Paint Profilers in den Chrome-Entwicklertools.

Verfolgung der Entwertung

Die Entwicklertools geben jetzt wann immer möglich einen Grund dafür, warum ein Paint- oder Layout verwendet wurde. Dies ist hilfreich für alle, die mehr über die Zeitachse und das Browserverhalten erfahren. Außerdem können Sie damit Ihren Code optimieren, um Leistungsprobleme zu vermeiden.

Screenshot des Entwertungs-Trackings in den Chrome-Entwicklertools.

Flame-Diagrammansicht

Dies ist eine ganz andere Art, die in der Zeitachse verfügbaren Informationen anzuzeigen. So lässt sich viel einfacher erkennen, wie sich Aufgaben überschneiden und welches Browserverhalten infolge anderer Aufgaben stattgefunden hat.

Screenshot der Ansicht des Flame-Diagramms in den Chrome-Entwicklertools.

Frame-Viewer

In der Flame-Diagrammansicht können Sie einen bestimmten Frame auswählen. Dort können Sie herausfinden, welche Elemente auf der Seite zu einer zusammengesetzten Ebene hochgestuft wurden und warum sie hochgestuft wurden.

Screenshot des Frame Viewer in den Chrome-Entwicklertools

Infos Erstellen. Verbessern und wieder testen

Das Chrome-Team unterstützt Entwickler unter anderem mit diesen Bemühungen, sich mit der Webentwicklung vertraut zu machen. Sehen Sie sich deshalb unbedingt die Web Fundamentals und das Web Starter Kit sowie die neuen Funktionen der Chrome-Entwicklertools an.