Hwk Html Versionen Projekt Bootstrap javascript jQuery Struktur _src Ordner Kompilierung Kompilierung CSS Kompilierung JS CSS Ordner Bilder Retina Unterstützung Server Redirect einrichten Automatisierte Bildgrößenwahl Anwendung Gif Bilder CSS Neue CSS Klassen Anpassungen Javascript Aktualisierte Funktionen email.js Anpassungen HTML Bilder Formular Hauptnavigation Mega Menu Header Carousel onTop Variante Horizontal Swipe Link mit Icon Srcollspy Seiten Suche Suchfilter Suchergebnis mit Karte Barrierefreiheit Standard Icon-Font

## README.md

# Hwk Html

Html Dummy für die Handwerkskammer

## Versionen

### Projekt

Version 2.0.01

Changelog

### Bootstrap

Version 3.4.1

getbootstrap.com

#### javascript

Achtung: transition.js fehlt in der Auflistung im dist Ordner von Bootstrap 3.4.1! Das Menü gleitet dann nicht auf im Mobile, sondern springt abrupt.

### jQuery

Version 3.5.1

jquery.com

## Struktur

### _src Ordner

Dies ist der Ordner mit den Source Dateien. Für das Css wurde wie in Bootstrap 3 vorgegeben mit Less gearbeitet.

Im _src Ordner gibt es jeweils eine bootstrap.less und eine bootstrap.js Datei, in der die nicht benutzten Elemente entfernt werden können.

Die Dateien auf der obersten Ebene im _src Ordner kompilieren jeweils in den css oder js Ordner.

    .
    ├── _src                   # Source files
    |     └── xxx.less         # files will compile to css folder
    |     └── xxx.js           # files will compile to js folder
    ├── css                    # Compiled css files
    └── js                     # Compiled js files

#### Kompilierung

Für die Kompilierung der Dateien wurde als Hilfsprogramm die App Codekit (codekitapp.com) verwendet. Es kann natürlich auch auf einem anderen Weg kompiliert werden. Wichtig zu beachten:

#### Kompilierung CSS

Für die Kompilierung ist es notwendig, einen Autoprefixer zu benutzen.

#### Kompilierung JS

Das Javascript wurde nur komprimiert und zusammengeführt.

### CSS Ordner

Im css Ordner befinden sich zwei Dateien, die je nach Bedarf ausgetauscht werden können:

main.min.css | Das ist das komplette Css mit dem alten main.css kombiniert mit den Änderungen (new.css)
new.min.css | Das ist das Css welches das alte main.css überschreibt jedoch nicht beinhaltet.

## Bilder

### Retina Unterstützung

Wird ein Retina Display erkannt, dann wird automatisch dem Bildnamen das `@2x` hinzugefügt und dieses Bild wird verwendet. Sollte es das Bild nicht geben, regelt der Server die Weiterleitung auf das normale Bild ohne den `@2x` Zusatz.

#### Server Redirect einrichten

Dieses Serververhalten muss auf jedem Server eingerichtet sein oder werden. Hierfür einfach folgendes in die .htaccess Datei im Hauptverzeichnis kopieren:

    # if no @2x redirect to normal image
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} ^(.*)(@2x)(.jpg|.png)$ [NC]
    RewriteRule ^(.*)@2x(.jpg|.png) $1$2 [L]

### Automatisierte Bildgrößenwahl

Es besteht die Möglichkeit dem System eine Auswahl an Bildgrößen zur Verfügung zu stellen, so dass das System die optimale Bildgröße je nach Größe des umgebenden Containers selbst auswählt.

Will man das nicht nutzen, so fügt man wie gewohnt die Bilder ein und es wird nur mit dem im src angegebenen Bildpfad gearbeitet.

#### Anwendung

Möchte man die Vorteile der optimierten Bildgrößenauswahl nutzen, so sollten für jedes Bild zusätzlich folgende Größen angelegt werden:

