Portfolio Webdesign en Webtechnieken

Inleiding. In al de jaren dat ik bezig ben met websites en fotografie heb ik uiteenlopende webtechnieken en opmaaktechnieken uitgeprobeerd en vervat in diverse opdrachten voor opdrachtgevers.
Ik ben bekend met alle versies van HTML, de taal die content weergeeft en structureert in webpagina's. Tevens ben ik goed thuis in de opmaaktaal voor webpagina's, CSS oftewel stylesheets.
Ik streef naar optimaal geschreven code voor webpagina's met als doel dat de pagina's in alle typen browsers snel, stabiel en identiek worden weergegeven. Een snelle laadtijd zorgt ervoor dat de bezoeker gemakkelijk toegang heeft tot je website en bovendien dat het de energiekosten op de webserver én jouw laptop drukt.
Mijn streven naar lagere energiekosten raakt ook aan mijn interesse voor alternatieve beeldformaten. Kleinere beeldbestanden zorgen voor meer ruimte op je hosting en ze laden sneller. Dat is vooral handig als je telefoon een zwakke(re) verbinding heeft.
Tevens heb ik grote belangstelling voor AMP en PWA, technieken binnen HTML met elk een eigen specifieke doelstelling, maar ook voor de laadtechniek 'Lazy Loading'.
De technieken JSON en CSV/TSV vind ik interessant om 'numerieke' data op een overzichtelijke manier in een webpagina toe te passen. JSON is heel geschikt om vanuit één centraal punt een grote reeks foto's gestructureerd aan te bieden. CSV/TSV vind ik zo interessant omdat je zonder gebruikmaking van een database online de data vanuit een simpel tekstbestand laadt. AppML is een vergelijkbare data-invoertechniek.
Validering van webpagina's is een wat vergeten kindje in de digitale wereld. Aangezien browsers van meet af aan extreem 'tolerant' jegens webpagina's zijn, wordt in principe elke website geladen. Er is echter een keerzijde. Als de broncode van een webpagina fouten of overbodige code bevat, zal de browser meer tijd kwijt zijn om de aangeboden code te verwerken. Een homepage die lang bezig is om te laden - ik zie dit geregeld - jaagt bezoekers weg en verhoogt de energiekosten. Correct geschreven code biedt echter een optimaal korte laadtijd met alle voordelen vandien.
Versleutelde content. Beveiliging van content is een hot item tegenwoordig. Voor een bedrijf is het belangrijk dat klantgegevens veilig achter slot en grendel bewaard worden. Dit roept de vraag op of het beveiligen - lees niet-kopieerbaar - van de content op je website wenselijk en/of mogelijk is. Ja en nee. Het versleutelen van de broncode is mogelijk maar ook zo weer op te heffen. Ook kun je tekst op het scherm niet-markeerbaar maken en daardoor niet direct kopieerbaar. Want via de broncode kun je de tekst alsnog kopiëren. Je kunt 't wel zien als een eerste rem.
Uitgangspunt van internet is echter dat informatie toegankelijk dient te zijn. Om die reden zou ik broncode nooit versleutelen als het al effectief mogelijk is. En in hoeverre vertraagt versleuteling het laden van de pagina zeker als de versleuteling alleen met een wachtwoord ongedaan kan worden gemaakt?
Er rest slechts één echte remedie tegen het jatten van je teksten: ze niet op internet plaatsen. Kortom, 'beveiligen van je webcontent is niet effectief en onwenselijk wat mij betreft. Zorg er wel voor dat je veilige en up-to-date codering gebruikt in je website en op je webhosting.
HTML5 is tot dusverre de laatste versie in een reeks. HTML5 is na HTML4 - en in combinatie met CSS3 - een ongekend grote stap voorwaarts. ...
XHTML5 is de XML-versie van HTML5. Deze versie heeft voordelen omdat ie bij de minst of geringste fout in de broncode een foutmelding geeft die ervoor zorgt dat de content niet meer getoond wordt. Voordeel is dat je pagina's maakt die technisch optimaal zijn en supersnel laden. Nadeel is dat deze versie voor leken onbruikbaar is. Kennis van HTML is hier onontbeerlijk.
Zouden browsers de strikte regels voor XHTML volgen, dan zou meer dan 90% - misschien wel 95% - van het internet niet (meer) functioneren. Het internet bevat zoveel 'troep' door slordig ontworpen editors of door slordig gedrag of ondeskundigheid van website-beheerders dat browsers noodgedwongen extreem tolerant jegens webcode zijn. Eigenlijk heel jammer want het internet zou door correct gebruikte code veel efficiënter werken.
Niettemin heb ik uiteindelijk voor HTML5 gekozen bij mijn website omdat de Developer Tool Lighthouse in Chrome XHTML5 niet meer toelaat bij het scannen op Performance, Accessibility, Best Practices en SEO. Anders had ik XHTML5 op mijn website gehandhaafd.
HTML6 is een speculatief thema. Komt er (ooit) een opvolger voor HTML5? Er is inmiddels het nodige over geschreven en gezegd.
CSS3 is de meest recente versie van Cascading Stylesheets, de opmaaktaal voor webpagina's. Waar de voorganger CSS2 nog heel 'statisch' was heeft CSS3 er dynamische eigenschappen bij gekregen. Zo kun je in CSS3 een object veranderen van kleur of positie (met 'Animations') of een rotatie ('transform: rotate(20deg)'), scheeftrekken ('transform: skew(20deg)') of vergroting ('transform: scale(20deg)') geven gecombineerd met dynamische eigenschappen om het object in 'beweging' te brengen.
De filters voor afbeeldingen die eerder alleen met HTML Canvas bewerkstelligd konden worden, zijn een prachtaanvulling in de opmaak.
Snelle(re) toegang. Je wilt natuurlijk dat je website in de breedste zin van het woord 'toegankelijk' is. Als je wilt dat mensen jouw website goed kunnen vinden, dan moet je SEO op orde zijn. Maar toegankelijkheid wordt ook gedragen door het gebruik van correcte code in de website zoals ik al eerder stelde. En helder gepresenteerde teksten zijn ook een garantie voor een goede toegang tot je website.

