HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


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.


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

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

Fonts within content

The WYSIWYG editor will not select a font by default.

Unlike a word processor, whatever is being edited is going to end up inserted into a wider existing document context (i.e. into your overall web design). This means that whatever font was used within that wider context would be the default font. This is best for most cases. For example:
  • If the theme font default is changed, it will sweep across all content automatically
  • You can have different fonts in different contexts. For example, perhaps emails should have a different font to the main website.

The default ocPortal theme defines a font in the global.css as follows:

Code

body, .email_body, textarea, input, td, th {
   /* 'Open Sans' is a Google font, and only will be enabled if uncommented in HTML_HEAD.tpl -- so normally it is Segoe UI (Windows, newer version of Tahoma) or Tahoma that is active (available on Windows and Mac since Leopard) or a similar humanist sans-serif font */
   font-family: 'Open Sans', 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

Media file compatibility

Images

The 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:
  1. If you need animation, use GIF
  2. If you do not need transparency, and don't mind some quality loss, 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 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 block

It's commonplace nowadays for professional designers/developers working on static sites to make use of:
  • Rich typography
  • Text overlaid onto images
  • Custom rollovers

Rich typography

This 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:
  1. There is only a small set of fonts you can trust to be installed on a users computer (the "Web fonts")
  2. 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:
  1. 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
  2. More experienced developers will often use something called sIFR. This involves using the Flash plugin to display fonts instead of XHTML, but gracefully degrades to regular XHTML if Flash is not available. Getting this working involves placing and configuring a number of files, configuring some Javascript, and compiling a TTF file into a flash file

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:

Code

[block="sifr" data="Test title" font="Chalkboard" color="#2222FF" tag="h2"]main_custom_gfx[/block]

(you can still apply sIFR using the official Javascript technique if you want to – that is cleaner but also more awkward to set up)

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:
Once compiled, swf files need to be placed in data_custom/sifr.

Text overlaid onto images

It 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:

Code

[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 rollovers

Take the above example further, how would you like to automatically have both frames of a rollover generated for you?

Code

[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'.

And, for programmers, more

You have probably spotted that all these examples are using a new block, 'main_custom_gfx'. The three cases above are what we have supplied 'out of the box', but programmers can write additional renderers in PHP code (hooks) to create configurable graphics of any complexity.

See also