Categoriearchief: Web Development

Afkortingen: Van MVP via MoSCoW en NUF naar MLF

In de hele wereld maar vooral in IT-sferen is men verzot op afkortingen. Het geeft een gevoel van incrowd versus mystiek, voor hen die wèl of níet weten waar een afkorting voor staat. Zo ook bij UX-design. Het begint immers al met die ‘UX’ (User Experience), dat valt mee. Maar al snel kom je afkortingen tegen zoals MVP, MLF, NUF en MoSCoW. Je denkt dan: wat is hier aan de hand, wat mis ik ?

Bij alles wat we maken en wat anderen hopelijk gaan gebruiken – of het nou fysieke producten of digitale diensten zijn – vraag je je af: welke functies en opties moet mijn creatie gaan bieden ? Welke zijn daarbij cruciaal of optioneel ? Waarmee moet ik beginnen ? Om die afwegingen te maken, ga je nadenken of onderzoeken wat een gebruiker blijkbaar hard nodig heeft of kennelijk verwacht. In die fasen komen dergelijke afkortingen boven water.

MVP

Zo staat MVP voor Minimal Viable Product, oftewel ‘wat moet er minstens in zitten om een bruikbare website of app te zijn ?’ Dus zonder een goede uitwerking van die ene functie heeft het hele idee gewoon geen zin. Je zou denken dat zoiets niet voorkomt, maar er zijn voorbeelden genoeg: een mes dat niet kan snijden, een handdoek-haakje waar niets aan blijft haken, een citroen-stampertje dat niet kan stampen. Lees verder Afkortingen: Van MVP via MoSCoW en NUF naar MLF

Vue.js – het nieuwe JavaScript-framework

In de webwereld is het frontend vakgebied een hot topic. Steeds meer bedrijven en organisaties kiezen ervoor hun frontend gescheiden te ontwikkelen van het backend. Zo kan het backend zich concentreren op authenticatie, API’s en datavoorziening, terwijl het frontend kan profiteren van compacte en lichtgewicht webapplicaties die op elke device draaien. Vaak wordt gekozen voor Angular of React als frontend framework, om niet telkens het wiel opnieuw te hoeven uitvinden. Maar sinds enige tijd is ook Vue.js een steeds vaker gekozen alternatief.

vue.js
De vue-homepage..

Vue.js is evenals React en Angular een frontend framework. Dit betekent dat in één geïntegreerde omgeving wordt voorzien in alle eisen waaraan een moderne webapplicatie moet voldoen. Denk aan zaken als webcomponenten, databinding, routing, state management en communicatie met het backend via http. Het gebruik van losse bibliotheken zoals jQuery, knockout, mobx (voor state management) en andere is vaak niet meer nodig. Alles is al beschikbaar in het framework. Het ene framework biedt out-of-the-box iets meer (Angular), het andere framework iets minder (React), maar daar staat dan weer meer keuzevrijheid tegenover. Vue.js biedt wat dat betreft een tussenweg. Er zijn standaard bibliotheken voor routing en state management, maar het is niet verplicht ze te gebruiken. Lees verder Vue.js – het nieuwe JavaScript-framework

Handboek WordPress 5: De visuele editor gebruiken – 2

Handboek WordPress 5Deze maand besteden we extra aandacht aan WordPress én het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress. We beginnen de voorproefjes met de beschrijving van de nieuwe visuele editor Gutenberg, de opvolger van de ‘klassieke’ editor. Dit is deel 2 van het gebruik van de visuele editor: Afbeeldingen toevoegen. Deel 1 vind je HIER. (H.F.)

Afbeeldingen toevoegen

Er zijn meerdere mogelijkheden om een afbeelding toe te voegen aan een bericht. We zagen al even de mogelijkheid om een beeld inline toe te voegen aan een tekstblok. Die optie biedt weinig mogelijkheden om de positie van het beeld te bepalen en is daarom van beperkt nut. Veel beter is het om de afbeelding als blok toe te voegen. Er zijn drie opties: afbeelding, omslagafbeelding en galerij. We bespreken ze in de volgende paragrafen.

Bestandsformaten voor afbeeldingen

Voor beelden kunt u de bestandsformaten JPG, GIF en PNG gebruiken. Al deze bestandsformaten maken gebruik van compressie. Ze tasten de kwaliteit dus enigszins aan, maar daardoor zijn de bestanden wel veel kleiner en verschijnen ze sneller op het scherm. Ieder bestandsformaat heeft voor- en nadelen. Lees verder Handboek WordPress 5: De visuele editor gebruiken – 2

