Rationale for Final Production

My final production website: ‘LEGO Wookbook’

http://www.yunliantech.net/task/index.html

For the final production I chose to build reference pages and to create a simple basic website on topic of LEGO modelling toy. Doing this base on my personal enthusiasm with LEGO and also on idea of practising what I have learnt from this unit and outside of the class. In this rationale, I will get my work explained in several different sections.

 

XHTML

In order to make sure my website can be run properly on most browsers, I used XHTML instead of HTML to make up my pages.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 

Basically, I designed a common structure for all four pages of my website. This structure contains header (<header>) and content (<content>). Every page has the same header which written as the follow in reference page:

 

<header>

<div class=”container” >

<h1><span><x1>L</x1><x2>E</x2><x3>G</x3><x4>O</x4> WORKBOOK</span></h1>

<div class=”rowElem” style=”width:50px;”>

<ul>

<li ><a  href=”javascript:void(0);” style=”color:#FF0000;” >HOME</a></li>

<li ><a href=”work.html”>WORK</a></li>

<li><a href=”stuffs.html”>STUFFS</a></li>

<li><a href=”contact.html” >CONTACT</a></li>

</ul>

</div>

</div>

</header>

 

Within the header, there are the title for the site on the left which is LEGO Workbook and a tag list on the right which would navigate readers to different pages. In reference page, with the title LEGO Workbook, I used a <span> tag and attributes <x1> <x2> <x3> <x4> to make the four letters of “LEGO” can be styled with CSS separately.

 

For displaying the tag list, I used <ul> tag to define an unordered list and used <li> tag to create this list. Besides, there are <a> href attributes written after each <li> tag which turn each of words on the list into a hyperlink.

imageimageimageimage

Finally, as the website shows, content is distinctively different from page to page, and it is more about design, so I will explain it more in the ‘CSS’ section of the rationale. But generally for formatting the content, I used <p> tag to create paragraph as on the ‘Home’ page, and <table> tag to show image and text in table structure as on the ‘Work’ page.


<table  border=”0” cellpadding=”0” cellspacing=”0”>

                     <tr>

                            <td><div style=”position:relative; top:-10px; left:-30px;”><img src=”images/Flat Interior.png” style=”width:500px; height:230px;” /></div></td>

                            <td>

                            This is simply an interior model fo a flat designed and

                      built with LEGO Digtal Designer(v.4.2).The set contains

                      2463 bricks in total.

                      <br/> <br/>

                      <a href=”work/Building Instructions [Flat Interior].html” style=”line-height:18px; ” ><img src=”images/Lego_Red_Brick_ibelieveinadv.png” style=”width:15px; height:15px;” />&nbsp;&nbsp;Building guide</a>

                      </td>

                     </tr>

 

CSS

There are several designs which to do with CSS on my website.

 

Firstly, I had used CSS to style the texts in font, size, colour and position on the page. Examples shown as follow:

 

