21 Dec

IMA 501 Thesis — Memory of Peking opera


We are in the high way of the Internet era, the origins of the Internet reach back to the 1960s when the United States funded research projects of its military agencies to build robust, fault-tolerant and distributed computer networks. The research and a period of civilian funding of a new American backbone by the National Science Foundation spawned worldwide participation in the development of new networking and led to the commercialization in the middle of 1990s. And from then on Internet was brought to our life. As of 2009, an estimated quarter of the Earth’s population uses the services the Internet. We have to admit that our world is changing smaller. So as far as I am concerned I will use its benefits to build a culture website about Peking Opera. The reason why I choose it as my theme is that it has a long history on the world’s opera stage. Peking opera is a form of traditional Chinese theatre which combines music, vocal performance, mime, dance and acrobatics. It arose in the late 18th century and became fully developed and recognized by the mid-19th century. The form was extremely popular in the Qing Dynasty court and has come to be regarded as one of the cultural treasures of China. Major performance troupes are based in Beijing and Tianjing in the north, and Shanghai in the south. The art form is also enjoyed in Taiwan, where it is known as National theatre. I want to more people to understand the essentiality of the Peking Opera and let people take more emphasis on it. As a kind of cultural website it will include history, artistic form, development and then on. Therefore it requires a high aesthetic appreciation. The differences between Peking Opera and traditional arts, this is an ancient stage performance form, so it includes performers and roles, visual performance elements, aural performance elements. In recent years, Beijing opera has attempted numerous reforms in response to sagging audience numbers. These reforms, which include improving performance quality, adapting new performance elements, and performing new and original plays, have met with mixed success.

In order to interest the users I will combine different information aspects such like article, pictures, video and radio. And I also use HTML; PHP; MySQL; Flash; AE and AI to design my website. The users can easily find the what they like and they can put the video or audio to their favorite collection after they register a user key of the website.

First, we should know some basic knowledge of Peking opera. Equally important, I will do research for some websites and make an analysis about what types of structure, design, technology they choose to use and which part is beneficial for this project. Finally after we are clear my direction and choice that I would use, I will start to work step by step. Making a flowchart which is easy for people to understand how different layers work with each other. And I will make a bar chart format in order to push forward my work. Make sure the schedule is reasonable and the every design of website is simple for users. In order to keep our budget under control I will discuss the production budget at last.

Artist Statement

The will be more research and details for the website, but first we should be familiar with this theatre form — Peking Opera. It was born when the “Four Great Anhui Troupes” came to Beijing in 1790. Peking opera(Beijing opera) was originally staged for the court and came into the public later. In 1828, some famous Hubei troupes came to Beijing. They often jointly performed in the stage with Anhui troupes. The combination gradually formed Beijing opera’s main melodies. Peking opera is generally regarded as having fully formed by 1845. Although it is called Peking opera (Beijing theatre style), its origins are in the southern Anhui and eastern Hubei, which share the same dialect of Xiajiang Mandarin (Lower Yangtze Mandarin). It features four main types of performers. Performing troupes often have several of each variety, as well as numerous secondary and tertiary performers. With their elaborate and colorful costumes, performers are the only focal points on Beijing opera’s characteristically sparse stage. They utilize the skills of speech, song, dance, and combat in movements that are symbolic and suggestive, rather than realistic. Above all else, the skill of performers is evaluated according to the beauty of their movements. Performers also adhere to a variety of stylistic conventions that help audiences navigate the plot of the production. The layers of meaning within each movement must be expressed in time with music. The music of Peking opera can be divided into the Xipi and Erhuang styles. Melodies include arias, fixed-tune melodies, and percussion patterns. The repertoire of Peking opera includes over 1,400 works, which are based on Chinese history, folklore, and increasingly, contemporary life.

My website is a comprehensive cultural website including history, videos, pictures and so on which are related to Peking opera. Because my original intention is for people to comprehend and try to like it. So I will make the each website page as much easier as it can be in order to make sure user can easily to link and learn from that. Different people have different unique aesthetic appreciation, but as a designer I have to satisfy general people’s aesthetic appreciation. That is also the reason why I want to make the interface easier. My website structure and design is inspired by “In-Culture Connection, LLC” which show user not only clean interface but also fruitful information. And now I will do some website researches.

Website Research

