Tower Pattern

Ook in CSS kan je een ontwerppatroon gebruiken. Charlotte Jackson, From Pages to Patterns: An Exercise for Everyone, 3 november 2015.

Het tower-pattern is een naam die ik geef aan een bepaalde manier van CSS opmaak. Het is veel gemakkelijker om CSS te maken als je een visuele voorstelling voor je opmaak in je hoofd hebt. In dit geval is dat een toren of een flatgebouw. De website is een toren met daarin pagina's die je kan voorstellen als verdiepingen. Elke verdieping beschikt over een controlepaneel en een showroom. Met het controlepaneel kan je navigeren naar andere verdiepingen en in de showroow kan je dingen laten zien aan de gebruiker. Deze dingen stel ik voor als tegels op een muur met extra uitleg als over je over een tegel zweeft. Als je op de tegel klikt kan je iets op die verdieping - pagina - achter de schermen - showroom - doen. te doen.

Probleem

Waar het kan, focussen we op semantische markup. We hopen met de torenmetafoor de semantiek te versterken zonder te concreet te moeten worden. De eerste verdieping is wel abstract maar heeft toch een semantische waarde. Als we elke verdieping een concrete id zouden geven - wat overigens mogelijk is - kunnen we de markup moeilijker hergebruiken. Maar je kan dat wel overwegen.

We gebruiken met opzet het element nav niet. Navigatie is niet alleen beperkt tot het controlepaneel. Navigatie zit overal, ook in de kamers. Ik vindt het nav element niet echt een geslaagde toevoeging omdat het afbreuk doet aan het feit dat heel het web navigatie is. het nav element doet veel te veel denken aan het menu van Windowsformulieren.

Design

Het uitgangspunt is een patroon voor een spa off een single page application. Alle pagina's van een klassieke website staat m.a.w. op één pagina. Een mix van verschillende spa's is ook in te beelden. Tenslotte kan je het torenontwerp ook toepassen in een klassieke website met meerdere pagina's.

In een klassieke website navigeer je van de ene naar de andere pagina. En dat zijn fysiek verschillende pagina's met allemaal een verschillende bestandsnaam. Op zo'n pagina heb je dan maar één verdieping maar het torenontwerp blijft steek houden.

In een spa navigeer je niet van ene fysieke pagina naar de andere. Immers alle pagina's zitten in één bestand met één bestandsnaam. In een spa zitten geen fysieke pagina's maar wel logische pagina's. In een spa navigeer dus van de ene logische pagina naar de andere.

Het torenpatroon stelt de logische pagina's voor als verdiepingen in een toren. Elke logische pagina of verdieping heeft een controlepaneel om tussen de verdiepingen te navigeren. Daarnaast bevat een verdieping ook een kamer waar de content komt te staan.

Eerst moeten we een duidelijke metafoor vinden om te illustreren wat we willen maken. De constructie van onze one page app gelijkt op een appartementsblok met verdiepingen. Op elke verdieping heb je een controle paneel met knoppen en een ruimte.

Het appartementsblok noemen we een tower, een verdieping is een floor.

Op elke verdieping heb je een control-panel.

tower-pattern afbeelding controlepaneel lift

Elke floor heeft een showroom.De showroom is de publike kamer van de verdieping.

Een showroom kan je betegelen:

Dat kan ook heel fantasierijk zijn als in een kamer van het Rockoxhuis. De tegels zijn hier schilderijen.

tower-pattern artistieke interpretatie Rockoxhuis zaalzicht

Oplossing

Voorbeelden:
1. De HTML voor de Fric-frac Eventkalender vind je in tower-pattern HTML Fric-frac Eventkalender.
2. De html voor de MikMak webwinkel vind je in tower-pattern HTML MikMak webwinkel.
De volgende links bevatten uitleg over de CSS:

2018-01-14 18:59:04