Een beetje clickbait mag wel af en toe. Het gaat hier niet om een miljardair die denkt dat ie de aarde kan verlaten, nadat hij haar vervuild en uitgemergeld heeft. Het gaat om w3schools. Als je ooit de letters html naast elkaar hebt zien staan, dan is de kans groot dat je ook w3schools hebt gezien. Google maar eens op html image, of alleen maar op html. W3schools staat dan op de eerste pagina, als het al niet het eerste zoekresultaat is. Twintig jaar geleden al, was het een vraagbaak voor mensen die iets met internet te maken hadden. Je kunt het antwoord op je vraag vaak heel snel vinden op de site, en wat ook belangrijk is: er staat geen letter te veel in de uitleg. Je hoeft dan niet een hele pagina door te worstelen voordat je hebt waar je voor gekomen bent.

Verrassend

Toen ik laatst op de site kwam, zag ik een reclame-banner met de aankondiging dat er nu ook “w3-spaces” zijn. Dat is dan internetruimte voor een website. Ik vroeg me dan ook meteen af, waar dat dan nou voor nodig is. Hebben we niet Wix, Weebly, Google-Sites, of zelfs WordPress? Ik heb de nieuwe mogelijkheid uitgeprobeerd, en er zijn wel verschillen aan te wijzen. Of je daar gelukkig mee bent is een tweede.

Leren

W3schools is in de eerste plaats opgezet om een leerplaats te bieden voor internet-bouwers. Bij het aanprijzen van spaces zie je dan ook termen als “playground”, “experiments” en “code”. Dus een drag- en drop-gereedschap, zoals bij Weebly, of Google Sites hoef je niet te verwachten. Van een woud van menu-opties zoals bij WordPress is ook geen sprake. Je maakt een website aan de hand van een voorgekookt voorbeeld. Dat voorbeeld, een template, heb je snel gevonden door te kijken op hun template-keuze site. Hier kun je ze ook vinden. Alle bestanden die nodig zijn voor dit voorbeeld worden dan op je “space” gezet. Dan kun je aan de slag.

Dummy

Dat heb ik uitgeprobeerd door een “dummy”-site aan te maken. Samengevat komt het erop neer dat je je eigen tekst en foto's tussen de html-code van het voorbeeld zet. Je vervangt dan als het ware de tekst en de foto's van het voorbeeld. Het gekozen ontwerp dat je mooi genoeg hebt gevonden, blijft dan onaangetast. Je moet wel enig begrip hebben van html en ook een beetje van hoe css werkt. Dat helpt om de plekken te vinden waar je iets moet veranderen. Vaak moet je ook iets weghalen door de code tussen <!-- en --> te zetten.

Snel klaar

Hoe gaat het in zijn werk? Natuurlijk zul je eerst een account aan moeten maken. Dat gaat precies zoals je verwacht: een email-adres en wachtwoord invoeren, en het emailadres bevestigen. Als je op je nieuwe werkomgeving dan kiest voor de “Create a space” knop dan kun je meteen een template uitzoeken. Ik heb een eenvoudig template, het parallax template, uitgekozen voor mijn testje. Vervolgens kun je je eigen tekst gewoon met knippen en plakken tussen de <p> en </p> tags zetten, terwijl je de originele tekst vervangt. Vergeet dan ook niet de <title> te vervangen. Foto's kun je “uploaden” door op de “upload”-knop te drukken. Vervolgens vervang je de originele namen van illustraties op de site door deze nieuwe, vers omhoog gehaalde bestanden. Je kunt telkens in een “preview” bekijken of het resultaat je aanstaat. Sommige delen van de site hoeven niet van toepassing te zijn op je situatie. In mijn voorbeeld is dat ook het geval, en die delen heb ik dan ook weggehaald. Klaar! Dat is snel! Hoeft maar een uurtje of twee te duren.

Code completion