After doing some researches about some successful websites, I found some useful websites that is useful to me. Here they are.

This is a marketing research website, they use in-culture consumer research in order to help their clients understand important nuances and develop effective marketing strategy for their ethnic consumers. What I like this website is its brief and compact interface design. The user can easily to handle it. It is a Flash base website and combines with several pictures and text. It is successful to make user to know what is this company exactly do. Besides that user wouldn’t lose the direction while they are browsing. In the home page, there are five main options on the top of the website. Under it, there are five terms when user click on each of those, it will change relevant explanation and photos. That looks cool. So as far as I am considered, I would like to adopt this interface design to my website.

As a luxurious fashion clothing brand, its website gives users a deep impression. What I most like is this website’s way to show photos. It uses Flash to present photo type, user can use arrowhead button to slide the photo. When user choose photo to see, there will be a new window appearing on the right of the photo. The picture which the user has chosen will disappear and slide to the new window. The difference is the size of the photo will change from little to large and also there would be detail explanation about the clothing on this photo. When choosing another one, the previous one will return back to the small window, and in the large window is the new photo you have chosen. This idea to show photos is perfectly to my photo gallery.

But I don’t like the slide button. What I wish to add a Slider Bar at bottom of the picture instead of the slide button. The reference website is I want to give my user as much freedom as I can. As a cultural website I will build. Absolutely I will show a lot of pictures which can make my goal that let more people understand Peking Opera and like it.

DreamWorks Animation is an American animation studio which produces a series of commercially successful computer animated films. And its website is very popular and very fashion design. I am very interested in its movie layer. There are all its movie product trailers from 1994 until present. They put different animation posters on the two layers. And add a slide button to switch from one to the other. When user selects any one of them, there will be a new window appearing on the right of the poster. That is the movie trailer.

 In my website I will put some videos in my gallery. The DreamWorks animation website inspires me. So what I want to do is to arrange the Peking Opera videos one by one like this. After all I want to give more freedoms for my website users to select what they want to see.

This is a game website. It is based on Flash and combine video and picture to enrich its content. When users are browsing this website, they will find its feature. The designers are intelligent to connect different layers on one layer. The user can easily to search different content like to see slides. In the characters layer, there are PREV button and NEXT button added in for user to know different characters they will act in the game. Both of the features are very useful for my website design. Let me set an example, there will be 6 main search options on the top of the home page. If I design each content as every private section. Obviously there will be a huge work for me to do. And that will be so complicated for my website user to search. In addition there are three branch sections in my Home page. They are Performers and Roles, Staging and Costumers and Instrument selections. I will put more photos and specific explanation for each photo.

Production Statement

 After previewing the website research.  I have exactly my design direction. The structure of the interface is based on “In-Culture Connection” theory. I want to give a deep impression for my user. Everything is easy to click and under control. They can easily touch and get the information. The main color I choose is Chinese Red. Red is a peaceful and happy color in China. There are main three parts in my homepage. From top to bottom, they are navigator, content and small text links section.

 About Website Flowchart

 In order to help to clear the complicated structure up, I illustrate my website structure. In the navigator layer there are home, gallery, visual elements, aural elements, opera theatre, register/login six options. They are aptotic layer so the user will clearly know where they are all the time.

 In the Home layer there are four selections, as I said before, I will adopt the way of In-Culture Connection to design them. These four options can slide from one to another one and they are private units. There are different contents in each of them.

Secondly is the Gallery. It is the one of the important sections. I will put some popular and meaningful pictures, video and audio in this box. And the user who has registered can download any one video they interest.

 The third one is visual elements, it includes staging element and costumes element. On the other hand is the fourth part-Aural element which includes stage speech, song, and music. The same is I will explain the information to the user not only the words but also the relevant pictures.

 The next option is Opera theatre, what I want to add this section because I want to let people now some famous theatre where Peking Opera was usually held in. And giving some introduction to each theatre and also make right links to the official website when user click the implicit pictures or titles.

 The last one is Register and login. This is a private unit, so there will be a new window. The user only register or has been one part of us can have the right to download the video or some information. Of course it will be automatic jumped in order to remind the user is browsing the privileged author context. What the user does is following the introduction.  

 Design Sample

Production Timeline

In order to ensure my project will be done at time, I made a time schedule as follows.


