JOOST | Voorbeelden Webdesign + Webtech

JOOST De WebsiteMaker + De BeeldMaker + De TekstMaker = De Creatieve Maker

IK DRAAG GRAAG MIJN DIGITALE STEENTJE BIJ AAN JOUW WEBSITE !

VOORBEELDEN WEBDESIGN + WEBTECH : … … …

Mijn voorbeelden van webdesign en webtechnieken

In 2015-2016 gerestylde webcode | ‘FRANS.BEURSKENS.WORKS’ Projecten ||
HTML5 & CSS3

  1. Heemkunde Renkum Mensen
  2. Wijkboekhouding Portfolio Masonry 4 with header photo
  3. Adapted Modal Popups Full Screen
  4. 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

  1. HTML5 CSS3 – Invisearch Bedrijfsrecherche (2013)
  2. HTML5 CSS3 – HTML5 / HTML IN A CIRCLE
  3. HTML5 CSS3 – parallelogram design in css3 format
  4. HTML5 CSS3 – Square rotated in red
  5. HTML5 CSS3 – TRIANGLE IN A CIRCLE
  6. 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

  1. Images rendered in Base64
  2. WebM Video and (animated) Images
  3. WebP Images
  4. 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

  1. Better Portable Graphics (BPG)
  2. Free Lossless Image Format (FLIF)
  3. JPEG 2000
  4. 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

  1. Black and White Images rendered in Canvas
  2. Cropped Images rendered in Canvas
  3. Rotated Images rendered in Canvas
  4. Mirrored Images rendered in Canvas
  5. Horizontally Mirrored Images rendered in Canvas
  6. Filtered Images rendered in Canvas
  7. Focussing Images rendered in Canvas
  8. Text on Images rendered in Canvas
  9. 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

  1. XHTML1.0 Transitional – Studiebegeleiding Ede (2006)
  2. XHTML1.0 Strict – Tempeladvies (2007)

XHTML ||
XHTML5 & CSS3

  1. XHTML5 – 1. Focus stacking using CSS3 ‘opacity’
  2. XHTML5 – 2. Focus stacking using CSS3 ‘opacity’
  3. XHTML5 – CSS3 Image Overlay – ‘Multiple Exposure Effects’

Boilerplate ||
Boilerplates in HTML5 / XHTML5

  1. Boilerplate templates
  2. Bootstrap boilerplate
  3. HTML5 boilerplate
  4. XHTML5 boilerplate
  5. 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

  1. HTML5 SVG WebPage / Use of SVG elements in HTML
  2. XML SVG WebPage / Use of SVG 1.1 elements in XML

XML ||
Ontworpen in XML versie 1.0 & CSS3

  1. XML version 1.0 || CSS3 – Basic Design
  2. XML version 1.0 with(out) XLink … CSS3 – Basic Design

Bootstrap ||
Responsive Webdesign gebaseerd op BS

  1. Bootstrap – Artriskèl (2015)
  2. Bootstrap – Tempeladvies (2017)
  3. Bootstrap – Studiebegeleiding Ede (2018)
  4. Bootstrap | a Portfolio linked to 4 Modal examples

Bootstrap ||
Responsive Webdesign gebaseerd op BS met foto’s

  1. PORTFOLIO Glass Art (1)
  2. PORTFOLIO Glass Art (2)

Joomla ||
Webdesign gebaseerd op Joomla

  1. XHTML 1.0 Transitional (Joomla) – Tempeladvies (2011)

WordPress ||
Responsive Webdesign gebaseerd op WordPress

  1. WordPress – Begraafplaats Fangmanweg (2017)
  2. WordPress – Tempeladvies (2017)

Accelerated Mobile Pages (AMP) ||
Gevalideerde pagina’s in AMP HTML

  1. Responsive Image in AMP | … in Valid AMP HTML
  2. Instagram Photos | … in Valid AMP HTML
  3. AMP WebPage with PWA Configuration | … in Valid AMP HTML

Progressive Web App (PWA) ||
Afbeeldingen geladen in een PWA

  1. Portfolio Fotografie in HTML5
  2. Portfolio Fotografie in JSON en HTML5
  3. ‘Dromen in een Mindmap’
  4. Digitale kerstkaart

