Tutorial Final
Hi,
I meant to post this the other day, but here it is finally.
Thanks,
Sheila
Tutorial Final
Hi Guys,
So I finally got the first project taken care of, but I am having problems putting it on my blog. For now this is my DreamWeaver file, so hopefully some of you can see it.
Thanks,
Sheila
tutorial:design 1
dear all fellow classmates
here’s my tutorial design proposal, i make it quiet simple for the coding..hopefully… check it out for critique, thank you
im working on the site now……so hard to make it look like this design
Tutorial: More design, More Blueprint, More CSS (final)
Now that we got some initial experience with Blueprint let’s dive a bit more into it.
- First of all I would like you to subscribe to the Blueprint CSS mailing list where you can both ask some questions when you run into difficulties, learn from other people’s experience, and yes, one day also help others with their BP & CSS questions…
- Second, go back to your PSD file and make changes to it based on the feedback you got in class.
- Third, fix your css grid if it need any more fixing and go straight into all the details, styling all the graphic and typographic elements in the page including :hover states, images and all. Feel free to steal take inspiration on other html/css design you find online. Visit the html validator every now and then, and try to see what you can learn from it.
- Post at least once to the blog this week with a tip for the rest of us, some cleverway you found of doing something or even a problem you have that you want us to help you solve. Please post before Tuesday 11:59pm.
- Buy a domain name for yourself and a hosting space that supports PHP 4+5 and preferably also provides one-click install for Wordpress. You are welcomed to do your own research and compare your results on the blog and through our del.icio.us tag OSDP.
* Personally, I can recommend Dreamhost which (even though lately they’ve been pretty bad with downtimes) are still a good bang for your buck (they host most of my site, and I have yet not moved). Anyway, I have arranged a serious discount for you so if you register through this link and entering our promotion code:OSDor by mentioning my email as a referrer (disclaimer: it’s a win-win referrer program so I am benefiting from your discount too).
- The final links to your works should already be hosted on your own sites.
- If any of you have technical (or other) problems with this assignment, or want to consult me on anything, please email me.
(don’t wait for the last moment with it)
Lasagna Website
Hey Guys. So here is my website. The real one (HERE) doesn’t look quite like the Photoshopped version that is here:
Anyway, I am torn between using more color and being more spare, which seems to be more the trend in websites lately. Either way here they are.
apt. tutorial w/ css.
Here’s the grid I used to create my tutorial w/ Blueprint. I’d seen Blueprint before this class, but never dug through it enough to see what it was doing and how. The hardest thing to deal with (though it grew on me) is the fact that BP links to so many different stylesheets – at first it takes a minute to figure out where a particular element’s attributes live within the hierarchy. Anyway, grid image below and live page here.
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.