In this Bar Chart Format, there are horizontal axis and vertical axis. The first one is calendar by week. And the other axis includes some information which they are Interface Concepts Design, Flow Chart Design, Website logo design, Building website, Testing, GoLive. In the first week I will focus to design the interface concepts and at the same time I will design the flow chart. The first part will cost me 4week and I will spend 2hours per page but now I am not sure how many pages I will write. It is more than 20pages but smaller than 36pages. So totally I will spend between 40hours and 72hours. In the second part I will spend 5 hours on that. In the next three week it is my website logo time. Totally 20 hours. Building website is an important process, there are three different time process.  Totally 4months, I separate it from three parts. The first part is 2months and 4hours per day so totally 224 days I will focus to work. In the second part of it, there are 4weeks and I will double the work hour so totally it will cost me 224hours. In the last part, the work hour will return to 4hours per day so that means I will spend one week about 112hours to finish it. The coming parts are Testing part and GoLive part.  Each of them will cost me one week and I will spend 4hours per day. In a nutshell both of them I will work 112hours separately.

The technologies I will use for my site are HTML; PHP; MySQL; Laszlo; Flash; After effect. As we all know that HTML is a computer language devised to allow website creation. HTML consists of short codes by site author and the codes is then saved as a html file, and then viewed through Internet Explorer. The browser will read the file and help me to translate the text in a visible form that I had intended. Writing my own HTML means using tags correctly to create your vision. So HTML is to my website what the foundation is to a skyscraper.

PHP files are quite similar with HTML files, but they can include both HTML and PHP. The main difference is that HTML is a tag language which means it is used to describe the public part of the site. So if I want to make a dynamic site, HTML is impossible to manage site content like pictures, text. PHP is script language of a higher level. It allows to create scripts that connect user requests to the data base. It is really helpful to me, if a user owns an account in my website which include some information in it. User makes an “log in” into the field, clicks “log in”(which starts the work of the script), then receive the information. In my website there will be a lot of images like photo and flash animation. So PHP is a helpful tool for my website to build the database of images.

The next very important tool I will use is MySQL which is a database management system. It runs as a server which providing user access to numerous databases. The reason I will use it is I will save my users data in it. Many web applications use MySQL as the database component even some high-traffic websites use it for data storage and logging of user data. For example Facebook, Google, YouTube.

In addition Laszlo is a good tool for me to use. It is an open source platform which work identically across all popular platforms and browsers(Windows, Mac Firsfox, Safari,etc) is a good example of Laszlo. LZPIX is an photo website that demonstrates how the same Laszlo source code can be identically deployed with Flash or DHTML. And this site using Laszlo has a scroll feature at the bottom which is different from traditional stock photos websites which you view the photos to scroll up and down. So I will use this way to show pictures to my user. is also use Laszlo to implement an easy interface for listening to user’s personalized music.

Production Budget


When determining how much the website should cost is a most frequently asked but really hard to give a specific answer. There exists no formula for calculating either the cost of a redesign or the cost of a new website. At the beginning of building website there are different components would result the expense. For instance the cost of purchasing software, videos and so on will vary at different time. It is important to examine each of the components that go into determining how much a website should be cost. With the historical references, on average I estimate a website budget consideration as follows.


Domain Name:






Web design cost:

In nowadays, as a designer I think I will charge $15 per hour. So in that case, it is easy to calculate the amount of cost.


Website Maintenance:





In recent years, Beijing opera has attempted numerous reforms in response to sagging audience numbers. These reforms, which include improving performance quality, adapting new performance elements, and performing new and original plays, have met with mixed success. Some Western works have been adopted as new plays, but a lack of funding and an adverse political climate have left Beijing opera’s fate uncertain as the form enters the 21st century. This is our cultural heritage, so my goal is to let more people understand it and make more emphases on it. As a traditional ancient performance, it combines different art forms. For example there are different roles, costumes, instruments, songs ect. And all of them people can not find in any other performance form. Therefore we can see what is the deep value for us. What I believe, we are living in the internet world, no matter where do live on the earth, the internet connect us closely. It is advisable and effective to choose website to introduce Peking Opera to the world, make more people know this. And we hope to inherit the cultural heritage from generation to generation.


Reference website links



Leave a comment

Posted by on December 21, 2009 in Uncategorized


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: