Research For Experience Design

.

March 12, 2013 by Nicole Glassman

Posted in Uncategorized | 1 Comment »

Week 1

January 23, 2013 by Nicole Glassman

http://storify.com/NicoleG

Posted in Uncategorized | Leave a Comment »

moving blog

January 22, 2010 by alxbal

Please check and post the common public blog now at: http://mpm17fall2009.wordpress.com/

Posted in Uncategorized | Leave a Comment »

Here’s the layout I created on Kompozer, but after several attempts of publishing it, it still didnt go through. so I’ve snipped and printed the image from screen and pasting it on hereCSS stands for Cascading Style Sheet
CSS would define how the HTML elements are displayed when you view the web page.
CSS was created for storing the all the formatting tags that were being put into HTML pages.
HTML only intends to define the content of a document and the World Web Consortium created CSS to for the purpose of stylizing the HTML elements.
Styles are saved in external .css files, web creators are allowed to change the appearance and layouts just by editing one single file.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
you can control the style and layout of multiple web pages all at once by inserting the above code into the HTML and CSS pages at the very top.

The correct HTML for referring to an external style sheet is link below
<link rel=”stylesheet” type=”text/css” href=”style.css”>
this is always added to the head section.

Declaration refers to the style attributes and it consists of property and value.
Property refers to the style attributes you would like to change, for example “color”.
Value is the amount of pixels or the colour value that is set for the property to change into.

CSS box model refers to the design and layout. It consists of margins, borders, padding and the HTML content.

An element is the CCS or HTML syntax, for example <h1>, <p>

