HTML lists

Posted on by

Ordered list :

The <ol> tag defines an ordered list (with digits or characters). This tag is used together with <li> (the ordered item in the list)

Example :

<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>

Unordered list :

The <ul> tag defines an unordered list (with bullets). This tag is used together with <li> (the ordered item in the list)

Example :

<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

Definition list :

The <dl> tag defines a definition list. This tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).

Example :

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

A useful tutorial about definition lists is available at the website of oneXtrapixel.

Website with GZip compression

Posted on by

last update : 20 August 2012
Compression is a simple, effective way to save bandwidth and speed up a website. The browser sends a header telling the server it accepts compressed content (Accept-Encoding: gzip ; Accept-Encoding: deflate). The server sends a response if the content is actually compressed: Content-Encoding: gzip. If the server doesn’t want to send back compressed content, the browser has to make do with the heavy regular version.

A webserver can be configured (in the settings or in the .htaccess file) to return zipped content if the browser can handle it, saving bandwidth for everyone. If you use the Amazon AWS S3 service as a webserver, you can upload compressed files in the AWS management console and add a metatag

Content-Encoding: gzip

in the HTTP header of the files.

I use the WinGZip utility (version 1) created by Irnis Haliullin to compress the content uploaded to my Amazon AWS S3 buckets. An online tool GIDZip Test to check compressed websites is available at gidnetwork.com.

Some useful documentation about Gzip compression is listed herafter :

mobileOK Checker

Posted on by

mobileOK

W3C provides a mobileOK checker to perform various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification.

The checker is based on the open source mobileOK checker library developed by the Mobile Web Best Practices working group.

The mobileOK checker is part of the MobiWeb2.0 Project and of W3C Quality Assurance Tools.

mobileOK conformance can be claimed using POWDER.

CDN push and pull

Posted on by

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.

There are two population methods  : push and pull.

Pull requires virtually no work on the server side:  URL’s are rewritten to the files by replacing  the server domain name with the CDN’s domain name. The CDN will then apply the Origin Pull technique and will periodically pull the files from the origin (the server). How often that is, depends on how headers have been configured  (particularly the Expires header).

Push requires a fair amount of work at the server side to sync files to the CDN. But you gain flexibility because you can decide when files are synced, how often and if any preprocessing should happen.

Most CDN’s support both origin pull and one or more push methods (for instance Amazon Cloudfront).

Wim Leers published on his website his bachelor thesis about “Improving Drupal’s page loading performance” with a chapter of key properties of CDN‘s.

WebDAV

Posted on by

Last Update : July 1, 2012

WebDAV (Web-based Distributed Authoring and Versioning) is a set of methods based on HTTP that facilitates collaboration between users in editing and managing documents and files stored on servers. WebDAV was defined in RFC 4918 by a working group of the Internet Engineering Task Force (IETF).

The WebDAV protocol makes the Web a readable and writable medium. It provides a framework for users to create, change and move documents on a server.

Resources about WebDAV are available at the webdav.org website.

YUI compressor for Javascript and CSS

Posted on by

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name.

The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css).

The YUI Compressor is written in Java and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a letter symbol wherever such a substitution is appropriate . The CSS compression algorithm uses a set of finely tuned regular expressions to compress the source CSS file. The YUI Compressor is open-source.

Several GUI’s are available :

Online versions are available at the website of Zileex Media, of  Rodolphe Stoclin and of gpbmike.

WordPress plugin & theme development

Posted on by

WordPress Codex provides a huge documentation for programmers who want to develop plugins or themes for the WordPress Blog program.

WordPress Plugin: A WordPress Plugin is a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress API.

Resources :

WordPress Theme : A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files, style sheets, custom pages, as well as any necessary code files and scripts.

Resources :

WordPress Templates : Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates are used on all the web pages, while others are used only under specific conditions.

Resources :

Color Gamut

Posted on by

CIExy1931

In color reproduction, the color gamut is a complete subset of colors. The most common usage refers to the subset of colors which can be accurately represented in a given circumstance, such as within a given color space or by a certain output device. The term gamut was adopted from the field of music, where it means the set of pitches of which musical melodies are composed.

Generally, the color gamut is specified in the hue–saturation plane, as many systems can produce colors over a wide intensity range within their color gamut; in addition, for subtractive color systems, such as printing, the range of intensity available in the system is for the most part meaningless outside the context of its illumination. When certain colors cannot be displayed within a particular color model, those colors are said to be out of gamut.

While processing a digital image, the most convenient color model used is the RGB model. Printing the image requires transforming the image from the original RGB color space to the printer’s CMYK color space. During this process, the colors from the RGB which are out of gamut must be  converted to values within the CMYK space gamut (gamut mapping).