Thumbnail | 150px | data-src-thumbnail | - Dies ist das Bild was als Platzhalter zuerst beim Aufrufen der Seite geladen wird. - Von daher muss es in dem src Attribute des `` gespeichert werden. - Es wird per javascript dann sofort durch das optimalste Bild ersetzt, sollte von daher also eine möglichst kleine Dateigröße haben.
Small | 480px | data-src-small | - Dies ist das kleinste Bild und es ist 480px breit. - Im `` erhält es ein eigenes Attribute `data-src-small`
Medium | 768px | data-src-medium | - Dies ist die mittlere Bildgöße mit 768px Breite. - Im `` erhält es ein eigenes Attribute `data-src-medium`
Large | 1024px | data-src-large | - Dies ist die große Bildgöße mit 1024px Breite. - Im `` erhält es ein eigenes Attribute `data-src-large`
Full |  | data-src-full | - Dies ist das Originalbild. - Es kann größer als das Large-Bild sein, sollte aber immer noch eine zumutbare bzw. ladbare Größe haben. - Ist es nicht möglich oder notwendig, das Bild in einen der größeren Größen zur Verfügung zu stellen, so kann das Originalbild auch jede andere kleinere Größe haben. - Im `` erhält es ein eigenes Attribute `data-src-full`

Beispiel `img`

    <img
        src="uploads/example-150x92.jpg"

        data-src-thumbnail="uploads/example-150x92.jpg"
        data-src-small="uploads/example-480x294.jpg"
        data-src-medium="uploads/example-768x471.jpg"
        data-src-large="uploads/example-1024x628.jpg"
        data-src-full="uploads/example.jpg"

        title="example"
        alt="example"
        class="img-responsive"
    />

Es ist nicht notwendig, dass alle Größen angelegt sind

Je nach Bildmaterial ist es manchmal entweder nicht möglich oder auch nicht notwendig, dass das Bild in allen Größen angelegt wird.

Wichtig ist nur, dass die existierenden Bildgrößen in den jeweiligen Attributen gespeichert sind und alle anderen Attribute ohne entsprechendes Bild gelöscht werden.

Beispielsweise:

    <img
    src="uploads/example-150x92.jpg"

        data-src-thumbnail="uploads/example-150x92.jpg"
        data-src-small="uploads/example-480x294.jpg"
        data-src-full="uploads/example.jpg"

        title="example"
        alt="example"
        class="img-responsive"
    />

Hierbei würden es zum Beispiel nur folgende Dateien geben, wobei die Originaldatei beispielsweise 600px breit ist.

- `example.jpg`
- `example-150.jpg`
- `example-150@2x.jpg`
- `example-480.jpg`

#### Gif Bilder

Bei Gif Bildern wird immer das Originalbild verwendet

Es wird davon ausgegangen, dass ein Gif-Bild nur als animiertes Gif verwendet wird. Hierfür müssen nicht mehrere Versionen erstellt werden, da immer auf die Originalgröße zurückgegriffen wird.

## CSS

Es gibt zwei CSS|Less Versionen.
1) In dem Hwk-Html Paket überschreibt das neue CSS das CSS der alten Version 1.0.1.

2) In dem Hwk-Html-Cleanup Paket wurde das CSS und die Less Dateien komplett bereinigt bzw. neu geschrieben. Sie haben nicht den Anspruch alte CSS Regeln zu überschreiben.

### Neue CSS Klassen

Ein Überblick der neuen CSS Klassen:

    .align-middle.col /* needs .d-flex on row to be effective (will stretch height) */
    .aria-structure /* used on ul to make items more accessable not really ul */
    .bg-color
    .bg-white
    .bg-white-box
    .border-right
        .border-right-lg
        .border-right-md
        .border-right-sm
    .border-bottom
        .border-bottom-lg
        .border-bottom-md
        .border-bottom-sm
        .border-bottom-xs
    .btn-white
    .d-flex
        .d-flex-lg
        .d-flex-md
        .d-flex-sm
        .d-flex-xs
    .d-flex-wrap
        .d-flex-wrap-lg
        .d-flex-wrap-md
        .d-flex-wrap-sm
        .d-flex-wrap-xs
    .d-block
        .d-block-lg
        .d-block-md
        .d-block-sm
        .d-block-xs
    .d-inline-block
        .d-inline-block-lg
        .d-inline-block-md
        .d-inline-block-sm
        .d-inline-block-xs
    .hwk-icon-menu.col     /* small icon menu on home page */
    .hwk-teaser-image-info /* presse teaser => smaller image height */
    .no-margin-x
    .no-margin-y
    .no-padding-x
    .no-padding-y
    .space-around

    /* .stretch on .row needs segments which have height: 100% */
    /* .stretch usually combined with .d-block-xs */
    .stretch
        .stretch-lg
        .stretch-md
        .stretch-sm
        .stretch-xs
    .submenu-full-width
    .teaser-box
    .teaser-icon
    .teaser-image-info
    .top-blog
    .top-blog-image

    /* white nav box inside margin */
    .nav-white-box        /* on .nav-tabs.nav-stacked */
    .scrollspy            /* outside .nav-tabs.nav-stacked */

    .listgroup-wrapper
    .listgroup-intro
    .listgroup-content
    .list-group
    .listgroup-footer

    .listgroup-arrow
    .listgroup-arrow-right
    .listgroup-content
    .listgroup-footer
    .listgroup-image-blog
    .listgroup-info
    .list-group-item
    .listgroup-wrapper
    .list-icon-check
    .listgroup-color

