Wednesday, September 28, 2011

Fixed and Absolute Boxes



Below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Boxes</title>
<style type="text/css">
.bigBox {
background-color: #330;
height: 600px;
width: 600px;
position: fixed;
left: 50px;
top: 50px;
}
.mediumBox {
background-color: #069;
height: 400px;
width: 400px;
position: fixed;
left: 150px;
top: 150px;
}
.bigBoxAbsolute {
height: 600px;
width: 600px;
position: absolute;
left: 50px;
top: 750px;
background-color: #300;
}
.smallBoxAbsolute {
background-color: #069;
height: 200px;
width: 200px;
position: absolute;
margin: 100px;
}
.smallBox {
background-color: #0F0;
height: 200px;
width: 200px;
position: fixed;
left: 250px;
top: 250px;
}
.mediumBoxAbsolute {
background-color: #930;
height: 400px;
width: 400px;
position: absolute;
margin: 100px;
}
</style>
</head>

<body>
<div class="bigBox"></div>
<!--fixed big box class-->
<div class="mediumBox"></div>
<!--fixed medium box class-->
<div class="smallBox"></div>
<!--fixed small box class-->

<div class="bigBoxAbsolute">
<!--absolute big box class-->
<div class="mediumBoxAbsolute">
        <!--absolute medium box class - nested within big box-->
<div class="smallBoxAbsolute"></div>
                <!--absolute small box class - nested within medium box-->
</div>
</div>
</body>
</html>

Tuesday, September 20, 2011

Monday, September 19, 2011

Alternative Website Architecture

http://inserviowebsolutions.co.uk/

In my search for an alternative website architecture I came across this site.  The menu bars are up in the clouds.  While, this architecture is unique, its also remains organized and easily identifiable.

Thursday, September 15, 2011

Green Idea for Website

                I chose the color green because of its association with nature.  This is the area where I will put my focus, but after doing research, I’ve decided I will include some periphery information as well regarding how green’s association with nature has affected other entities, such as religion, culture, and nationality.  I will attempt to bring out the characteristics of nature through my design.  I will likely use more darker greens, such as forest green, along with some lighter greens, browns, and yellows and possibly blues, as these reflect colors often found in nature.  My choice of fonts will likely be organic and flowing, most likely a script, as opposed to stiff and boxy, such as arial.  I will attempt to organize my pages around something found in nature – possibly a tree.  The images I incorporate will largely be of trees and plants; I may include some animals and possibly a picture or two of those peripheral ideas – religion, culture, and nationality.  Nature is definitely the theme here and I will do my best to bring that out in my design.

Green Research

