Aan de slag met HTML5

Hoe begrijpen robots mensenwerk

Het maken van een vindbare site over naakt yoga is moeilijker, dan ik ooit dacht. Toen haptotantra ontstond was er, een voor het naturisme een positieve beweging in de cultuur. Tijdens het ontstaan van deze site stond de cultuur van ‘het vrije lijf’ op een hoogtepunt.

Het web heeft echter zo zijn eigen regeltjes! De eerst goede vindbaarheid in de zoekmachines ging plotseling rap achteruit. We werden door bots (robots) beoordeeld als webonwaardig, ofwel alleen toegankelijk voor mensen die bewust dat zogenaamde plusje zoeken.

We dachten eerst aan frames

Nu zijn frames niet zo vriendelijk voor zoekmachines. Dat stond toen in menig boek over HTML. Voor ons echter was het de enige eenvoudige mogelijkheid, om  — na de eerste experimenten met HTML 2 —  een site met uitstraling te bouwen.

Die site destijds gebouwd in Frames (HTML 4) heeft ons jaren lang gediend. Helaas hebben we dat deel van onze site midden 2017 moeten verwijderen. Het ontstaan van bots, die zoeken naar naar materiaal, dat niet voldoet aan de huidige eisen als het gaat om copyright is een oorzaak. Maar ook de nieuwe privacy-wet gooit bij ons root in het eten. De financiële risico's werden te groot.

Gelukkig stond er in dit webwerk al wat testmateriaal in HTML5. Ook de voorganger van deze tekst behoorde tot dat materiaal. Door een interne link werd ‘dit Webwerk’ toen de voorkant van onze site Natspel.nl. Voorlopig zal dat helaas zo blijven. Het bouwen van een nieuwe introductie over ‘Natspel en haptotantra’  — met bijbehorende illustraties —  neemt zo zijn tijd en we richten ons eerst op het toevoegen van asana's en oefeningen.

Als je mensen enthousiast wilt maken voor een activiteit, dan is zo'n uitstraling wel degelijk van belang. Inmiddels staan de eerste HTML5-pagina's reeds op het wereldwijde web. Dit is zo'n experimentele pagina. Bij het smaller schuiven doen deze voorbeelden het al aardig. Tot ca. 350 pixels (smal) is de tekst goed te lezen. Echter is in deze smalle vorm de Lay-out aan de linker zijde soms nogal onevenwichtig. Verder is rechts rafelig; misschien moeten we aan uitvullen denken. Voor die uitstraling moet er dus nog veel gebeuren.

Ook is in de smalle toestand een lang menu nogal storend. Bij een kort menu kan het wel, want mensen bezoeken een goed ogende site, zowel vaker als langdurige. Toen werd de scheiding tussen opmaak en tekst opgeofferd aan de lay-out van de site. Nagenoeg iedereen deed dat zo! CSS stond nog in de kinderschoenen. Nu met HTML5 is het de bedoeling, dat we een strikte scheiding aanhouden. De lay-out is voorbehouden aan het CSS-file. De inhoud krijgt structuur binnen <body> van het html-file (htm).

Maar laten we niet teveel vooruit lopen op de zaken. Het zwart gekleurde Webwerk ontstond in de zoektocht naar een frame-vrije lay-out. Een ander idee: ‘De creatie van een achterdeur,’ bleek het probleem met de zoekmachines eerder op te lossen, dus Natspel.nl bleef lichtblauw. En er werd in die tijd jaren lang gewerkt, aan een uitbreiding met de beschrijving van honderden pagina's met asana's, oefeningen en methoden van aanpak (nu helaas wachtend op nieuwe illustraties). Later kwamen er de donkerblauwe pagina's bij voor wat in HTML5 in <aside> staat. Nu zal het onze vrijwilligers van het Natspelteam geruime tijd kosten om vertrouwd te raken met de nieuwe mogelijkheden van HTML5.

De overgang naar HTML5

De Nederlandse versie krijgt dus een plek in de map ‘nl’. Eerst kijken we hier naar het leerproces, dat er nu op ons afkomt. Ik en anderen uit het Natspelteam hopen hier te komen met tips ter ondersteuning van dit proces. Verder kan dit team enige aanvulling goed gebruiken. Het wordt zeker een heel karwei.

De afbeeldingen die we in deze tests gebruiken komen gewoon uit het materiaal van de vroegere en huidige Natspel-site. We voelen er niets voor, om toe te geven aan de huidige preutse trend in de cultuur. We zwemmen dus bewust tegen de stroom in. Wie daar niet tegen kan moet niet bij ons wezen; een beetje confrontatie kan geen kwaad. Misschien is dit een aanzetje in een wending van de huidige preutse trend. Met het aanklikken van ‘Article (tag)’ in het menu  — of door op de voorafgaande link —  te klikken, kunnen we nu duiken in de techniek van HTML;

Natugroetjes, Louis van Gorkom.