## Anpassungen Javascript

Tauscht man die Javascript Dateien nur aus, gibt es nichts zu beachten, da die neue main.min.js Datei schon alle Anpassungen beinhaltet.

ACHTUNG!
Arbeitet man allerdings mit einer Javascript Datei, die erweitert wurde ist zu beachten, dass bevor die neue main.min.js Datei eingesetzt wird, zuvor noch Anpassungen an der alten Datei vorgenommen werden, da einige Funktionen angepasst werden mussten.

### Aktualisierte Funktionen

Folgende Funktionen mussten angepasst werden, weshalb sie aus der alten Javascript entfernt werden müssen:

- checkImageForResize
- chooseImage
- emailReplace (Achtung auch Funktionsaufruf `emailReplace()` entfernen )
- initSectionCollapse
- setImageAsBackgroundOfParent
- setImageSizeOnInit
- sliderHeaderXsSameHeight
- writeNavNthLevel

Die geänderten Funtionen befinden sich in _src/js/main-new.js

main-new.js | alte main.js Funktionen jetzt angepasst/überschrieben
main-old.js | altes main.js ohne die oben neu geschriebenen Funktionen

#### email.js

Erweiterte emailReplace() Funktion, die auch ein no-follow hinzufügt und es erlaubt als href einen scheinbaren echten Link einzufügen wie z.B.:

    <a class="mail" href="https://max.musterman--at--hwk-musterstadt.de">
       max.musterman--at--hwk-musterstadt.de
    </a>

Kann jetzt wie folgt auch an anderen Stellen aufgerufen werden:

    $(SELCETOR).emailReplace();

## Anpassungen HTML

### Bilder

Falls mit den Html Attributen src-xxx gearbeitet wurde, ist zu beachten, dass diese geändert wurden, da es teilweise Probleme mit manchen Browsern und der Bezeichnung gab.

Im Javascript wurde aber ein Fallback für die alten Attribute hinzugefügt. Dennoch wäre es ratsam die Bezeichnungen anzupassen, wenn möglich.

alt | neu
--- | ---
src-thumbnail | data-src-thumbnail
src-small | data-src-small
src-medium | data-src-medium
src-large | data-src-large
src-full | data-src-full

### Formular

Die Formulare haben jetzt schwebende Label, die sich bei Eingabe verkleinern. Folgende Anpassungen wurden gemacht:

- die Reihenfolge von label und input in `.form-control` wurde geändert zu `<input>` `<label>`
- die Klasse `.sr-only` wurde vom `<label>` entfernt
- der Platzhalter wurde geleert und opacity auf 0 gestellt
  (Das Label ist ja jetzt der Platzhaltertext)

Hinweis: Die alte Struktur wird mit der Javascript Funktion `adjustForm()` automatisch angepasst.

### Hauptnavigation

#### Mega Menu

Wenn das Untermenü auf voller Breite gewünscht ist, muss die Klasse `.submenu-full-width` oberhalb des Menü's eingetragen werden.

Für diese Seiten wird das Html für die dritte Navigationsebene innerhalb der Seite nicht mehr benötigt.

### Header Carousel

#### onTop Variante