Green is not a primary color.  It is often considered one of the additive primary colors.  It is a mixture of yellow and blue.  On the RGB color wheel the complement of green is magenta, which is an equal mixture of red and blue.  In traditional color theory its complement would be red.
                Green is closely related to the Old English verb “growan” meaning to grow.  Many language families, such as Germanic, Romance, Slavic and Greek, have old terms for green, which are derived from the words for fresh, sprouting vegetation.  In this way, green often represents nature.  Green can also refer to someone who is inexperienced, jealous, or sick.  Also, someone who works well with plants is said to have a green thumb.  In areas where the U.S. Dollar is used as currency, green carries a connotation of money, wealth, and capitalism because green is the color of U.S. banknotes.  Thus, green can also be used as a slang term for money. 
                Green is seen in nature in many ways.  Several minerals are green color.  Animals such as many amphibians and reptiles, as well some fish, insects, and birds are green in color.  Most animals appear green because of a reflection of blue light coming through and over-layer of yellow pigment.  But the largest of nature’s green color comes from its plants.  This is due to chlorophyll, the chemical used by plants in photosynthesis.  Chlorophyll does not absorb green light because it first arose in organisms living in oceans where purple halobacteria were already exploiting photosynthesis.  Thus, chlorophyll arose to exploit the portions of the spectrum not used by halobacteria.  Through evolution many animals have adapted a green color to camouflage themselves within their environments.  Interestingly, we human have imitated this color adaption by wearing green clothing as a camouflage in military and other fields.
                Culturally, green can have varied and sometimes contradictory meanings.  In some cultures, green symbolizes hope and growth, while in others it is associated with death, sickness, envy, or the devil.  Stories of the medieval period portray it as representing love and the base, natural desires of man.  Green is also known to have signified witchcraft, devilry and evil for its association with faeries and spirits of early English folklore.  It was also associated with decay and toxicity.  Most commonly though, green is associated with nature.  Islam, for example, venerates the color because it expects paradise to be full of lush greenery.  Green is also associated with regeneration, fertility, and rebirth due to its connection with nature.  In Ancient Egypt green was symbolic of resurrection and immortality – the god Osiris was depicted as green-skinned.  Political and advocacy groups today have adopted this color as part of who they are – sometimes, directly in the name.  The green movement, the Green Party, and the Global Green Network are examples of this.  Environmentally friendly products are considered to be “green”.
                Several countries use green on their flags for symbolic or cultural reasons.  Several African countries use green on their flags because they borrowed it from the Ethiopian flag, which is one of the oldest independent African nations.  Many flags in the Islamic world are green because it is considered sacred in Islam.  In the run-up to Iran’s 2009 presidential election, the reformist candidate Mir-Hossein Mousavi chose green as his campaign color – it became pervasive amongst his supporters during the campaign and was often seen being used symbolically in the post-election protests.  In India, green is the lowest of the three color bands and stands for fertility and prosperity.  Earlier Indian flags also contained a green band representing Islam, the second-most predominant religion in India. In Jamaica, green is used in its flag to represent the country’s lush vegetation.  Green is a symbol of Ireland, which is often referred to as the “Emerald Isle”.
                Green is a part of many religions and religious ceremonies.  Green is considered a traditional color of Islam.  Muhammad is quoted in a hadith as saying that “water, greenery, and a beautiful face” were three universally good things.  In the Qur’an, sura Al-Insan, believers in God in Paradise wear fine green silk.  Also, Al-Khidr – “The Green One” – is a Qur’anic figure who met and traveled with Moses.  Roman Catholic and more traditional Protestant clergy wear green vestments at liturgical celebrations during Ordinary Time.  In the Eastern Catholic Church, green is the color of Pentecost.  Green is one the Christmas colors as well, possibly dating back to pre-Christian times, when evergreens were worshipped for their ability to maintain their color through the winter season.  In Ireland and Scotland, green is used to represent Catholics.

Tuesday, September 13, 2011

3 Page Haiku - Updated

I made subtle changes to this updated version.  The point sizes and top margins all match to give the viewer the look of a consistent first line as they click through each page.  I also lowered the word "falling" on the first page.  The final change I made was to make the period after the word "sink" a light pink color.  I had originally intended to make it white, but it was too bright and distracted from the rest of the page.  I did this to add some finality to the haiku.

Monday, September 12, 2011

3 Page Haiku

I took a different approach when designing these pages in comparison to my first Haiku page.  The light blue here is meant to represent the sky and the green is the color of the petal.  I subscripted the word "falling".  I also made it bigger and bold because I wanted to emphasize the idea of the falling petal.  Spaces were added between "A" and "falling" and "falling" and "petal" in order to balance the positive and negative space.  The word "falling" is also the link to next page.

On this page the blue gets darker.  This is surface color of the pond.  I left the green the same because the color of the petal remains the same.  "Strikes" has a strikethrough and "floating" is superscripted.  "Strikes" contains hyperlink to the next page here. 

On this last page, the blue gets even darker.  This is now deeper in the pond where less light shines through.  Again, the green remains the same.  The word "sink" is by itself lower on the page meant to represent both the sinking of the petal and the quite solitude of the deep.  Spaces were added between "And" and "they", as well as, "they" and "both" so that the page would be filled and the positive and negative space would be in balance.  On this page the hyperlink is on the period at the end.  This is where both the haiku and the petals' journey ends.

Haiku - Updated

This page is largely like my original Haiku page below.  The only major change was that I made the word "sink" scroll down the page to the give appearance of "sinking".  I also cleaned up the code quite a bit.  I ordered my tags so the code was easier to follow.  I changed the letter height from the "1-7" computer code to point size.  I added the <head> tag.  I removed extraneous <pre> tags from my code.  I also added comments throughout.  The main idea behind this page is that the petals are falling, so my design has the words falling on the page.  The first two lines of the haiku represent the petals floating to the pond and the horizontal line is meant to represent the water line.  After that, both petals just "sink" in the water.

Wednesday, September 7, 2011

Haiku


This assignment was far more difficult than I thought it would be.  Using html to design a web page is difficult at best.  Aligning the text the way I wanted it was very difficult - perhaps there was an easier way than using the <pre> tag, but I couldn't figure it out.  This assignment, did however, help to give me a very basic understanding of the way html works.