Samenvatting. Deze pagina is een weerslag van mijn opgedane kennis van en ruime ervaring met webdesign en webtechnieken. Ik word immers gedreven door nieuwsgierigheid en leergierigheid. Met die achtergrond ben ik in staat jou maatwerk voor een website te leveren en verder te kijken dan de aangeboden standaard van een webtaal of webplatform zoals WordPress.
Met bovenstaand verhaal motiveer ik ook mijn drive om technisch en qua opmaakopties de best mogelijke website voor jou te realiseren. In een gekozen WordPress-Thema streef ik ernaar om technische onvolkomenheden en overbodigheden te verwijderen alsook gewenste functionaliteiten en persoonlijke opmaak te integreren.

---

In 2015-2016 gerestylde webcode | 'FRANS.BEURSKENS.WORKS' Projecten ||

HTML5 & CSS3

- Heemkunde Renkum Mensen

- Wijkboekhouding Portfolio Masonry 4 with header photo

- Adapted Modal Popups Full Screen

In dit uitdagende project heb ik meerdere complexe opmaaksystemen tot één geheel samengevoegd. Hierboven staan een drietal voorbeelden uit een hele reeks.

---

HTML5 - Design uit 2013-2016 ||

HTML5 & CSS3 met of zonder Canvas

- HTML5 CSS3 - Invisearch Bedrijfsrecherche (2013)

- HTML5 CSS3 - HTML5 / HTML IN A CIRCLE

- HTML5 CSS3 - parallelogram design in css3 format

- HTML5 CSS3 - Square rotated in red

- HTML5 CSS3 - TRIANGLE IN A CIRCLE

Voorbeeld 1 is een ontwerp voor een eenmanszaak die niet meer actief is. De voorbeelden 2 t/m 5 waren experimenten met geometrische vormen. Alle voorbeelden zijn geschreven in dezelfde versie van HTML en opmaakcode.

---

HTML5 ||

Alternatieven voor JPEG

- Images rendered in Base64

- WebM Video and (animated) Images

- WebP Images

In deze drie voorbeelden heb ik geëxperimenteerd met alternatieve methodes voor het weergeven van grafische content.
Normaliter wordt een afbeelding als binair object ingevoegd in een webpagina maar het kan ook in ascii-code via het Base64-protocol. Dat is handig als je kleine afbeeldingen vanuit een database wilt laden.
WebP en WebM zijn de ideale vervangers van JPEG en MP4 omdat ze kleiner van omvang zijn waardoor de laadsnelheid van een pagina wordt verhoogd.