Met deze werkzaamheden heb je het grafische ontwerp intact gelaten. Je kunt echter ook in het ontwerp, de kleuren, de grootte van de objecten, of de uitlijning, heel veel veranderen. De editor helpt je daarbij. Je moet je voorstellen dat de w3schools-templates opgebouwd zijn met een mooi uitgedacht systeem van css-klassen. Het doet ook wel denken aan het systeem van bootstrap dat je goed kunt gebruiken voor sites die “responsive” moeten zijn, dus goed moeten reageren op pc of mobiel apparaat. Mocht je het zelf uitproberen, verander dan eens de naam van een “class”. Je ziet dan een lijstje in de editor verschijnen van mogelijke klassen die je kunt gebruiken. De naamgeving is over het algemeen goed gekozen, en als je er langer mee werkt zul je vast goed weten wat die klassen doen.

Statisch

De website die je zo hebt gemaakt is statisch. Dat wil zeggen dat ze niet verandert naar aanleiding van input van de bezoeker, of van gegevens die de site ergens anders vandaan haalt. Dat maakt dit wel geschikt voor een presentatie-website voor een klein bedrijf of voor jou als persoon. In de toekomst is het hier ook mogelijk een werkend formulier in de site te zetten, zonder dat je daarvoor aan de serverkant moeilijke php-dingen hoeft te doen. Zo'n formulier zie je inderdaad ook vaak op sites voor bedrijven om klanten de mogelijkheid te geven makkelijk een vraag te stellen. Voorlopig kun je hier met een email-adres wel vooruit. Waar deze spaces niet zo voor geschikt zijn, is bloggen, vind ik. Om één keer tussen die p-tags tekst te kopieren is wel te doen, maar iedere keer als je iets nieuws schrijft lijkt me dat wel overdreven.

Beperkingen

Als je van template wil wisselen, zoals dat bij andere websitebuilders mogelijk is, dan kan dat niet snel. Je moet dan een nieuwe space aanmaken, die natuurlijk niet dezelfde naam kan hebben. Als je de oude space verwijdert, omdat je gratis account maar één space toelaat, duurt het een maand voordat je de naam weer kunt gebruiken. Maar als je daarop niet kunt wachten, dan is het mogelijk alle bestanden van je space te wissen, een andere space aan te maken (ook een nieuw account met een ander emailadres als je het gratis wil houden), daar de bestanden van de template op terecht laten komen, en ze vervolgens op de oude space neerzetten. Nou, dat kan wel makkelijker. Een andere beperking die vooral bij de gratis versie geldt, is de lage verkeerslimiet van 100 MB per maand.

Export en import

W3spaces heeft vooralsnog geen export- of importmogelijkheid. Voor import kun je de upload-knop gebruiken, met de kans dat je rsi-symptomen krijgt. FTP is voor zover ik kan zien nog niet mogelijk. Exporteren kan helemaal niet, dus dat zou je ook handmatig kunnen doen door elke file in de browser op te roepen en te downloaden. Makkelijker is het om wget te gebruiken. Met wget -r -np -k https://snappie.w3spaces.com kreeg ik alle gebruikte bestanden op mijn pc. Bovendien was daarna een dubbelklik op het index.html bestand voldoende om de website lokaal te kunnen bekijken. In principe kun je de bestanden dus ook op een andere plek op internet neerzetten. Overigens heb ik op mijn Windows machine WSL moeten gebruiken om dat voor elkaar te krijgen. Maar er zijn vast andere goede manieren om het op Windows te exporteren.

Voor wie?

