Valid AMP: Instagram Foto's / Valid AMP: Instagram Photos

Webtechnieken

Portfolio Webtech 1

Valid AMP
Instagram Foto's

Zie verder »

WebP Afbeeldingen / WebP Images

Webtechnieken

Portfolio Webtech 2

WebP
Afbeeldingen

Zie verder »

Valid AMP: Twitter Foto's / Valid AMP: Twitter Photos

Webtechnieken

Portfolio Webtech 3

Valid AMP
Twitter Foto's

Zie verder »


Portfolio webtechnieken: voorbeelden en toepassingen


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


HTML & CSS Tweets

Hypertext Markup Language and Cascading Stylesheets

@jvmeeteren: #HTML5 | AutomaticNumbering HTML5Tags using CSS3

@jvmeeteren: #HTML5 #CSS3 | Figcaption with AutomaticNumbering

@jvmeeteren: #HTML5 #CSS3 | ResponsiveDesign versus NonResponsiveDesign with FontSizes

@jvmeeteren: #HTML5 #CSS3 | HTMLMarkup versus CSSStyling

@jvmeeteren: #HTML5 #CSS3 | Is CSS a pure styling language? NO

@jvmeeteren: #HTML5 #CSS3 | Is HTML a pure markup language? NO


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: 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 AMP Tweets

Afbeeldingen in AMP HTML

- Responsive Image in AMP | @jvmeeteren: 'Tweet' (December 7, 2016)

- Responsive Instagram Image in AMP | @jvmeeteren: 'Tweet' (December 10, 2016)

- Responsive Tweets in AMP | @jvmeeteren: 'Tweet' (December 13, 2016)

- Responsive Images in AMP-Carousel | @jvmeeteren: 'Tweet' (December 16, 2016)

- Responsive Images in AMP-Carousel Autoplay | @jvmeeteren: 'Tweet' (December 19, 2016)

- Media Query Selection in AMP | @jvmeeteren: 'Tweet' (December 22, 2016)

- Responsive iFrame with Google Maps in AMP | @jvmeeteren: 'Tweet' (December 25, 2016)

- Responsive Video in AMP | @jvmeeteren: 'Tweet' (December 28, 2016)

- Responsive Youtube Videos in AMP | @jvmeeteren: 'Tweet' (December 31, 2016)

- Responsive Better Portable Graphics (BPG) Image in AMP | @jvmeeteren: 'Tweet' (January 6, 2017)

- Responsive Animated Images in AMP | @jvmeeteren: 'Tweet' (January 9, 2017)

- Responsive Images with Lightbox in AMP | @jvmeeteren: 'Tweet' (January 12, 2017)

- Responsive JPEG Images used in element 'amp-accordian' | @jvmeeteren: 'Tweet' (January 15, 2017)

- Responsive JPEG Images used in element 'amp-sidebar' | @jvmeeteren: 'Tweet' (January 18, 2017)

- AMP Stories: Responsive Images (Mushrooms) used in element 'amp-story' | @jvmeeteren: 'Tweet' (February 15, 2018)

- AMP Email: Responsive Images (Mushrooms) used with element 'html amp4email' | @jvmeeteren: 'Tweet' (February 21, 2018)

- AMP Lite: Responsive Images used in Element 'amp-img' and with Attribute 'srcset' | @jvmeeteren: 'Tweet' (February 27, 2018)


HTML5 Valid AMP

Gevalideerde Pagina's in AMP HTML

- Responsive Image in AMP | in Valid AMP HTML

- Responsive Instagram Image in AMP | in Valid AMP HTML