---

HTML5 ||

Overige Alternatieven voor JPEG

- Better Portable Graphics (BPG)

- Free Lossless Image Format (FLIF)

- JPEG 2000

Hierboven noem ik nog drie andere alternatieve beeldformats: BPG, FLIF en JPEG 2000.
Better Portable Graphics produceert net als WebP kleinere bestanden, maar dit format wordt nauwelijks gebruikt en vereist altijd ondersteuning van een Javascript in de webpagina voor een correcte weergave.
Dat geldt tot dusverre ook voor FLIF. FLIF is erg interessant want het bestand bestaat uit een reeks layers waarbij de onderste layer het grootste formaat van de foto en de bovenste layer het kleinste formaat van de foto weergeeft. Zo kun je volstaan met één bestand waaruit de geschikte layer wordt aangesproken afhankelijk van de beeldschermgrootte.

---

HTML5 ||

HTML Canvas in Bootstrap 3

- Black and White Images rendered in Canvas

- Cropped Images rendered in Canvas

- Rotated Images rendered in Canvas

- Mirrored Images rendered in Canvas

- Horizontally Mirrored Images rendered in Canvas

- Filtered Images rendered in Canvas

- Focussing Images rendered in Canvas

- Text on Images rendered in Canvas

HTML Canvas is een grafisch element in HTML5 dat ongekende mogelijkheden biedt voor het weergeven van complexe grafische content.
Met behulp van één basisfoto kun je aan de foto uiteenlopende opmaak toevoegen zoals kleurfilters en tekst. Maar je kunt ook een detail van de originele foto tonen zonder dat je gebruik hoeft te maken van een aparte uitsnede in een nieuwe JPEG.

---

XHTML ||

XHTML 1.0 & CSS2.1

- XHTML1.0 Transitional - Studiebegeleiding Ede (2006)

- XHTML1.0 Strict - Tempeladvies (2007)

---

XHTML ||

XHTML5 & CSS3

- XHTML5 - 1. Focus stacking using CSS3 'opacity'

- XHTML5 - 2. Focus stacking using CSS3 'opacity'

- XHTML5 - CSS3 Image Overlay - 'Multiple Exposure Effects'

---

Boilerplate ||

Boilerplates in HTML5 / XHTML5

- Boilerplate templates

- Bootstrap boilerplate

- HTML5 boilerplate

- XHTML5 boilerplate

HTML5 Boilerplate is een HTML-, CSS- en JavaScript-sjabloon voor het maken van HTML5-websites met compatibiliteit tussen browsers. ...

---

SVG ||

Ontworpen in HTML5 of XML / CSS3 en SVG

- HTML5 SVG WebPage / Use of SVG elements in HTML

- XML SVG WebPage / Use of SVG 1.1 elements in XML

---

XML ||

Ontworpen in XML versie 1.0 & CSS3

- XML version 1.0 || CSS3 - Basic Design

- XML version 1.0 with(out) XLink ... CSS3 - Basic Design

---

Bootstrap ||

Responsive Webdesign gebaseerd op BS

- Bootstrap - Artriskèl (2015)

- Bootstrap - Tempeladvies (2017)

- Bootstrap - Studiebegeleiding Ede (2018)

.

- Bootstrap | a Portfolio linked to 4 Modal examples

---

Bootstrap ||

Responsive Webdesign gebaseerd op BS met foto's

- PORTFOLIO Glass Art (1)

- PORTFOLIO Glass Art (2)

---

Joomla ||

Webdesign gebaseerd op Joomla

- XHTML 1.0 Transitional (Joomla) - Tempeladvies (2011)

---

WordPress ||

Responsive Webdesign gebaseerd op WordPress

- WordPress - Begraafplaats Fangmanweg (2017)

- WordPress - Tempeladvies (2017)

---

Accelerated Mobile Pages (AMP) ||

Gevalideerde pagina's in AMP HTML

- Responsive Image in AMP | ... in Valid AMP HTML

- Diverse voorbeelden in AMP HTML | ... in Valid AMP HTML

