Assignment#1:Tutorial
Brief: Tutorial#2 - HTML+Layout
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:
- 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.
- Design your page as a Photoshop composition and upload it to the blog as an image.
- When your design is ready convert it into HTML and CSS using Blueprint.
- 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.
- 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.
- 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.
- 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.
My HTML Tutorial
hope this works!
Runthrough of Susanna’s Tutorial or Picture Tape making fun!
So I didn’t have many critiques of Susanna’s tutorial. It was very thorough and simple to do. The only criticism i would level at it is that my first try the colors didn’t come through very well. The second time I tried it, I made sure to press down the tape with the back of my fingernail so that it was fully adhered, and the color stuck much better that time. Other than that, very cool! Thanks Susanna.
On to the HTML version of my page. I also have a bit of HTML and CSS experience so I added a bit of formatting and color to my page. In case anyone does view source on my CSS template, it has a bunch of unused tags and formatting since I used it for a previous project. I of course modified it a bit so it would be nicer. Anyway, here’s the link: My Tutorial
Finding an Apartment in NY (Without paying a broker) Tutorial
Finding an Apartment in NY (Without paying a broker) Tutorial HTML
The above link is the html for Ryan’s tutorial. i must say this is very interesting to me as this is the first time attempting to write a html.
The tutorial is very straight-forward and trouble free. I always use google map to search for restaurants and shops. Therefore, looking for an apartment location is pretty easy for me. My selection is around tribeca and north of financial district. I went into some of the management company to see if there’s any available, some of the management people were quite friendly and some were mean. Although I’ve found a list of apartments which I want to move in. I’m happy with my current apartment and it would be a hassle to move out. I agree that paying a broker is kind of pointless. I’ve experienced using a broker when I first came to New York and it was definitely a rip off !!!!
Lasagna for a week!
I have to say, this tutorial was a lot of work, especially because I’m not a good cook, and because it was a recipe for ten people. But overall, it was a good experience. I only had a little trouble because my kitchen is tiny and so are my pans, and the quantities listed were huge.
The steps were very easy to follow and detailed on what to do. There were a few words I wasn’t sure about, but it was only because I’m not a native speaker.
Superbowl Squares Tutorial
This tutorial was really very fun and had a great description that made it easy to follow. Here are some notes on my experience.
This was a unique game of superbowl squares because it was a game with world wide participants! I played with some friends in New York, my family and friends back in Oregon and my Brother-in-law in Iraq! We filled up every square making it very exciting because every quarter there was going to be a winner!
I think to start I’m going to give you the directions for the game so throughout the rest of this post, you’ll understand what I’m talking about.
HOW TO PLAY FOOTBALL SQUARES
What you need:
-At least 3 players
-A television to watch the Superbowl
-Money or something to gamble with
-BEER (optional)
The Grid
-The grid is set up so that each square costs a certain amount of money - for the tutorial we can make it cost $1 per square (but it’s up to you and your friends if you want to change that)
-Each player buys however many squares you want and write your name in the boxes you want. If you buy 5 squares, you pay $5.
How to Play
-Pool all of your money together after everyone has bought the squares they want, and start watching the game
-After the first quarter you match whatever the score is to whatever the grid it:
For example- if the score is Giants 10, Patriots 7, then you connect the 0 that is under the Giants section with the 7 that is under the Patriots 7. Whoever’s name is in that box wins!
-After each quarter the amount of money to win gets bigger and bigger.
-The money that was collected in the beginning is divided among the quarters as follows:
Quarter 1- 10%
Quarter 2- 20%
Quarter 3- 30%
Quarter 4- 40%
Sheila did a great job of giving instructions that were very easy to follow. The only question I had during the tutorial was what happens to the money if no one bought the square for the game? However, with a little creativity and common sense, I figure that could be figured out.
All in all the game was very fun. My brother got very lucky because the score at the end of the second and third quarter remained the same, so he won 50 bucks!!!
I had a great time with this tutorial and it went off without any hitches 
lan’s anti-aging tutorial runthrough.
So I have this fun little flip book from Lan, titled: {theme} anti-aging
This tutorial isn’t as obvious to me as it might be to someone of the opposite sex, but a few “what and where” specifics would help a lot.
Page 2: how to apply lotion to face
- Sounds good, let’s go.
Page 3: {material} toner, cotton pat, eye cream, moisturizer
- I’ll venture a guess that most guys don’t have cotton pats, eye cream and toner… but their girlfriends often do (and so does mine!)
Page 4: {step one} apply toner
- I’m pretty sure this goes on my face… but how much?
Page 5: pad “gently”
- Pad my face? And how does one pad?
Page 6: {step two} apply eye cream
- Again: how much and where? Around my eyes? IN my eyes?!?
Page 7: tap “gently”
- It hurts when I tap my eyes (even gently!)
Page 8: {step three} apply moisturizer
- You know the drill: quantity and location
Page 9: picture of face with arrows and surprised look and the text “20 times”
- I have no idea what’s going on now.
Page 10: “circular” motion
- ?!?
Page 11: the end, thank you
- Confusion (and old age)!
Here’s a link to my HTML file.
As for del.icio.us:
I’m already pretty familiar with HTML, so I added some CSS links:
xhtml.com’s CSS reference and
glish.com/css (obviously hideous, but there are some good links)
CP’s Lasagna Tutorial
Lasagna Tutorial
Ingredients:
Olive Oil
1 package of Lasagna noodles
1 Zucchini - Chopped
1/2 an onion - Chopped
1 Red Pepper - Chopped
a handful of Parsley - Chopped
15-20 Basil Leaves
1 Bay Leaf
6 cloves of Garlic - Minced
32 oz. Jar of favorite tomato Sauce
1 lb. Ground Beef
15 oz. Ricotta Cheese
2 Packages of shredded Mozzarella Cheese
1 tsp. Hot Pepper Flakes (more if you like things spicy)
Vegetable Prep: Its easiest to do all the prep work before you start cooking to prevent things from being overcooked. I find that keeping things separate makes this easier, though it does mean more dishes to wash at the end.
Chop the zucchini and red pepper and place in a bowl. Chop the onion and 1/2 the garlic and set in another bowl. In a Large bowl, combine the other 1/2 of the garlic, the ricotta cheese, the parsley, 1/2 of the Basil, and one package of mozzarella.
Set a large pot of water on the stove to boil. Preheat oven to 375°.
In a large frying pan, saute the ground beef over high heat until browned. Pour off the fat and set the beef aside. In the same pan, add a tablespoon of olive oil over medium heat. When hot add the onions and garlic and saute until the onions begin to look translucent (about 2 minutes), stir often so that the garlic doesn’t burn, otherwise it will develop a bitter taste. At this point, add the red peppers and zucchini and continue to saute for another minute. Add in the Tomato sauce and stir everything together. Add 1/2 the basil to the sauce, the Hot Pepper Flakes, the Bay Leaf, and flavor with salt and pepper. Finally add the beef and let simmer for 20 minutes over medium to low heat. When the sauce is done, take out the bay leaf before using.
Hopefully the water should be boiling at this point. Put in all the lasagna noodles and let cook until they are mostly cooked, about 5 minutes (The reason we undercook them is that they will be baked in the sauce later and we don’t want them to get too mushy). Pour them into a strainer. Now we are ready to build the lasagna.
Get a lasagna pan (glass or aluminum throw-away ones are fine). Coat the bottom of the pan with about a 1/2 cup of sauce. Fully cover the sauce with a layer of noodles. Spread out 1/3 or the cheese mixture on top of the noodles. Cover with 1/4 of the remaining sauce. Cover with noodles. Repeat the order (Cheese, sauce, noodles) 2 more times. Once you have put the last layer of noodles on, spread the remaining sauce over the top of the noodles. Cover with the remaining bag of mozzarella cheese (you don’t have to use the whole bag if you want).
Cover loosely with Aluminum Foil and place in oven for 30 minutes. Don’t let the foil lie on the cheese otherwise it will stick. After the 30 minutes, take the foil off and continue cooking for 15 minutes.
Take out the lasagna and let it cool for 10 minutes or so before eating. Serves 8-10.
Storage: You can cover the lasagna pan with aluminum foil and put in the Fridge for up to a week and a half.
Brief: Mark-Up your tutorial + …
First we’re going to practice some html. Towards what will become your online tutorial:
- Open a word processor (like Open Office, Text Edit or Word) and write down the text for your tutorial. Try to break it to titles, subtitles, lists, links, different elements or whatever you might think is relevant.
- Collect images, videos, audio, whatever media you would like to involve in this tutorial. Try to think how to take a similar approach like the one you took in your analog tutorial, but this time, make a webpage out of it.
- Install Firebug in your computer.
- Use your preferred text editor (like Emacs, Dreameweaver or Coda) to edit your html page. When in doubt use Firebug to check and steal code from other pages.
- When you’re done (or through the process of your work) try to validate your code through the W3C validator. Try to understand the feedback it gives to fix your errors, and strive to keep your html valid.
- when the html page is done (only html, no styling what so ever!!!) upload it to our blog and provide the link in your post. Your pages will be ugly, but will be pure data, which would look much better the week after.
- Post at least two HTML tutorial references that you found useful (not just any ones you’ve found), post it to our del.icio.us tag ‘osdp’ (which stands for Open Source Design Parsons) so we can start to share some resources.
Second, we’re each going to learn something new:
- Go through the tutorial you were given by your classmate, try to go through it while taking notes on your process, your experience, your challenge, your difficulties.
- Turn these notes with pictures (when it fits) to a post reporting on your experience. This would be valuable feedback for us to work with in the rest of the assignment.
- Try to not break anything…
- Enjoy.
See you next week.
Tutorial: Teach Us Something
Every one of you knows how to do something that none of us know. It might be a certain technique of book binding, a trick to find good apartments in NY, a secret pumpkin soup recipe that your grandma taught you or a way to melt your boy/girl-friend’s heart and make him/her less angry at you. Well it’s time for you to share all that valuable information.For next week you will prepare a tutorial - a set of assignment to teach us how to do that certain thing that you are so good at.Let’s make some rules:
- Running through the tutorial cannot take more than two hours.
- The tutorial should be inclusive and cannot require equipment that is beyond the grasp of any of the students in class (when in doubt consult me).
- The tutorial cannot be dependent on the presence of the tutorial’s creator or of any other individual more informed than the person following the tutorial.
- The tutorial cannot be digital! Yes, the first assignment in the open source design class will not be using digital media but will focus on the idea and practice of sharing information and documentation of process. (the subject itself can be digital though, i.e. “Build your own robot in two hours” is legit).
Let’s break some rules:
- The tutorial doesn’t have to look like any tutorial we’ve ever seen.
- The tutorial doesn’t have to include text or words or images or anything.
- The tutorial should teach us something, and achieve it’s goals by any means necessary.
You should expect to actually carry out these tutorials in the following week, so let’s make it be a fun assignment.(Don’t worry, there will be tons of technology next week) enjoy.
*For next class please also bring the final Encode/Decode/Hack assignment so we can share the last results.
