Composr Tutorial: Supplementary web technologies (media, social networking, etc)

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, that has since been adopted by all major web browsers. These icons often show up (depending on the web browser):

• in the favorites/bookmarks menu
• as the web browser window icon
• as the browsing tab icon (next to the page's title on the tab)
• by the browser's address bar
• in the history browsing interface
• as a desktop icon

Favicons are supported in Composr, and to use one you just need to edit the favicon theme image.

The default icon supplied with Composr actually contains multiple sizes:

• 16×16 – Standard size for browsers
• 24×24 – Internet Explorer 9+ pinned site size for user interface
• 32×32 – Internet Explorer/Microsoft Edge new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
• 48×48 – Windows site

There are a number of online tools for creating favicon, namely X-Icon-Editor, favicon.cc, Faviconist, Genfavicon, etc. We'll avoid giving specific links because these tools come and go. We advise using a tool that can save multiple sizes like above.

Editing the favicon theme image:

1. Go to Admin Zone > Style > Themes. This will take us to the Manage Themes screen.
2. Next to each theme we have an 'edit' section and there we have an icon to 'manage theme images' which we need to click. Click the icon for the default theme and ignore the warning (the favicon is usually for the whole site regardless of theme, so is best put in the default theme).
3. We are now lead to a screen containing a number of images grouped by category. We can see the images present and edit them by clicking the expand button placed alongside each category name. The favicon is available under the category titled "(unnamed)". Select the favicon image.
4. You are now lead to a screen "Edit theme image" and in that we can see the current image and the options for uploading new image. Click the "Upload" radio button then the Browse button, then attach your new icon file.
5. Click "Save".

Apple webclip icons

These icons (aka apple touch icons) show on the iOS home screens, if you choose to bookmark a site there. They can be set by editing the webclipicon theme image.

The default icon actually contains multiple sizes:

• 120×120 – iPhone/iPod retina touch iOS7
• 152×152 – iPad retina touch iOS7

Systems will typically get the icon most closely matching their required display size. It is pointless trying to have every possible size of icon, as there are too many variations between software, version, and dpi, to get everything.

iOS automatically adds the curved border and shadow effect for you, unless you alter HTML_HEAD.tpl and change apple-touch-icon to apple-touch-icon-precomposed.

To add to the home screen on an iOS device:

1. open a fresh load of your website in mobile Safari
2. open the page actions (in the bottom bar it is the box with the upward arrow)
3. select "Add to home screen"
4. fill in the details
5. tap Add
6. check back on the home screen

Unfortunately iOS has deep caching for the webclip icons, which you cannot clear. Fortunately the default HTML_HEAD.tpl adds a cache-busting parameter which is the file modification time of the image. You still need to remove then re-add the home icon for your site though.

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:

1. 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).
2. CSS (the technology used to stylise web documents) supports a fall-back mechanism for the specification of what font to use.
3. Google Web Fonts provides a compatibility layer to smooth over external font support in different web browsers, and access to free fonts. It is very easy to integrate via a change to the HTML_HEAD.tpl template and the CSS. Also, TypeKit.

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 e-mails should have a different font to the main website.

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

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 (soon will be able to do animation using APNG though)
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:

1. Use an old badly compressed format – this is likely very infeasible, due to high file size
2. 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
3. Use HTML5 / Macromedia flash to distribute videos and music in h264 format: HTML5 natively supports h264 video and Flash contains its own code to decompress this data (for old browsers). Recommended (Composr includes an integrated HTML5/Flash file player)
4. 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)
5. Use standard MPEG technology other than h264 – the drawback to this is that such MPEG standardisation is weak, with MPEG4 being more of a 'class of formats' that includes formats such as DivX and many others
6. Use an open alternative such as those sponsored by the BBC, or Ogg, or Google (WebM) – using them is technical difficult, and users generally need to install special software

Our practical advice is to always use h264/mp3, which has worked on all major browsers for a number of years.

MPEG

MPEG is a standardisation committee who release waves of MPEG standards (basically, standards for audio and video). The committee is made up of people from many companies, such as Apple, Microsoft. There are a huge number of MPEG standards, and each contain many 'parts' (which are standards of their own). The parts are then defined across many profiles, levels, and versions, and there are many customisations out there too. There are often multiple names to refer to the different parts, as they all have their own history to them.

There is a great deal of confusion around the MPEG formats, because the abbreviations commonly used outside the official specifications can be very ambiguous. Here's what the terms typically actually mean:

• mp3 is actually MPEG-2 Part 3 (audio format).
• aac is MPEG-2 Part 7 (audio format).
• mp4 is actually MPEG-4 Part 14 (container format).
• MPEG-4 video is actually MPEG-4 Part 2 (video format).
• h264 is MPEG-4 Part 10 (video format).

The clear points of confusion are:

1. mp3 is an audio codec, not "MPEG-3". The '3' comes from 'part 3', not the overall MPEG number. MPEG-3 doesn't exist to avoid confusion.
2. mp4 is the MPEG-4 container format, but that doesn't mean you should put what is typically referred to as MPEG-4 video in it (because that's not web-safe, only h264 is).

For web-safe videos you need to use either the aac or mp3 audio codec, the h264 video codec, and the mp4 container format.

The custom graphics block (advanced)

It is very common for the best modern designs to have content text built direct into graphics. There are 3 approaches to achieve this:

1. CSS. This is usually the best approach, using CSS to overlay the text over images.
2. Having web developers manually create lots of variants of the same image, each with different text.
3. Automatically generating the images in Composr using the custom graphics block.

This section describes the last approach. Frankly this is quite an obscure and rare thing to need to do, because of the power of CSS. However it does have its occasionally usefulness.

Here is a simple example of a custom button:

(we've built the button graphic here into Composr 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)
• ont_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 Composr [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?


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.

Social media accounts

You may wish to set up profiles on popular social media sites, such as:

• Facebook
• Twitter
• Google Plus
• Youtube
• Pinterest
• LinkedIn

You may also wish to have a presence on question and answer sites, such as:

• Quora
• Stack Overflow

See also

• Guide to web technologies (including HTML, CSS, and JavaScript)
• Metadata
• Browser version requirements

Feedback

Have a suggestion? Report an issue on the tracker.