- AMP WebPage with PWA Configuration | ... in Valid AMP HTML

---

Progressive Web App (PWA) ||

Afbeeldingen geladen in een PWA

- Portfolio Fotografie in HTML5

- Portfolio Fotografie in JSON en HTML5

- 'Dromen in een Mindmap'

- Digitale kerstkaart

---

'Lazy Loading' ||

Uitgesteld laden van afbeeldingen

- Afbeeldingen met 'Lazy Loading'

- Afbeeldingen met 'Lazy Loading' in PWA

---

JavaScript Object Notation (JSON) ||

Foto's ge-implementeerd door JSON

- JSON JPEG images

- JSON PNG images

- JSON SVG images

- JSON MySQL data

---

'Comma-separated values' (CSV) en 'Tab-separated values' (TSV) ||

Data geïmplementeerd door CSV en TSV

- CSV-tekstbestand geladen in HTML met PHP

- TSV-tekstbestand geladen in HTML met PHP

---

Application Modeling Language (AppML) ||

Data geïmplementeerd door AppML

- Markup Languages shown with AppML | ... JSON client-side file

- Markup Languages shown with AppML | ... PHP server-side file

---

Validering ||

van HTML en aanverwante talen

- HTML5 Valid | Nu Html Checker

- HTML5 Valid | Validator.nu

- [ CSS ] ...

- ...

- Achtergrondinfo: VALIDERING van webpagina's

- Achtergrondinfo: VALIDATORS van webpagina's

---

HTML Content ||

Versleutelde tekst / Beveiligde tekst

- Achtergrondinfo: Secure HTML Content

---

HTML5 ||

'HyperText Markup Language 5'

- HTML5 vergeleken met Natuurlijke Talen

- Invoeg-Elementen in HTML5

- Weglatings- en Fout-tolerantie in HTML5

- Lege Elementen in HTML5

---

XHTML5 ||

HTML5 + XML = XHTML5

- XHTML5 = HTML5 in XML Serialisatie-Modus

---

HTML6 ||

Opvolger van HTML5 ?

- HTML6

- Opmerkingen: Voorbeelden met voorgestelde vormen van HTML6-broncode

---

CSS3 filter Property Examples ||

Afbeeldingen met CSS3 Filters in HTML5

- Responsive CSS3 Filter Property Images ('blur')

- Responsive CSS3 Filter Property Images ('brightness')

- Responsive CSS3 Filter Property Images ('contrast')

- Responsive CSS3 Filter Property Images ('drop-shadow')

- Responsive CSS3 Filter Property Images ('grayscale')

- Responsive CSS3 Filter Property Images ('hue-rotate')

- Responsive CSS3 Filter Property Images ('invert')

- Responsive CSS3 Filter Property Images ('opacity')

- Responsive CSS3 Filter Property Images ('saturate')

- Responsive CSS3 Filter Property Images ('sepia')

---

CSS3 transform Property Examples ||

Afbeeldingen met CSS3 Transform in HTML5

- Responsive CSS3 Transform Property Image ('scaleX')

- Responsive CSS3 Transform Property Image ('scaleY')

- Responsive CSS3 Transform Property Image ('rotate')

- Responsive CSS3 Transform Property Image ('skewX')

- Responsive CSS3 Transform Property Image ('skewY')

- Responsive CSS3 3D Transform Property Image ('rotateX')

- Responsive CSS3 3D Transform Property Image ('rotateY')

- Responsive CSS3 3D Transform Property Image ('rotateZ')

---

Cropping Methods Examples ||

Uitgesneden Afbeeldingen

- Responsive Cropped JPEG Image by using CSS3 Margin

- Responsive Cropped JPEG Image by using HTML5 Canvas

- Responsive Cropped JPEG Image by using CSS3 Transform Translate

---

CSS3 clip-path Examples ||

Uitgesneden Afbeeldingen

- Responsive Cropped JPEG Image by using CSS3 Clip-path: circle

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (triangle)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (rhombus)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (heptagon)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (hexagon)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (octagon)

---

Snellere Toegang ||

tot informatie op de website

- Achtergrondinfo: SEO

- Achtergrondinfo: Introductie tot Accessibility

- Achtergrondinfo: Introductie tot text-only-Browsers