QUESTIONS AND ANSWERS

If there are any questions about the the projects, course, interactivity, etc., post them here.

Question

Answer

Q1: The processing presentation is not opening on my mac. Is this happening to anyone else? Is there a different page i could open the presentation in?
A1: The Processing presentation is a pdf file so it should open in the browser or you can download and view it with Acrobat or Preview.
On the link: command + click > Save Link As... and save to your mac.
Q2: I know how to change transparency when its greyscale but i dont know how to change it when it is colour. Can anyone tell me?
A2: When you create a fill colour the code should include a 4th number at the end if you want to change the transparency.
For example: fill(255,0,0,255);
100% opacity is 255 so just lower the number according to what you want.
ex. fill(255,0,0,127); would be 50% opacity
I hope this helps.
Q3: I opened the Processing presentation file in class, and it worked there, but I tried it again at home, and I can't seem to open it on either firefox or safari. I also tried saving the file to my mac, and that doesn't work either. Help?
A3: The Processing file will not run in a browser. It is the .pde file and will open only using the Processing application.

However when you export, Processing creates a folder called "applet". Inside this folder are a few files and one is called "index.html". This will open in a browser with the embedded java applet that will run your Processing file.
external image Fig_02_02.gif

Important: If you have included the save function to output as a file (eg. save("lines.png");) it will not show up in the browser. Just a small annoyance, but delete this last line of code and it should work.
Q4: I don't understand how to rotate my ellipse, every time i put in the command to rotate, it just makes the image disappear completley, help??
A4: Can you cut and paste some of the code?
if you rotated a circle, you wouldnt be able to notice it.. its the same unless its a oval. copy and paste the code and maybe i can help.
Q5: How do we put up our projects on wikispaces?
A5: Check OpenProcessing link here
Q6: Missing the only quote i'm looking to use from the lecture. Coding for colors randomly changing colors on its own, or upon a mouse lick. Can anyone please help me?
A6: I just posted the notes(Class Notes) on the colour changing one on its own.
Q7: For the peer feedback, where are we supposed to post them?
A7: You should go to their activity log and then click on "discussion" on top of the page then click on +New Post.
Q8: For Project One Exercise Four, does the text have to be legible if interactivity/motion is involved? Or does it just have to be used within the coding?
A8: I don't think the text have to be legible if there is motion involve, you just have to include the postal code in your sketches. ( But I think when viewing your sketches, we can at least tell that they are texts) You can even just have part of your postal code in your design. I'm not sure if it is different for each class though. Hope this helps! Ask around your classmates!
Q9: For Project 2 Exercise One, does anyone know how we would upload the links/files onto wikispace?
A9: On the schedule it says they were going to show us in class how to do it.
Q10: What was the name of the program we used to position the squares?
A10: I think you're referring to CSS Edit
A10: make sure you save it as "box.css" instead as "html.css"
Q11: How do i upload my project two exercise one html to the wiki? I've tried but isn't working
A11: You can find out how to upload your work on Digital Locker
Q12: I can make the text boxes and everything in CSS properly, but how can I change the font for each box without it affecting all of the others? I would, hopefully, like each box to be in a different font....
A12: One way to do it is to make different type styles that are inside each box rule.

.box1{
    position: absolute;
    left: 100px;
    top: 100px;
    width:100px;
    height: 100px;
    font: 18px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #fe6137;
}
 
.box2{
    position: absolute;
    left: 200px;
    top: 200px;
    width:100px;
    height: 100px;
    z-index: 1;
    font: italic 24px "Lucida Grande", Lucida, Verdana, sans-serif;
    text-decoration: underline;    color: #8f8f8f;}
Q13: How do I reduce the size of the whole image? Lowering the number for height and width seems to be 'cropping' the image to make the size smaller.
A13: The best way is to not use the image sizing in HTML/CSS . Take from the original image in PS, resize it to the needed size and then output it as a new jpg image. You will end up with much better quality and smaller files.
Q14: For Project 2, Excercise 3, are we making 3x3 tile grids to form the 9 tiles again? The example is very misleading and I don't understand why we would need the magazine squares so big.

Thanks! :)
A14: Use the magazine scans as source material to develop a series of interesting visual layouts...no need to repeat the the 3x3 grid.

We scanned them 200% so it is possible to optimize your images at larger sizes without any loss of quality. In this way you cam make smaller ones easily too. Remember you can never re-size larger than the original scan size but you can always go smaller.

The example is a visual of what is possible ...please do not look at it as something to try and duplicate.
Q15: For Project 2, Excercise 3, I position my squares in the style sheet and I've linked the images in the HTML sheet. For some reason when I open it in the browser the squares only show up on the left hand side on after another no matter what the position is. How do I fix this?


