Back to Main Page

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

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.