‘Lazy Loading’ ||
Uitgesteld laden van afbeeldingen

  1. Afbeeldingen met ‘Lazy Loading’
  2. Afbeeldingen met ‘Lazy Loading’ in PWA

JavaScript Object Notation (JSON) ||
Foto’s geïmplementeerd door JSON

  1. JSON JPEG images
  2. JSON PNG images
  3. JSON SVG images
  4. JSON MySQL data

‘Comma-separated values’ (CSV) en ‘Tab-separated values’ (TSV) ||
Data geïmplementeerd door CSV en TSV

  1. CSV-tekstbestand geladen in HTML met PHP
  2. TSV-tekstbestand geladen in HTML met PHP

Application Modeling Language (AppML) ||
Data geïmplementeerd door AppML

  1. Markup Languages shown with AppML | … JSON client-side file
  2. Markup Languages shown with AppML | … PHP server-side file

Validering ||
van HTML en aanverwante talen

  1. HTML5 Valid | Nu Html Checker
  2. HTML5 Valid | Validator.nu
  3. W3C CSS Validator
  4. Achtergrondinfo: VALIDERING van webpagina’s
  5. Achtergrondinfo: VALIDATORS van webpagina’s

HTML Content ||
Versleutelde tekst / Beveiligde tekst

  1. Achtergrondinfo: Secure HTML Content

HTML5 ||
‘HyperText Markup Language 5’

  1. HTML5 vergeleken met Natuurlijke Talen
  2. Invoeg-Elementen in HTML5
  3. Weglatings- en Fout-tolerantie in HTML5
  4. Lege Elementen in HTML5

XHTML5 ||
HTML5 + XML = XHTML5

  1. XHTML5 = HTML5 in XML Serialisatie-Modus

HTML6 ||
Opvolger van HTML5 ?

  1. HTML6
  2. Opmerkingen: Voorbeelden met voorgestelde vormen van HTML6-broncode

CSS3 filter Property Examples ||
Afbeeldingen met CSS3 Filters in HTML5

  1. Responsive CSS3 Filter Property Images (‘blur’)
  2. Responsive CSS3 Filter Property Images (‘brightness’)
  3. Responsive CSS3 Filter Property Images (‘contrast’)
  4. Responsive CSS3 Filter Property Images (‘drop-shadow’)
  5. Responsive CSS3 Filter Property Images (‘grayscale’)
  6. Responsive CSS3 Filter Property Images (‘hue-rotate’)
  7. Responsive CSS3 Filter Property Images (‘invert’)
  8. Responsive CSS3 Filter Property Images (‘opacity’)
  9. Responsive CSS3 Filter Property Images (‘saturate’)
  10. Responsive CSS3 Filter Property Images (‘sepia’)

CSS3 transform Property Examples ||
Afbeeldingen met CSS3 Transform in HTML5

  1. Responsive CSS3 Transform Property Image (‘scaleX’)
  2. Responsive CSS3 Transform Property Image (‘scaleY’)
  3. Responsive CSS3 Transform Property Image (‘rotate’)
  4. Responsive CSS3 Transform Property Image (‘skewX’)
  5. Responsive CSS3 Transform Property Image (‘skewY’)
  6. Responsive CSS3 3D Transform Property Image (‘rotateX’)
  7. Responsive CSS3 3D Transform Property Image (‘rotateY’)
  8. Responsive CSS3 3D Transform Property Image (‘rotateZ’)

Cropping Methods Examples ||
Uitgesneden Afbeeldingen

  1. Responsive Cropped JPEG Image by using CSS3 Margin
  2. Responsive Cropped JPEG Image by using HTML5 Canvas
  3. Responsive Cropped JPEG Image by using CSS3 Transform Translate

CSS3 clip-path Examples ||
Uitgesneden Afbeeldingen

  1. Responsive Cropped JPEG Image by using CSS3 Clip-path: circle
  2. Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (triangle)
  3. Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (rhombus)
  4. Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (heptagon)
  5. Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (hexagon)
  6. Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (octagon)

Snellere Toegang ||
tot informatie op de website

  1. Achtergrondinfo: SEO
  2. Achtergrondinfo: Introductie tot Accessibility
  3. Achtergrondinfo: Introductie tot text-only-Browsers
Ondersteund door WordPress
Scroll-to-top button