Both my HTML & CSS validates but im still unclear about what exactly DOC TYPE and Encoding does.
I got both my jQuery image gallery and lightbox to work after a few hours of wanting to throw my computer out the window.
See you in class.
Tag Archives: tutorial
Im slowing getting the hang of this and finally understanding what everything does, previously i just hacked my way into something that worked, now i feel like its making sense. I still have weird issues with blueprint not liking my padding or sometimes not floating to the right. Usually I can make it work but not sure if my solutions are always the best way of doing things. Like the background glow around my stage area.
I got it to work and look okay on my end, but somehow i think there may be a more efficient way. Right now i have the site split into 3 main divs that span the whole width of the page. These 3 main divs have a background image set for each. Within those same main divs are smaller divs that are set to all be containers of 956px. See diagram.
Surprisingly i couldnt find a site that had this same glowing stage effect. I know i seen alot but of course you cant find something when you are actually searching for it. So this was the way i could think it would work logically. Mushon, is there a better way?
There are still a few things that need to be done, like the step 2 thumbnails of different eyepieces and a few other things.
It would be great if any one has design suggestions or ideas on improvement.
ed
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 tosteal
take inspiration of 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 clever way you found of doing something or even a problem you
have that you want us to help you solve. Please post before Saturday night
11:59pm. - If you haven’t yet, buy a domain name for yourself and a hosting space that supports
PHP 5 and preferably also provides one-click install for WordPress.More on that here. - 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, as I am traveling this week and might not be very quick to answer your emails. Best way would be to post a screenshot and a link on the site and email me if you want my feedback on it. The rest of the class will be able to better help you that way too.
- Enjoy!
See you next week,
Mushon.
Great Tutorial Alexandra!
My girlfriend and I tried it out. Neither of us could remember if we have played it. After reading it through we played games that are similar idea but this was new for the both of us. The first game went slow while we figured out how to play. The instructions were pretty flawless. The only concern we had was while playing our first test games to get the rules down, we found ourselves opening the tutorial and double checking a rule in the “The Game” section. Since this was just 5 pages straight of a few paragraphs, we would have like some sort of breakup of this section so we could quickly find the section we had issues about. I didn’t take extremely long to find what we were looking for, but speeding this process could get us back to the game quicker. A suggestion would be highlighting a few key points and rules in the section. Or having another page of key points to remember.
The section of “attending your own 5 piles” could have been clearer, this is one part we were pretty unclear about. The diagram showing the initial setup was nice, and could have helped in this section too. It would also break up the text a bit.
The design of the tutorial worked well and reflected the feel of the game. The Design of the playing cards were fun to look at but hard to play with! but i know thats not your fault.
Overall we had fun playing, thanks!
Here are my first round of design and HTML. Both are still pretty rough and don’t correlate 100% with each other just yet. i have some ideas that i can save my self from typing and explain in class tomorrow.
Mushon i left you a question in a comment about my design being a stand alone site instead of a single page of another website. I didn’t hear back so i have left it for now, but can alter for next round if that is an important feature.
My HTML can be found HERE
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 to edit your html page. This can be something open source like the classic Emacs or JEdit, or it can be a proprietary software like Dreameweaver or Coda, or better, find one that we don’t know. If it’s anything worth sharing, write a post about it. (here’s a good place to start). 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 (like that: open-source-design). 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 ‘osd2’ (which stands for Open Source Design 2nd class) so we can start to share some resources.
Second, start designing your tutorial:
- You have all the data, now let’s think of design
- If you haven’t yet, go through Khoi Vinh’s Grids Are Good presentation, and learn more about ‘Grid Based Design’, you will do a lot of it this semester.
- Design your page. Imagine it is published in an existing website. You don’t need to design the whole website, only the page you’re on. This means that in addition to the tutorial you will also have probably some navigation, the site’s title and so on…
- You might find Quommunication’s starter kit useful. I do. (make sure to choose your own grid though)
- post your design as a png image in a post on our blog.
Third, 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.
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 (but it obviously can).
- 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.
