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 »


SGML

'Standard Generalized Markup Language'

01: Introductie tot SGML

02: SGML bron voor (X)HTML & XML


HTML / XML / XHTML / WML / SVG

SGML bron voor HTML and XML

01: Introductie tot C-HTML

02: Introductie tot DHTML

03: Voorbeelden van DHTML

04: Introductie tot HTML

05: Introductie tot XHTML

06: Introductie tot HTML5

07: Introductie tot XHTML5

08: Introductie tot HTML6

09: Introductie tot MHTML

10: Introductie tot SHTML

11: Introductie tot WML

12: Introductie tot XML

13: Introductie tot SVG

14: Voorbeelden van SVG


HTML Voorbeelden

'Hypertext Markup Language'

01: HTML 2.0

02: HTML 3.2

03: HTML 4.01 Transitional

04: HTML 4.01 Strict


HTML & CSS Tweets

Hypertext Markup Language and Cascading Stylesheets

01: HTML5 | AutomaticNumbering HTML5Tags using CSS3

02: HTML5 CSS3 | Figcaption with AutomaticNumbering

03: HTML5 CSS3 | ResponsiveDesign versus NonResponsiveDesign with FontSizes

04: HTML5 CSS3 | HTMLMarkup versus CSSStyling

05: HTML5 CSS3 | Is CSS a pure styling language? NO

06: HTML5 CSS3 | Is HTML a pure markup language? NO


XHTML Voorbeelden

'Extensible Hypertext Markup Language'

01: XHTML 1.0 Transitional

02: XHTML 1.0 Strict

03: XHTML 1.1


XML Voorbeelden

'Extensible Markup Language'

01: XML 1.0 | Markup Languages database | with CSS stylesheet | client side

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

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

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

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

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


Toepassing XML

RSS feeds

01: Introductie tot RSS feeds


HTML5 Content

'Lazy Loading'

01: What is Lazy Loading?

02: Google Chrome past lazy loading toe

03: Lazy Loading Images – The Complete Guide


HTML5 Voorbeelden

'Lazy Loading'

01: Afbeeldingen met 'Lazy Loading'

02: Afbeeldingen met 'Lazy Loading' in PWA


HTML5 AMP

Accelerated Mobile Pages in HTML5

01: AMP examples

02: AMP Responsive images

03: AMP Fixed-size images

4a: AMP Responsive lightbox

4b: AMP Responsive images (with lightbox)

05: AMP Responsive Instagram images

06: AMP Media query selection

07: AMP Responsive iframes

08: AMP Responsive tweets

9a: AMP Responsive videos

9b: AMP Responsive Youtube videos

10: AMP Responsive Fit-text

11a: AMP Responsive images using amp-carousel

11b: AMP Responsive images using amp-carousel autoplay

12: AMP Audio resource

13: AMP Animated images

14: AMP amp-vimeo video (under construction)

15: AMP amp-vine video (under construction)

16: AMP amp-springboard-player video (under construction)

17: AMP amp-kaltura-player video (under construction)

18: AMP amp-brightcove video (under construction)


HTML5 AMP Tweets

Afbeeldingen in AMP HTML

01: Responsive Image in AMP | 'Tweet' (December 7, 2016)

02: Responsive Instagram Image in AMP | 'Tweet' (December 10, 2016)

03: Responsive Tweets in AMP | 'Tweet' (December 13, 2016)

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

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

06: Media Query Selection in AMP | 'Tweet' (December 22, 2016)

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

08: Responsive Video in AMP | 'Tweet' (December 28, 2016)

09: Responsive Youtube Videos in AMP | 'Tweet' (December 31, 2016)

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

11: Responsive Animated Images in AMP | 'Tweet' (January 9, 2017)

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

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

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

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

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

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


HTML5 Valid AMP

Gevalideerde Pagina's in AMP HTML

01: Responsive Image in AMP | in Valid AMP HTML

02: Responsive Instagram Image in AMP | in Valid AMP HTML

03: Responsive Tweets in AMP | in Valid AMP HTML

04: Responsive Images in AMP-Carousel | in Valid AMP HTML

05: Responsive Images in AMP-Carousel Autoplay | in Valid AMP HTML

06: Media Query Selection in AMP | in Valid AMP HTML

07: Responsive iFrame with Google Maps in AMP | in Valid AMP HTML

08: Responsive Video in AMP | in Valid AMP HTML

09: Responsive Youtube Videos in AMP | in Valid AMP HTML

10: Responsive Better Portable Graphics (BPG) Image in AMP (Sorry, this page is not valid AMP HTML)

11: Responsive Animated Images in AMP | in Valid AMP HTML

12: Responsive Images with Lightbox in AMP | in Valid AMP HTML

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

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

15: Instagram Photos | in Valid AMP HTML ||

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

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

18: AMP Tweets | in Valid AMP HTML

19: Base64 Tweets | in Valid AMP HTML

20: BPG Tweets | in Valid AMP HTML

21: FLIF Tweets | in Valid AMP HTML

22: JPEG 2000 Tweets | in Valid AMP HTML

23: WebP Tweets | in Valid AMP HTML

