Author Archives: Marco Barnig

Google Chrome Frame

Posted on by

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome’s open web technologies (for instance the canvas tag) and speedy JavaScript engine to Internet Explorer (IE 6, 7, 8, or 9).

Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages and detect whether your users have installed Google Chrome Frame.

  • If Google Chrome Frame is not installed, you can direct your users to an installation page.
  • If Google Chrome Frame is installed, it detects the tag you added and works automatically.

Semantic Web

Posted on by

Last Update : October 7, 2012

The Semantic Web is a collaborative movement led by the international standards body W3C. The Semantic Web is a Web of Data, as opposed to the existing Web of Documents. The goal of the Web of Data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network.

The Web of Data is empowered by new technologies such as RDFa (Resource Description Framework-in attributes), SPARQL, OWL (Web Ontology Language), SKOS (Simple Knowledge Organization System), Microdata and Open Graph.

HTML (HyperText Markup Language) remains still the main markup language for displaying web pages and other information that can be displayed in a web browser.

Semantic HTML refers to the semantic elements and attributes of HTML (h1, h2, …, p, …), as opposed to the presentational HTML elements and attributes (center, font, b, …). The acronym POSH was coined in 2007 for semantic HTML, as a shorthand abbreviation for “plain old semantic HTML”.

HTML5 introduced a few new structural elements :

  • <header> : this tag replaces the <div class=”header”>, commonly used in the past by most designers. The header element contains introductory information to a section or page.
  • <footer> : same as above, it’s the well known <div class=”footer”>. The footer element is for marking up the baseline of the current page and of each section contained in the page.
  • <nav> : replacement for <div class=”navigation”>. The nav element is reserved for the primary navigation. Not all link groups in a page or section need to be contained within the <nav> element.
  • <section> : this is the replacement for the generic flow container <div> when it contains related content. <div> is a block-level element with no additional semantic meaning, whereas <section> is a sectioning element which has normally a header and a footer and represents a generic document or application section.
  • <article> : the <article> element represents a portion of a page or section which can stand alone and makes sense even outside the context of the page. Like <section>, an <article> generally has a header and a footer. You should avoid nesting an <article> inside another <article>.

HTML5 tag <aside>

  • <aside> : this tag is used to represent content that is related to the surrounding content within an section, article or web page, but could still stand alone in its own right. (see figure at right). This type of content is often represented in sidebars.
  • <hgroup> : A special header element that must contain at least two <h1>-<h6> tags and nothing else. It’s a group of titles with subtitles. Make sure to maintain the <h1> – <h6> hierarchy.

RDFa is a W3C Recommendation that adds a set of attribute-level extensions (rich metadata) to web documents. RDFa 1.1 was approved in June 2012. It differs from RDFa 1.0 in that it no longer relies on the XML-specific namespace mechanism, but ca be used with non-XML document types such as HTML 4 or HTML 5. eRDF is an alternative to RDFa. SPARQL is an RDF query language. On 15 January 2008, SPARQL 1.0 became an official W3C Recommendation. OWL is a family of knowledge representation languages for authoring ontologies. An ontology formally represents knowledge as a set of concepts within a domain in computer science and information science, and the relationships among those concepts. Ontologies are the structural frameworks for organizing information and are used, among others, in artificial intelligence. SKOS is a family of formal languages designed for representation of of structured controlled vocabulary (thesauri, classification schemes, taxonomies, …). Microdata is a WHATWG specification used to nest semantics within existing content on web pages. The Open Graph protocol, originally created by Facebook, enables any web page to become a rich object in a social graph.

All these technologies help computers such as search engines and web crawlers better understand what information is contained in a web page, providing better search results for users.

Another set of simple, structured open data formats, built upon existing standards, is Microformats. One difference with the other semantic technologies is that Microformats is designed for humans first and machines second.

The following list provides links to some useful blogs and tutorials about the semantic web:

Polyfills and Hacks for older browsers

