PORTFOLIO

web techniques by

Joost v@n Meeteren



SGML |

Standard Generalized Markup Language
01: SGML
02: SGML parent of

HTML |

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 |

Extensible Hypertext Markup Language
01: XHTML 1.0 Transitional
02: XHTML 1.0 Strict
03: XHTML 1.1

XML |

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

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 Fixed Pinterest images
07: AMP Media query selection
08: AMP Responsive iframes
09: AMP Responsive tweets
10a: AMP Responsive videos
10b: AMP Responsive Youtube videos
11: AMP Responsive Fit-text
12a: AMP Responsive images using amp-carousel
12b: AMP Responsive images using amp-carousel autoplay
13: AMP Audio resource
14: AMP Animated images
15: AMP amp-vimeo video (under construction)
16: AMP amp-vine video (under construction)
17: AMP amp-springboard-player video (under construction)
18: AMP amp-kaltura-player video (under construction)
19: AMP amp-brightcove video (under construction)

HTML5 AMP Tweets |

Images 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: Pinterest Images in AMP | 'Tweet' (January 3, 2017)
11: Responsive Better Portable Graphics (BPG) Image in AMP | 'Tweet' (January 6, 2017)
12: Responsive Animated Images in AMP | 'Tweet' (January 9, 2017)
13: Responsive Images with Lightbox in AMP | 'Tweet' (January 12, 2017)
14: Responsive JPEG Images used in element 'amp-accordian' | 'Tweet' (January 15, 2017)
15: Responsive JPEG Images used in element 'amp-sidebar' | 'Tweet' (January 18, 2017)

HTML5 Valid AMP |

Validated Pages in AMP HTML
01: Responsive Image in AMP | Valid AMP HTML
02: Responsive Instagram Image in AMP | Valid AMP HTML
03: Responsive Tweets in AMP | Valid AMP HTML
04: Responsive Images in AMP-Carousel | Valid AMP HTML
05: Responsive Images in AMP-Carousel Autoplay | Valid AMP HTML
06: Media Query Selection in AMP | Valid AMP HTML
07: Responsive iFrame with Google Maps in AMP | Valid AMP HTML
08: Responsive Video in AMP | Valid AMP HTML
09: Responsive Youtube Videos in AMP | Valid AMP HTML
10: Pinterest Images in AMP | Valid AMP HTML
11: Responsive Better Portable Graphics (BPG) Image in AMP (Sorry, this page is not valid AMP HTML)
12: Responsive Animated Images in AMP | Valid AMP HTML
13: Responsive Images with Lightbox in AMP | Valid AMP HTML
14: Responsive JPEG Images used in element 'amp-accordian' | Valid AMP HTML
15: Responsive JPEG Images used in element 'amp-sidebar' | Valid AMP HTML
16: Instagram Photos | Valid AMP HTML
17: CCW 'Je foto van de maand' Photos | Valid AMP HTML
18: AMP Tweets | Valid AMP HTML
19: Base64 Tweets | Valid AMP HTML
20: BPG Tweets | Valid AMP HTML
21: Canvas Tweets | Valid AMP HTML
22: CSS3 filter Property Tweets | Valid AMP HTML
23: CSS3 transform Property Tweets | Valid AMP HTML
24: Tweets on Progressive Web Apps | Valid AMP HTML
25: SVG Tweets | Valid AMP HTML
26: WebP Tweets | Valid AMP HTML
27: Photo Tweets | Valid AMP HTML

Boilerplate |

Boilerplates in HTML5 / XHTML5
01: Boilerplate templates
02: Bootstrap boilerplate
03: HTML5 boilerplate
04: XHTML5 boilerplate

Boilerplate Tweets |

Responsive Images 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 |

HTML5 Better Portable Graphics in HTML5
01: BPG
02: JP(E)G/PNG/GIF/BMP/BPG/SVG

HTML5 BPG Tweets |

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

HTML5 WebP |

WebP Images in HTML5
01: WebP Responsive Images

HTML5 WebP Tweets |

WebP Images 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)

HTML5 Base64 |

01: Base64 Images

HTML5 Base64 Tweets |

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

HTML5 Canvas |

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

Images 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 Images in HTML5
01: SVG in HTML

SVG Tweets |

SVG Images 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 Photos |

Images retrieved from Google Photos in HTML5
01: PHOTOS - Retrieved from ... in Bootstrap
02: PHOTOS - Retrieved from ... in Canvas and Bootstrap

JSON |

Photos implemented by 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 |

Photos implemented by 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)

CSS3 filter Property Tweets |

CSS3 Filtered Images 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 |

CSS3 Transformed Images 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') | (to be published on Twitter)
08: Responsive CSS3 3D Transform Property Image ('rotateZ') | (to be published on Twitter)

Cropping Methods Tweets |

Making Cropped Images
01: Responsive Cropped JPEG Image by using CSS3 Margin | (to be published on Twitter)
02: Responsive Cropped JPEG Image by using Canvas | (to be published on Twitter)
03: Responsive Cropped JPEG Image by using CSS3 Transform | (to be published on Twitter)

CSS3 clip-path Tweets |

Making Cropped Images
01: Tweet XX | Responsive Cropped JPEG Image by using CSS3 Clip-path: circle | (to be published on Twitter)
02: Tweet XX | Responsive Cropped JPEG Image by using CSS3 Clip-path: polygon (triangle) | (to be published on Twitter)

AppML |

Data implemented by AppML
01: Markup Languages shown with AppML | ... JSON client-side file
02: Markup Languages shown with AppML | ... PHP server-side file

HTML5 XHTML5 |

HTML5 + XML = XHTML5
01: Human languages
02: Insert Elements
03: Tolerance
04: Void Elements
05: XHTML5

HTML6 |

Successor HTML5 ?
01: HTML6
02: CSS4

HTML Content |

Encrypted / Secured
01: Secure HTML Content

WebDevelopment and WebDesign 2002-2017 © Joost van Meeteren
Web Developer/Designer/Photographer
Last update Thursday, June 22, 2017 at 08:38