PORTFOLIO

webtechnieken: voorbeelden en toepassingen door ...

JOOST De WebsiteMaker

INLEIDING tot dit overzicht:


In dit overzicht vind je een vijftal rubrieken:

  1. VOORBEELDEN in HTML - XHTML - XML - AMP
  2. TOEPASSINGEN in XML - HTML - AMP - PWA
  3. GRAFISCHE TOEPASSINGEN in HTML met Base64 en Canvas - SVG
  4. GRAFISCHE TOEPASSINGEN met CSS
  5. TOEPASSINGEN en SPECULATIES in en rond HTML en HTML6

Centraal in deze rubrieken staat de webpagina in al z'n mogelijkheden: de opeenvolgende versies van HTML en varianten ervan zoals AMP (Accelerated Mobile Pages van Google), opmaakopties in CSS en grafische beeldtechnieken met HTML5 Canvas, Base64, SVG en binair (JPEG - WebP).

Voor een leek zal het hier beschreven materiaal behoorlijk technisch zijn. Niettemin geeft het je een eerste indruk wat er zoal mogelijk is op het terrein van de webtechnieken.

VOORBEELDEN in HTML - XHTML - XML - AMP:


HTML Voorbeelden |

'Hypertext Markup Language'

- HTML 2.0

- HTML 3.2

- HTML 4.01 Transitional

- HTML 4.01 Strict

XHTML Voorbeelden |

'Extensible Hypertext Markup Language'

- XHTML 1.0 Transitional

- XHTML 1.0 Strict

- XHTML 1.1

XML Voorbeelden |

'Extensible Markup Language'

- XML 1.0 | Markup Languages database | with CSS stylesheet | client side

- XML 1.0 | Markup Languages database | with XSL and internal CSS stylesheet | client side

- XML 1.0 | Markup Languages database | with XSL and external CSS stylesheet | client side

- XML 1.0 in PHP | Markup Languages database | with CSS stylesheet | client side

- XML 1.0 in PHP | Markup Languages database | with CSS stylesheet and MySQL feed | server side

- XML 1.0 in PHP | Markup Languages database | with XSL and external CSS stylesheet | client side

TOEPASSINGEN in XML - HTML - AMP - PWA:


Toepassing XML |

'RSS feeds'

- Introductie tot RSS feeds

HTML5 Content |

'Lazy Loading'

- What is Lazy Loading?

- Google Chrome past lazy loading toe

- Lazy Loading Images – The Complete Guide

HTML5 Voorbeelden |

'Lazy Loading'

- Afbeeldingen met 'Lazy Loading'

- Afbeeldingen met 'Lazy Loading' in PWA

HTML5 (Validated) AMP |

'Gevalideerde pagina's met afbeeldingen in AMP HTML'

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

- Responsive Images in AMP-Carousel | ... in Valid AMP HTML

- Responsive Images in AMP-Carousel Autoplay | ... in Valid AMP HTML

- Media Query Selection in AMP | ... in Valid AMP HTML

- Responsive iFrame with Google Maps in AMP | ... in Valid AMP HTML

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

- Responsive Youtube Videos in AMP | ... in Valid AMP HTML

- Responsive Animated Images in AMP | ... in Valid AMP HTML

- Responsive Images with Lightbox in AMP | ... in Valid AMP HTML

- Responsive JPEG Images used in element 'amp-accordian' | ... in Valid AMP HTML

- Responsive JPEG Images used in element 'amp-sidebar' | ... in Valid AMP HTML

- AMP Stories: Responsive Images (Mushrooms) used in element 'amp-story'

- AMP Email: Responsive Images (Mushrooms) used with element 'html amp4email'

- AMP Lite: Responsive Images used in Element 'amp-img' and with Attribute 'srcset'

- CCW 'Je foto van de maand' Photos | ... in Valid AMP HTML

- CCW 'Fotoaustellung Wasser Fotoclub Mörfelden-Walldorf' Photo | ... in Valid AMP HTML

Progressive Web App |

'Info over PWA'

- Progressive Web Apps A new way to deliver amazing user experiences ...

- Progressive Web Apps: de toekomst van mobiele apps?

- Getting started with Progressive Web Apps

- Browser Edge draait binnenkort Progressive Web Apps

- Introduction to Progressive Web Apps: Service Worker and Web App Manifest

- Combine AMP with Progressive Web Apps

Progressive Web App |

'Afbeeldingen in Gevalideerde PWA'

- Responsive Images in PWA and HTML5

- Responsive Images in PWA and XHTML5

- Responsive Images in PWA and AMP HTML

Boilerplate |

