WordPress wordt ontzettend snel aangepast. Vaak krijg ik de vraag: Hoe kan ik een menu aanmaken en koppelen aan mijn pagina’s? Dit gaat namelijk heel anders dan “vroeger”, toen er nog gewerkt werd met een losse pagina hiervoor.
Tegenwoordig is het in principe beter geregeld, maar…. je loopt de kans heel snel te verdwalen. Daarom als eerste deze demo: Maak een nieuw menu aan in WordPress.
Dreamframe 0.7
Versie 0.7 is uit met:
Bekijk Dreamframe in actie met de documentatie
We hebben een WordPress thema gemaakt waarin je door middel van het invoegen van blokken met Dreamframe kunt werken. Het is een super lichtgewicht thema. Binnenkort meer hierover.
We gaan werken naar versie 1.0, waar we een bibliotheek moeten hebben waar de gebruiker snel mee aan de slag kan. Daar is nog voor nodig:
Versie 0.6 van het framework is uit!
Nieuw in deze versie:
Voor de rest is de documentatie uitgebreid, de CSS bestanden opgeschoond, de structuur van het zip bestand opgeschoond.
DreamFrame is een frontend framework, een verzameling van HTML / CSS en javascript bestanden waarmee snel en makkelijk websites kunnen worden gemaakt.
Het framework is gericht op de intermediate gebruiker, dus niet op specialisten, maar op mensen die wel al redelijk met HTML en CSS uit de voeten kunnen, maar die op een makkelijke manier sites willen kunnen maken. Het framework is daarmee een logisch vervolg op de cursussen van Dreambits. Al na de basiscursussen HTML en CSS kun je ermee aan de slag. Er wordt wel wat Javascript gebruikt, en ook een beetje Flexbox CSS en Grid CSS, maar dat hoef je niet echt te kennen om te kunnen werken met het framework.
Het framework bevat nu alles om snel niet al te ingewikkelde pagina’s te maken. Ben je handig met HTML en CSS, dan kun je het aanpassen en uitbreiden naar eigen wens.
In volgende releases willen we dit nog makkelijker maken door complete startsites mee te leveren. Je hoeft dan zelf enkel nog de inhoud aan te passen. Denk bijvoorbeeld aan een portfolio site, een site voor een vereniging, en landingspagina’s.
Er zijn twee dingen waar een moderne HTML editor volgens mij aan moet voldoen, (naast dat je gewoon html moet kunnen editen) en dat is: automatische updates in je browser, want je wilt niet elke keer dat save file/reload browser doen na elke wijziging van je code, en ondersteuning van server side technieken. Je wilt gewoon op je pc PHP of serverside Javascript kunnen uitvoeren. Of zoals bij ons eigen framework, Javascript functies uit kunnen voeren waarvoor een server nodig is.
Nu ben ik meer dan tien jaar geleden gillend weggelopen van Windows, dat was nog voor Windows 10. Ook Windows software kan me niet bekoren. Ik ben dan ook positief verrast door Visual Studio Code. Ik was al regelmatig op Visual Studio gestuit, wat veel schijnt te worden gebruikt, maar ik heb het links laten liggen. Het leek me nogal een zwaar programma dat toch vooral was gericht op het maken van programma’s, en dat vooral – uiteraard – voor Windows.
Maar, nu bleek er ook een slankere variant te zijn, speciaal voor coding. En die leek te voldoen aan bovenstaande eisen, en ook nog eens beschikbaar op Linux, het bestuurssysteem waar ik al een paar jaar tot grote tevredenheid mee werk, na ook afscheid genomen te hebben van MacOSX.
Visual Studio Code is geheel gratis en hier te downloaden. Na installatie ben ik meteen de extensies gaan bekijken, en heb de Live server (Five server) gekozen. Nu is het een kwestie van een folder openen met je website, en dan rechtsonder in de editor klikken op “Five Server starten”, en de pagina’s worden geopend op een lokale webserver. Simpel en werkt perfect.
Die extensies, uitbreidingen, zijn wel erg handig, want het geeft je de mogelijkheid om het programma in te delen hoe je maar wilt, en uit te rusten met alle functionaliteit die jij nodig hebt. Er zijn er honderden.
Geen nieuwe cursus ditmaal, maar een frontend framework! Wat is dat? Dat is een verzameling bestanden (HTML, CSS en Javascript) waarmee je snel zelf een geheel eigen site kunt bouwen. Een framework is dus een soort blokkendoos van meteen te gebruiken bouwblokken waar je meteen mee aan de slag kunt.
Want, ondanks dat je op deze site HTML en CSS kunt leren, is het daarna altijd nog een uitdaging: hoe ga ik nu een site bouwen? Dit framework sluit daar op aan.
Met dit framework kun je een sjabloonpagina openen in je eigen HTML editor, en deze aanpassen hoe je maar wilt.
In beginsel start je met 3 blokken: Navigatie (en eventueel een Header), Content en Footer. In de content komt de inhoud van de pagina. De header en footer worden op iedere pagina ingeladen met javascript. Dat is steeds hetzelfde bestand, zodat je door heel je site dezelfde hebt. Pas je dus de navigatie aan (een link erbij of eentje weg) dan wordt dat automatisch door je hele site doorgevoerd. Net zo werkt de footer.
Alles is geheel responsive, dus je site zal ook op mobiel goed werken. Een mobiel menu is ingebouwd. Alle opmaak is geregeld in handige CSS custom properties (dat zijn een soort van variabelen). Dus je kunt makkkelijk aanpassingen maken die door de hele site worden doorgevoerd.
Alles is gemaakt met standaard HTML, CSS en Javascript. Het werkt dus overal, je hoeft het nooit te updaten en je kunt het helemaal aanpassen zoals je zelf wilt. Wil je bijvoorbeeld een andere navigatie op een bepaalde pagina, dan is dat heel simpel door te voeren. Idem dito voor de footer. Je kunt ook simpelweg navigatie en footer weglaten, bijvoorbeeld voor landing pages.
Dit zijn uitbreidingen die je in elke pagina kunt toepasen, ongeacht het gebruikte sjabloon.
De modules zijn toe te passen door het toevoegen van een stukje HTML code in je pagina, soms enkel door het toevoegen van een attribuut.
In dit framework zal javascript een vrij belangrijke plaats innemen om de site dynamischer te maken. Om te beginnen is er ingebouwd dat navigatie (header) en footer automatisch ingeladen worden. Want het is bijzonder omslachtig om in een website elke pagina te moeten aanpassen als je een pagina toevoegt en daardoor je navigatie moet aanpassen.
Daarbovenop is nu al toegevoegd dat je andere pagina’s of delen van pagina’s kunt inladen op plaatsen waar je zelf wilt.
Consequentie van het gebruik van deze nieuwste vorm van javascript is wel, dat de beveiliging vergroot is door CORS. Het inladen van deze pagina (-delen) kan enkel via het http-protocol, dus het zal niet zomaar meteen vanaf je harde schijf werken! Je zult vanaf een server moeten werken. Gelukkig zijn er tegenwoordig veel mogelijkheden om dit relatief eenvoudig te doen, maar het werpt wel een drempel op. We zullen hier later uitgebreid op in gaan.
Voor nu enkele tips: Sommige webediting software heeft het al ingebouwd, ik gebruik zelf geen Windows, maar Visual Studio (Code) heeft het, zie het nieuwsbericht over deze html editor. Ook met Pinegrow, mijn favorite editor, kun je prima previews krijgen, ook in de browser als je ook Browsersync installeert.
Framework pages en documentatie
Hier zul je altijd de huidige versie vinden. Let wel op, de documentatie is onvolledig en zal waarschijnlijk ook nooit volledig worden. (Zie verderop)
Download dreamFrame 0.6-okt 2022
We gaan een aparte cursus inrichten voor het framework, waarin een zo uitgebreid mogelijke documentatie zal komen, inclusief video’s. De cursus is uiteraard inbegrepen in het VIP pakket. Het framework zelf is verder opensource en voor iedereen te downloaden en te gebruiken, maar de documentatie kost weer erg veel extra werk en zal dus niet gratis zijn voor iedereen.
De cursus Dreamweaver Responsive (eerst Bootstrap met Dreamweaver genaamd) is vanaf vandaag beschikbaar.
In deze cursus leer je hoe je binnen Dreamweaver responsive sites kunt maken met Bootstrap. Installatie van de Bootstrap bestanden gebeurt automatisch, en je hebt templates tot je beschikking, waardoor je meteen kunt beginnen.
Deze cursus werkt als een workshop en is dus volledig praktijkgericht. We beginnen de site in deel 1 met een bestaand Dreamweaver template voor Bootstrap, en gaan dan de onderdelen aanpassen. Dat zijn: de navigatiebalk, knoppen en de jumbotron component, achtergrond en tekstkleuren, responsive afbeeldingen, marges en padding.
We hebben een zip bestand toegevoegd aan de cursus, met daarin alle werkbestanden van de CSS Grid cursus. Dit zijn alle HTML bestanden met bijbehorende CSS code, zoals die in de cursus gebruikt zijn.
Je kunt dus nu alle bestanden zoals die in de cursus gebruikt zijn, zelf in je browser bekijken en eventueel in je editor zelf aanpassen om te oefenen.
Het is makkelijk om alle broncode in je browser te bekijken, want de CSS is in de pagina’s zelf toegevoegd. Wat je ziet, kun je meteen bewerken.
We hebben uitgebreide oefeningen toegevoegd voor de cursussen HTML5 en CSS3 basis. Na het volgen van elk hoofdstuk van de cursus kun je de bijbehorende oefeningen zelf maken.
Het zip bestand met het Word bestand, alle benodigde bestanden en alle oplossingen van de oefeningen is te downloaden boven de cursusvideo’s. (Je moet wel geabonneerd zijn op de cursus of VIP lid zijn)
Deze week hebben we de laatste hand gelegd aan deze cursus. Naast de noodzakelijke theorie bevat deze cursus heel veel praktijkoefeningen om allerlei soort layouts te bouwen.
We hebben een nieuwe cursus toegevoegd: CSS Flexbox, de manier om moderne responsive layouts te maken. In deze cursus, die veel praktijkvoorbeelden bevat, leer je hoe je met deze techniek layouts en onderdelen van pagina’s flexibel kunt ordenen en positioneren.
Problemen met het maken van web layouts zijn hiermee verleden tijd. Met CSS Flexbox kun je elementen over een pagina verdelen, simpel en exact zoals je wilt. Flexbox bevat eigenschappen die ervoor zorgen dat layout al aangepast wordt aan de grootte van een beeldscherm. Minder werk, beter resultaat!