You can select a background colour for an element by changing the colour code in the body selector.
i.e h1 {background-color:#6495ed}

You can add a background image to an element by inserting the following link under a specific selector.
i.e. body {background-image:url(‘paper.gif’)}

Liquid Layout will comply with the viewport on the computer screen when you maximize or minimize the size of you window.
It moves in and out and is utterly based on its percentages in the entire window layout set by the developer.

When creating a liquid layout with CSS, you need to:
1. start with a layout grid.
-Determine how many columns you want and how wide it will be.
-Convert pixel-based measurements into percentage units.
-the percentage measurements will be calculated by the browser
-Divide the grid into columns and gutters and set the percentages for these elements in advance.
-Gutters prevent the columns becoming too wide in wide browser windows.
2. convert the columns into <div>containers.
-Add float, width, margin-left values into the CSS code when creating the columns.
i.e. (borrowed from http://www.maxdesign.com.au/presentation/liquid/#definitions)
#col1
{
float: left;
width: 48%;
margin-left: 3%;
}

#col2
{
float: left;
width: 20%;
margin-left: 3%; }

#col3
{
float: left;
width: 20%;
margin-left: 3%;
}

3. Add header and footer
-apply #header {margin-bottom: 10px;} at the very top of CSS code
-as for the footer, insert #footer {clear: both;} at the very bottom of CSS code.

4. Apply padding to the text with the container
i.e. (borrowed from http://www.maxdesign.com.au/presentation/liquid/#definitions)
h2, p { margin-left: 7px; margin-right: 7px;}

A block element would take up the full length and width available.
For example if you hover your mouse on a link, the area around the actually text would also be highlighted and clickable.

An inline element does the oppose as it would only take up necessary width.

You can change how an element is displayed by inserting the following exaple link:
li {display:inline}

When positioning the content on the webpages, you can either do static positioning that’s set by default.
Or you can do fixed positioning, so that the text will not move when the window is scrolled.
Example:
p. pos_fixed {position:fixed; top:30px; right:5px;}

CSS float allows an element to be pushed to the left or right, it’s often for the purpose to clear spaces for readable text that might be otherwise blocked or hard to covered up by the image.
Elements can only float horizontally, not vertically.
The elements after the floating element will comply with the movement and move around it.
For example, if an image goes to the right, the text after it will move to the left.
You can also float more than one element, several images can be set right next to each other using the following code:
.thumbnail
{ float:left; width:110px; height:90px; margin:5px; }

You can turn off float by inserting the {clear:both;} code to stop the elements from floating.

sources

http://www.w3schools.com/Css/default.asp

http://www.maxdesign.com.au/presentation/liquid/

Posted in Uncategorized | Leave a Comment »

What is the web and how does it work?

January 16, 2010 by Lilian Chow

members:

Linda Lou – Organize Presentation

Lilian Chow – Diagrams and blog Posts

Winne Kwan – Writing Script

Kalytta Ng – Research

Now that you guys have learned about the internet, we’ll tell you about the web. Everybody who has access to the internet knows what it is but very few knows how to define it. Many people would respond with something on the lines of “The web is the internet”, except that is not true.

The web is within the internet – the internet is the container. For example, the CN Tower is the web while Toronto is the internet. An easier way of describing this is through demonstration. Here is a practical demonstration of the web with real people:

Lilian – Web Surfer
Linda – Computer
Kalytta – Server

Lilian is our web user and she is going to post something on her blog. To do this, Lilian has to put this through her computer, which is Linda. When Linda takes in the information, she changes it into a code called binary code. This binary code is read through any type of electronic technology. The packets of 8-bit binary code are then sent through the internet to the server, which is Kalytta. Now the server will take this binary code and translate it into HTML and it will display onto the web browser. Now that it’s on the web browser, people connected to the internet can view it. This also works if Lilian were to browse another page, except she would be finding somebody else’s server using the web address.

This is a simple way of describing what the web is. but in reality, it is actually quite complicated. We just simplified how the web works in a very simple format to be shown.

source:

dictionary.reference.com.browse.World-Wide+Web

http://www.youtube.com/watch?v=wZoMbBzqxyc

http://www.boutell.com/newfaq/misc/how.html

Posted in Uncategorized | Leave a Comment »

week 2: ccs and collaborative research tools

January 15, 2010 by alxbal

– Presentations of week 1 questions

– delicious and wikis

For next week:

Create a Liquid three column layout

Create a liquid layout with three columns using the following layout:

Your layout has to

– Load the same background image in three different pages.

– Position a background image in the right hand column away from the text

– Align the text in the Header to the left

– Align the text in the right hand column to the right

– Remove the line under all links, change their color to a color of your choice.

– Specify the width of the right and left column to be 300 px

– Make sure you use padding and margin to create the same text flow as in the example.

—-

As a group create the layout and develop a presentation that explains how you did it.

Post your answer as a comment to this post.

Here are some questions to get you started:

1: What is CSS and how does it work. (How do you use CSS to control the style and layout of multiple Web pages all at once. What is the correct HTML for referring to an external style sheet?)

2: What does the style attribute do and what do declaration, property and values refer to?

3: What is the CSS box model?

4: what is an element? How do you add a background color for all <h1> elements? How do you Set the background color of different elements?

How do you set an image as the background of a page?

5: What is a liquid layout? How do you build a liquid layout with css?

6: What is the difference between inline and block-level elements? How do you use them?

7: How do you size blocks, what do you need to know?

8: Explain the different ways to position elements on the screen. What is CSS floating?

Posted in Uncategorized | Tagged week 2 | 2 Comments »

welcome back to 2010

January 8, 2010 by alxbal

Hi All,

Welcome to this new year!

A copy of the course outline is in this blog.

Here are the research questions I need you to answer today. Make sure to enter your answers as comments here or a link to comments in the comments here…

Research questions:

1: What is the Internet and how does it work?

2: What is the web and how does it work?

3: What is a browser (list existing browsers and their platforms) and how does it work?

4: What is HTML and how does it work? Explain the structure

5: How do you link between pages, explain the different ways of linking? Explain the code

6: How do you include images in your pages? Explain the code

7: What is XHTML and how does it work?

8: What is XML and how does it work?

9: What is the difference between embedded and linked content?

Take care and have a great year!

Alex

Posted in Uncategorized | Tagged week1 alx research_questions | 10 Comments »

Out There – 401 A Space Gallery

December 26, 2009 by iriddell

Im SOOO sorry this wasnt up earlier. I was in hospital since saturday as my lung collapsed again. I understand its VERY late, but I hope you can still take a look at it.

Thank you so much, and I hope you had an amazing Christmas!

– Ian Riddell

I got my inspiration particularly from the Buffy Saint-Marie Self-Portrait at the 401 Richmond St. Art Gallery. It really drew me in, as seen in my video response, as something more subtle than the other pieces in the show. The other pieces by Buffy were too neon and abstract, where as this one had a difinitive, recongnizable form, that being Buffy’s bust. The contrast of her solid black hair and bands of bright colours over her face felt balanced to me. I walked around the whole exibit multipile time, but came back to this one many times. I think its the intensity of the facial features that really stand this piece apart. Unlike the other pieces, this picture has a very clear subject and focus. All the expression, past the colours and juxtaposition lies in the face. The colours emphesize sturring emotions, happy emotion in the viewer, while the piercing stare of the subject pushes right through. I like this piece alot, because it actually does something emotionally to me, rather than simply enforce an absent appreciation for the image like the other pieces did. I intend to go back and re-experience the exibit soon since as a whole, it was quite impressive.

Posted in Uncategorized | Leave a Comment »

Video Response: Immersive Environment, Take 2 as the server goblins ate my video :/

December 22, 2009 by oszelaar

Ok. fingers crossed it works this time around….

and it does 😀

Posted in Uncategorized | Leave a Comment »

Amandah’s Out There Song Show Video

December 22, 2009 by amwood99

So I really enjoyed the video of the man playing Stairway to Heaven on the beach at the Song Show in London. I felt like it was so relaxing and really pulled me in especially because I am myself a big fan of that song. However, it was interesting to see how just slightly my relaxation was interrupted by the errors the man would make while playing the song. I found that I really heard every note and paid attention to the performance and waited for each note to come because I knew what it was supposed to sound like so waiting for it to happen was like putting a puzzle together. All in all it made me focus on every part of the song rather than just as a whole. I wanted to mimic this with my video. I used the song Nothing Else Matters (originally by Metallica) by Apocalyptica and slowed it down to the point where each and every note is slow and deliberate. I found it was almost painful waiting for each and every note to come, your mind seems to finish the song before the song itself finishes. Almost like the whole Gestalt theory of closure. You know what should be there so you finish it yourself in your mind. I used my own footage of a lava lamp slowed down as well just to add the relaxation factor and found it flowed really well with the song.

Hope you like it!

Posted in Uncategorized | Leave a Comment »

Older Posts »