Culmination

Leave a comment

Lesson 6 is the final lesson of XHTML and CSS Essentials. Each lesson has built upon the information and skill set of the one before and this one brings it all together.

In lesson 6 I learned about building forms in XHTML as well as some neat tricks with CSS.

The final assignment required me to build a 5-7 page site with a functional navigational system, based upon the coding/positioning/css styling I had just learned about. One of the pages is to be a form, using checkboxes, text input and a submit button.

The exercise required me to plan my site. Define what each page was to be about and how they would all link together. I was to use my own content and structure it to be consistently displayed on each page. Gasp…so not only was I to write the coding for the pages by hand, I was also to fill in the content. This was to say the least, an extremely time consuming exercise. Although that said, there’s a great deal of satisfaction to be found when I validated each of my hand coded pages and was able to add the icon indicating they validated on each one.

Please have a go through the pages and let me know what you think.

Advertisements

Fireworks, positioning and other annoyances

1 Comment

In lesson 5 I learned about relative and absolute positioning. Having a pretty decent grasp on my vocabulary I know that the meaning of relative is a thing is positioned relative, that is, in relation to, something else. So if the something else moves, the thing positioned relative to it also moves…

Yeah… exactly…

*sigh*

It was very long week.

Here are the two pages produced to share my knowledge of positioning.

2column.html

fireworks.html
’nuff said.

EDIT: The original pages did not pass. That’ll teach me not to validate my code. They are now corrected and validated and the exercise received a mark of 99% on the resubmit.

Positioning is … yeah… going to be a sticking point for me I can see. Need to figure out some way to keep them straight in my head.

Third trip to tangent land

2 Comments

In the third and final lesson in the Color Theory course my assignment was to create a travel poster for a destination.  We were to use text and color to convey the destination with the name of the country/place or event displayed.

I was  torn between Ireland and Africa and wanting to try to do this as a serious advert or a tongue in cheek cliched version.

As you can see Africa and the cliche won out 😉

I’ve always loved gradients in colors and rainbows and the starkness of the black silhouettes of the tree and lion against it are immediately AFRICA for me. This is due in no part to the movie and muscial The Lion King which I’ve seen on Broadway.  Seeing a play/musical on Broadway was a lifelong dream of mine and seeing The Lion King made it all that more a special memory.   It was a wonderful glimpse into the world of theatre and the play itself is an experience unto itself as  it was intended to be.  But these color combos are just hard to escape after that.  I am aware that Africa is a dichotomy of color, bright cheerful hues set against the browns and muted greens and pure black of night, black.  This is what I was hoping to convey.

I have a feeling that I might end up reworking this one after looking at some of the other student submissions but for now  here is my travel poster for Destination Africa.

Edited to add:

Well, as expected, the mark received by this submission was, while being a respectable pass, not quite what I was looking forward to.  After a consultation with my instructor, including some very helpful advice and suggestions, here is my second attempt:

Try, try again

Since she mentioned that my color scheme was strong I chose to repeat it.  Her suggestion that using a cliched and rather dated looking poster as part of my portfolio was (and these are my words not hers ;)) akin to shooting myself in the foot I decided to go with a more interesting font and leave the photoshop text effects out of the picture.  To me, lions are synonymous with Africa although it’s difficult to find African artifacts featuring lions in my experience.  Much easier to find are elephants and giraffes.  I had thought about flipping the lion head the other way and moving it to the north eastern corner, having an elephant with a raised trunk where the lion head currently is and a giraffe down the southern portion but felt that might be heading towards overkill.

The font is Lemon Day by Billy Argel.

As always, comments welcomed.

2nd EDIT:
Attempt #3 My instructor didn’t give a mark on the second one, but she did make a few more suggestions on how to better balance the page. Because I’d merged my layers on my original .psd file, I had to redo it from scratch. All I can say is Yay for color picker ;). By bringing up the original jpg I was able to sample the colors to used them again. I stayed with the same font and because I really liked the way the lion head looked on the map I stuck with those as well. A bit of poetic license with losing the island, some centering of text and image, a reworking of the waterpaper effect on the background and a resize of the map leads me to my third and final attempt:

I’ve already received a final mark on this course. I do hope that it can be adjusted should this submission receive a better mark than the original one.

Back to CSS

1 Comment