- Responsive Tweets 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 Better Portable Graphics (BPG) Image in AMP (Sorry, this page is not 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

- Instagram Photos | in Valid AMP HTML ||

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

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

- AMP Tweets | in Valid AMP HTML

- Base64 Tweets | in Valid AMP HTML

- BPG Tweets | in Valid AMP HTML

- FLIF Tweets | in Valid AMP HTML

- JPEG 2000 Tweets | in Valid AMP HTML

- WebP Tweets | in Valid AMP HTML

- Canvas Tweets | in Valid AMP HTML

- Cropping Methods Tweets | in Valid AMP HTML

- CSS3 clip-path property Tweets | in Valid AMP HTML

- CSS3 filter Property Tweets | in Valid AMP HTML

- CSS3 transform Property Tweets | in Valid AMP HTML

- Tweets on Progressive Web Apps | in Valid AMP HTML

- SVG Tweets | in Valid AMP HTML

- World Photography Day Tweets | in Valid AMP HTML

- Photo Tweets | 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 Tweets

Responsive Afbeeldingen in HTML5 Boilerplate

- Responsive Image in Boilerplate | (to be published on Twitter)

- Responsive Image in Boilerplate and Bootstrap | (to be published on Twitter)

- Responsive Image in Boilerplate and Canvas | (to be published on Twitter)

- Responsive Image in Boilerplate, Bootstrap and Canvas | (to be published on Twitter)


GRAFISCHE TOEPASSINGEN in HTML met Base64 en Canvas - SVG


HTML5 BPG

BPG Afbeeldingen in HTML5

- BPG

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


HTML5 BPG Tweets

BPG Afbeeldingen in HTML5

- Responsive Better Portable Graphics (BPG) in Canvas | @jvmeeteren: 'Tweet' (January 27, 2017)

- Responsive Better Portable Graphics (BPG) in Canvas | @jvmeeteren: 'Tweet' (August 13, 2017)


HTML5 FLIF

FLIF Afbeeldingen in HTML5

- FLIF ||


HTML5 FLIF Tweets

FLIF Afbeeldingen in HTML5

- Responsive Free Lossless Image Format (FLIF) in Canvas | @jvmeeteren: 'Tweet' (August 13, 2017)


HTML5 JPEG 2000

JPEG 2000 Afbeeldingen in HTML5

- JPEG 2000


HTML5 JPEG 2000 Tweets

JPEG 2000 Afbeeldingen in HTML5

- Responsive JPEG 2000 Image | @jvmeeteren: 'Tweet' (August 13, 2017)


HTML5 WebP

WebP Afbeeldingen in HTML5

- WebP ||


HTML5 WebP Tweets

WebP Afbeeldingen in HTML5

- Responsive WebP Image | @jvmeeteren: 'Tweet' (January 30, 2017)

- Responsive WebP Image in Base64 | @jvmeeteren: 'Tweet' (February 6, 2017) (only works in Chrome so far)

- Responsive WebP Image in AMP | @jvmeeteren: 'Tweet' (February 8, 2017) (only works in Chrome so far)

- Responsive WebP Image | @jvmeeteren: 'Tweet' (August 13, 2017)


HTML5 Base64

- Base64 Images


HTML5 Base64 Tweets

Base64 Afbeeldingen in HTML5

- Compressed Responsive Image in Base64 | @jvmeeteren: 'Tweet' (January 24, 2017)


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 Tweets

Afbeeldingen in HTML5 Canvas

- Canvas: Image and Text | Tweet: @jvmeeteren: 'Image and Text in #HTML5 #Canvas' (November 10, 2016)

- Canvas: Cropped Image | Tweet: @jvmeeteren: '#CroppedImage and Text in #HTML5 #Canvas' (November 13, 2016)

- Canvas: Focussing | Tweet: @jvmeeteren: 'Focussing on Parts of Image and Text in #HTML5 #Canvas' (November 16, 2016)

- Canvas: Black and White | Tweet: @jvmeeteren: 'Black and White Filtered Image in #HTML5 #Canvas' (November 19, 2016)

- Canvas: Green Filtered | Tweet: @jvmeeteren: 'Green Filtered Image in #HTML5 #Canvas' (November 22, 2016)

- Canvas: Mirrored | Tweet: @jvmeeteren: '#MirroredImage in #HTML5 #Canvas' (November 25, 2016)

- Canvas: Rotated | Tweet: @jvmeeteren: 'Rotated Image in #HTML5 #Canvas' (November 28, 2016)

- Canvas: Sepia Filtered | Tweet: @jvmeeteren: 'Sepia Filtered Image in #HTML5 #Canvas' (December 1, 2016)

- Canvas: Horizontally Mirrored | (to be published on Twitter) (under construction)

- Canvas: Inverted Colors | (to be published on Twitter)

- Canvas: Red Filtered | (to be published on Twitter)

- Canvas: Blue Filtered | (to be published on Twitter)

- Canvas: Brightness | (to be published on Twitter)


SVG

SVG Afbeeldingen in HTML5

- SVG in HTML


SVG Tweets

SVG Afbeeldingen in HTML5

- Responsive SVG Image obtained from JPEG by using Online Converter | @jvmeeteren: 'Tweet' (February 17, 2017)

- Responsive SVG Image obtained from JPEG by using Inkscape | @jvmeeteren: 'Tweet' (February 20, 2017)

- Responsive SVG Image with Inline Styling | @jvmeeteren: 'Tweet' (February 23, 2017)

- Responsive SVG Image with Blur Effect Styled Inline | @jvmeeteren: 'Tweet' (February 26, 2017)


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-implementeerd door JSON

- JSON JPEG images

- JSON PNG images

- JSON SVG images

- JSON MySQL data

- JSON BPG images (under construction)


JSON Tweets

Foto's ge-implementeerd door JSON

- Responsive JPEG Image Implemented by JSON | (to be published on Twitter)

- Responsive Base64 JPEG Image Implemented by JSON | (to be published on Twitter)

- Responsive PNG Image Implemented by JSON | (to be published on Twitter)

- Responsive Base64 PNG Image Implemented by JSON | (to be published on Twitter)

- SVG Responsive Image Implemented by JSON | (to be published on Twitter)

- Base64 SVG Responsive Image Implemented by JSON | (to be published on Twitter)

- Responsive JPEG Image Implemented by MySQL and JSON | (to be published on Twitter)

- Responsive Base64 JPEG Image Implemented by MySQL and JSON | (to be published on Twitter)

- Responsive BPG Image Implemented by JSON and Canvas | (to be published on Twitter)

- Responsive WebP Image Implemented by JSON | (to be published on Twitter)


GRAFISCHE TOEPASSINGEN met CSS


CSS3 filter Property Tweets

Afbeeldingen met CSS3 Filters in HTML5

- Responsive CSS3 Filter Property Images ('blur') | @jvmeeteren: 'Tweet' (March 1, 2017)

- Responsive CSS3 Filter Property Images ('brightness') | @jvmeeteren: 'Tweet' (March 4, 2017)

- Responsive CSS3 Filter Property Images ('contrast') | @jvmeeteren: 'Tweet' (March 7, 2017)

- Responsive CSS3 Filter Property Images ('drop-shadow') | @jvmeeteren: 'Tweet' (March 13, 2017)

- Responsive CSS3 Filter Property Images ('grayscale') | @jvmeeteren: 'Tweet' (March 19, 2017)

- Responsive CSS3 Filter Property Images ('hue-rotate') | @jvmeeteren: 'Tweet' (March 28, 2017)

- Responsive CSS3 Filter Property Images ('invert') | @jvmeeteren: 'Tweet' (March 31, 2017)

- Responsive CSS3 Filter Property Images ('opacity') | @jvmeeteren: 'Tweet' (April 9, 2017)

- Responsive CSS3 Filter Property Images ('saturate') | @jvmeeteren: 'Tweet' (April 18, 2017)

- Responsive CSS3 Filter Property Images ('sepia') | @jvmeeteren: 'Tweet' (April 27, 2017)


CSS3 transform Property Tweets

Afbeeldingen met CSS3 Transform in HTML5

- Responsive CSS3 Transform Property Image ('scaleX') | @jvmeeteren: 'Tweet' (May 6, 2017)

- Responsive CSS3 Transform Property Image ('scaleY') | @jvmeeteren: 'Tweet' (May 15, 2017)

- Responsive CSS3 Transform Property Image ('rotate') | @jvmeeteren: 'Tweet' (May 24, 2017)

- Responsive CSS3 Transform Property Image ('skewX') | @jvmeeteren: 'Tweet' (June 2, 2017)

- Responsive CSS3 Transform Property Image ('skewY') | @jvmeeteren: 'Tweet' (June 11, 2017)

- Responsive CSS3 3D Transform Property Image ('rotateX') | @jvmeeteren: 'Tweet' (June 20, 2017)

- Responsive CSS3 3D Transform Property Image ('rotateY') | @jvmeeteren: 'Tweet' (June 29, 2017)

- Responsive CSS3 3D Transform Property Image ('rotateZ') | @jvmeeteren: 'Tweet' (July 8, 2017)


Cropping Methods Tweets

Uitgesneden Afbeeldingen

- Responsive Cropped JPEG Image by using CSS3 Margin | @jvmeeteren: 'Tweet' (July 17, 2017)

- Responsive Cropped JPEG Image by using HTML5 Canvas | @jvmeeteren: 'Tweet' (July 26, 2017)

- Responsive Cropped JPEG Image by using CSS3 Transform Translate | @jvmeeteren: 'Tweet' (August 4, 2017)


CSS3 clip-path Tweets

Uitgesneden Afbeeldingen

- Responsive Cropped JPEG Image by using CSS3 Clip-path: circle | @jvmeeteren: 'Tweet' (December 17, 2017)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (triangle) | @jvmeeteren: 'Tweet' (December 20, 2017)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (rhombus) | @jvmeeteren: 'Tweet' (December 23, 2017)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (heptagon) | @jvmeeteren: 'Tweet' (January 4, 2018)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (hexagon) | @jvmeeteren: 'Tweet' (January 10, 2018)

- Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (octagon) | @jvmeeteren: 'Tweet' (January 19, 2018)


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



XHTML5 = HTML5 + XML

Webtechnieken

Portfolio Webtech 4

XHTML5
= HTML5 + XML

Zie verder »

FLIF Afbeeldingen / FLIF Images

Webtechnieken

Portfolio Webtech 5

FLIF
Afbeeldingen

Zie verder »

HTML6: opvolger van HTML5? / HTML6: successor of HTML5?

Webtechnieken

Portfolio Webtech 6

HTML6
opvolger van HTML5?

Zie verder »