'Boilerplates in HTML5 / XHTML5'

- Boilerplate templates

- Bootstrap boilerplate

- HTML5 boilerplate

- XHTML5 boilerplate

Boilerplate |

'Responsive afbeeldingen in HTML5 Boilerplate'

- Responsive Image in Boilerplate

- Responsive Image in Boilerplate and Bootstrap

- Responsive Image in Boilerplate and Canvas

- Responsive Image in Boilerplate, Bootstrap and Canvas

GRAFISCHE TOEPASSINGEN in HTML met Base64 en Canvas - SVG:


HTML5 BPG |

'BPG Afbeeldingen in HTML5'

- BPG-voorbeeld gemaakt uit JPEG en PNG

- Responsive Better Portable Graphics (BPG) in Canvas

- JP(E)G/PNG/GIF/BMP/BPG/SVG

HTML5 FLIF |

'FLIF Afbeeldingen in HTML5'

- FLIF

- Responsive Free Lossless Image Format (FLIF) in Canvas

HTML5 JPEG 2000 |

'JPEG 2000 Afbeeldingen in HTML5'

- JPEG 2000 voorbeeld (gemaakt uit een JPEG)

- Responsive JPEG 2000 Image

HTML5 WebP |

'WebP Afbeeldingen in HTML5'

- WebP voorbeeld (gemaakt uit een JPEG en PNG)

- Responsive WebP Image

- Responsive WebP Image in Base64

- Responsive WebP Image in AMP

HTML5 Base64 |

'Base64 afbeeldingen in HTML5'

- Base64 Images (Responsive in HTML5, Canvas, SVG)

- Compressed Responsive Image in Base64

HTML5 Canvas |

'Afbeeldingen in HTML5 Canvas'

- Canvas: Cropped Images

- Canvas: Black & White Images

- Canvas: Rotated Images

- Canvas: Mirrored Images

- Canvas: Horizontally Mirrored Images

- Canvas: Filtered Images

- Canvas: Focussing on Images

- Canvas: Text on Images

HTML5 Canvas |

'Afbeeldingen in HTML5 Canvas'

- Canvas: Image and Text

- Canvas: Cropped Image

- Canvas: Focussing

- Canvas: Black and White

- Canvas: Green Filtered

- Canvas: Mirrored

- Canvas: Rotated

- Canvas: Sepia Filtered

- Canvas: Horizontally Mirrored

- Canvas: Inverted Colors

- Canvas: Red Filtered

- Canvas: Blue Filtered

- Canvas: Brightness

SVG |

'SVG Afbeeldingen in HTML5'

- SVG in HTML

SVG |

'SVG Afbeeldingen in HTML5'

- Responsive SVG Image obtained from JPEG by using Online Converter

- Responsive SVG Image obtained from JPEG by using Inkscape

- Responsive SVG Image with Inline Styling

- Responsive SVG Image with Blur Effect Styled Inline

Google Foto's |

'Afbeeldingen verkregen uit Google Foto's in HTML5'

- PHOTOS - Retrieved from ... in Bootstrap

- PHOTOS - Retrieved from ... in Canvas and Bootstrap

JSON |

'Foto's geïmplementeerd door JSON'

- JSON JPEG images

- JSON PNG images

- JSON SVG images

- JSON MySQL data

- JSON BPG images (under construction)

JSON |

'Foto's geïmplementeerd door JSON'

- Responsive JPEG Image Implemented by JSON

- Responsive Base64 JPEG Image Implemented by JSON

- Responsive PNG Image Implemented by JSON

- Responsive Base64 PNG Image Implemented by JSON

- SVG Responsive Image Implemented by JSON

- Base64 SVG Responsive Image Implemented by JSON

- Responsive JPEG Image Implemented by MySQL and JSON

- Responsive Base64 JPEG Image Implemented by MySQL and JSON

- Responsive BPG Image Implemented by JSON and Canvas

- Responsive WebP Image Implemented by JSON

GRAFISCHE TOEPASSINGEN met CSS:


CSS3 filter Property |

'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 |

'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 |

'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 |

'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)

TOEPASSINGEN en SPECULATIES in en rond HTML en HTML6:


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 |

'(X)HTML, ...'

- Validering van webpagina's

- Validators van webpagina's

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 HTML5 ?'

- HTML6

- Opmerkingen: Voorbeelden met voorgestelde vormen van HTML6-broncode

HTML Content |

'Versleuteld / Beveiligd'

- Secure HTML Content

Snellere Toegang |

'tot Informatie'

- SEO

- Introductie tot Accessibility

- Introductie tot text-only-Browsers