Part Two - Concept and Site Design

As previously mentioned, The Welsh Pop Music Resource Pages are intended as an extension of the Sgrechian EP Online site completed as a special study earlier this year, but with the intention of promoting a musical genre (or, more accurately, a set of genres) rather than a single product. The objectives of the Sgrechian project were clear - to use multimedia to promote the product to the public. This was done by combining promotional material such as interviews and publicity photographs with details from the product's artwork, and perhaps most importantly, the opportunity to hear entire tracks from the EP.

The structure of the Welsh Pop Music Resource Pages is slightly more complex, in that to give a fair representation of the industry in Wales, the site cannot depend on internal information, but rather depends on links to external sources such as the homepages of record labels or management companies. I have designed as many of the sites as possible within the basic structure of the site, but where appropriate have constructed links to external sites.

The site is designed as a marketing and promotion zone for bands who are performing in Wales and have merchandise to sell or live events to advertise. Various parts of the music industry are interconnected in such a way that if a user reads a band interview in an online version of a Welsh pop magazine, they can link directly to that band's homepage, contact their record company via e-mail, or find out where they can buy the band's product or see them perform live.

There are also user-end applications designed into the site, such as the GRR! User-end Noticeboard, onto which the public can post information regarding live events or merchandise for sale. This facility is intended to make the site more user-friendly, and allows bands or venues to use their own initiative to promote events, rather than being dependant the designer of the site to include the information. It is hoped that it will eventually be possible for bands to post demo songs via e-mail and post them on the Internet.

Page layout

This project uses a frame-based system, which allows the author some control over how the page appears on the computer screen at the user end. The size of frames can be fixed so that users cannot manually change elements of an author's page. The page layout will be adjusted by the user's computer depending on the receiver's screen size, though fixed frames can act as navigational facilities present throughout a user's browse through the site. On WPMRP, these appear throughout as orange navigation buttons down the left side of the screen, or as multicoloured buttons at the top of individual pages within the site, such as the Welsh Band Database, Welsh Bands Weekly and Gog Rock sites.

Window-based systems on the other hand require the user to scroll down the page to find or return to specific parts of any document. This project makes use of both linked and scrolling systems, for ease of navigation in long documents. For example, The Welsh Band Database is one document divided into separate sections -

which can be viewed individually either by scrolling down through the document, or by instant access by clicking on the appropriate button at the top of the screen.

Not all Internet browser software currently supports frames, and due to time restraints, the project is not currently available in a non-frame format. This means that users will need Netscape 3, Microsoft Internet Explorer 4 or above to view these pages correctly (see system requirements).

Media used : text

Information is exchanged over the Internet in the form of a coding language known as HTML (Hypertext Markup Language). HTML describes the way in which elements will appear on a document published to the Internet, both in terms of physical appearance of the page and text (background colour, text size and colour, italics, bold etc.) and the position of elements on the page (left, right, centred, text wrapped around images, in tables etc.) in much the same way as a word-processing program works. HTML also allows added dynamic effects not offered by traditional text, such as allowing users to complete and send forms and mail messages from web pages, blinking and colour changing of text etc.

Information is represented in the form of tagged instructions which appear either side of the selected text, e.g. text slightly larger than the main body of the text and coloured red would appear as

 

<font size="+1" color="red"> text</font>


Images are embedded into web pages by using &ltimg7gt tags that identify the image's size in pixels (the smallest measurement of graphic size) and where to find the image on the server. Example HTML for a small square photograph called "me" found on the right side of the page would be

<img src="me.gif" height=50 width=50 align=right alt="photograph of myself">

where the alt= instruction contained the text that will be displayed if the requested image cannot be found. An example of HTML taken from the site appears at the end of this paper, along with an illustration of how the same page appears when viewed through a browser.

The main advantage of HTML is that it supports hypertext through the use of links and anchors, which appear as the &lta> and </a> tags. A hyperlink from page 1 to page 2 in a hypertext document may be

<a href="page2.html">click here to continue</a>.

Similarly, images can be used as anchors to subsequent pages or documents by combining anchor and image information in the HTML coding,

<a href="page2.html"><img src="button.gif"></a>

The hypertext references mentioned above are given in a form known as URLs (Uniform Resource Locators), which are made up of three components

  1. the access method by which the user receives the information from the Internet (http= hypertext transfer protocol, ftp= file transfer protocol etc.)

  2. the Internet address of the server which stores the object (e.g. www.host.com)

  3. the address of the document on the server, including the directory in which it is stored and the name of the file (e.g. myfiles/images/me.gif)

