ocPortal Tutorial: Favicons, Web fonts, Media file compatibility
Written by Chris Graham, ocProducts
This tutorial will explain and detail some of the fringe features of web technologies.Table of contents
Favicons
Microsoft created a technology that allows websites to have their own little icons, for placement in the Favorites menu, and the web browser window icon. This technology has since been adopted for use by other web browsers.Favicons are supported in ocPortal, and to use one you just need to place a 'favicon.ico' file in your installation directory. Creating an icon file is beyond the scope of this tutorial.
Please note that the favicon will only be used for the web browser window for a page that has been put into the Favorites/Bookmarks. It is this action that triggers the web browser to acknowledge and cache the icon.
Web fonts
Fonts have always been a tricky area in computing, as the actual font typeface is a copyrighted works, and hence cannot be distributed without a licence. This problem extends to the Internet, where there is a stronger need for common fonts than there ever was. It is important to remember that not all viewers to a website will be using Microsoft Windows, and therefore they will not all have the set of default windows fonts.Fortunately there are two things that improve on this situation:
- there are certain common fonts and "font families" that are available for almost all web browsers to use. However, it is beyond the scope of this tutorial which fonts these actually are and there is a degree of ambiguity as to whether a font is 'common enough' for usage.
- CSS (the technology used to stylise web documents) supports a fall-back mechanism for the specification of what font to use.
Media file compatibility
Images
The advice here is simple: use PNG, JPEG or GIF formats, but never other formats, such as BMP. Renaming a file is not akin to changing it's format: the file internally must actually be in the format it's file extension specifies.Our best advice is to always use PNG, unless very small files are needed without a need for blended transparency and with acceptable quality loss, in which case, use JPEG.
Sound and Video
Sound and video formats are an area of extreme complexity unfortunately, as is their use on the web.Unlike for most file types, video files cannot be identified fully be file extension. The file extensions identifies the 'container format' (such as MPEG or AVI) but not the 'codec' used for the video data and which codec was used for the sound data. Codecs are often proprietary, and tied to Windows, and they often aren't installed on user's computers. Some codecs and container formats require specific software, as vendors such as Microsoft, Apple and Real tend to lock each others formats out, as they battle for supremacy.
You have a choice between six options:
- Use an old badly compressed format - this is likely very infeasible, due to high file size.
- Use an alternative format, such as MIDI - this is likely very infeasible, as content is rarely made to it now, and users are more discerning than they once were.
- Use a technology such as Macromedia flash to distribute videos and music: flash applets contain their own code to decompress this data - this is likely to involve investment and specialist skills.
- Put up with media only working where Windows Media Player / RealPlayer / Quicktime is installed (noting that the best support for this is on Internet Explorer on Windows, and getting it to work elsewhere can be tricky or impossible)
- Use standard MPEG technology - the drawback to this is that MPEG standardisation has declined, with MPEG4 being more of a 'class of formats' that includes formats such as DivX and many others
- Use an open alternative such as those sponsored by the BBC, or Ogg - using them is technical difficult, and users need to install special software.
Our practical advice is to choose the following formats: MP3 for sound, and a well supported MPEG4 format (such as DivX) for video.