ocPortal Tutorial: Favicons, Web fonts, Media file compatibility
Written by Chris Graham, ocProductsThis tutorial will explain and detail some of the fringe features of web technologies.
Table of contents
- ocPortal Tutorial: Favicons, Web fonts, Media file compatibility
FaviconsMicrosoft 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 edit the 'favicon' theme image. Creating an icon file is beyond the scope of this tutorial, but there are many tools to do it.
Please note that on Internet Explorer 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.
Apple web clip iconsThese icons show on the iPhone and iPod Touch home screens, if you choose to bookmark a site there. They can be set by editing the 'appleicon' theme image.
Web fontsFonts 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 three 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 (see http://web.mit.edu/jmorzins/www/fonts.html for more information)
- CSS (the technology used to stylise web documents) supports a fall-back mechanism for the specification of what font to use
- Google Web Fonts provides a compatibility layer to smooth over external font support in different web browsers, and access to free fonts
If you can't be constrained with the limitations of web fonts, read the "Achieving advanced designs with the custom graphics block" section of this tutorial.
Media file compatibility
ImagesThe advice here is simple: use PNG, JPEG or GIF formats, but never other formats, such as BMP. Remember that renaming a file is not akin to changing its format: the file internally must actually be in the format its file extension specifies.
Usually you should always use PNG.
There are two exceptional cases though:
- If you need animation, use GIF
- If you do not need transparency, and don't mind some quality loss, use JPEG
Sound and VideoSound 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 in-feasible, due to high file size
- Use an alternative format, such as MIDI – this is likely very in-feasible, as content is rarely made to it now, and users are more discerning than they once were
- Use Macromedia flash to distribute videos and music in FLV format: flash contains its own code to decompress this data. Recommended (ocPortal includes an integrated FLV file player)
- 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 always use flash, which supports FLV video and MP3 files.
Achieving advanced designs with the custom graphics blockIt's commonplace nowadays for professional designers/developers working on static sites to make use of:
- Rich typography
- Text overlaid onto images
- Custom rollovers
Rich typographyThis section was written some time ago. Google Fonts now provides a better and easier solution for most people than sIFR.
It's well known that web browser font support is severely limited, for two reasons:
- There is only a small set of fonts you can trust to be installed on a users computer (the "Web fonts")
- Browser fonts can often look ugly when put against smooth designs, as they are not anti-aliased (except for on Macs)
Web developers solve these problems using two potential methods:
- Usually the developer will just cut out fonts as an image and place the image. This has the clear disadvantage that it can't be content-managed
Now in ocPortal it will be very easy to deploy sIFR. We've built everything into the framework so the only thing to consider is getting the compiled TTF font. Once you have this, it's as easy as pie to add pretty text into Comcode:
[block="sifr" data="Test title" font="Chalkboard" color="#2222FF" tag="h2"]main_custom_gfx[/block]
Full list of parameters:
- data (the text to write)
- color (e.g. "#A34621"), link_color, hover_color
- padding_top (e.g. "10"), padding_bottom, padding_left, padding_right
- flash_vars (advanced: see sIFR documentation)
- case (advanced: see sIFR documentation)
- wmode (advanced: see sIFR documentation)
(things like font size are configured in CSS, in the normal way they are with sIFR)
Don't have Adobe Flash to create the compiled fonts? Get a free tool to do it:
- Create your own sIFR Flash File(s) (Mac, and also you'll find a Windows version if you go to download)
- Convert TrueType Font to Sifr Flash File (Online conversion tool)
Text overlaid onto imagesIt is very common for the best modern designs to have content text built direct into graphics. The only solution until now has been for web developers to make lots of variants of the same image, each with different text. Now it is possible to have a site generate its own graphics, so it is easy for any content writers to extend and maintain, without ever going back into Photoshop.
Here is a simple example of a custom button:
[block="text_overlay" data="This is a test" img="button1"]main_custom_gfx[/block]
(we've built the button graphic here into ocPortal itself, and the Theme Wizard will style it – but you can tell the block to write onto any theme image of your choice using the 'img' parameter)
Full list of parameters:
- img (the code of the Theme image to use)
- data (the text to write)
- font_size (e.g. "12" for 12pt)
- 'x' and 'y' (where to write the text)
- color (has to be 6 hex digits, e.g. 'FFFFFF')
- font (e.g. "Vera" for the data/fonts/Vera.ttf file we bundle with ocPortal [there are a number of other ttf files in that directory ready for use])
- center (set to "1" to center the text)
Custom rolloversTake the above example further, how would you like to automatically have both frames of a rollover generated for you?
[block="rollover_button" data="This is a test" img1="button1" img2="button2"]main_custom_gfx[/block]
This takes the same parameters, except 'img' is now 'img1', and there is also an 'img2'.