My CSS ZEN GARDEN

Here is a link to my CSS Zen Garden. I have decided to change my design as a whole. Though it is not completely elastic I am happy with the final results. My approach is to create a site that is purely black and white design. I wanted a show a few type treatments to create a unique approach. The concept is to show a large cartoon comment box in which the whole site is contained. At the bottom is a rabbit character that I have created to present the site. I really enjoyed getting creatice in making the cartoon comment box in CSS3. The triangle at the bottom was created with a border that is enlarged and colorized to create a triangle. Below is a link to my site.

CSS ZEN Garden by Steve Chen

Reflecting on CSS Zen Garden

What I envision with my CSS Zen Garden page is that it will be be of a large blimp . Within the blimp will hold the content of the page. Like in real life blimps have advertisement messages that scroll from left to right or up and down. My page will have content that will be scrollable from left to right within the large blimp. The idea is to present the zen garden content in a unique way, without loosing the purpose. The page will be easy to navigate and will capture my audience's interest. The colors and design layout that i use will be appealing and effective in presenting my idea.

Portfolio Update

Here is an update to my portfolio website. I have changed the layout all together. The idea was to keep all content on one page. In addition to keep it simple and effective for showcasing my work. I have used anchors to connect each content of the page. In addition, the footer leads back to any content of the page. I have also used visual lightbox to showcase my works. Lastly I have made the site elastic so that it can be viewed within any browser size. Here is a link to my website portfolio

CSS Zen Garden Wire frame

Here is an idea of my wire frame for CSS Zen Garden. The will be a blimp made of css content will be within the blimp.The content will be contained and will side scroll. This will be consistent with what you will see blimp advertisements. If all goes well this will also be animated and will float. This idea was inspired by the CSS Fail Whale.

Article from Subside: Pure CSS Twitter Fail Whale

Today I heard from a classmate that you could render and illustrate purely in CSS...after a quick google search I found this and was blown away... The article mentions about how it was created by utilizing CSS curves and radius. In addition, by masking with containers. To make things even more "Juicy" if you’re using (Safari or Chrome), you will see it in it's full glory animation. I feel this embellishes the idea of graceful degradation. Below is a link to the article.



Pure CSS Twitter Fail Whale (open in safari or chrome to see what happens)

Smashing Magazine Tutorial HTML Cinco...

Smashinmagazine: "CODING A HTML5 LAYOUT FROM SCRATCH"
I really enjoyed this tutorial about HTML5. The "aside" tag in this tutorial really embellishes the design layout. The tutorial refers to this as the featured block. Overall I like the design of this page. His use of rounded edge boxes and color choices work well and is easy on the eye. The design is contemporary and appealing. In addition, the drop shadow effect is a nice touch. My only trouble with this tutorial is that it was quite long. However, it was good practice and the final result was rewarding. Below is the link to the tutorial.

CODING A HTML5 LAYOUT FROM SCRATCH by Enrique Ramirez

Week 7 reading

How the Web Wins by Evan Hansen

Due to my lack of experience with apps as my phone is not "smart" enough my opinions for this article holds little to no credibility.If I may say this article left me frustrated as I was hoping to learn more information about HTML5 and other new features in comparison to apps. In addition, with my little experience with apps I recall it as mostly shortcut link to websites. So, I'm stating that there can't be apps without the web as the writer is implying the battle between Webb and Apps.However, I do agree with the writer stating that with the new capabilities of the internet will pave way for more advertising. We new features like video, audio, slide shows and animated data..Advertisers have more options for targeting audience. In addition, the web makes it much more easir to track and record audience data. Below I have added links to the website. Lastly, I wish the author could elaborated more on how the web will be changing.

http://www.wired.com/epicenter/2010/08/how-the-web-wins/#ixzz0xVaWJPWM

Indestructible Boxes

Here is an example of indestructible boxes. The box is created by using two round edge boxes. The purpose of the indestructible boxes is to constrain the text within the box during size changes.I have included a screen shot of how the code looks like.

Inspirational References

As an aspiring web designer with a graphic background. I get most inspired by others. I find it refreshing to see vector art. A vector artist I would recommend is Jared Nickerson. He is known for his out of this world patterns and designs. Check his work out. I like his use of thick strokes and color choices.Though his website is currently under construction below I have included his a link to his online Behence portfolio.

j3concept @ BEHENCE

Another thing that gets me going in design is typography. Typography is also a key component in design as it communicates to the audience directly and visually. The website below has some unique fonts that I find appealing and inspirational. Good new is some of these fonts are free. So feel free to check this site out as well.

fontfabric.com/

Creating Dreamwaver Templates

Created template page


DTW (Dreamweaver Web Template).Dreamweaver Web Templates, allows users to share the same web design and layout. On the other hand, you can make some regions in a template available for editing while preventing changes to other regions. This means that you can allow others to add and edit content, and still preserve the layout of the pages and the template itself.

The links below are two examples for website templates. The first template layout is taken from http://www.chicagolshirts.com/. Templates help with speeding up the process of creating and updating a website. Some business utilize templates to make the process of updating their website simpler and faster. The second template I have included is an example of preinstalled templates that are included in dreamweaver.

