Wondering Wandering Webweaver: October 2011

Wednesday, October 26, 2011

Oh no! Cross browser problem.

I was going along happily working on 3rd web page and things are looking pretty good - till I noticed tonight that my page that looked so good in Safari has a couple of the bottom info boxes all 'out of alignment' and looking wonky in Opera and Firefox. Angela was sooo kind to help me load that up on my Mac today. Started Google searching and found there is a code validator that supposedly checks on potential problems? Splash and lotus shoes did not present any red flags....hmmmm....so what could be the problem?

Here's link to what was validated.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.palosverdes.com%2Froseannah%2Fred%2Flotus_shoe.html&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

Need to check on 3rd page to see if that code checks out. It does, but I believe I'm still having problems with how it looks in Firefox.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.palosverdes.com%2Froseannah%2Fred%2FThe_Red_Shoe.html&profile=css21&usermedium=all&warning=1&vextwarning= or http://jigsaw.w3.org/css-validator/check/referer (for HTML/XML document only)

Friday, October 21, 2011

This will be 1st page after splash/home page. After Prof Angela's input - I'm trying to limit the written info to key points and give web visitor links for pursuing more details. The photo will link to page to include other photos.

I think I like this version better the warm/cool colors seem more dynamic. I will start laying out my boxes. Finally! NO more roughs.

Thursday, October 20, 2011

Red - More Shoe Lore roughs

Prof Angela viewed this rough yesterday and did not seem too pleased. Seems like it reads too much like print vs web where we need to capture viewer's attention quickly. What! They don't like to read this most interesting material??? The vertical bars is ok. Maybe bigger 'Lotus Shoes' header.

I think the bigger font size which matches the splash page looks more interesting. I added the red h1 and worked with the leading in the body type per Angela's suggestion. Is it back to the drawing board to make yet another rough?? I NEED to start making my container boxes...

Wednesday, October 19, 2011

Boxes - Absolute & Fixed Re-do

<!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>absoluteBox</title>
<style type="text/css">
<!--
.bigBox 
{
 background-color: #FFFF99;
 height: 600px;
 width: 600px;
 left: 50px;
 top: 50px;
 position: absolute;
}

.middleBox
 {
 background-color: #FF9933;
 height: 400px;
 width: 400px;
 position: absolute;
 top: 100px;
 left: 100px;
}

.smBox 
{
 background-color: #CC0000;
 height: 50px;
 width: 50px;
 top: 160px;
 position: absolute;
 left: 160px;
}

.bigBox2
 {
 background-color: #FF3333;
 height: 600px;
 width: 600px;
 position: fixed;
 margin-left: 1000px;
 margin-top: 50px;
}

.middleBox2 
{
 position: fixed;
 height: 400px;
 width: 400px;
 background-color: #FFFF66;
 left: 1100px;
 top: 150px;
}

.smBox2
 {
 position: fixed;
 height: 50px;
 width: 50px;
 background-color: #FF9900;
 top: 300px;
 left: 1250px;
}
-->

</style>
</head>

<body>


<div class="bigBox2"></div>
<div class="middleBox2"></div>
<div class="smBox2"></div>

<!--need to select from code and move to inside big box div class to be in the box-->


<div class="bigBox">
<div class="middleBox">
<div class="smBox"></div>
</div>
</div>
</body>
</html>

Monday, October 17, 2011

Wireframe & Site Architecture

The green marker outlines the wireframe and the blue marker indicates six information architecture layouts. Refer to write up with more specifics for info architecture in earlier post.

Tuesday, October 11, 2011

Red - Shoe Lore roughs

This rough for my 'splash' home page is 'boring' says Angela. She also said each word or so would need it's own box to enable client to change things around more easily.

This rough for 'splash' home page met with more approval from Angela & I was able to work out the header and tagline in Dreamweaver. The header 'ShoeLore' along with the strip behind it was worked in psd and saved as png to allow for transparent area behind strip (Yea! Now, how to work out the menu (do as links?? rollovers??)

Websites - may consider for inspiration

http://www.hopeunlimited.org/fiveforten.html

I like the simplicity of this home page. Simple layout - the menu bar - scrolls horizontally. The place holder for the web pages has consistent jagged edges look.

The above website is recognized for it's design. Great use of colors. KISS!

http://www.hail-stone.co.uk/

Check out the above link for some cool (flash?) - she has links to other 'good' websites.

Red website: info architecture

Shoe Lore - tagline: Oh, the tales shoes can tell

Goal: Inform re: shoes and the cultural ramifications from three different time periods and includes three cultures. Beauty & it's requirements of women through the ages seems to run through history. Red is color - because it incorporates ideas of pain, blood, sexuality, lust, desire

Present info in simple, well-designed pages which show consistent elements throughout. Learn how to use CSS boxes to include elements for pages.

Audience: students in web design class; general public

Content & Functionality (May omit one of the pages)

Home/ splash page - with keywords from articles eg pain, foot binding, disability, hammer toe, bunions, foot restructuring, 1000 years, sexy, lust

OR plain white bkgnd with image of blood splats/drops with "Shoe Lore" and tagline and text for linking to 3-4 other pages:

Bound feet/ Lotus shoes - China: who, why, when tiny 3-4" shoes worn.

⁃ Thumbnail - roll over/link for larger image of woman with bound feet wearing shoes & another of lotus shoes. Might include image of damage done to foot from foot binding.

⁃ Links to articles of how feet were bound; women who have tiny disabled feet.

The Red Shoes - Hans Christian Andersen (who, why, when - significance of these Red Shoes for the period)

⁃ Thumbnail - roll over/link for larger image(s) of woman with red shoes, possibly dancing; http://andrewfinnie.blogspot.com/2011/06/swept-away.html (did illustrations for tale of feet being amputated off the little girl - yikes!)

⁃ Links to articles/site ; link to the fairy tale.

Christian Louboutin red soles high heels eg $900!! Eek. Who, what, why - cultural significance of these high-end shoes - contemporary period

⁃ Thumbnail - roll over for larger image signature red soled high heels. Include image of woman wearing his high heels

⁃ Links to articles /infoof how feet are negatively impacted eg from podiatrist viewpoint. Link to women who wear his shoes & their comments eg yahoo site. Link to article about negative impact on health from wearing high heels... Link to USA article on not recommended footwear.

Dorothy in Wizard of Oz's ruby red slippers: who, when, why - it was worn.

• Thumbnail - roll over for larger image of ruby red slippers. Might include image of Dorothy wearing ruby red slippers.

• Links to articles/info about significance of ruby red slippers.

Saturday, October 8, 2011

Two boxes with text & image

Making the boxes to specifications is sort of fun, especially when it works. Little pieces are starting to fall into place.

http://www.palosverdes.com/roseannah/red/boxTypePic.html

Try clicking on above link to see if it takes you to my website to view.

Friday, October 7, 2011

Link for Top 10 Web-hosting sites

http://webhostinggeeks.com/

Wednesday, October 5, 2011

Got permission to use illustrations from digital artist Andrew Finnie!

I was SOOO excited to get a response from digital artist Andrew Finnie who hails from Australia! For my red - "Shoe Lore" website he did wonderful illustrations for "The Red Shoes." Gruesome fairy tale from Hans Christian Anderson.

Refer to his 'permission' via comment he made on my blog posted Sept 29 "These Boxes Are Pretty..."
http://andrewfinnie.blogspot.com/2011/06/swept-away.html?showComment=1317847086789#c2494484357967481653

Wondering Wandering Webweaver