Handboek WordPress 5: De visuele editor Gutenberg gebruiken

Handboek WordPress 5Deze maand besteden we extra aandacht aan WordPress én het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress. We beginnen de voorproefjes met de beschrijving van de nieuwe visuele editor Gutenberg, de opvolger van de ‘klassieke’ editor. (H.F.)

De visuele editor gebruiken

Bij het schrijven van het bericht gebruikt u de visuele editor Gutenberg. Dit is de opvolger van de ‘klassieke editor‘ die werd gebruikt in vorige versies van WordPress. Het werken met Gutenberg is even wennen, maar de logica erachter wordt snel duidelijk.

TIP • Heimwee naar de klassieke editor? Wie niet kan zonder de klassieke editor van WordPress, heeft de mogelijkheid om die (voorlopig) te blijven gebruiken. De editor is beschikbaar als plug-in. In hoofdstuk 8 gaan we aan de slag met plug-ins. Daar bespreken we ook de plug-in ‘Klassieke editor’. In dit hoofdstuk gebruiken we de nieuwe Gutenberg-editor, die in komende edities van een steeds belangrijker rol gaat spelen.

Een blok toevoegen

Centraal in Gutenberg staan blokken. Zie het als bouwblokken waarmee u een bericht opbouwt. Een bouwblok kan iets simpels zijn als een paragraaf, maar ook een foto met tekst erin of een YouTube-video. Het gaat als volgt: Lees verder Handboek WordPress 5: De visuele editor Gutenberg gebruiken

De maand van…

De maand van WordPress 5

Handboek WordPress 5WordPress ontwikkelt zich in rap tempo. De vorige editie van het Handboek WordPress verscheen in 2016 toen WordPress 4.4 actueel was. Er is veel veranderd. Zeker het laatste jaar dankzij de introductie van Gutenberg, de nieuwe editor van WordPress. Maar er zijn ook tal van andere, minder zichtbare verbeteringen doorgevoerd waardoor het werken met WordPress makkelijker en veiliger is geworden. Hoog tijd dus voor een update van dit handboek: Handboek WordPress 5.
Deze maand besteden we daarom extra aandacht aan het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress.

Identificeer gebruikte webtechnologieën met Wappalyzer

In mijn vorige column over frameworks werd gesproken over de populaire JavaScript-frameworks React, Angular en VueJS. Hierin werd ook gezegd dat het voor de eindgebruiker eigenlijk niet uitmaakt welk framework wordt gebruikt. Als de website maar gebruikersvriendelijk en duidelijk is. Maar voor ons als developers kan het wel degelijk interessant zijn. Soms willen we gewoon graag eens bekijken hoe een bepaalde pagina werkt, welke lettertypen op een pagina zijn gebruikt, of er misschien een CMS is ingezet (en zo ja, welke?) en of gebruik wordt gemaakt van cloudopslag. Toegegeven, dat zijn allemaal nerdy zaken, maar als webontwikkeling je werk of je hobby is, is het toch interessant om te weten. Maar hoe kom je daar als developer nu eenvoudig achter? Met Wappalyzer!

Bron weergeven

Van oudsher hebben alle browsers de optie om de broncode van een pagina te tonen. Dit werkt via het menu, de sneltoets F12, of via de rechtermuisknop en de optie Bron Weergeven, Show Source of vergelijkbaar. Echter, moderne frameworks en CMS’en proberen de code te comprimeren en optimaliseren, zodat de website zo min mogelijk bandbreedte verbruikt en zo snel mogelijk te laden is. Zelfs een minimalistische pagina als Google.nl gebruikt deze techniek en is op deze wijze zo goed als onleesbaar (en in ieder geval onbruikbaar) voor de ontwikkelaar. Lees verder Identificeer gebruikte webtechnologieën met Wappalyzer

Front-end frameworks: keuze te over

Jarenlang bestond het vak van webdesigner uit het kunstig aan elkaar knopen van HTML- en CSS-pagina’s. Het was voldoende om de basiscommando’s te kennen en over enige designvaardigheden te beschikken. Voor animaties en al-dan-niet gehate ‘splash-pages’ was Adobe Flash de aangewezen tool. Als er lastig JavaScript geprogrammeerd moest worden, waren de bibliotheek jQuery en typische developersfora als stackoverflow.com meestal voldoende om de schijn op te houden dat u wist waar u mee bezig was. Tenminste, tot een jaar of vijf geleden… Nu heb je de keuze uit verschillende front-end frameworks: React, Angular en VueJS.

Front-end frameworks