To create a template you must first choose "save page as" under the file menu in the internet browser. In addition, make sure you save the complete page. This may include style sheets, images, and any other content that was used to create the page. The next step is to open your saved web page in Dreamweaver and save as a template. This process will convert the page into a template in which you will be able to assign your assets. The assets are what you will be able to edit. Furthermore, you are able to assign images as assets. In the example below is I have assigned the text and images as assets.

Monkey Magic temp site 1

Monkey Magic temp site 2

It's In The Box...

The box model is a representation of elements in the documents tree and is laid out according to the visual formatting model. The perimeter of each of the four areas are also known as content, padding, border, and margin.

Box Model Formula
Total width = left margin + left border + left padding + width +
right padding + right border + right margin

Total height = top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

Converting Tables to Divs

This was our homework assignment. I found this assignment quite informative and useful. To create this page I used 4 divs and allocated them as header,content,navigation,and footer. All four divs are colored green to keep a consistent color scheme. Below is my html code with the embedded CSS...

Homework Site Concept

Here is a concept of my Homework Site utilizing the selected color scheme.This is to help give a basic idea on how the color, typeface, and layout will be applied.

Color Concept

Color Concept
Here are the 3 selected colors for my website.
Included are Hexadecimals and the Pantone equivalents.

Flexible Text Using Ems

The em is a sliding measure; one em is proportionally the same as a point size. One em is equal distance to that of the type size. If the type is at 6pt, then the em is also at 6 points; in 12pt type an em is 12 points and in 60pt type an em is 60 points.

Em based method offers an alternative to sizing text using em units. Ems allows designers the advantage for more precision and control. In addition, they offer familiarity for designers who are use to thinking in pixels.

In addition, Em based method also makes the text easier to work with. A good example from the book is when you take the default text size of 16px to 10px. This is turn makes is easier to round off and compensate for the rest of the text. Below is an example of how the em method can be applied.

body { font-size: 62.5% } /* gives us a base of 10px */

h1 { font-size: 2em; } /* 20px */

h2 { font-size: 1.8em; } /* 18px */

p { font-size: 1.2em; } /* 12px */

HW Timeline MM2203

Week 1

Research interesting ideas for your homework page and sketch two examples. Must be paper and pencil. Scan image then use Photoshop to block out content via grids. Print this version and, again using pencil, note navigation, technology, purpose, etc. on this image. Scan and upload to blog. Email me the url.

Create a timeline and/or schedule for your homework assignments and post to your blog.

Week 2

Create a tutorial page on the Box Model. Be sure that a newbie would be able to understand the difference between content, padding, margin, and border areas. Post to blog. Due week 4.

Color practice: on this same blog, list 3 pantone colors and their RGB equivalent. Should relate to your layout. Due beginning class next week.

Read Chapter 1 of Bulletproof Web Design and create the same stylesheet using Ems (page 22). Link on your blog. Due beginning class next week.

Week 3

Converting tables to divs - separating content from style. Deconstructing a page: Take this web page and reconstruct it using an embedded style sheet. You don't have to use all content, but enough to show your work. Your guidelines will be chapter 3 of the book called "Expandable Rows". As a goal, try to use as few div's as possible. Discuss on your blog and provide a link to the finished page. [Note: embed your .css on the page. Do not link as an external stylesheet. I want to see your work displayed with the .xhtml.]

Week 4

Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.

Extra credit: Write one style that combines selectors (compound selector) to save code. Post to blog.

Write in your blogs your best advice for getting creative.

Week 5

Read chapters 5 and 6 of the book and create a page using elements of both. Use can use CSS3 to create your rounded corners but make sure your layout uses "Indestructible Boxes" and can pass the 10-second usability test. This is your [take home midterm] and is due beginning of next class.

Week 6

Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source. This is due week 8 at the beginning of class.

Week 7

Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective. This blog (as opposed to the lab above that is due today) is due by beginning of next class.

Week 8

Create wireframe of final project and post to blog.

Week 9

Work on final project. Blog how you are creating your project to stand out from all the other submissions. Reflect on how you might use the allowed .css code to give a different look to your page. How can you incorporate what you've learned from Bulletproof Web Design?

Week 10

Work on project. Create a blog posting that is a sample of a possible process page for your final project. Include screenshots and images. How would you present to potential employers to demonstrate your knowledge? Email me once you have blogged.

Week 11

Formal presentation and critique of Student Projects.

HW Site Sketch 2

In this second design, I have created four small square buttons that will also serve as my main navigation. These button will link to various sites such as Sketch,Homework,Portfolio, and Zen Garden. Each button will showcase a preview of content below in the large rectangular box upon rollover.

HW Site Sketch 1

In this first design, I have created four rectangular thumbnails that will also serve as my main navigation. These thumbnails will link to various sites such as Sketch,Homework,Portfolio, and Zen Garden. Each thumbnail will showcase a preview of content upon rollover.

Today is the first day!!!

Hello...people!!!! Wanna check out some CHARMING SHOPS!!!