Het blijft voor mij een vraag die maar blijft hangen. Voor wie zou deze bouwomgeving bedoeld zijn. Is het alleen maar als playground bedoeld, of ook voor serieus werk? Je kunt de templates en css-klassen nu al gratis in je code gebruiken, al moet je dan net iets meer werk verrichten. Drie euro per maand is niet echt heel veel, maar je moet het wel steeds betalen, en je komt er dan ook niet vanaf. Of wel? Het is mogelijk om alle bestanden die je daar hebt staan op een andere site te zetten. Je hebt de space dan niet meer nodig. Tot ziens, en met dank aan de handige editor. Je zou er inderdaad tien websites op kunnen maken voor een aantal klanten, en die daar dan op laten staan. Het is absoluut niet handig om een gratis account voor zo iets te gebruiken, aangezien er een heel lage verkeerslimiet van 100 MB per maand geldt. Met een paar dikke foto's zit je daar al snel overheen. Bij mij was de limiet in ieder geval al na een dag bereikt.

With a Free plan you get 100 MB data a month. Since you have reached this limit, we have temporarily closed your space for public access. Your space will be opened again when your next subscription period starts, Sep 26, 2021. To get more data, upgrade your plan.

Nu heb ik inderdaad ook in de haast niet netjes naar de grootte van de foto's gekeken. Maar toch. Gelukkig heb ik de bestanden vóór deze melding al naar mijn computer gehaald, en neergezet op een andere gratis site, waarvan de gratis versie traag en onbetrouwbaar is, maar voor nul euro is dat natuurlijk ok.

Een buil

Spaces is een aardig initiatief van w3schools, en ik zie het dan maar meer als een speeltuin, dan een serieus hosting alternatief. Maar je weet nooit. De editor is handig, drie euro is niet zo heel duur, de gebruikte templates zijn wel goed uitgedacht en getest. Dus een echte buil kun je je er ook niet aan vallen. Bovendien is deze 'code'-manier flexibeler, en loopt niet zo snel tegen de grenzen aan, die de werking van de meer grafisch ingestelde drag- en drop omgevingen wel beperken.

#website #w3schools #css #free #domein #gratis #internet #hack

Een website maken wordt steeds gemakkelijker. Veel sites zijn vrij simpel opgezet, en hoeven geen ingewikkelde javascript-code of -plugins, en ook geen dure database. Deze simpele sites noemt men ook wel “static sites”. Een blog is vaak een “static site”: de blog wordt steeds aangevuld met een nieuw item, de oude items blijven over het algemeen hetzelfde. Er is dus niet meer nodig dan een verzameling html-pagina's op een kleine ruimte op internet. WordPress biedt veel mogelijkheden, als je er voor betaalt. Maar als je deze niet nodig hebt, dan kun je eens overwegen of het goedkoop huren van een internetplekje met een domein niet veel handiger en goedkoper is. Er zijn steeds meer zogenaamde Static Site Generators, die je het leven makkelijk maken. Vaak zijn deze sites ook veel sneller dan de logge WordPress-sites. Eén ervan heb ik met verrassend gemak geprobeerd.

Importeren

Als je al een WP-website hebt, en je wil overstappen naar een goedkoper alternatief, dan heb je de mogelijkheid om eerst de website vanuit WordPress te exporteren, en vervolgens in een andere omgeving te importeren. Kies daarvoor bij WordPress onder gereedschappen het menu-item exporteren, inhoud exporteren. Media exporteren is niet per sé nodig, als je de site meteen naar een nieuwe site wil exporteren. Als je het bestand uitpakt, dan hou je een xml over.

Publii

Publii is de site generator die ik heb uitgeprobeerd, omdat die volgens het reclameverhaaltje WordPress sites kan importeren. Bezoek de website van Publii, download het programma, installeer het en start Publii. Je kunt meteen de naam van je website invullen en bevestigen. Daarna zie je een menu, en onder het menu-item “Tools” vind je een “WP-importer”.
Hiermee kun je de geëxporteerde xml uit je WordPress omgeving inladen. Afhankelijk van de grootte van je website duurt dat kort of lang. Bij mij duurde het een paar minuten. De foto's, of beelden worden van je website gekopieerd, dus de website moet nog wel bestaan. Als de site niet meer bestaat dan zul je ook een export van de media moeten hebben. Hoe je deze dan vervolgens moet importeren in Publii weet ik niet precies.

