Embedding customized web fonts using CSS and @font-face

To ensure the best cross-browser support it is necessary to convert a font file (usually in OTF or TTF) to OTF, TTF, EOT, WOFF and SVG files. This can be done with e.g. Font2Web or Font Squirrel .

The next step is writing the CSS. In the example below the font Atype 1 is embedded. /fonts/Atype1.[extension] denotes the relative path to the file:
@font-face {
font-family: 'Atype1';
src: url('/fonts/Atype1.eot');
src: url('/fonts/Atype1.eot?#iefix') format('eot'),
url('/fonts/Atype1.svg') format('svg'),
url('/fonts/Atype1.woff') format('woff'),
url('/fonts/Atype1.ttf') format('truetype');
font-weight: normal;
font-style: normal;

Now the font can be used by referencing it:
h1 {
font-family: 'Atype1', Arial, sans-serif;

Creating a web audio player with GWT

Google Web Toolkit (GWT) is a set of tools that allows for creating JavaScript applications in Java. For a web application I was working on with GWT, I had to create an audiovisualization unit. For that purpose it was necessary to implement an audio player that would play/pause/resume/stop a sound file by request.

Effects for Web Pages

In the 1990s web pages were really boring because they offered only static content that did not interact with the user's actions. Nowadays, thanks to technologies like AJAX and Flash we have the possibility to enhance websites with stunning effects and interactivity. <strong>Challenge:</strong> <ul> <li>Find an easy way of adding stunning effects and interactivity to your web page.</li> </ul>

Using Piwik (open source web analytics)

Piwik is an Open Source alternative to Google Analytics.

  • You'll need access to web server (via shell or FTP) that supports at least PHP 5.1.3 an MySQL 4.1
  • Go to www.piwik.org and download the latest version of piwik (zip-file).
  • Unzip it and upload the files into a folder on your web server, e.g. yourserver.com/piwik
  • In your webbrowser, navigate to the URL you installed Piwik on.
  • Now you are guided through the installation process. Follow the instructions.
  • At the end of the installation process, Piwik will provide you a JavaScript code snippet which you will have to embed in the website you want to analyze. You can paste it into the body of footer-tag.


Change data sent using POST method of HTTP

The main HTTP methods used for sending data to the web server are GET and POST method. When using the <strong>GET method</strong>, the data is encoded directly in the requested URL, specifically to the query part of it. The query part starts with a question mark and consists of pairs key, value in a form <code>key=value</code>, the pairs are divided by an ampersand. For instance to inform the web server that a user wants to log off, quite often the URL of the form <code>index.php?action=logout</code> is used. Therefore it is very easy to change the sent data. The <strong>POST method</strong> uses the body of the HTTP message to store the data. The user has no direct possibility to change the data. We want to find an easy way to do so.

jQuery UI - autocomplete

jQuery is a powerful javascript liberary, which dramatically simplify the manipulation of elements on a web page and much more.
jQuery UI is a set of user interface objects implemented by jQuery. jQuery UI contains an autocomplete widged which I find very useful.

To implement the widget:

  1. Download the jQuery UI liberary from http://jqueryui.com/download
  2. Place the needed javascript files on your web server. These files are:
    • jquery.js
    • jquery-ui.js
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • jquery.ui.autocomplete.js
  3. Add a script tag to the header of your page for each of these files, e.g.
    <script type="text/javascript" src="js/ui/jquery.ui.autocomplete.js"></script>
    Where js/ui is the relative path to the folder where your files from previous point are located.
  4. Add a javascript into you source code:

    $(function() {
    $( "#i1".autocomplete({
    source: "data.php",
    minLength: 1


    Where i1 is the ID of the input field you want to have autocomplete on. 'data.php' is the file responding to the queries of the widget.

E-Mail Filters

Many people get huge amounts of mail every day. It can be painful to sort, categorize and handle all those mails manually. Furthermore, it costs a lot of valuable time that you could spend elsewhere. However, there is an automatic approach that can save you a lot of this time: E-Mail Filtering <strong>Challenge:</strong> <ul><li>Choose an E-Mail client (either desktop client or web mail)</li> <li><strong>Create the following filters:</strong></li><li>a filter that automatically labels mails from tuwien.ac.at with "TU" or moves them to a folder called "TU"</li><li>a filter that sends unwanted mails (containing words of your choice) to the spam folder</li><li>a filter that marks e-mails containing the words "Knowledge Management" as important (e.g. by flagging or starring)</li></ul>

AutoComplete input box

For the improvement of user experience on a web site it is useful to provide a autocomplete element on some inputs. On the Internet there are many scripts available for download which implement autocomplete functionality. Unfortunately most of them are not functioning properly in all web browsers or have other important drawbacks - are not skinable, not flexible for different uses, etc. We want to implement a good autocomplete widget which would not have all the mentioned disadvatages.

Embedding Google Calendar as iframe

Requirement: You will need a Google Account for this. You can create a new one here: https://www.google.com/accounts/NewAccount

  1. Go to https://www.google.com/calendar
  2. Click the down arrow right beneath the calendar you want to share and choose "Calendar settings"
  3. There is a row called Embed this calendar: Click on "Customize the color, size, and other options" to customize the calendar's style to your needs. (If you're familiar with HTML, you also can manipulate the HTML code directly.
  4. Now copy the HTML-Code to the Clipboard by pressing Ctrl+C (Mac: Cmd+C).
  5. And paste it into the source-code of your webpage (for example by using a web editor like Dreamweaver or a Blogging software like WordPress or Blogger).


Embed Calendar

When creating Blogs or Websites, it's sometimes helpful to have a calendar on the site. This is often needed to inform certain members of a group or organization about a schedule or certain events. While it can be painful to create a calendar on your own, there are online calendars which can be embedded into a webpage very easily. Task: <ul><li>Find an online calendar of your choice.</li> <li>Learn how to embed this calendar into your webpage.</li> <li>Try to customize color and size of the calendar.</li></ul>


Subscribe to web