In lesson 4 I’ve been delving into CSS and the effects of it on the page.  By breaking the style away from the format of the page a lot of freedom of expression is established.

I played (and played) with this page, adding elements and bells and whistles and flashing lights and yeah… I got over it, and did something that was more in keeping with the tone of the content, but holy smokes was it exciting to fiddle with CSS.

http://www.lionking.org/~tru/exercise4.html

The second part of the assignment was to provide examples of box use on pages I frequent and recreate them.

Sigh…

most all of the pages I found that incorporated boxes were very complicated in the coding and I found it difficult to extract.   So I made my own:

http://www.lionking.org/~tru/box.html

I really enjoyed researching the rounded corners and the drop shadow effects and was very happy to be able to apply the research to this page.

These two submissions have not been graded yet, but when they are, the mark will be in the comments.

Same side trip, second lesson

1 Comment

So for the second lesson the focus of the study was color intensity.  I learned how colors interact with each other in our vision and how surrounding the same color with various other colors we can change how that color appears even though it remains the same color throughout.

I’ve always loved optical illusions so studying the hows and whys of it wasn’t a hardship.

The exercise for this was in two parts; the first required that I chose a famous piece of art and identify the light and dark color intensities within it, transfer them to a layer in photoshop and create an abstract study of the painting.

I love the two paintings, Blue Boy and Pinkie, though they are years apart in creation and style an done by two different artists.  They are so often paired together that many are under the misconception that they are both done by Thomas Gainsborough, but in fact Pinkie is by Lawrence.

After a few aborted attempts at the project using Pinkie as my subject I went looking for something a little less intensive.  I settled upon one of a surprisingly great number of self portraits by Rembrandt.  He painted himself over and over through his life and this one is by far my favorite of them.  The mysteriousness and coy smile, the light plays and in some cases sheer absence of light made it perfect for this study.

See what you think:

An abstract study of one of the many Rembrandt self portraits

Abstract Study of Rembrandt Self Portrait

For the second portion of the assignment I was to take  an ordinary object and apply the same concepts, identifying the lights and darks in their intensities.
Here is my version of an icecream cup:
An abstract study of an ice cream cup.

Abstract Ice Cream Cone

As always, comments are welcomed.

A side trip into Color Theory

1 Comment

I decided to take a break from XHTML and CSS and coding in general … or so I thought, and crack the course on Color Theory. 

In the first lesson I was introduced to the color wheel, primary colors, complementary colors and the other relationships.  Sort of an “I told two friends and they told two friends” but in colors.  🙂

It was interesting and very eye opening to realize that red and green are actually complementary to each other, who knew Christmas wasn’t harmonious but complementary … okay, little bit of reaching there for the joke but.. 🙂

Anyway, first lesson’s assignment was to create a mood board for a fictitious client.  I was to choose one color from a selection of color swatches and work up a mood board.

The first section was that color itself, with different values for tint and hue and saturation.   Interesting to see how the base color remained true as per the RGB values but ‘looked’ different surrounded or against other hues and tints.

Next section is  analogous colors,  these are the colors on either side of the chosen color on a color wheel.

Using the same approximate values for hues, tints and satuations I presented these three colors and so forth, through to complementary, split complimentary and tertiary colors.

Here is my result:

Mood board created for this assignment

My Mood Board

Please feel free to comment.

Validation Fun… yeah… fun… that’s the word

1 Comment

Lesson 3 in my XHTML & CSS Essentials deals with XHTML Standards and Troubleshooting.

It continues the concepts of XHTML being very much like HTML 4.0 only… stricter.

There are a number of tags commonly used even by prestigious and successful websites that are not XHTML compliant.

Learning about this has been interesting and informative, and it gave me a headache.

W3.org has a validator at its website that we used to check the adherance of our code to Strict or Transitional standards.  It’s a handy dandy gadget and was very enlightening when I started running other sites through it to see how compliant they are.

The code that I wrote around the provided text on this page is finally completely compliant and passed.

http://www.lionking.org/~tru/advertising.html

The website I chose to analyze with regard to its compliance to Strict adherance to XHTML 1.0 is:

http://www.hragsociety.ca

At the moment I won’t be posting my analysis, but perhaps I will after it’s been graded.

For now, I’m going to go play with the validator and practice seeing if I can ‘fix’ the errors found in my fave sites.

Older Entries