Geen images

Als de importfunctie klaar is, dan heb je meteen een website die je kunt bekijken. Het kan zijn dat de beelden niet in de website staan. Dat was bij mij in ieder geval zo. Maar als je weer naar tools gaat en op de optie “Regenerate thumbnails” klikt, zet Publii ze er alsnog in, ook al zijn het geen “thumbnails”. Dat is even een weetje. Daarna heb je een website op je computer, die de inhoud en de beelden van je WordPress website bevat. Alles is geordend volgens het standaard theme “Simple”. Je kunt het theme veranderen onder Site settings, je hebt aanvankelijk de keuze uit: ...één theme. Andere themes of templates zul je moeten inladen en eventueel betalen. Er zijn nog niet veel themes te krijgen. Je kunt er ook voor kiezen dit Simple theme aan te passen.

CSS

Het is mogelijk daar veel van aan te passen, de layout, de kleuren, het achtergrondbeeld, de maten van de lay-out-onderdelen. Je kunt dus aardig wat aanpassen, maar feit blijft dat het een theme voor een blog is. Ik heb wat aanpassingen gedaan aan de Hero sectie, maar de belangrijkste mogelijkheid is toch de custom CSS knop onder tools. Zo kun je bijvoorbeeld de afbeeldingen hetzelfde formaat geven, als het formaat uit je WordPress website. De css gaat namelijk niet mee in de conversie.

Sync

Als je een plekje op internet hebt, kun je de website daar naar verplaatsen. Dat kan op verschillende manieren, Google cloud, Netlify, Github, Gitlab, maar vaak zal het gewoon SFTP zijn. Met SFTP transporteer je al de websitebestanden van je computer naar het internet. Als je de instellingen en gegevens van je gehuurde internetplek invult, een keer een testje doet met de knop, dan ben je klaar om de site te publiceren. Druk dan op de knop “Sync your website”. Ook dat duurt de eerste keer een aantal minuten omdat de hele site bijgewerkt moet worden. Daarna, als je een blogje schrijft, is het aanvullen van een artikel op de site een kwestie van een paar seconden.

Met het menu-item “new post” kom je in een editor terecht waar de meest voorkomende zaken voor het schrijven van een blog in zijn geregeld. Het maken van hyperlinks, afbeeldingen, koppen of het instellen van letterkenmerken zijn zoals je gewend bent in een wordprocessor, of WordPress editor. De preview-knop laat je het resultaat van je inspanningen zien en als je tevreden bent druk je op de knop “Sync your website”, om je nieuwe artikel te publiceren.

Gemak

Het was voor mij een verrassing hoe gemakkelijk het importeren ging. Voor het aanpassen aan de site naar een nieuwe look, of zo veel mogelijk terug naar de look van je oude WP-site heb je wat CSS kennis nodig. Maar dat hoef je dan ook maar één keer te doen. Of er is altijd wel een kennis te vinden die het voor je wil doen. Daarna kun je je concentreren op het schrijven, in de wetenschap dat je alles zo simpel mogelijk hebt geregeld en er dus ook zo weinig mogelijk voor betaalt.

#static #website #css #publii #hacks

Een website leuker maken, dat geeft voldoening. Het is alleen niet zo gemakkelijk. Ik ben zelf helemaal geen designer, en daarom kies ik liever een ontwerp van iemand die iets heeft gemaakt wat ik mooi vind. Op mijn nieuwe plek write.as zijn er wel templates van mensen die iets gemaakt hebben, maar dat zijn er niet zoveel. Op mijn blogje mistynotes.wordpress.com had ik het “libretto”-thema, en daar was ik wel tevreden mee. Dit heb ik nu gebruikt om mistynotes.nl vorm te geven met css. Lees hoe dat in zijn werk gaat op write.as.

Afkijken

