The document describes the development of a website for a fictional piano bar called Eclipse. Key aspects include: 1) The website was created using tools like Photoshop, Flash, HTML and CSS to promote upcoming events and provide a gallery of pictures from past events. 2) The target audience is people in young adulthood to middle age who are interested in night clubs and piano bars. 3) Testing showed the website has valid HTML and CSS and displays appropriately across browsers from IE7 and above.

1. Eclipse Piano Bar Website
Digital Media Tools @ VIAUC
Group:
Adrian Bezev (127942@viauc.dk)
Nikola Kalfov (129103@viauc.dk)
Teacher:
Allan Henriksen

2. Nikola Kalfov and Adrian Bezev @ DMT I1
2
Table of Contents
Abstract.........................................................................................................................................................3
Introduction ..................................................................................................................................................3
Eclipse piano bar website .............................................................................................................................3
Mission and Target Group ........................................................................................................................4
Requirements............................................................................................................................................4
Design........................................................................................................................................................4
Implementation ........................................................................................................................................5
Photoshop.............................................................................................................................................6
Flash ......................................................................................................................................................6
HTML and CSS .......................................................................................................................................6
jQuery....................................................................................................................................................7
Test............................................................................................................................................................8
Validation..............................................................................................................................................8
Web Browser Compatibility..................................................................................................................8
Results...........................................................................................................................................................8
References ....................................................................................................................................................9

3. Nikola Kalfov and Adrian Bezev @ DMT I1
3
Abstract
The following report concerns the development of a small website about the fictional piano bar
“Eclipse”. Different multimedia tools, such as Adobe Flash and Adobe Photoshop were used in the
development of a static HTML and CSS website. The project is part of the Digital Multimedia Course at
VIAUC.
Introduction
This project is about the activities involved in creating a website. Our group had to identify a fictional
company or purpose for which to create a couple of web pages. The tasks afterward involve identifying a
mission for this website, as well as the targeted group of people that would visit it. The website would
have some requirements toward that group, but the same group would have some requirements
toward the website too.
Upon completing the above tasks we continued with developing the website in Adobe Photoshop CS5.1
and Adobe Flash CS3. The last version (and the real website) was developed in Microsoft Visual Studio
2010, combining HTML, CSS and JavaScript with products of the earlier activities.
The whole development process was mostly focused on identifying the purpose of the website and how
to present it to the user graphically.
Eclipse piano bar website
Piano bar “Eclipse” is a fictional medium-sized night club, located in a big, English-speaking city. It has a
couple of different party halls and offers events for different audiences (a baroque piano hall, a minimal
piano hall and a VIP lounge). The aim of the website is to attract more visitors and inform regular
customers about upcoming events, but in the same time stay small and simple. The pages would be
static (HTML and CSS) with just a little JavaScript for visual effects. After the website is deployed, a
person would have to edit the pages by hand and upload them to the server if change is needed.
To suit the above purpose, we decided to create a simple website with moderate usage of graphics (in
order to be light). The upcoming events will be displayed on the home page, together with a
banner/poster of the event or a flash video player with a playlist. Another page will list thumbnails of
pictures from different parties. After clicking on a thumbnail, the user may see the original size of a
picture.
The website would sell some space for advertisement. In this way the website may be self-sustainable or
even earn additional profit.
Lastly, an “About Us” page would be included, stating the purpose of the website with some additional
information.

4. Nikola Kalfov and Adrian Bezev @ DMT I1
4
Mission and Target Group
The mission of the website is to promote the upcoming events in the piano bar. For example, the user
will be able to see the parties this Friday and this Saturday in the bar, if he would visit the website this
Monday. This is a good way to advertise about guest musicians, promotions, happy hours, etc. Regular
visitors to the bar may be more attracted of returning to the bar for a drink and thus, increase
popularity. New visitors may be attracted by a special event and become regular visitors, nevertheless.
The second mission of the website is to promote the bar by providing pictures from different parties on
the website. Online visitors may see how the bar looks from the inside and feel the atmosphere party,
thus increasing the interest of the club itself.
The website would also aim to be self-sustainable. There would be space for advertisements, which, for
now, is located at the footer.
The targeted audience is people in young adulthood to middle age. They should be interested in good
night clubs and should have the appropriate taste for the specific atmosphere of the piano bar. A lot of
them may use browse through mobile internet and/or devices, the website should be as light.
Requirements
The users would require a sensibly ordered list of upcoming events. The next event should be displayed
first, with the second afterwards, etc. Past events should be deleted on time. The gallery should be easy
to navigate through. Pictures should be available to browse in their original size. Website should have
nice graphics and should degrade sensibly in older browsers.
The website should have simple design in order to load fast, regardless of connection speed. Different
visual effects are a bonus, as far as they keep the website light.
The only requirement towards the website’s visitors is to have installed Adobe Flash Player1
. The
browser should not be older than IE 7 or Mozilla Firefox 3. The development was done mainly in
Chrome2
.
There are no mobile versions of the website. Mobile users were not taken into account. However, it
would be a very good idea to have mobile support for such a website, having in mind the targeted
group.
Design
The designing of the website was done mainly in Adobe Photoshop. We emphasized on the idea of
keeping the website light. Black and white are used for base colours, and, together with a few shades of
gray, complete the design.
1
http://www.adobe.com/support/flashplayer/downloads.html
2
www.google.com/chrome

