lotion on face

Posted by lan
at February 10, 2008 | comments: 0 |

to: all my fellow classmates

due to fever, i was absent yesterday.

please give me some feedback on my html and grid layout

also please check out the video demonstrated by a pretty chick, my roommate.

please update me what happened in the class!!!!

thank you…..

grid layout

, ,
Uncategorized

Brief: Tutorial#2 - HTML+Layout

Posted by Mushon
at February 7, 2008 | comments: 0 |

Now that we have made our initial introduction to Blueprint CSS I would like you to start using the grid to build your webpage’s layout. That, not before you design the page in photoshop.

For next week:

  1. Try to imagine your tutorial as a part of a larger site. Where would that tutorial be published? It’s up to you. You will design this page in context and so, the design should be convincing as a part of a larger site, including navigation bar, and links to the other pages of this site and maybe even outside it (partner banners / ads / endorsements…). This will be the only page of that site we will design, but try to imagine more than only the page itself so it would seem convincing as a part of a larger context.
  2. Design your page as a Photoshop composition and upload it to the blog as an image.
  3. When your design is ready convert it into HTML and CSS using Blueprint.
  4. Add new html elements for the site context you will be designing and feel free to make the adjustments needed to your previous HTML file to fit your new layout.
  5. Use new HTML elements ids and classes to style your page, use Firebug to monitor the html and css and to learn how would your tweaking of the code modify the browser rendering of the page.
  6. You should work only on the layout, you need not yet work on the typography, images and styling, we will do that next week. As far as the layout goes, it does not have to be very sophisticated, but try to make sure you’re teaching yourself new things while you’re at it.
  7. Post your questions and references to the blog, we would try to work together finding ways around problems and tricks to solve them. Use the instructions on the How-To page to post code examples in your posts.

Next week we will enjoy a Great, Wide Open presentation by Cyrus Chan.

Enjoy.

, , ,
Assignment#1:Tutorial, brief

Grids are good, Blueprint CSS even better…

Posted by Mushon
at February 7, 2008 | comments: 0 |

You hear a lot about the grid in your print classes, well, you’ll hear a lot about it in this class too. But this time you would actually get to experiment with it as well. First, let’s go through the Grids Are Good presentation by Khoi Vign from NYtimes.com and Subtractions.com fame.

After getting your hands dirty in html, it is time to dive into CSS. Luckily we are not starting from scratch and a lot of the heavy lifting will be taken care of for us by BluePrint CSS - a Cascading Style Sheets framework. What does Blueprint gives us?

What do you need to do?

  1. Download BluePrint CSS 0.6 from it’s Google Code page
  2. Unzip it into the directory where your HTML file is
  3. Open the css files in your favorite text editor
  4. Follow the instructions and documentations inside the CSS files
  5. Choose how many columns and width you want in your grid
  6. Build your grid using the Grid Generator
  7. Replace the code on your grid.css with the one provided to you through the generator
  8. Go back to your html file and include a link reference to the CSS files in the header (check the documentations if you’re not sure how to do it)
  9. Start assigning classes to your html elements, adding divs and other elements appropriately to group them together and develop your layout.
  10. Create another CSS file to include your own css, make sure it is the last to be linked to thehtml page so it overwrites the default Blueprint styles.
  11. Write your CSS in that file and use firebug to monitor your changes
  12. Enjoy
, , ,
class-notes, css