Dus eigenlijk is het gewoon “afkijken” van een ander. Maar van afkijken kun je veel leren, nietwaar? In ieder geval heb ik vandaag het uiterlijk van mistynotes.nl zo veranderd, dat ik er tevreden mee ben. Allereerst wilde ik de kleuren van de site goed zetten. En dan op zo'n manier dat de achtergrond en het tekstgedeelte nèt een andere kleur hebben. Precies zoals dat bij het libretto thema werkt dus. Bij het bepalen hoe dat moet heb ik ook weer afgekeken, namelijk van andere thema's die voor write.as beschikbaar zijn. Ik heb geleerd dat het tekst-gedeelte met een “article”-tag te vinden is. Deze tag kun je gebruiken als “selector” in je css. Allereerst even de kleur van de achtergrond bepalen.

body {
background: #f2f1ed;  
}

En dan die van het “article”

article {
   padding-top: 50px;
    background-color: #faf9f5;
    -moz-box-shadow:    1px 1px 2px #eae9e5; 
    -webkit-box-shadow: 1px 1px 2px #eae9e5; 
    box-shadow:         1px 1px 2px #eae9e5;
}

En je ziet dat ik er ook een klein schaduwtje aan geplakt heb, en de bovenkant iets (50 pixels) naar beneden geduwd heb. Steeds afkijken dus.

Koppen

Daarna vond ik dat de kleur en hoe de kopjes eruit zien wat meer moesten lijken op het libretto-thema. Daarom heb ik de twee belangrijkste koppen een opvallende kleur gegeven, en de kleinere tussenkopjes een kleur die op grijs lijkt. Ook heb ik het font-type aangepast. Nu weet ik niet zeker of dit laatste altijd goed werkt. Maar ik denk dat, als het niet werkt, terug gevallen wordt op het oorspronkelijk lettertype. Dus dat is dan geen ramp.

h1, h2 {
    font-family: libretto-icons;
    color: #943526;
    padding-top:15px;  
    text-align: center;
}

h3, h4 {
    color: #787065;
}

.post-title, .dt-published {
    color: #787065 !important;
    font-family: libretto-icons;
    text-align: center;
}

Samen met de kopjes heb ik ook nog wat veranderd aan het tijdstempel, of eigenlijk de tekst met de datum van publicatie (.post-title, .dt-published). Ik wilde de kop en deze datum gecentreerd hebben. Ook wilde ik vóór en na de datum een tilde zetten. In het libretto-thema is dat een mooi figuurtje, maar hier bij de minimalisten van write.as past dat misschien niet zo, dus een tilde is snel gemaakt, en is natuurlijk ook makkelijker. De datum kan ik vinden met de tag “time”. Ik gebruik natuurlijk de f-12 knop in de browser om alles “onder de motorkap” te kunnen bekijken.

time::before {
  content: "~";
}

time::after {
  content: "~";
}

Beginletter

Wat ik ook leuk vind, is dat de beginletter van een tekst soms wat groter gemaakt wordt. Doet me denken aan die middeleeuwse monniken die hele mooie tekeningen maakten van die eerste letter. Ik ben wat bescheidener en maak het alleen wat groter en geeft het een ander kleurtje.

/* <p:first-of-type> is of no use, because there is always an image in the first paragraph in my blog*/
p:nth-child(2) {
  display:inline-block !important;
}

p::first-letter {
  font-size: 120%;
  color: #787065;
}

