HTML5 lebt!

[Matthias Scharwies]

Servus Frog!

Die Vorschaupunkte würde ich als "thumbnails"- realisieren. Dazu gehören aber die einzelnen Textbeschreibungen.

Wenn ich das so richtig verstanden hab: Die Punkt lösch ich und alle Thumbnail-Slider sind beim Aufruf der Webseite sichtbar! Wenn man drüber-hovert, erscheint die Textbeschreibung, also: mixed media, vector und handdraw? Dann komme ich sowohl über das Hamburger-Menü, das ich schon auf der Startseite realisiere, als auch über die Thumbnails zu den Slidern mixed, vector und handdraw. Lebebslauf und Kontakte hab ich dann sowieso im Hamburger! Das wäre nämlich eine coole Idee! Ich mach das so!!!!

Entscheide dich jetzt:

1. Thumbnailbuttons öffnen auf der gleichen Seite einen Image-Slider

Ja, so mach ich das auf jeden Fall!

Hier ist deine Seite einmal in HTML5: https://jsr-hersbruck.de/frog/

Ich habe alle div-Elemente durch bessere Alternativen ersetzt:

1. Der div class="wrapper" wird durch body ersetzt.

2. div class="button" gehören zum slider und werden später dynamisch gesetzt.

3. div class="illu"ist h1

4. div class="thumb mix" wird zu section class="thumb" id="vector" - so können wir es mit einem Seitenanker ansteuern.

5. div class="cursor" ist der cursor - den gibt es doch automatisch- den kannst du mit CSS stylen, auch mit einem Bild! ** Andererseits ist es wichtig, dass der Nutzer weiß, dass der Cursor über einem Link ist**.

Auf der zweiten Seite mit dem Astronauten hattest du so eine Einteilung mit section bereits - ich hab's jetzt auch auf die Hauptseite gelegt!

Flyout-Navigation

Die Flyout-Navigation der zweiten Seite enthielt auch zwei div mit dem Hamburger-Menü und dem Kreuz. So etwas ist Darstellung (also CSS) und nicht Inhalt

Mikael Ainalem zeigt, wie man die Icons mit SVG animiert:

The 🍔 menu A step by step guide to creating a Hamburger Menu in SVG & CSS

Oops - jetzt ist das SVG doch im Inhalt gelandet!

slides-Navigation

hier habe ich die div-Elemente durch buttons ersetzt. Vorteil: du kannst mit der Maus, aber auch mit der Tab-Taste auswählen (und es wird gleich vom Browser gekennzeichnet!).

Die Schrift ist so wie bei dir ausgeblendet. Nachteil: Ich muss raten, wo ich drauf klicke. Besser wäre hier ein gut verständliches Icon, sorry dass ich gestern Thumbnail gesagt habe.

CSS

Die oben schon erwähnten magic numbers sind nicht nötig, wenn du Grid Layout verwendest:

body{
	display: grid;
	align-content: center;
	justify-content: center;	
}

packt h1 und nav id="slides" in die Mitte und zentriert sie automatisch!

[[EDIT]] ich habe es jetzt noch einfacher gelöst:

body{
	max-width:50em;
  margin: 1em auto;	
}

[[/EDIT]]

Alle px-Angaben habe ich mal entfernt. Deine Schrift sieht gut aus, ist für den contact aber ein bisschen klein. Ich habe für den body die Schriftgröße auf 2em gelegt. Alle Werte beziehen sich jetzt auf diese relative Schriftgröße em.

Ich müsste dann insgesamt drei große Image-Slider übereinander legen. Das schaut mir aber dann auch nach position: absolute in CSS aus?

Nein, die würde ich alle im HTML behalten und dann per CSS einblenden, wenn man eine Gruppe auswählt.

Schön wäre, wenn es nur ein Slider wäre, der die Bilder einer Gruppe dann anzeigt.

Ich hab´s mir gedacht! War ein Experiment, weil mich die Mechanik des programmierens interessiert, wenn da beim clicken ein Element erscheint, das vorher nicht da war!

Das machen wir mit dem Slider-Script. Das holt sich dann alle Bilder einer (ausgewählten) section, packt sie in den Slider und erzeugt die vor- und zurück-Buttons und dann die Punkte unten drunter, die anzeigen, wie viele Bilder es überhaupt gibt. Soll es auch eine Großansicht geben?

Herzliche Grüße

Matthias Scharwies