A complete URL would be therefore be http://www.host.com/myfiles/images/me.gif

Media used : graphics


With developments in hypermedia and the technology which allowed the transfer of graphics along the Internet, many companies now use graphics to make their sites more pleasing to the eye, which will hopefully discourage potential customers from leaving their site out of boredom. Two kinds of graphics are used on the site -

Both kinds of graphics can be manipulated digitally in programs such as Paint Shop Pro or Photoshop. This software can clean up fuzzy images or correct mistakes which occurred at the scanning stage. Effects can also be added to the images, such as negative, psychedelic, lamination, wax coating etc. The graphics can also be flipped on their side, inverted, enlarged or shrunk or otherwise manipulated, just like any other computer data.

The images used in this project are mostly band photographs (as with the Diems and Fel Petai sites), promotional photographs (the individual band members of Tystion, and the group photograph of NAR), and sleeve images of products discussed in detail on the site (which are feature on individual band sites, on the New Releases section of the Noticeboard page, and in band interviews taken from magazines).

The site is navigated by a series of images in the form of buttons which appear throughout the site. The main navigational tools are the orange buttons on the left side of the screen on the Index page, which remain throughout any browse through the site regardless of the path taken. Other navigational buttons which are graphics files are those at the top of the Database page, and the tracklisting on the dna interview page.

Media used : sound

Multimedia presentations consume vast amounts of storage space - a single colour television image takes up 105 Kb (Kilobytes) and a minute of live video would take up almost 200 Mb (Megabytes). Similarly, digitised sound consumes large amounts of storage space - a one-minute .aiff soundfile on the Macintosh sampled at 44.1kHz in 16-bit stereo consumes around 10.1Mb of disk space.

Sampling rate (kHz) No. of bits stereo/mono Size
44.1 16 stereo 10.1Mb
22 16 stereo 5Mb
8 8 mono 938Kb

Table: Relative sizes of digitally-recorded 1-minute audio clips

Bandwidth

Bandwidth is a measurement of how much information can be transmitted between two points in a given period of time, and is a major concern when transmitting data over the Internet. Bandwidth is the maximum speed at which a modem operates - therefore various speeds of modem transmit and receive data at different bandwidths. A 2400 bps modem transmits and receives 2400 bits per second of information, which is approximately 240 characters ( a single letter, number or punctuation mark).

A 28.8kbps (thousand bits per second) modem transmits or receives 2880 characters per second, twelve times faster than a 2400 bps modem. Most domestic modems run at 14.4, 28.8 or 56 kbps, and though there are ways of transferring data at higher bandwidths, these are used primarily by corporate LANs or entertainment-based websites. A T-1 is a special data line which transfers data at around 15440 kbps, while a T-3 line runs 28 times faster than a T-1. An alternative which is fast becoming economically-viable and increasing in popularity is the ISDN system, which at its most basic transmits data at around 128kbps.

The more powerful the modem, the less time it takes to transmit the data from one terminal to another.

Modem speed time taken
2400bps 9 hrs
28.8 Kbps 46 mins
128 Kbps (ISDN) 10 mins
T-1 50 secs
T-3 < 2 secs

table 2: Time taken by various modems to transmit 10 Mb of data.

A cheaper alternative to increasing the bandwidth to receive data is to use data compression, which shrinks data into even more manageable chunks. Several companies have developed software systems for the purpose of compression and transfer of audio down the Internet, such as AT&T, whose a2b music system is currently being used by BMG/RCA and online music distributor NK2's Music Boulevard. Other companies include Liquid Audio, Telos" Audioactive software, but one of the systems that seems to dominate the market at this time is Real Networks" Real Audio system.

A typical streaming media system consists of five elements - encoders and content creation tools (1) which are used to create or capture and then edit sound and/video data typesdata types (2), which are stored in centrally-located servers (3), to be transmitted over networks (4) to be received and decoded by client-side players (5) for live or on-demand playback.

A typical streaming media system, as used by Real Networks
fig3: A typical streaming media system, as used by Real Networks.

