README.md

Hwk Html

Html Dummy für die Handwerkskammer

Versionen

Projekt

Version 2.0.8

Aktuelle Readme bitte online einsehen:
internet.handwerkskammer.de

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

Added @since 2.0.1

.no-wrap
.slider-link    (to #carousel-header)

Added @since 2.0.4
1) Icon können nur eingefärbt werden über die body Klasse, wenn sie .allow-change-color gesetzt haben.

.allow-change-color  /* only on glyphicon - will change color to color set in body class if set */

2) Der Icon Font wurde um folgende Zeichen erweitert:

.glyphicon-thumbs-up
.glyphicon-thumbs-down
.glyphicon-hand-right
.glyphicon-hand-left
.glyphicon-hand-up
.glyphicon-hand-down

Added @since 2.0.5

.glyphicon-ferienjob
.glyphicon-duales-studium
.glyphicon-eq
.glyphicon-triales-studium

Added @since 2.0.6

.glyphicon-infozeichen
.glyphicon-einfache-sprache
.glyphicon-gebaerdensprache

Added @since 2.0.7

.glyphicon-barrierefreiheit
.glyphicon-barrierefreiheit-info

Added @since 2.0.8

.glyphicon-incoming
.glyphicon-outgoing
.glyphicon-job-shadowing

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();

Bugfixing

Added @since 2.0.7

1) Fix sprunghaftes Verhalten auf dem Handy:

Es gibt hierfür eine neue Datei js/header.js

2) Auf dem Handy öffnet sich der Abschnitt, wenn er in der URL als # angegeben wird:
Es git hierfür eine neue Datei js/collapse.js

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

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>
      </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>
  <a href="#" class="slider-link"><span class="sr-only">Link zu #</span></a>
</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>

README.md

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

Bugfixing

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