Na het verschijnen van jQuery zat de populariteit van JavaScript duidelijk in de lift, terwijl de ooit populaire plug-ins Adobe Flash (en in het verlengde daarvan ook Microsoft Silverlight) een stille dood stierven doordat Steve Jobs ze eigenhandig van de iPad wist te weren. Alle inhoud van websites moest sinds ongeveer medio 2010 worden vormgegeven met de standaardtechnieken HTML, CSS en JavaScript. De rol van het programmeren van Flash- en Silverlight-applicaties werd overgenomen door JavaScript. Lees verder Front-end frameworks: keuze te over

Microsoft Edge schakelt over naar de Chrome-engine en dat is een slecht teken…

We schrijven 1995. Microsoft viert grote triomfen met het zojuist gelanceerde Windows 95 dat samen met de succesvolle opvolgers als Windows XP en Windows 7 decennialang de bureaucomputer zal domineren. De opmars van het mobiele platform is de afgelopen jaren weliswaar onstuitbaar geweest, maar desktopcomputers zijn zakelijk en creatief gezien nog steeds een factor van belang. Ze vormen een niet te verwaarlozen marktaandeel. Volgens een recent rapport zat de verkoop van desktops, die nog steeds grotendeels voorzien zijn van het Windows-besturingssysteem, in 2018 voor het eerst sinds jaren weer in de lift (1). Toch pakten in 1995 donkere wolken zich samen aan de horizon. Microsoft dreigde namelijk de internetboot te missen.

Gesloten netwerken

Met de kennis van nu lijkt het een eenvoudig gegeven, maar in 1995 was het nog geen uitgemaakte zaak dat het open internet het ging maken. Er waren tal van consumentennetwerken actief, waarvan CompuServe en AOL de bekendste waren. Op deze netwerken konden gebruikers alleen gebruik maken van diensten die op dat platform werden aangeboden en communiceren met andere aanwezigen binnen hetzelfde netwerk. Een mailtje sturen van een CompuServe-gebruiker naar een AOL-abonnee zat er dus niet in. Microsoft, liefhebber van gesloten platformen, zag wel brood in dit model. Het ontwikkelde een eigen variant, het Microsoft Network of kortweg MSN. Dit zou de concurrentie wel wegvagen was het idee. Lees verder Microsoft Edge schakelt over naar de Chrome-engine en dat is een slecht teken…

Een goede supportafdeling is onmisbaar

De provider in Amerika waar we onze sites en blogs hosten, stuurde een mailtje dat de server waar dat alles op staat nieuwe hardware en software ging krijgen. Zorg voor een goede back-up, want je weet nooit wat er kan gebeuren! Een update naar nieuwe snellere, veiligere hard- en software? Heerlijk! Nou, eh… na de migratie deed niets het meer. De email niet en de blog waren onbereikbaar. Dankzij een goede supportafdeling was het gelukkig snel opgelost.

Opruimen!

Eind 2003 maakte ik een website voor mijn vrouw, die illustrator is. Een vriend raadde me aan om die in Amerika onder te brengen bij Lunarpages. In de loop van de tijd kwamen er blogs bij en zette ik er wat fotoverzamelingen op, om die via het web aan klanten/vrienden/familie te kunnen laten zien. In die 15 jaar werd de map op de server van Lunarpages waar dat alles stond een beetje een zooitje. Ik was dan ook niet echt verbaasd toen ik een volgend mailtje kreeg met het verzoek dat ik, voorafgaand aan de servermigratie, de boel in die map een beetje wilde opruimen. Subject: domain – Excessive / Unrelated content found on your account [Action Required]. Lees verder Een goede supportafdeling is onmisbaar

Angular is koning

Elk tijdperk krijgt het framework dat het verdient

AngularAls je – zoals ik – al wat langer meeloopt in de wereld van frontenddevelopment, heb je allerlei trends voorbij zien komen. De complexiteit van systemen is enorm toegenomen. Tien jaar geleden waren bedrijven en organisaties tevreden met een site die hun zichtbaarheid op internet garandeerde. De huidige trend: Angular.

jQuery was koning, de websitemakers zijn onderdanen. Een website bestond uit tal van losse pagina’s, gekoppeld via een hoofdmenu met handige opties als Start, Contact, Over ons en Producten. Op een pagina kon de bezoeker het aanbod sorteren, filteren en had de webmaster (zo heette die rol destijds) wellicht wat animaties van de getoonde producten gerealiseerd. Bestellen? Geen probleem. Gebruik de koppeling naar het contactformulier, dat vervolgens – handmatig! – door de afdeling inkoop werd verwerkt. Lees verder Angular is koning