There are several reasonable strategies for performing gamut mappings, these are called rendering intents. Four particular strategies were defined by the International Color Consortium (ICC), with the following names : Absolute Colormetric, Relative Colormetric, Perceptual, Saturation.

Gamuts are commonly represented as areas in the CIE 1931 chromaticity diagram. The accessible gamut depends on the brightness; a full gamut must therefore be represented in 3D space. Systems that use additive color processes usually have a color gamut which is roughly a convex polygon in the hue-saturation plane.

A list of representative color systems ordered from large to small color gamut is shown hereafter :

  • Laser video projector
  • Photographic film
  • CRT Monitor
  • LCD Monitor
  • Television
  • Painting
  • Printing

An interactive Flash demo explaining color gamut mapping is available at the website of the Stanford University. Gamutvision, an gamut viewer, is available from Imatest LCC (Norman Koren).

Different color spaces have been defined for digital image processing : RGB, LAB, CMYK. The sRGB IEC-61966-2.1 color space was conceived as a multipurpose color space standard for consumer digital devices (s stands for standard in sRGB). Other RGB color spaces are Apple RGB, ColorMatch RGB, ProPhoto RGB, Adobe RGB (1988) and PhotGamutRGB. A comparison between sRGB and Adobe RGB is shown at the website of Cambridge in Colour.

DNG : Digital Negative, camera raw data format

Posted on by

Last update : January 7, 2016

DNG

Digital Negative

Digital Negative (DNG) is an public archival open raw image format owned by Adobe used for digital photography. It was launched in 2004. DNG is based on the TIFF/EP standard format, and mandates significant use of metadata. Exploitation of the file format is royalty free.

Adobe provides the Digital Negative Specification, a free Adobe DNG Converter (version 6.3), which easily translates raw files from many of today’s popular cameras, an SDK (Software Development Kit) and an DNG Profile Editor.

DNG is supported by various camera providers  and photographic software developers (Adobe Photoshop, Adobe Lightroom, …). DNG is also supported by ExifTool, a platform-independent Perl library plus a command-line application for reading, writing and editing meta information in a wide variety of files, developed by Phil Harvey. ExifTool is also available as a stand-alone Windows executable and a Macintosh OS X package. The current version is 10.09 published on January 4, 2016.

Exif, IPTC, XMP

Posted on by

Last update : August 25, 2013

Exif (Exchangeable image file format) is a specification for the image file format used by digital cameras and scanners. The specification uses the existing JPEG, TIFF Rev. 6.0, and RIFF WAV file formats, with the addition of specific metadata tags. It is not supported in JPEG 2000, PNG, or GIF.

Exif was created by the Japan Electronic Industries Development Association (JEIDA).

The metadata tags defined in the Exif standard cover a broad spectrum :

  • Date and time information
  • Camera settings (camera model and make, orientation, aperture, shutter speed, focal length, metering mode, ISO speed, …)
  • Thumbnails for previewing the picture
  • Geolocation
  • Descriptions
  • Copyright

The most used tool to edit Exif informations is the ExifTool by Phil Harvey. Another very useful tool is PhotoME (Photo Metadata Editor) developped by Jens Duttke which handles also embedded color (.icc) profiles.

There exist other standards to add metadata to files : IPTC (Information Interchange Model),  XMP (Extensible Metadata Platform), … Both standards allow to embed informations about authors, locations, countries, subjects etc in the image files.

IPTC was developed in the early 1990s by the International Press Telecommunications Council (IPTC) to expedite the international exchange of news among newspapers and news agencies (IPTC Photo Metadata Standards : IPTC Core and IPTC Extension). The older IPTC metadata specification (IPTC-IIM) was frozen in 1997, and the IPTC organisation has been recommending the use of the XMP-based IPTC Core specifcation since 2004.

The ExifTool (current version 9.35 released on August 17, 2013) handles also IPTC and XMP metadata. A GUI (ExiftoolGUI : current version 5.15 released on January 8, 2013) for the ExifTool has been developed by Bogdan Hrastnik.

Another great utility allowing to read and write Exif, IPTC and XMP metadata is XnView, developed by Pierre Gougelet. This program handles more than 400 graphic file formats for import and more than 50 formats for export. A new project called XnViewMP (MP stands for multi platform) supports full multicode. Version 0.61 was released on July 18, 2013.

A C++ library and a command line utility to manage image metadata, called Exiv2, is available as free software and with a commercial license, and is used in many projects.The development of Exiv2 is lead by Andreas Huggel. Version Exiv2 0.23 was released on April, 2012.

Tags and other properties of a file can de added or modified in the Windows Explorer Detail Pane or in the Properties Pane.

The following list provides some useful guides about the right use of metadata in images and in other multimedia files :