h1 span {width:473px; height:63px; position:relative; left:-76px;         top:104px; font-size:40px;}

 x1{color:#FF0000}

 x2{color:#FFFF00}

 x3{color:#00CCFF}

 x4{color:#00FF00}

h2 {font-size:24px;       line-height:1.2em;       text-transform:uppercase;    margin-bottom:20px;}

         h2 span {color:#8d8d8d;}

h3 {font-size:20px;       line-height:1.2em;       text-transform:uppercase;    margin-bottom:15px;}

h4 {font-size:1em;       color:#008cc4;     margin-bottom:5px;}

         h4 a {color:#008cc4; text-decoration:none;}

         h4 a:hover {color:#ff7b01;}

 

Also I used <div class=”container” > to create text blocks and place them to the desired position on the page.  

 

<div class=”container” style=”word-break:break-all;  ">

           <div  class=”inside” style=”text-align:left;”>

           <table  border=”0” cellpadding=”0” cellspacing=”0”>

                     <tr>

                            <td><div style=”position:relative; top:-10px; left:-30px;”><img src=”images/Flat Interior.png” style=”width:500px; height:230px;” /></div></td>

                            <td>

                            This is simply an interior model fo a flat designed and

                      built with LEGO Digtal Designer(v.4.2).The set contains

                      2463 bricks in total.

                      <br/> <br/>

                      <a href=”work/Building Instructions [Flat Interior].html” style=”line-height:18px; ” ><img src=”images/Lego_Red_Brick_ibelieveinadv.png” style=”width:15px; height:15px;” />&nbsp;&nbsp;Building guide</a>

                      </td>

                     </tr>

                     <tr>

                            <td>

                            This is a lovely modern apartment dsigned and built with

                                     LEGO Ditital Designer(v.4.2).The set contains2463 bricks

                                     in total.

                                     <br/> <br/>

                      <a href=”work/Building Instructions [2-bedromm Apartment].html” style=”line-height:18px; ” ><img src=”images/lego-yellow-brick-medium-46183.png” style=”width:15px; height:15px;” />&nbsp;&nbsp;Building guide</a>

                            </td>

                            <td>

                            <div style=”position:relative; top:-70px;left:0;”><img src=”images/2-bedromm Apartment.png” style=”width:500px; height:230px;”/><div>

                                     </td>

                     </tr>

                     <tr>

                     <td><div style=”position:relative; top:-110px;left:-50px;”><img src=”images/furnitures.png” style=”width:500px; height:230px;” /></div></td>

                     <td><div style=”position:relative; top:-50px;left:0;”>There are furnitures designed and built with LEGO

                     Digital Designer(v.4.2).The set contains 251 bricks

                     in total.

                     <br/> <br/>

                      <a href=”work/Building Instructions [furnitures].html” style=”line-height:18px; ” ><img src=”images/Lego_Blue_Brick_ibelieveinadv.png” style=”width:15px; height:15px;” />&nbsp;&nbsp;Building guide</a>

                     </div></td>

                     </tr>

            </table>

          </div>

 </div>

 

 

Interacted With Sources on the Internet

On both the ‘Work’ page and the ‘Stuffs’ page I embedded some links which allowing readers of my website to access relevant source on the Internet. On the ‘Work’ page, if you click the text ‘Building guide’ under each descriptive paragraph besides the model, you will be redirected to a new web page which contains a HTML booklet about a particular model. This is designed for people who get interested with the model created by me and want to know about the instruction.

 

Then on the ‘Stuffs’ page, I have four links for four different LEGO forums and sites, and each one with a homepage screen shot. Doing this is for providing some useful information for people who interest in LEGO modelling. And maybe more importantly for this web production in particular, is to connect my website to other source on the Internet and contribute to the topic of LEGO. By connecting and contributing to this network (LEGO network), I can make my personal interest become a small part of a public interest.    

 

The Cultural Context of My Production Project

The inspiration of my LEGO Workbook website is a website template and the LEGO Book. Basically, the website template gives me a sample to make reference to for its structure. And the LEGO Book gives me idea about how to layout the information within pages. My website LEGO Workbook keeps the basic colours of LEGO and I am also trying to make pages look colourful. Here I will show you the layout of both the website template and the LEGO Book as follow.

 image

(template)

image

(page from the LEGO Book)

That is all about my website. Thank you.

Meta Reflective Post about DREAMSPACE (blog)

1. Technical issues that I worked on but were not able to fix

When I was setting up a theme, I wanted to add a description for the blog and expected it to appear right under the title “DREAMSPACE”. I tried to make this with editing the HTML page. Specifically, I wrote my description within the area where I thought the description text should went, which as shown in figure 1:

 image

(Figure 1)

As you see here, my made my description into three paragraphs, and began and finished them all with <p> and </p>.

When I clicked the ‘Update Preview’ button on the right corner, I saw my text appeared on page like this (figure 2):  

image

(Figure 2)

 

And when I closed the customize page and went back to my home page, the description text disappeared.

So I had to make an additional page for my blog description which is accessible by clicking the ‘page’ button right above the blog title on homepage.

 

2. Self-directed learning &interpretation of lecture content

Particularly, I found lectures ‘HTML & CSS and how it works’ and ‘Social Media – more than gossip’ are inspirational and useful through my practice. Like what has shown on the additional page to my blog, now I can follow the instruction on w3schools.com to make a simple webpage by using HTML and CSS codes. Also I ware more about the potential impact of social network on building my personal image and life in reality, so I did some management to the ‘information of me’ section—- not just for Tumblr, but also Facebook and Twitter—- rather than just leave it as it is.

 

3. Traffic

As shown on my Dashboard, currently I have 4 followers and I am following 14 blogs on Tumblr.

Posts titled ‘Love Never Dies’ gets 7 users like and 4 users reblogged; 

‘A Quote on Scenography’ gets 1 user likes and 2 users reblogged;

‘Photos of Scenes in “Nixon in China” (2011)’) gets 3 users like and 2 users reblogged;

Post on FEB. 21 2013 gets 1 user likes and 2 users reblogged;

'Matilda: The Musical' gets 1 user likes and 2 users reblogged.

 

4. Integration with social media

I embedded a Twitter widget into my blog and connected it my Facebook account, so friends would see my Tumblr updates from my Twitter and Facebook timelines. Hopefully this would also help the traffic on my social networks.

 

5. Source acknowledgment

I acknowledged my source in posts by  whether posting reference or link in caption area, like 

image

or setting the source a click-through-link, such as

 

Finally, my chioce of three my posts for marking are:

1. Love Never Dies (May 1 2013)

http://beccainatrap.tumblr.com/post/49376266300/love-never-dies-musical-2010

2. Photos of scenes in ‘Nixon in China’ (2011) (APR. 11 2013)

http://beccainatrap.tumblr.com/post/47754083505/photos-of-scenes-in-nixon-in-china-2011

3. A Quote on Sceneography (FEB. 21 2013)

http://beccainatrap.tumblr.com/post/43690266200/a-quote-on-scenography

santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 
santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 
santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 
santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 
santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 
santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 
santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 
santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 

santiagocaruso:

Santiago Caruso ´s series: “Empty spaces full of Sorrow” 

(via theonlymagicleftisart)

kubo135works:


『Instant galaxy』
(illustration by Isako Kubo)

kubo135works:

『Instant galaxy』

(illustration by Isako Kubo)

(via theonlymagicleftisart)

zombienormal:

Lyrical Explosion No. 12, Alberto Magnelli (1888-1971), 1918. (Magnelli Collection, Meudon, France)

Via.

(via klappersacks)

"Scenery, action, and characters have merged into a metaphor which screams that life is a grotesque trial."

—-William Brasmer

— A quote from Scene Design and the American Theatre (2009) by Anne Fletcher

The House of Bernarda Alba (2005)

Lighting designed by Jacqueline Reid

I Am My Own Wife Highlights

I have seen this version (starring Robert Jarman) in Street Theatre, Canberra, Australia before. The set and lighting were impressive. They worked very well with the performance.

Matilda: The Musical (recieved 12 nominations for 2013 Tony Awards)
Director: Matthew Warchus
Set &amp; Costume Design: Rob Howell
Lighting Design: Hugh Vanstone
Illusion: Paul Kieve
website:http://www.matildathemusical.com/ Matilda: The Musical (recieved 12 nominations for 2013 Tony Awards)
Director: Matthew Warchus
Set &amp; Costume Design: Rob Howell
Lighting Design: Hugh Vanstone
Illusion: Paul Kieve
website:http://www.matildathemusical.com/ Matilda: The Musical (recieved 12 nominations for 2013 Tony Awards)
Director: Matthew Warchus
Set &amp; Costume Design: Rob Howell
Lighting Design: Hugh Vanstone
Illusion: Paul Kieve
website:http://www.matildathemusical.com/ Matilda: The Musical (recieved 12 nominations for 2013 Tony Awards)
Director: Matthew Warchus
Set &amp; Costume Design: Rob Howell
Lighting Design: Hugh Vanstone
Illusion: Paul Kieve
website:http://www.matildathemusical.com/ Matilda: The Musical (recieved 12 nominations for 2013 Tony Awards)
Director: Matthew Warchus
Set &amp; Costume Design: Rob Howell
Lighting Design: Hugh Vanstone
Illusion: Paul Kieve
website:http://www.matildathemusical.com/

Matilda: The Musical (recieved 12 nominations for 2013 Tony Awards)

Director: Matthew Warchus

Set & Costume Design: Rob Howell

Lighting Design: Hugh Vanstone

Illusion: Paul Kieve

website:http://www.matildathemusical.com/