24: Canvas Tweets | in Valid AMP HTML

25: Cropping Methods Tweets | in Valid AMP HTML

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

27: CSS3 filter Property Tweets | in Valid AMP HTML

28: CSS3 transform Property Tweets | in Valid AMP HTML

29: Tweets on Progressive Web Apps | in Valid AMP HTML

30: SVG Tweets | in Valid AMP HTML

31: World Photography Day Tweets | in Valid AMP HTML

32: Photo Tweets | in Valid AMP HTML ||


Progressive Web App

Info over PWA

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

02: Progressive Web Apps: de toekomst van mobiele apps?

03: Getting started with Progressive Web Apps

04: Browser Edge draait binnenkort Progressive Web Apps

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

06: Combine AMP with Progressive Web Apps


Progressive Web App

Afbeeldingen in Gevalideerde PWA

01: Responsive Images in PWA and HTML5

02: Responsive Images in PWA and XHTML5

03: Responsive Images in PWA and AMP HTML


Boilerplate

Boilerplates in HTML5 / XHTML5

01: Boilerplate templates

02: Bootstrap boilerplate

03: HTML5 boilerplate

04: XHTML5 boilerplate


Boilerplate Tweets

Responsive Afbeeldingen in HTML5 Boilerplate

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

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

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

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


HTML5 BPG

BPG Afbeeldingen in HTML5

01: BPG

02: JP(E)G/PNG/GIF/BMP/BPG/SVG


HTML5 BPG Tweets

BPG Afbeeldingen in HTML5

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

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


HTML5 FLIF

FLIF Afbeeldingen in HTML5

01: FLIF ||


HTML5 FLIF Tweets

FLIF Afbeeldingen in HTML5

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


HTML5 JPEG 2000

JPEG 2000 Afbeeldingen in HTML5

01: JPEG 2000


HTML5 JPEG 2000 Tweets

JPEG 2000 Afbeeldingen in HTML5

01: Responsive JPEG 2000 Image | 'Tweet' (August 13, 2017)


HTML5 WebP

WebP Afbeeldingen in HTML5

01: WebP ||


HTML5 WebP Tweets

WebP Afbeeldingen in HTML5

01: Responsive WebP Image | 'Tweet' (January 30, 2017)

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

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

04: Responsive WebP Image | 'Tweet' (August 13, 2017)


HTML5 Base64

01: Base64 Images


HTML5 Base64 Tweets

Base64 Afbeeldingen in HTML5

01: Compressed Responsive Image in Base64 | 'Tweet' (January 24, 2017)


HTML5 Canvas

Afbeeldingen in HTML5 Canvas

01: Canvas: Cropped Images

02: Canvas: Black & White Images

03: Canvas: Rotated Images

04: Canvas: Mirrored Images

05: Canvas: Horizontally Mirrored Images

06: Canvas: Filtered Images

07: Canvas: Focussing on Images

08: Canvas: Text on Images


HTML5 Canvas Tweets

Afbeeldingen in HTML5 Canvas

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

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

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

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

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

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

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

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

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

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

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

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

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


SVG

SVG Afbeeldingen in HTML5

01: SVG in HTML


SVG Tweets

SVG Afbeeldingen in HTML5

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

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

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

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


Google Foto's

Afbeeldingen verkregen uit Google Foto's in HTML5

01: PHOTOS - Retrieved from ... in Bootstrap

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


JSON

Foto's ge-implementeerd door JSON

01: JSON JPEG images

02: JSON PNG images

03: JSON SVG images

04: JSON MySQL data

05: JSON BPG images (under construction)


JSON Tweets

Foto's ge-implementeerd door JSON

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

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

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

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

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

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

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

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

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

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


Cascading Style Sheets

Opmerkingen rond CSS

01: Introductie tot CSS

02: Voorbeelden van CSS3


CSS3 filter Property Tweets

Afbeeldingen met CSS3 Filters in HTML5

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

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

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

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

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

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

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

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

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

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


CSS3 transform Property Tweets

Afbeeldingen met CSS3 Transform in HTML5

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

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

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

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

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

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

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

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


Cropping Methods Tweets

Uitgesneden Afbeeldingen

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

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

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


CSS3 clip-path Tweets

Uitgesneden Afbeeldingen

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

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

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

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

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

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


AppML

Data ge-implementeerd door AppML

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

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


Validering

(X)HTML, ...

01: Validering van Webpagina's

02: Validators van Webpagina's


HTML5

'HyperText Markup Language 5'

01: HTML5 vergeleken met Natuurlijke Talen ||

02: Invoeg-Elementen in HTML5

03: Weglatings- en Fout-tolerantie in HTML5

04: Lege Elementen in HTML5


XHTML5

HTML5 + XML = XHTML5

01: XHTML5 = HTML5 in XML Serialisatie-Modus


HTML6

Opvolger HTML5 ?

01: HTML6 ||

02: Voorbeelden met voorgestelde vormen van HTML6-broncode


HTML Content

Versleuteld / Beveiligd

01: Secure HTML Content


Snellere Toegang

tot Informatie

01: SEO

02: Introductie tot Accessibility

03: 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 »