5. Nikola Kalfov and Adrian Bezev @ DMT I1
5
Figure 1 - Eclipse Piano Bar PSD Version
A preview of the design idea may be viewed on the picture above (Figure 1). The website starts and ends
with shades and gray. The logo and the menu consist of letters only. The link for the current page will be
placed in a dark gray box. The hover of the anchor (the mouse-over effect) of a navigation link will
surround the link with a light gray box. Other links will be placed on a white background. An example
post follows, together with a picture (the picture changed to a flash video player). The website ends with
footer and a place for advertisements.
Some changes occurred in the process of transforming the png file to HTML and CSS. For example, the
right column on the page was designed for a single element, but we transformed it to be as a picture or
flash video playlist post. JQuery UI3
was used together with its plugin lightBox4
, nevertheless.
Implementation
The implementation process started with making the Photoshop design preview. The Flash components
were created afterward. The implementation finished with building the website into a complete HTML
and CSS version.
3
http://jqueryui.com/
4
http://leandrovieira.com/projects/jquery/lightbox/

6. Nikola Kalfov and Adrian Bezev @ DMT I1
6
Photoshop
The designing process started in Adobe Photoshop by creating the Eclipse Piano Bar.psd file. The
image is split into logical parts of content and organized in groups of layers. For example, the layer group
footer contains graphic concerning the representation of the footer of the future website only. We
ended up with the design shown in Figure 1.
Flash
For creating such an application, we need to use different media tools, in order to easily make it user
friendly and attractive. For this purpose, we have used Adobe Flash CS3.
Firstly, we have built the self-erasing banner on the “Home page” by Creating New File (Action Script
1.0) -> File -> New and select Banner form the Template sub menu. We set the background to black and
added some text to it: “Place your advertisement here”. With the erasing tool started to erase step by
step and during after every click added new Keyframe. The last step was to reverse the slides in way to
reach the exact effect (Figure 2).
Figure 2 - Flash Advertisement
On the other hand, we have built Flash Video player by Creating New File (Action Script 2.0) ->File ->
New and select Modern Photo Slideshow. This is the template for our video player where we customized
it and imported several videos. The user is able to choose different tracks from the playlist. The videos
were downloaded from Youtube5
and converted to .flv6
file via website converter7
. We also resized the
files in order our needs required from the website content.
HTML and CSS
The website was developed according to the W3C standards of
xHTML 1.0 Strict8
and CSS39
. We ended up with slicing only 3 small
images from the psd file. The rest is CSS styling and it should work
as expected in most of the browsers. Newer version of Chrome,
Safari, Opera and Firefox would benefit the shading effect on some elements (Figure 3). The shade
would not be visible in IE 7, however.
5
http://www.Youtube.com
6
FLV Video File
7
http://www.clipconverter.cc
8
http://www.w3.org/TR/xhtml1/
9
http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/
Figure 3 - Heading Shading

7. Nikola Kalfov and Adrian Bezev @ DMT I1
7
There is a difference is the hover and current design elements in the navigation between Chrome and
Mozilla Firefox. The difference is of a pixel, however. No strange behavior has been observed.
There are no meta tags for keywords, since Google doesn’t use them anymore. The website is not
maximum CEO optimized, but has some features in mind (the structure of the tags, etc.). For example,
the first heading tag is used only in the header, the rest used are less hierarchical headers. The menu
consists of an unordered list, etc.
jQuery
JQuery is a very popular and easy to use JavaScript library. We have made use of it in 3 specific cases: to
add styling, for jQuery UI Tooltip effect and for a nice image viewing plugin named lightBox.
The first use of jQuery is to add the class current to a specific link in the navigation, in order to add a
different styling to the element.
jQuery UI Tooltip
The tooltip effect consists of applying some graphical styling to the “title” property within a tag. For
example, when the user holds his/her mouse over an image thumbnail from the gallery, the tooltip
(showing some description of the image) is shown. The tooltip is the square with text circled in the
picture bellow (Figure 4).
Figure 4 - jQuery Tooltip Example
lightBox
LightBox is a very easy to use library for galleries, built as a plugin to jQuery. Information about library
use may be found at its official website.
After opening the gallery page, the user may observe a table with picture from last parties. Upon clicking
on a picture, the lightBox plugin would activate and display the image in full size in a pop in the same

8. Nikola Kalfov and Adrian Bezev @ DMT I1
8
window. An example is how the popup looks in shown in Figure 5. The whole gallery may be navigated
through this popup.
Figure 5 - jQuery lightBox Example
Test
After the website was complete, some tests needed be done. We have tested the HTML and the CSS, as
well as how the site looks and behaves in different browsers.
Validation
All pages have valid xHTML 1.0 Strict, according to the W3C standards. The applied styles are according
to CSS 3. The tests were done with the W3C Validators for HTML and CSS.
Web Browser Compatibility
The website is tested in the newest version of Google Chrome and Mozilla Firefox prior November 2012.
The website was tested in IE 7 and IE 9 too. Support for IE 6 is not provided. The website should behave
as expected in all kinds of modern browsers that parse HTML and CSS according to the W3C standards.
Results
We ended up with a good looking static website of the fictional piano bar. The results were quite
satisfying. The website has a clean and professional look. The black and white design reminds of the

9. Nikola Kalfov and Adrian Bezev @ DMT I1
9
keyboard of a piano. The website’s HTML and CSS are valid and it has expected behavior in web
browsers.
References
ISBN: 0321321359 - A User-Centered Design Approach, Jonathan Lazar
http://www.allanhenriksen.dk/via/dmt/
http://www.youtube.com/watch?v=GuNnNbVQOto