10.06.2022
A8 Semantik
Semantik kann man kurz damit beschreieben, dass es soviel aussagt, wie ein Text gegliedert ist. Im Bezug zu HTML kann man dabei verscheidene Tags verwenden um eine Website
korrekt zu gliedern. Im bezug auf HTML ist es nichtnur wichtig für die Vissuale Darstellung das die Semantik stimmt. Die Semantik wird unteranderm auch bei Screenreader
verwendet. In diesen Fällen ist es zwingend Notwendig dass die Semantik der HTML Website korrekt ist. Der wohl am häufigsten auftretende Fehler bei Sematik ist, dass zur
besseren Darstellung anstelle von einem <h1>
Tag einen <h2>
Tag verwendet wird. Dies ist aber FALSCH die visualle Darstellung sollte mithilfe von CSS geschehen und
nicht HTML Tags.
A24 SEO
SEO steht für Suchmaschinenoptimierung. Das Ziel jeder Website ist es möglichst viele Kunden/Besucher zu erhalten. Dabei spielt es eine extrem wichtige Rolle wie hoch die
Website in der Google Suche gelistet ist. Ein gutes Beispiel dafür währe die Tatsache wie häuffig man selber die 2. Seite der Google Suche überhaupt besucht hat geschweige
von einem der Ergebnise überhaupt besucht. Da die Einteilung basierend auf einem Algorythmus funktioniert, kann man seine Website dahher auch optimieren. Falls man selber
testen möchte wie gut die Website in der Kategorie SEO abschneidet kann man in Google Chrome mit den sogennanten Dev-Tooles (F12
) einen Lighthous Bericht erstellen.
Einfache Tricks für SEO
- Keywords deffinieren
In den HTML Metadaten kann man sogennante Keywords mitgeben. Diese sollten eine Suchmachine bei der Ausawhl der Website unterstützen. Da mann in der Theorie belibig viele
Keywörter angeben kann wurde dass in der Vergangenhait öffters missbraucht. Daher hat Google nun einen Algorythmus implementiert welcher selber Keywörter aus einer Website auslist.
Denoch gibt es noch Suchmachinen, welche die deffinierten Keywörter verwenden.
<meta name="keywords" content="Best Website, No one will read this Keyword">
- Ladezeit Die meisten Zugriffe erfolgen über Handys. In vielen Teilen der Welt ist das Mobilfunknetzt nochnicht so gut ausgebaut. Dahher spielt die Ladezeit einer Website eine extrem grosse Rolle. Nun könnte man sich natürlich fragen, wie man die Ladezeit verhindern, obwohl der Kontent der gleiche ist. Die Antwort darauf ist einfach: man setzt alle nicht für das Laden erfolrdeliche Skripts ans ender der Website. Da JS den Aufbau einer Website abändern kann wird immer gewartet bis die Resource donwgeloadet ist befor die Website aufgebaut ist. Wenn man nun das Skript ans ender der Webiste setzt wird zuerst die Website aufgebaut und erst dann das Skript heruntergeladen. Dadurch kann man bei grossen Skripts extrem viel Zeit sparen.
A22 Mediaquerys
Eine Mediaquery ist simpel gesagt einen Block von CSS Anwendungen, welche erst dann ausgeführt werden wenn eine bestimmte Bedinung erfüllt ist. Im Falle von Mediaquerys ist das eine Mindes/Maximal Anzahl von Pixel. Dadurch kann man eine Website so gesallten, dass das Layout auf allen Geräteklassen Ideal erfüllt ist. Es gibt 2 Möglichkeiten Mediquerys zu implementieren. Diese währen Mobile-First also zuerst die Website für kleine Geräte gestallten und sie dann an grösser Anpassen (wird meistens heutzutage verwendet) oder Desktop-First also zuerst für grosse Bildschirme und dann immer kleiner Werden Beispiel einer Mediquery für Mobile-First
/*CSS Kontent*/
@media screen and (min-width: 1800px) {
:root{
font-size: 140%; /* Passt die Referenz für rem an. Ist also nur hilfreich wenn man rem (allenfals auch em) verwendet */
}
}
A23 Geräteklassen
Durch die immer grösser werdende Vielfahlt an Geräten gibt es auch immer mehr unterschiedliche Display grössen. Dies stellt eine schwierrigkeit für das Design einer Website dar. Es sollte möglichst sichergestellt werden dass auf allen Displaygrössen das Layout Optimal für die Bedinung erstellt wurde. Es währe also Sinvoll für alle 4 grossen Geräteklassen (Smartphone 0-600px, Tables 600-900px/900 - 1200px, 1200 - 1800px Laptops, >1800 Computer und SmartTV) ein eienes Layout zu erstellen. Auch wenn man vielleicht nicht genügend Zeit oder Verwendung hat alle diese Mediaquerys zu implementieren sollte man immer eine für Mobiledevices erstellen. Zum einen daran dass normalerweise die meisten Websitzugriffe über Mobile statfinden und zu anderen daher normalerweise Elemente wie der Navigator nicht genügen Platz auf Mobile haben (alternative währe dann z.B. ein Hamburgerlayout).
A21 Repsonsive Webdesign
Beim Repsonsive Webdesign geht es darum, eine Website für alle Arten von Geräten optimal zu gestallten. Dabei verwendet man Mediaquerys um die size und oder die Anortnung der verschiedenenen Elemente anzupassen. Dammit Responsve Wendesing ganz sicher auf allen Browerser richtig funktioniert braucht es einen HTML Meta Tag <meta name="viewport" content="width=device-width, initial-scale=1.0">
A20 Layout
Grid-Area
Grid Template ist eine einfache und gute Möglichkeit eine Website zu strukturieren. Um Grid-Area zu akivieren muss man im Element der Zielbox (in diesem Beispiel main). Grid-Template akktivieren (display: grid;
). Anschlissend kann man bestimmen, wie gross die einzelnen Colums ist. grid-template-columns: 20% 60% 20%;
und grid-template-rows: auto 1fr auto;
. Nun hat man ein 3x3 Grid-Template erstellt. Im gegensatz zu FlexBoxen ist man nun in der Lage, den einzelnen Areas darauf Namen zu geben. Natürlich kann man auch mehrere Spalten/Zeilen den gleichen Allias geben. Wichtig ist zu beachten. Das diese Spalten zum aktuellen Zeitpunkt noch nicht mit den einzelnen HTML Elementen zusammenhängen.
grid-template-areas:
"header header header"
"navigation content sidebar"
"footer footer footer";
}
Um nun diese Alliase HTML Tags oder auch Klassen/ID’s zuzuortnent kann man das direckt in dem Zielelement der verschiedenen HTML Tags machen.
header {
grid-area: header;
}
Ein grosser Voreil ein Grid-Template ist, dass man dadurch seehr einfach das Layout an alle verschiedenen Displaytypen anpassen. Das Einzige, wass man dazu machen muss ist die Grid-Template Struntkur so abändern, dass es zu Mobile Devices usw. passt.
Flexboxen
Eine weitere Möglichkeit ein CSS Layout zu gestalten ist über Flexboxen. Dabei kann man zwischen 2 verschiedenen “Flex Richtungen” wählen.
- row
- column
Ein seehr gutes Feature an Flex-Boxen ist
justify-content
. Dammit kann man sehr leicht und eifach die einzelnen Ellemente in der Flexbox selber anzurtner. Ich selber verwende z.B.space-between
um mithilfe einer Flexbox die einzelnen Eellemente im Footer anzuortnen.space-between
bedeutet so viel wie, der grösst mögliche Abstand zwischen den einzelnen Ellementen.