SlideShare uma empresa Scribd logo
1 de 9
Baixar para ler offline
Eclipse Piano Bar Website
Digital Media Tools @ VIAUC
Group:
Adrian Bezev (127942@viauc.dk)
Nikola Kalfov (129103@viauc.dk)
Teacher:
Allan Henriksen
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
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.
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
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/
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
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
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
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

Mais conteúdo relacionado

Destaque

Destaque (13)

Io t product Jobst Shielding
Io t product Jobst ShieldingIo t product Jobst Shielding
Io t product Jobst Shielding
 
Blablabla
BlablablaBlablabla
Blablabla
 
Page 24
Page 24Page 24
Page 24
 
zain cv-02
zain cv-02zain cv-02
zain cv-02
 
Exposicion grupal
Exposicion grupalExposicion grupal
Exposicion grupal
 
Systems resilience in medical education #meded
Systems resilience in medical education #meded Systems resilience in medical education #meded
Systems resilience in medical education #meded
 
Convencion sobre los_derechos_humanos_y_la_biomedicina
Convencion sobre los_derechos_humanos_y_la_biomedicinaConvencion sobre los_derechos_humanos_y_la_biomedicina
Convencion sobre los_derechos_humanos_y_la_biomedicina
 
Recommendation-TT-c
Recommendation-TT-cRecommendation-TT-c
Recommendation-TT-c
 
18 de abril sergio solsona presenta maestrazgo templario en libreria serret
18 de abril sergio solsona presenta maestrazgo templario en libreria serret18 de abril sergio solsona presenta maestrazgo templario en libreria serret
18 de abril sergio solsona presenta maestrazgo templario en libreria serret
 
100 g direct and breakout cabling solutions
100 g direct and breakout cabling solutions100 g direct and breakout cabling solutions
100 g direct and breakout cabling solutions
 
western degree
western degreewestern degree
western degree
 
Areadewernicke 121016131819-phpapp02
Areadewernicke 121016131819-phpapp02Areadewernicke 121016131819-phpapp02
Areadewernicke 121016131819-phpapp02
 
Gerenciamento de projetos de engenharia
Gerenciamento de projetos de engenhariaGerenciamento de projetos de engenharia
Gerenciamento de projetos de engenharia
 

Semelhante a DMT-I1-Nikola-and-Adrian

Semelhante a DMT-I1-Nikola-and-Adrian (20)

Website Evaluation Paper
Website Evaluation PaperWebsite Evaluation Paper
Website Evaluation Paper
 
OMDFS
OMDFSOMDFS
OMDFS
 
PWWW
PWWWPWWW
PWWW
 
Philadelphia on Stone: physical and online exhibitions
Philadelphia on Stone: physical and online exhibitionsPhiladelphia on Stone: physical and online exhibitions
Philadelphia on Stone: physical and online exhibitions
 
Website Evaluation Report
Website Evaluation ReportWebsite Evaluation Report
Website Evaluation Report
 
Final project 333
Final project 333Final project 333
Final project 333
 
Pitch link blog
Pitch link blogPitch link blog
Pitch link blog
 
New myspace products & sales opportunities final
New myspace products & sales opportunities finalNew myspace products & sales opportunities final
New myspace products & sales opportunities final
 
Term project presentations
Term project presentationsTerm project presentations
Term project presentations
 
Sedgwick e0498336-d0105-30536a-self check-a
Sedgwick e0498336-d0105-30536a-self check-aSedgwick e0498336-d0105-30536a-self check-a
Sedgwick e0498336-d0105-30536a-self check-a
 
Document Design Final Project Paper
Document Design Final Project PaperDocument Design Final Project Paper
Document Design Final Project Paper
 
Website Content Analysis and Feasability Study for the ARWLHC
Website Content Analysis and Feasability Study for the ARWLHCWebsite Content Analysis and Feasability Study for the ARWLHC
Website Content Analysis and Feasability Study for the ARWLHC
 
Artlinks Website Workshop P Mc Caul
Artlinks Website Workshop P Mc CaulArtlinks Website Workshop P Mc Caul
Artlinks Website Workshop P Mc Caul
 
Web2.0
Web2.0Web2.0
Web2.0
 
Unit 35 - Lo4
Unit 35  - Lo4Unit 35  - Lo4
Unit 35 - Lo4
 
Orbanosky_SeniorProject
Orbanosky_SeniorProjectOrbanosky_SeniorProject
Orbanosky_SeniorProject
 
Death by PowerPoint 2014
Death by PowerPoint 2014Death by PowerPoint 2014
Death by PowerPoint 2014
 
Essays Websites
Essays WebsitesEssays Websites
Essays Websites
 
Presentation1
Presentation1Presentation1
Presentation1
 
A place web.
A place web.A place web.
A place web.
 

DMT-I1-Nikola-and-Adrian

  • 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