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...