CycleTracker: Basis-HTML und CSS
Um eine PWA, eine progressive Webanwendung, zu erstellen, müssen wir eine voll funktionsfähige Webanwendung entwickeln. In diesem Abschnitt werden wir das HTML für eine statische Webseite erstellen und das Erscheinungsbild mit CSS verbessern.
Unser Projekt ist es, CycleTracker zu erstellen, einen Menstruationszyklus-Tracker. Der erste Schritt in diesem einführenden PWA-Tutorial besteht darin, das HTML und CSS zu schreiben. Der obere Bereich der Seite ist ein Formular, in dem der Benutzer die Start- und Enddaten jedes Zyklus eingeben kann. Unten ist eine Liste früherer Menstruationszyklen.
Wir erstellen eine HTML-Datei mit Metadaten im Kopfbereich und einer statischen Webseite, die ein Formular und einen Platzhalter zur Anzeige der vom Benutzer eingegebenen Daten enthält. Anschließend fügen wir ein externes CSS-Stylesheet hinzu, um das Erscheinungsbild der Website zu verbessern.
Um dieses Tutorial abzuschließen, ist es hilfreich, ein grundlegendes Verständnis von HTML, CSS und JavaScript zu haben. Wenn Sie damit nicht vertraut sind, ist MDN die Heimat von Erste Schritte, einer Einführung in die Webentwicklung.
In den nächsten Abschnitten richten wir eine lokale Entwicklungsumgebung ein und werfen einen Blick auf unseren Fortschritt, bevor wir der statischen Seite, die in diesem Abschnitt erstellt wurde, JavaScript-Funktionalität hinzufügen, um daraus eine funktionale Webanwendung zu machen. Sobald wir eine funktionierende App haben, können wir diese schrittweise in eine PWA verwandeln, die installiert werden kann und offline funktioniert.
Statische Webinhalte
Unser statisches Seiten-HTML, mit Platzhalter-<link>- und <script>-Elementen für noch zu erstellende externe CSS- und JavaScript-Dateien, sieht folgendermaßen aus:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Cycle Tracker</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Period tracker</h1>
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
<p>
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
</p>
<p>
<label for="end-date">End date</label>
<input type="date" id="end-date" required />
</p>
</fieldset>
<p>
<button type="submit">Add Period</button>
</p>
</form>
<section id="past-periods"></section>
<script src="app.js" defer></script>
</body>
</html>
Kopieren Sie dieses HTML und speichern Sie es in einer Datei mit dem Namen index.html.
HTML-Inhalt
Auch wenn Ihnen das HTML in index.html vertraut ist, empfehlen wir Ihnen, diesen Abschnitt durchzulesen, bevor Sie einige vorübergehend fest codierte Daten hinzufügen, CSS zu einem externen Stylesheet style.css hinzufügen und app.js erstellen, das JavaScript der Anwendung, das diese Webseite funktionsfähig macht.
Die erste Zeile des HTML ist ein DOCTYPE-Präambel, die sicherstellt, dass der Inhalt korrekt funktioniert.
<!doctype html>
Die Wurzel-<html>-Tags umfassen den gesamten Inhalt mit dem lang-Attribut, das die Hauptsprache der Seite definiert.
<!doctype html>
<html lang="en-US">
<!-- the <head> and <body> will go here -->
</html>
Dokumentenkopf
Der <head> enthält maschinenlesbare Informationen über die Webanwendung, die für Leser nicht sichtbar sind, außer dem <title>, das als Überschrift im Browser-Tab angezeigt wird.
Der <head> enthält alle Metadaten. Die ersten beiden Informationen in Ihrem <head> sollten immer die Zeichensatzdefinition sein, die die Zeichenkodierung definiert, und das Viewport-<meta>-Tag, das sicherstellt, dass die Seite in der Breite des Ansichtsfensters gerendert wird und nicht verkleinert wird, wenn sie auf sehr kleinen Bildschirmen geladen wird.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
Wir setzen den Titel der Seite auf "Cycle Tracker" mit dem <title>-Element. Obwohl der Inhalt des <head> nicht auf der Seite angezeigt wird, sind die Inhalte des <title> sichtbar! Der Text im <title>-Element erscheint im Browser-Tab, wenn die Seite geladen wird, in Suchergebnissen und ist der Standardtitel, wenn ein Nutzer eine Webseite als Lesezeichen speichert. Der Titel bietet auch einen zugänglichen Namen für Screenreader-Benutzer, die darauf angewiesen sind, um zu wissen, auf welchem Tab sie sich befinden.
Obwohl der Titel "Menstruationszyklus-Tracking-Anwendung" lauten könnte, haben wir uns für einen gekürzten Namen entschieden, der diskreter ist.
<title>Cycle Tracker</title>
Obwohl offiziell optional, sollten diese beiden <meta>-Tags und das <title> aus Gründen der besseren Benutzererfahrung als erforderliche Komponenten jedes HTML-Dokuments betrachtet werden.
Zurzeit ist die letzte Komponente, die wir im <head> einbeziehen, ein <link>-Element, das style.css, unser noch zu erstellendes Stylesheet, mit unserem HTML verknüpft.
<link rel="stylesheet" href="style.css" />
Das HTML-<link>-Element wird verwendet, um eine Beziehung zwischen dem aktuellen Dokument und einer externen Ressource anzugeben. Es gibt mehr als 25 definierte Werte für das rel-Attribut – und viele weitere Werte, die in keiner Spezifikation enthalten sind. Der häufigste Wert, rel="stylesheet", importiert eine externe Ressource als Stylesheet.
Wir werden das <link>-Element und sein rel-Attribut in einem zukünftigen Abschnitt noch einmal aufgreifen, wenn wir den Link zur Manifestdatei hinzufügen.
Dokumentenkörper
Das <body>-Element enthält den gesamten Inhalt, den Benutzer sehen sollen, wenn sie die Seite im Internet besuchen.
Innerhalb des <body> enthalten wir den Namen der App als Überschrift der Ebene 1 mit einem <h1> und einem <form>.
<body>
<h1>Period tracker</h1>
<form></form>
</body>
Das Formular enthält Anweisungen, Formularelemente, ein Label für jedes Formularelement und einen Senden-Button. Bezüglich der Formularelemente müssen Benutzer sowohl ein Startdatum als auch ein Enddatum für jeden eingereichten Menstruationszyklus eingeben.
Innerhalb des <form> fügen wir ein <fieldset> mit einem <legend> hinzu, der den Zweck dieser Gruppe von Formularfeldern kennzeichnet.
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
</fieldset>
</form>
Die Datumswähler sind <input>-Elemente vom Typ date. Wir fügen das required-Attribut hinzu, um Benutzerfehler zu reduzieren, indem wir verhindern, dass der Benutzer versehentlich ein unvollständiges Formular absendet.
Um ein <label> mit einem Formularelement zu verknüpfen, hat jedes <input> ein id-Attribut, das mit dem for-Attribut des zugehörigen <label> übereinstimmt. Das zugehörige Label gibt jedem <input> einen barrierefreien Namen.
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
Zusammenfassend fügen wir innerhalb des <fieldset> zwei Absätze (<p>-Elemente) hinzu, jeweils mit einem Datumswähler für die Start- und Enddaten des aktuell eingegebenen Menstruationszyklus, zusammen mit den zugehörigen <label>s der Datumswähler. Wir fügen auch ein <button>-Element hinzu, das das Formular absendet; wir beschriften es mit "Add period", indem wir diesen Text zwischen den Eröffnungs- und Schlusstags einfügen. Der type="submit" ist optional, da submit der Standardtyp für <button> ist.
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
<p>
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
</p>
<p>
<label for="end-date">End date</label>
<input type="date" id="end-date" required />
</p>
</fieldset>
<p>
<button type="submit">Add Period</button>
</p>
</form>
Wir empfehlen Ihnen, mehr über barrierefreie Webformulare zu lernen.
Vorübergehend fest codierter Ergebniste
Wir fügen dann ein leeres <section> ein. Dieser Container wird mit JavaScript befüllt.
<section id="past-periods"></section>
Wenn der Benutzer das Formular absendet, verwenden wir JavaScript, um die Daten zu erfassen und eine Liste vergangener Perioden zusammen mit einem Header für den Abschnitt anzuzeigen.
Für den Moment kodieren wir einige Inhalte in diesem <section> vorübergehend fest, einschließlich eines <h2>-Headers und einiger vergangener Perioden, um etwas zum Stylen zu haben, während wir das CSS der Seite schreiben.
<section id="past-periods">
<h2>Past periods</h2>
<ul>
<li>From 01/01/2024 to 01/06/2024</li>
<li>From 01/29/2024 to 02/04/2024</li>
</ul>
</section>
Dieser Inhalt, abgesehen vom <section id="past-periods"></section>-Container, ist vorübergehend. Wir werden diese temporären Daten entfernen oder auskommentieren, sobald wir das CSS abgeschlossen haben und mit dem Erscheinungsbild der App zufrieden sind.
JavaScript-Link
Bevor wir das </body> schließen, fügen wir einen Link zur noch zu erstellenden JavaScript-Datei app.js hinzu. Wir fügen das defer-Attribut hinzu, um das Laden dieses Skripts zu verzögern und sicherzustellen, dass das JavaScript nach dem Parsen des HTML des Dokuments ausgeführt wird.
<script src="app.js" defer></script>
Die Datei app.js wird alle Funktionen unserer Anwendung enthalten, einschließlich der Ereignishandler für den <button>, das Speichern der Daten im lokalen Speicher und das Anzeigen der Zyklen innerhalb des Inhalts des Bodys.
Die HTML-Datei für diesen Schritt ist nun vollständig! Sie können die Datei zu diesem Zeitpunkt in Ihrem Browser öffnen, aber Sie werden feststellen, dass sie recht schlicht ist. Das werden wir im nächsten Abschnitt verbessern.
CSS-Inhalt
Wir können jetzt das statische HTML mit CSS stylen. Unser finales CSS ist:
body {
margin: 1vh 1vw;
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
ul {
padding: 0;
font-family: monospace;
}
li,
legend {
list-style-type: none;
padding: 0.2em 0.5em;
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
Wenn Ihnen jede Zeile vertraut ist, können Sie das obige CSS kopieren oder Ihr eigenes CSS schreiben und die Datei als style.css speichern und dann das statische HTML und CSS abschließen. Wenn Ihnen etwas im obigen CSS neu ist, lesen Sie weiter für eine Erklärung.
CSS erklärt
Wir verwenden die background-color-Eigenschaft, um eine hellgrüne (#efe) Hintergrundfarbe auf dem body festzulegen. Dann verwenden wir auf der ungeordneten Liste, dem fieldset, und der Legende eine weiße (#fff) Hintergrundfarbe, zusammen mit einem dünnen festen Rahmen, der mit der border-Eigenschaft hinzugefügt wird. Wir überschreiben die background-color für die Legende und machen die Legende und die Listenelemente dunkler grün (#cfc).
Wir verwenden die :nth-of-type(even)-Pseudo-Klasse Selector, um jedes gerade nummerierte Listenelement so einzustellen, dass es den Hintergrundfarbe von seinem Elternteil inherit erbt; in diesem Fall erbt es die #fff Hintergrundfarbe von der ungeordneten Liste.
body {
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
li,
legend {
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
Um die ungeordnete Liste und die Listenelemente nicht wie eine Liste aussehen zu lassen, entfernen wir den Padding, indem wir padding: 0 auf dem ul setzen und die Listenmarkierungen entfernen, indem wir list-style-type: none auf den Listenelementen selbst setzen.
ul {
padding: 0;
}
li {
list-style-type: none;
}
Wir fügen ein wenig weißen Raum hinzu, indem wir den margin des body mit den vw und vh Ansichtspunkte-Einheiten setzen, wodurch der weiße Raum außerhalb unserer App proportional zur Größe des Ansichtsfensters wird. Wir fügen auch dem li und der Legende ein wenig Padding hinzu. Schließlich setzen wir, um die Anzeige der Daten vergangener Perioden zu verbessern, ohne sie zu beheben, die font-family des ul-Ergebnisabschnitts auf monospace, wodurch jedes Glyph dieselbe feste Breite hat.
body {
margin: 1vh 1vw;
}
ul {
font-family: monospace;
}
li,
legend {
padding: 0.2em 0.5em;
}
Wir können das oben kombinieren, indem wir mehrere Eigenschaften in jedem Selektor-Deklarationsblock einfügen. Wir können sogar die Stile für das li und die Legende zusammenfassen; irrelevante Stile, wie die list-style-type-Deklaration auf der Legende, werden ignoriert.
body {
margin: 1vh 1vw;
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
ul {
padding: 0;
font-family: monospace;
}
li,
legend {
list-style-type: none;
padding: 0.2em 0.5em;
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
Wenn Ihnen eines der obigen CSS weiterhin unbekannt vorkommt, können Sie die CSS-Eigenschaften und Selektoren nachschlagen oder den Lernpfad des Einstiegs in CSS durcharbeiten.
Egal, ob Sie das obige CSS wortwörtlich verwenden, die oben genannten Stile nach Ihrem Geschmack bearbeiten oder Ihr eigenes CSS von Grund auf neu schreiben, inkludieren Sie alle CSS in eine neue Datei und speichern Sie sie als style.css im selben Verzeichnis wie Ihre index.html-Datei.
Beenden des statischen HTML und CSS für unsere PWA
Bevor Sie fortfahren, kommentieren Sie die gefälschten Daten vergangener Perioden und den Header aus oder löschen Sie sie:
<section id="past-periods">
<!--
<h2>Past periods</h2>
<ul>
<li>From 01/01/2024 to 01/06/2024</li>
<li>From 01/29/2024 to 02/04/2024</li>
</ul>
-->
</section>
Als Nächstes
Bevor wir die JavaScript-Funktionalität hinzufügen, um diesen statischen Inhalt in eine Web-App zu verwandeln und diese dann in eine progressive Web-App mit einer Manifestdatei und einem Service-Arbeiter zu erweitern, werden wir eine lokale Entwicklungsumgebung erstellen, um unseren Fortschritt zu sehen.
Bis dahin können Sie die statische CycleTracker-Hülle ansehen und den CycleTracker-HTML- und CSS-Quellcode von GitHub herunterladen.