Het was een heel gedoe om te vinden hoe dat nou moest. Want ik heb in mijn blog als eerste altijd een plaatje, een “image”, vlak onder de titel. Dus ik kon geen gebruik maken van de css-mogelijkheid “first-of-type”, om alleen de eerste paragraaf van zo'n mooi versierinkje te voorzien. Alle paragrafen, is gewoon teveel van het goede, vind ik. Nu is het zo, dat bij write.as alle paragrafen al als “inline”-display staan gedefinieerd. Hierdoor kun je de letters ervan niet van veranderen. Wist ik ook niet, hoor. Dus ik moest zoeken hoe ik de eerste paragraaf kan veranderen in “display:inline-block”, omdat je daar de eerste letter dan weer wel van kunt veranderen. De website w3schools heeft mij hierbij heel erg geholpen. Wat een puzzel is dat css toch! Ik vond de css manier om kindjes te zoeken: p:nth-child(2), het tweede kind is de klos. Want in de eerste staat kennelijk het plaatje. Write.as zet steeds alles in een paragraaf, kennelijk. Nou, dat tweede kindje moest ik veranderen, en er ook nog voor zorgen dat ik voorrang krijg op de andere instellingen van write.as. Daarom staat er !important achter. Waarschijnlijk snap je er geen hol van, maar je komt er vanzelf achter als je het probeert. Lees dit stukje dan nog maar eens door.

Opblazen

Het Libretto thema zoals dat oorspronkelijk werkte, maakte de hoofd-illustraties bij het artikel groter dan het kader. Nu is dat niet meer zo bij WordPress.com, sinds de nieuwste release. Geen idee waarom niet, en ik krijg daar ook geen antwoord. Maar goed, dat is helemaal niet zo erg. Want in tegenstelling tot WordPress.com is het bij write.as wel mogelijk hier en daar wat aanpassingen aan het uiterlijk te doen.

.e-content{
    overflow: visible;
}

div.e-content img.img_main{ 
    margin-left: -100px;
    margin-right: -100px;
    max-width: 132% !important;
    width: 132%;
}

Dit was eerlijk gezegd ook niet makkelijk voor mijn onervaren css-vaardigheden. De f-12 knop en w3schools zijn dan wel een grote hulp. Uiteindelijk is het me wel gelukt. Als je uit de artikelen die op de hoofdpagina staan, er ééntje kiest en je gaat dan dus naar het artikel, dan zie je ineens een groter plaatje. Alsof je het artikel openmaakt en uitpakt.

Alles bij elkaar

Ik weet niet of het echt robuust en gedegen is. Dat is altijd wel het probleem als je begint met iets waar je weinig ervaring mee hebt. Soms moest ik helaas met !important wat uit de minimalistische “styleguide” van write.as breken. Maar goed, de tijd zal het leren. Mocht je hetzelfde thema willen gebruiken, daar heb ik helemaal geen probleem mee. Hier heb je het hele stukje css. Je ziet hier ook dat ik plaatjes links of rechts iets buiten het kader en in de marge gedrukt, kan tonen. Voor de plaatjes moet je dan wel de html-wijze gebruiken en niet de mark-down, tijdens het schrijven. Bijvoorbeeld:

<img src="https://i.snap.as/1ziyarj.png" alt="Prutsen met css" class="img_main"/>

voor het hoofdimage, of

<img src="https://i.snap.as/DhLCcpI.png" alt="kwastcss" class="img_left"/>

voor een beeld aan de zijkant. En denk er dan ook aan, dat als je zelf het artikel niet begint met een plaatje, dat je dan p:nth-child(2) verandert in p:nth-child(1). Als je iets ziet dat beter kan, wat heel goed mogelijk is natuurlijk, dan houd ik me aanbevolen!

Opdracht

Je ziet overigens ook dat ik het “published with write.as” hier beneden weggehaald heb. Met Javascript. Dat kan natuurlijk ook met css. Dat is een leuke leeropdracht voor je. Probeer het stukje met css weg te krijgen. Ik heb het wel op mijn “over mij” pagina gezet. Want ere wie ere toekomt. Het hoeft alleen niet op iedere pagina van mijn blogje te staan, nietwaar? Laat het maar weten als je vragen hebt. In ieder geval ben ik tevreden over het uiterlijk van mistynotes.nl. Of dat morgen ook nog zo is, dat is natuurlijk afwachten.

#write.as #css #wordpress #website #hacks