- Neues Html => siehe Kommentare im Html.
- Altes Html wird mit der `function adjustCarouselHeader()` automatisch angepasst (siehe adjust.js).
- Das Hintergrundbild muss jetzt auf `div.container` liegen, nicht `div.item`.

    <div class="item text-on-top" aria-roledescription="slide" aria-label="1 von 2">
      <div class="container">
        <div class="col-sm-1 slider-deco-text-on-top"></div>
        <div class="col-md-6 col-sm-7 slider-text">
          <div class="slider-text-container"><!-- NEW HTML -->
            <div class="slider-text-h1"><!-- NEW HTML -->
              <h2 class="h1">
                <span class="slider-text-h1-deco"><!-- NEW HTML --></span>
                <span class="slider-text-h1-text">Headline<!-- NEW HTML --></span>
              </h2>
            </div>
            <p class="lead">Text</p>
            <a href="#" class="btn btn-white">Link</a>
          </div>
        </div>
        <p class="note inside">© Gusen Fertelmann</p>
        <div class="slider-image-text-on-top">
          <img data-src-full="uploads/slider-ontop.jpg" title="titel_textontop" src="uploads/slider-ontop.jpg" alt="Fertelmann" class="img-responsive" />
        </div>
      </div>
    </div>

### Horizontal Swipe

Um Pfeile hinzuzufügen musste folgendes Html um das `div.swipe-horizontal-container` gebaut werden:

    <div class="swipe-horizontal-wrapper">
        <a class="swipe-horizontal-arrow swipe-horizontal-left invisible">
            <span class="glyphicon glyphicon-einfacher-pfeil-links"></span>
        </a>

        <div class="swipe-horizontal-container" />

        <a class="swipe-horizontal-arrow swipe-horizontal-right invisible">
            <span class="glyphicon glyphicon-einfacher-pfeil-rechts"></span>
        </a>
    </div>

Dies wird in der Javascript Funktion `addArrowsHorizontalSwipe` automatisch hinzugefügt, falls das Html fehlt.

### Link mit Icon

Das neue Link-Design hat es erforderlich gemacht, die Html Struktur anzupassen, wenn mehrzeiliger Text bündig neben dem Icon stehen soll.

Neues Html | Altes Html
--- | ---

Wo es eben geht, sollte also optimalerweise folgendes Html benutzt werden:

     <p class="icon-text-block small">
        <span class="glyphicon glyphicon-pdf-download-2" aria-hidden="true"></span>
        <span class="sr-only">Pdf</span>
        <a href="#"><span class="link-text">Linkname</span></a>
    </p>

### Srcollspy Seiten

Dies sind die Seiten, die das fliegende Menü in der Marginale haben.
Es kann jetzt auch mit der Klasse `.scrollspy` gearbeitet werden anstatt der id `#myScrollspy`.
Die Spaltenbreiten sollten noch folgendermaßen angepasst werden:

    <div class="col-md-9 content">...</div>
    <div class="scrollspy col-md-3 visible-md visible-lg">...</div>

Alt:

    <div class="col-md-10 content">...</div>
    <div class="col-md-2 visible-md visible-lg" id="myScrollspy">...</div>

### Suche

#### Suchfilter

Damit die kleinen `<sup>` Nummern ohne Unterstrich angezeigt werden wenn der Punkt aktiv ist, muss der Text immer in `<span>` Tags gesetzt werden.
Also:

    <li>
        <a href="#alle" role="tab" data-toggle="tab"><span>Alle</span></a>
    </li>
    <li>
        <a href="#seiten" role="tab" data-toggle="tab">
            <span>Seiten</span> <sup class="search-result-number-circle">23588</sup>
        </a>
    </li>

#### Suchergebnis mit Karte

    <body onload="init_map();">
    <li class="active"><a href="#handwerker" role="tab" data-toggle="tab" onclick="init_map();"><span>Handwerker</span></a></li>

## Barrierefreiheit

An dieser Stelle wird nur Bemerkenswertes aufgeführt.

### Standard Icon-Font

1) Wenn `<span.glyphicon>` in einem `<a>` Tag liegt bekommt das `<a>` Tag den Beschreibungstext wie folgt: `aria-label="Beschreibungstext"`

    <a aria-label="Vorherige Seiten" href="#" role="button">
        <span class="glyphicon glyphicon-einfacher-pfeil-links" aria-hidden="true"></span>
    </a>

2) Wenn `<span.glyphicon>` nicht in einem `<a>` Tag liegt, wird der Beschreibungstext - falls erfolderlich - normalerweise als `<span.sr-only>` angehängt.

    <div>
        <span class="glyphicon glyphicon-word-dokument" aria-hidden="true"></span>
        <span class="sr-only">Word Dokument</span>
    </div>