Wir haben uns kurzfristig entschlossen morgen (Donnerstag, 02.04.2020) von 17:00 bis 18:30 Uhr einen Remote-Termin anzubieten. Dazu möchte ich euch ein paar Infos geben:
Projekt/Aufgabenstellung
Es soll eine kleine, statische Webseite erstellt werden. Die anwendeten Sprachen sind HTML, CSS und JavaScript. Da wir hiermit das Lernen/Vertiefen der genannten Sprachen fördern wollen, schreiben wir jede Zeile selbst. In einem professionellen Umfeld würde man sehr wahrscheinlich ein sogenanntes CMS (Content-Management-System) verwenden.
Die Aufgabenstellung beschreibt Schritt für Schritt (folgt weiter unten), welche Elemente erstellt und formatiert werden müssen. Dies setzt voraus, dass man zumindest ein paar Grundlagen in den genannten Sprachen besitzt bzw. die nun folgenden Kurse absolviert.
Lernplattform codecademy.com
Auf codecademy.com sollten einige Lektionen der folgenden Kurse selbstständig durchgeführt werden, damit z.B. nicht jedes HTML-Tag erneut erklärt werden muss:
- https://www.codecademy.com/learn/learn-html
- https://www.codecademy.com/learn/learn-css
- https://www.codecademy.com/learn/introduction-to-javascript
Umso mehr Lektion davon gemacht wurden, umso einfacher ist das Folgen in unserem Remote-Kurs.
Webeditor installieren
Die soeben genannten Kurse absolviert man im Browser. Damit ihr jedoch das Webprojekt selbst erstellen könnt, braucht ihr einen geeigneten Editor. Hier gibt es eine große Auswahl an kostenlosen Tools für die unterschiedlichen Betriebssysteme. (Da die Entwickler auf der Welt gerne darüber streiten, welche besonders gut und schlecht sind, verzeiht mir bitte die folgende Auswahl. Die genannten genügen vollkommen für unsere Zwecke.):
- Windows: Download-Seite Notepad++ https://notepad-plus-plus.org/downloads/
- Mac: Download-Seite Sublime Text https://www.sublimetext.com/3
Natürlich könnte ihr auch einen bestehenden oder beliebigen anderen Editor verwenden. Das soll nur eine Hilfe sein.
Ablauf des Remote-Events
Wir stellen einen Google Hangout (Video-Chat) zur Verfügung, in welchen ihr teilnehmen könnt. Dort kann man alle Teilnehmer sehen und hören. Die Betonung liegt auf „kann“. Ihr müsst keine Webcam aktivieren oder gar extra kaufen. Ihr könnt auch einfach nur als Zuschauer/Zuhörer teilnehmen, ohne was zu sagen.
- Google Hangouts: https://seibert.biz/programmieren-event
Wir, die Seibert Group werden unseren Bildschirm teilen und dort anhand der Aufgabenstellung das Webprojekt Zeile für Zeile programmieren. Wir zeigen euch dort auch immer gleich das Ergebnis im Browser, um sofort zu erkennen was wir programmiert haben und wo evtl. Herausforderungen entstehen. Dabei nutzen wir auch Tools wie den Validator, um Syntaxfehler zu finden und zu korrigieren. Oder wir zeigen euch unterschiedliche Schreibweisen von z.B. Farbwerten in CSS.
Ziel des Projektes
Ihr entwickelt zusammen mit uns eine sehr einfache Webseite, die direkt auch als mobile Version zur Verfügung steht. Da ihr auf eurem Rechner das Projekt mit entwickelt, ist das natürlich keine Webseite, die man über eine URL in Internet aufrufen kann.
Ihr wendet das Gelernte aus dem codecademy-Kurse direkt als Projekt an und lernt die Zusammenhänge der drei grundlegenden Sprachen im Web: HTML, CSS und JavaScript.
Einstieg in das Projekt
0. Wähle ein Thema für deinen Inhalt
- beliebig, freie Wahl
- Beispiele: Sportvereine/Sportler, Promis, Sportarten, Tiere, Technik, Länder, Reisen, Ernährung, Spiele, Mode, Unternehmen, eine Seite dich selbst, …
1. HTML-, CSS- und JS-Dateien
Erstelle einen Dateiordner mit dem Namen „Webprojekt“ oder ähnlichem. Lege in diesem Ordner mit deinem Webeditor folgendes an (alles in Kleinbuchstaben bitte):
HTML-Dateien:
- Startseite, Dateiname: „index.html„
- mehrere Unterseiten:
- Vorschlag: Lege die folgenden Seiten als leere Datei an. Erstelle erst die Startseite und wenn Header, Seitenspalte und Footer stehen, dann kopiere dieses in die Unterseiten. Diese Inhalte sind nämlich überall identisch.
- Seite: Impressum, Dateiname „impressum.html„
- Seite: Impressum, Dateiname „datenschutz.html„
- Seite: Über uns, Dateiname: „ueber-uns.html“ (diese Seite kann auch anders heißen, je nach Thema)
- Seite: Produkte, Dateiname: „produkte.html“ (diese Seite kann auch anders heißen, je nach Thema)
- Seite: Kontakt, Dateiname: „kontakt.html“ (diese Seite kann auch anders heißen, je nach Thema)
- Seite: Danke (das wird die Seite, die nach dem Abschicken des Formlares erscheint), Dateiname: „danke.html„
CSS-Datei:
- erstelle einen Ordner innerhalb deines Webprojekt-Ordners mit dem Namen „css„.
- erstelle darin eine CSS-Datei mit dem Namen „style.css„
JavaScript-Datei:
- erstelle einen weiteren Ordner innerhalb deines Webprojekt-Ordners mit dem Namen „js“ (also neben dem Ordner „css“)
- erstelle darin eine JavaScript-Datei mit dem Namen „script.js„
Bilder-Ordner:
- lege zuletzt einen Ordner „img“ für die Bilder an
- hierin werden wir nach und nach Grafiken für z.B. das Logo ablegen
Achte darauf, dass du keine Sonderzeichen (z.B. Umlaute) in all deinen Dateinamen hast. Das kann zu Darstellungsfehlern führen.
1.1 Grundgerüst:
- doctype, html, head + title, body anlegen
- Container im body: div mit der id „page“.
- Header
- HTML-Tag: „header„
- beinhaltet ein Logo, die Metanavigation (Impressum, Datenschutz) und die Hauptnavigation
- Contentbereich (als Container um die beiden folgenden Punkte)
- HTML-Tag: „main„
- Inhaltsbereich, HTML-Tag: „section“ (hier kommen später weitere Elemente hinein)
- Seitenspalte, HTML-Tag: „aside“ (später in Desktop-Version: links oder rechts angeordnet)
- Footer
- HTML-Tag: „footer„
- beinhaltet: das Kontaktformular und die Social Media Icons/Links
Visuelle Darstellung des oben beschriebenen:
1.2 Dateien einbinden, HTML-Validator
- Integriere die CSS-Datei mit dem HTML-Tag „link“ in den head.
- füge folgende Zeile für die Definition der mobilen Darstellung in den head ein:
- <meta name=“viewport“ content=“width=device-width,initial-scale=1.0″>
- Integriere die JS-Datei mit dem HTML-Tag „script“ am Ende des body. (= eine Zeile vor „</body>“)
- Benutze ab jetzt immer wieder den HTML-Validator:
- https://validator.w3.org/#validate_by_input
- korrigiere alle Fehler, die dort auftauchen, prüfe deinen Code am besten während oder nach jeder einzelnen Vorlesung
- in unserem bisherigen Projekt sollten folgende „Warnungen“ auftauchen
- Webseiten-Sprache fehlt: ergänze dazu im HTML-Tag <html> das Attribut: lang=“de“ (bzw. eine andere Sprache, falls du nicht „de“ verwenden möchtest)
- Headline in „section“ fehlt: ergänze das HTML-Tag <h1> mit einem sinnvollen Text in die <section>
1.3 grobe CSS-Formatierung der Abschnitte
- definiere in der CSS-Datei „style.css“ allgemeine Definitionen für
- „*“ margin und padding auf 0 setzen: „
padding: 0; margin: 0;
„ - „img“ dürfen max. 100% breit sein „
max-width: 100%;
„ - „ul“ und „ol“ sollten links einen Abstand von 20px haben: „
margin-left: 20px;
„ - „a“ sollen als Farbe schwarz haben: „
color: #000;
„
- „*“ margin und padding auf 0 setzen: „
- definiere Hintergrundfarben (Schreibweise: Hex, RGB oder RGBA, bitte keine Farbnamen)
- formatiere hier die Elemente body, #page, header, main, section, aside, footer
- je nach deiner Gestaltung können sich die Farben auch wiederholen
- gib den o.g. Elementen Innenabstände mit „padding“ und einem geeigneten Pixel-Wert
- ggfs. auch einen Aussenabstand mit „margin“ und Pixel-Wert
- schreibe am Ende der CSS einen media query für die Tablet- und Deskop-Version mit
(min-width: 768px)
- Code media query: @media screen and (min-width: 768px)
- definiere darin für #page eine maximale Breite von 1200px und richte #page mittig aus (keine Text-Ausrichtung, sondern das div zentrieren)
2. Header, mit Logo, Meta- und Main-Navigation
2.1 HTML für den Header
- entferne den Platzhaltertext im <header>
- füge zwei <div> in den <header> ein
- Logo:
- füge in das erste div ein Logo mithilfe des <img> Tag ein und gib ihm die id=“logo“
- lege dazu eine Grafik (png, jpg/jpeg, gif, …) in den Ordner „img“ ab, z.B. „logo.png„
- umschließe das <img> mit einem <a>-Tag und setze href=“index.html“, damit ein Klick auf das Logo auf diese Startseite führt
- Hamburger-Icon:
- füge in das erste div ein Hamburger-Icon hinter das <a>-Tag des Logos ein
- benutze dazu ein <img>Tag und setze die id=“menu-icon“ (Bild z.B. „icon-hamburger.png„)
- Metanavi:
- füge in das zweite div eine unsortierte Liste mit dem entsprechenden HTML-Tag ein und gib diesem Tag die id=“metanavi“
- lege darin Listenpunkte mit Links an, die auf die Seite impressum.html verlinken, z.B. „Impressum“, „Datenschutz“
- Mainnavi:
- füge in das zweite div eine weitere unsortierte Liste mit dem entsprechenden HTML-Tag ein und gib diesem Tag die id=“mainnavi“
- lege darin Listenpunkte mit Links an, die auf die entsprechenden Seiten verlinken
2.2 CSS für den Header
- definiere für das Logo eine „max-width“ von „50%“
- positioniere die beiden „div“ im Header „relative“
- richte das „menu-icon“ (= Hamburger-Icon) oben rechts aus:
top: 0;
right: 0;
width: 50px;
position: absolute;
- formatiere die beiden Navigationen:
- entferne die Aufzählungspunkte (mit „
list-style-type: none;
„) - gib den Navigationspunkten eine Hintergrundfarbe und einen Rahmen unten (mit „
background-color
“ und „border-bottom
„) - setze einen Innenabstand in den Links (mit „
padding
„) - entferne die Unterstreichung in den Links (mit „
text-decoration: none;
„)
- entferne die Aufzählungspunkte (mit „
- blende die „metanavi“ und „mainnavi“ aus (metanavi brauchen wir erst auf Tablet/Desktop, mainnavi soll erst durch Bedienen des Hamburger-Icons erscheinen)
- erstelle eine Klasse für die „mainnavi“ mit dem Bezeichner „enabled“: „#mainnavi.enabled“ (Achtung, kein Leerzeichen dazwischen)
- weise dieser Klasse die Definition „
display: block;
“ zu
2.3 JS für den Header
- schreibe eine Funktion „
toogleMainnavi()
„, welche die oben definiere Klasse „enabled“ einfügt bzw. entfernt (= toggle) - schreibe eine click-function (=
addEventListener
) für „menu-icon“
2.4 CSS-Korrekturen für die mobile Version
- füge der Stern-Definition (ganz oben die erste Definition) noch die folgende Zeile hinzu:
box-sizing: border-box;
- füge eine eigene Definition nur für #mainnavi hinzu, welche etwas Abstand noch oben hat, damit die aufgeklappte Navigation nicht so nah am Logo ist, z.B.
margin-top: 20px;
- füge den Link in beiden Navigation die Eigenschaft „
display: block;
“ hinzu, dadurch wird die ganze Zeile klickbar
2.5 Google-Font auswählen und einsetzen, sowie Encoding-Problem lösen
- wähle auf https://fonts.google.com/ eine kostenlose Schrift deiner Wahl aus
- füge in den <head> der HTML-Datei das <link>-Tag der ausgewählten Schrift
- füge in die *-Definition der CSS-Datei die Zeile mit „font-family“ ein
- jetzt sollte die gewählte Schrift auf deiner Webseite zu sehen sein
- falls du Darstellungsprobleme mit Umlauten (z.B. in „Über uns“) hast, füge in den <head> folgende Zeile ein
<meta charset="utf-8">
2.6 CSS für die Tablet- bzw. Desktop-Version
- alle Punkte aus diesem Block 2.6 sind innerhalb des media queries zu erstellen, welchen wir in Punkt 1.3 angelegt haben
- formatiere den header:
- gibt ihm direkt die Eigenschaft „
display
“ mit dem Wert „flex
„ - damit das erste div im header (= das mit dem Logo) eine feste Breite erhält, gib ihm: „
flex: 0 0 220px;
“ (die 220px könnt ihr natürlich eurem Logo bzw. eurem Wunsch anpassen) UND einen Innenabstand rechts von 20px - definiere für das zweite div im header einfach nur „
flex: 1;
„ - damit das Logo nun die oben definierten 220px ausnutzt, erstelle für #logo die Eigenschaft: max-width: 100%;
- verstecke mit display das menu-icon, da wir dieses in der Tablet-/Desktop-Version nicht benötigen
- zeige #metanavi, #mainnavi mit display wieder an
- in den li von metanavi/mainnavi:
- setze den Rahmen auf 0
- entferne die Hintergrundfarbe
- definiere „display“ mit dem Wert „inline-block“
- formatiere nun die metanavi
- richte diese rechts aus
- verringere die Schriftgröße der Links, da die Metanavi zwar vorhanden, aber nicht zu auffällig sein soll
- definiere eine Unterstreichung wenn man mit der Maus für die Links fährt (
:hover
)
- formatiere jetzt die mainnavi
- erhöhe den Abstand nach oben, so dass die Navigation zum Logo unten bündig ist (oder so, dass es sinnvoll aussieht)
- gib den <li> in der mainnavi einen Aussenabstand nach rechts, so dass es zur besseren Lesbarkeit beiträgt
- formatiere die Links mit Innenabstand, Schriftgröße, Hintergrundfarbe und evtl. runde Ecken
- definiere bei
:hover
eine andere Hintergrundfarbe
- gibt ihm direkt die Eigenschaft „
2.7 Header abschließen
- formatiere im Header die Schriftgröße, Schriftfarbe, Hintergrundfarbe, usw. nach deinen Wünschen
- Glückwunsch der Header ist abgeschlossen
Für den Einstieg in das Webprojekt sollte das vorerst genügen. Somit solltet ihr ein grobes Grundgerüst mit formatiertem Header haben.