Q16: For p2 e3, does anyone know how to move around the pictures? I tried changing the values under #box1,2... and a.switch but its not making any change. please help!
A15: there's something wrong with ur html coding, i mean ur html file can't find ur css file to position the squares so what it does basically is that it puts the pictures after another on the upper left corner, put all ur html files nd css file in one folder nd also make sure ur css file's name nd the one u're reffering to in ur html file are EXACTLY the same.



A16: I'm not sure if I'm answering your question correctly - but I'll give it a try. Under the respective style in your CSS Edit file, you have options such as adjusting the top position, left position, background colour, etc. Make sure the position is set as 'absolute'. Ensure that the names labelled in the CSS Edit file correspond to the ones labelled in your html file.

A lot of errors occur when you overlook small details, like whether you attached the files to each other correctly or under which style you're making those changes.

So for example, if you wanted an image to show up in the center of your page:

In your CSS Edit file:

.box1{
position: absolute;
top: 65px;
left: 387px;
}

You will also have to label in your html file to correspond (within the body):

<div class="box1">
<img src="images/images_01.jpg" width="400" height= "400" alt="one" />
</div>
Q17: For some reason in my exercise 2 for project 2 my fonts, colours etc do not show up in the html format, even though i have linked them to my css file. Any suggestions as to why this is happening?
A17:The only thing I can think of is that they may not be web safe fonts, you may want to look up which fonts are web safe and see the difference between those and the fonts you're using.
I would recommend to stay with the fonts that are originally there in css. I think thats what web safe fonts are.
Q18: I've tried linking my html pages using rollover for ex. 3 but that isnt working. Any suggestions?
A18:I ended up having to somewhat change the code to get mine to work and this is what I did, I'm not sure if it'll work for you as well.

<div class = "centered">
<image class = "box1:hover">
<a href="page2.html" image class="box1" title="rollover"></a>
</div>

So where it says 'box1:hover' and 'box1' that should be replaced with whatever you called it, and 'page2.html' should be changed to whatever you called the page you're trying to link to. I'm not sure if this even helped or will work for you but I hope it does.
Q19: I'm using "processing.js" to put my processing files onto my html pages and it worked fine on Safari in class but I put the files on my usb and came home and tried it in both Firefox and Google Chrome it says "blahblah.pde" doesn't not have content. So I opened them in TextPad, not TextWrangler like I initially used (I have PC, not Mac) and resaved them and all the content was there but it's still not showing up. I have no idea why. Any ideas? or other ways to upload my sketches?
OH! I just opened a page I posted in class today on my page called "Processing Page" and they worked fine. So, it's not a browser problem, something happened to the files and I'm more lost now.
I just also pulled the original .pde files from the processing folders and it's the same problem. Also, tried to put the whole folder in and enter the folder in html but that didn't work either.
A19: I figured it out. It had to do with security issues. I just have to work through the digital locker.
Q20: Does anyone know if I can change the position of a embedded processing file on the webpage?
A20:If you put it inside a <div></div> it should be completely transformable like an image through CSS
Q21: Alright, so I'm trying to dabble in some JQuery but I'm getting really confused... is this something you have to download? Or just a set of codes to input into html? Also, I'm trying to scroll using arrouws like these < > instead of a scroll bar, can anyone help me with all of this? Thank you!
A21:yes, there's a file you need to download from jquery website which contains lots of code lines, then you add the function code that you wanna use to your html file, i suggest you see quan's project2/ex 3 codes to get an idea.
Q21:I'm trying to scroll using arrouws like these < > instead of a scroll bar, can anyone help me with
this? Thank you!
A21: Did you mean by when clicking < and >, it changes the page? One way I can think of is that you can link the page to < and > by using the method that we used for project 2 exercise 2.
Q22: I'm trying to link my page to my processing files but it's not working. I followed the directions that were on the link under the schedule. Can anyone help please and thank you?!
A22: In the applet folder of the processing work, there should be an html file. What you can do is use this html page by dragging the file plus the .jar file into the folder that includes all the files for your website.

A22: Yeah that one didnt work for me so I used little different method.
You can add,
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

and then add from <object classid...> to your last <param name...>
and then clsoe body and html.
That worked for me, so it should work! hope it helps :)
Q23: Does any one know how save your processing work as a PDF? I did PDF Export, but only one file called pdf.jar showing up and I have no idea how to open it. Could any one help me with that? Thanks!
A23: If you are trying to get the image of you processing work, what you can do is print screen, then crop out the image you need.