Posted on by

Last update : June 25, 2014

Polyfills, or polyfillers, are pieces of code that provides the technology that a developer expects a browser to provide natively. Paul Irish has given the following definition: A shim that mimics a future API providing fallback functionality to older browsers.

Alexander Farkas (author of Webshims Lib, a modular capability-based polyfill-loading library) says : Every polyfill is a hack! innovative frontend development is hacky and always will be hacky!

Polyfills are especially relevant in the context of responsive web design.

A list of HTML5 Cross Browser Polyfills is available at the Modernizr GitHub website. The HTML5Please website provides look up tables for HTML5, CSS3, etc features to know if they are ready for use, and if so, to find out how you should use them : with polyfills, fallbacks or as they are.

Links to more useful informations about polyfill’s are listed hereafter :

X-Lite 4 : a freeware VoIP soft phone

Posted on by

 

X-Lite Soft Phone 4.0

X-Lite is a proprietary freeware VoIP soft phone that uses the Session Initiation Protocol (SIP). X-Lite is developed by CounterPath Corporation, a Vancouver based software company. Version 4.0 was released in September 2010. X-Lite complements other non-free products offered by the company, like Bria, Bria iPad, eyeBeam, mobile gateways and SIP based developer tools.

X-Lite is available for Windows and Mac and  can be used to make audio/video calls and to send Instant Messages to a softphone, mobile or landline telephone number. X-Lite has some outstanding features. A comprehensive user guide is provided. I use X-Lite with a SIP account from my Internet provider Visual-Online in Luxembourg.

Optical and intelligent character recognition (OCR and ICR)

Posted on by

Optical character recognition (OCR) is the mechanical or electronic translation of scanned images of handwritten, typewritten or printed text into machine-encoded text.

Intelligent character recognition (ICR) is an advanced optical character recognition or handwriting recognition system that allows fonts and different styles of handwriting to be learned by a computer.

Today the platform for people to use OCR has been changed from single PC’s to web-based applications (Cloud Computing) and mobile devices.

A comparison of optical character recognition software is available at Wikipedia.

One of the best open source OCR engines available today is Tesseract. Tesseract was originally developed as proprietary software at Hewlett-Packard between 1985 and 1995. In 2005 it was released as open source by Hewlett Packard and University of Nevada-Las VegasUNLV (UNLV). Tesseract development has been sponsored by Google since 2006. It is now released under the Apache License, Version 2.0.

There are some free OCR tools available that are based on Tesseract, for desktop PC’s and as online services :

XMLHttpRequest’s in Internet Explorer 5 and 6

Posted on by

Internet Explorer versions 5 and 6 did not define the XMLHttpRequest object identifier in their scripting languages as the XMLHttpRequest identifier itself was not standard at the time of their releases.

The following JavaScript encapsulation is used to provide a backward compatibility with these browsers :

 
if (typeof XMLHttpRequest == "undefined") 
  XMLHttpRequest = function () 
    { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } 
      catch (e) {} 
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } 
      catch (e) {} 
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch (e) {} 
    //Microsoft.XMLHTTP points to Msxml2.XMLHTTP and is redundant 
    throw new Error("This browser does not support XMLHttpRequest."); 
};

Cross Domain Communication, Same Origin Policy and CORS

Posted on by

In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The term origin is defined using the domain name, protocol, and port number of the HTML document running the script. It has always been possible for the browser to make cross origin requests by specifying a resource from a foreign domain in the IMG, SCRIPT, IFRAME tags etc. But with these requests the client-side script does not have access to the content of this resource, it can only be executed or rendered by the browser.

The same origin policy permits scripts running on pages originating from the same site to access each other’s methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites. The goal of the policy is to prevent cross-site scripting (XSS), a type of computer security vulnerability typically found in Web applications that enables attackers to inject client-side script into Web pages viewed by other users.