The Real System contains three main software applications

  1. servers - purchased from Real Networks to store their coded media files. These files are connected to Web pages by metafiles - addresses which download the files from the media server rather than the web server. This allows users to continue navigating the site, moving from one document to another without interrupting the data stream from the media server.
  2. encoders - after the video or audio has been digitised, the data is compressed into smaller files which can only be read by a Real Player at the user-end of the process. These files carry an .ra (Real audio) or .rm (Real media) extension, and vary in size depending on the method of encoding used. Real Networks offer a range of encoding technology designed for various computer platforms and modem speeds, the resulting file sizes from which are represented in the table below.

      unencoded size encoder version (bandwidth) size
      .wav file, 44.1kHz, 16-bit stereo 10.1Mb RA dual ISDN mono/stereo 586 Kb
      .wav file, 22kHz, 16-bit stereo 5Mb RA single ISDN mono/stereo 296 Kb
      .wav file, 8kHz, 8-bit mono 938Kb RA 3.0 (28.8) mono RA 3.0 (28.8) mono
      RA 2.0 (28.8) 113 Kb
      RA 1.0 (14.4) 60 Kb
      RA 4.0 (8.5) 64 Kb
      RA 4.0 (6.5) 42 Kb

      table 4: Relative file sizes for Real Audio- encoded soundfiles.

    The different levels of encoding are known as codecs and offer varying quality of sound, e.g. the higher the codec (14.4, 28.8, 56, ISDN) the larger the resulting file and therefore the better the sound quality. The lower-bitrate codecs (6.5, 8.5 and 14.4) offer a sound quality equal to a clear, strong AM radio station, with slightly reduced frequency and dynamic range. The medium-range codecs (RA 2.0 and RA 3.0, both at 28.8) offer a sound quality equal to a clear FM mono radio station, with a slightly reduced frequency and dynamic range, while the higher codecs (ISDN and above) offer near-CD sound quality with a slight reduction in frequency and dynamic range.
    (All figures taken from Real Networks website)

  3. Compression works by selecting and storing only the most relevant data and discarding the rest. Moving images are stored as frames relative to each other, so that the only information stored about two virtually identical frames is the actual variation in movement between the two. This cuts down considerably the amount of storage space needed to digitise film, and similarly music is compressed by recording the data in relative sound data.

  4. players - These are decoders that are downloaded from Real Networks" website onto an individual's computer, enabling the user to hear/see the encoded data. Real Players will play both audio and video, and can be downloaded free. Once the player is installed, the user's web browser has to be adjusted to identify Real Media files and the application that will decode them. On Netscape 3 this is done by

    • selecting Preferences from the Options menu
    • clicking on Helpers
    • select the New button
    • enter the following information
      • Description: Real Player
      • MIME Type: audio/x-pn-realaudio
      • Suffixes: ra, rm, ram
    • click the Application button and find the directory in which the Player is stored.
    • select Real Player as the application to launch.
    • select PNRM or PNst in the File Type menu
    • click OK

    Steps 5-8 above may not be necessary if you can play the songs from the Welsh Pop Music Resource Pages directly from the Real Player provided on the CD. If this does not work, you may have to install a Player into your computer's hard drive.

The CD-ROM as a storage device

Compact Disc-Read Only Memory is an optical storage medium which are physically the same as audio CDs, but their players are specially configured to access information faster than audio CD players, and are also able to read data non-sequentially, since hypermedia is essentially a non-sequential system. CD-ROMS store a greater amount of data than is suitable for a 3.5" floppy disk - about 650 Mb, which is equivalent to around 450 floppy disks at 1.44 Mb each. Combined with compression techniques, it is now possible to store a complete video in the same space which would have previously been taken by audio only. Technology has progressed so that DVDs (Digital Video Discs) can store entire feature films in crystal-clear visuals and CD-quality sound, along with interactive features such as menus, languages and instant chapter access. The DVD is a step beyond the Beatles" Hard Day's Night CD-ROM, since it can store 4.7 Gigabytes (thousands of Megabytes) of information - as much as six CD-ROMS or 2500 floppy disks!

CD-ROMS are faster at accessing data than the Internet. A double speed CD-ROM drive delivers data around 150 times faster than a modem, and around 20 times faster than ISDN. The fastest CD-ROM drives transmit data at least four times faster than T-3, currently the fastest connection to the Internet.

At the end of 1994 it was estimated that there were around 13 Terabytes (thousands of Gigabytes) of information on the WWW - around 20 000 times as much as a single CD-ROM, but for a project such as the Welsh Pop Music Resource Pages, a CD-ROM is an ideal medium of storage since it allows instant access to subsequent pages, leading to an efficient execution of information and a faster reading time for the user.