With the growing popularity of Ajax, a group of interrelated web development methods used on the client-side to create asynchronous web applications, the same origin policy became more and more a serious drawback. With Ajax, data is usually retrieved using the XMLHttpRequest object.

Various alternatives have been developed to circumvent the same origin security feature, for example :

  • Flash or Silverlight with a  crossdomain.xml policy file
  • iFrame URL Technique
  • JSONP (JSON with padding)
  • XMLHttpRequest Level 2, which has been merged into the main XMLHttpRequest specification in December 2011
  • XDomainRequest (non standard) used by IE 8
  • window.location.hash hack
  • Facebook cross domain communication channel
  • window.postMessage() : supported by Firefox 3, Safari 4, Chrome and IE 8

With HTML 5, a new web browser technology emerged which defines ways for a web server to allow its resources be accessed by a web page from a different domain. This technology is called CORS (Cross-Origin Resource Sharing), a first working draft was published by W3C.

CORS works on a per-page access-control model. Every page has to respond with a special header, the Access-Control-Allow-Origin header to be accessible by a foreign site.In the CORS model the responsibility of Access Control is in the hands of the developers and not the server administrators. One drawback of this technology is that the Access-Control-Allow-Origin header is not yet supported by Amazon AWS S3. A lot of web designers are requesting this feature on the AWS Developer Forum.

The following list gives additional useful links to websites reporting about this topic :

HTML5 Video

Posted on by

Last update : January 30, 2013
The HTML5 video specification and the various browser implementations are in constant evolution. LongTail Video has spend a signficant amount of time understanding the limitations of the technology, testing playback across various browsers and devices, and optimizing the jwplayer for HTML5 playback.

Today LongTail Video published a State of HTML5 Video Report to share with other developers and users in the industry just what HTML5 can and cannot support.

Other useful informations about HTML5 Video are available at the following websites :

Optimize favicons

Posted on by

Last update : March 21, 2016

Favicons plugin by Telegraphics

Favicons plugin by Telegraphics

Favicons (.ico files) are the little pictures at the left of the URL on the address bar of the browser. Favicons are an excellent free branding tool for webmasters and blog owners. They help you create brand awareness. Favicons are downloaded by each new visitor to a website. Favicons are extremely important because they are requested before any other components by the browser. By optimizing faveicons, you reduce bandwidth costs and server load.

With the code

<link rel="shortcut icon" href="chateau.ico" />

you can reference any location for the favicon. If it is absent, the Browser tries to fetch it from the domains root instead and each time the browser requests this file, the cookies for the server’s root are sent.

An outstanding tutorial how to include favicons on websites and especially in WordPress blogs is shown at MaxBlogPress. There are various free tools available to create favicons. A plugin for Photoshop to create and optimize favicons is available from Telegraphics, free software by Toby Tain.

Thera are also numerous online webtools available to create and optimize favicons, for example :

Some useful links to websites with more information about optimizing favicons are listed below :

Optimize png images

Posted on by

PNG (Portable Network Graphics) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license.

PNG supports palette-based images, grayscale images, and full-color non-palette-based RGB[A] images (with or without alpha channel). PNG uses a non-patented lossless data compression method known as DEFLATE, which is the same algorithm used in the zlib compression library.

The first version of the PNG specification was released on October 1, 1996 as a W3C Recommendation.

Various tools are available for optimizing .png files; they do this by :

  • removing ancillary chunks
  • reducing color depth
  • optimizing line-by-line filter choice
  • optimizing DEFLATE compression.

In general one must use a combination of 2 tools in sequence for optimal compression: one which optimizes filters and removes ancillary chunks, and one which optimizes DEFLATE.

Some common tools are :

  • OptiPNG
  • PNGOUT
  • Pngcrush
  • PngGauntlet

There are several online tools available on the web to optimize .png files :

  • PunyPNG, compression and image optimization tool developed by Gracepoint Berkeley
  • Smush.it, by Yahoo Developer Network

A list of some useful tutorials about image compression is shown below :