We presented our Facebook application yesterday.  It’s a wonderful feeling to have that under our belt.  Now, we are currently in the CSB 115 lab writing out our paper.

My part is:

1.  Intro (inspiration, description)

2. Method (artistic- photoshop, illustrator)

3.  Discussion (problems, solutions)

4.  Conclusion (what we learned, future)

The only difficulty is getting started…

Our goal is to have it done by Friday so we can have a relaxing weekend studying for our OTHER finals.  =)

Overall, I feel very satisfied with this class’s project.  I had the best possible group.  We were efficient.  I think it was a wonderful experience to have all of us striving for the same goal, taking our own initiatives and opportunities.  We really supported one another.  When one of us couldn’t find the code, another would find it.  It was an optimal blend of tasks and skills.

I would say that Jill and Jen were very good at finding information in google searches and looking on the facebook wiki.  i am horrible at finding things.  it’s as if the internet was a maze that purposely shifted to keep me at a  loss.  But for them, it appears on their first search.  It’s amazing.

Though i would have liked to do a lot more programming, I found myself attracted to the visual aesthetics of the application which did swallow up a lot of time.  Figuring out how to change colors on Photoshop was a lot more difficult than I thought.  Many revisions, trial and error…

As for the code, i think the biggest contribution i gave was the CSS styling of the lids.  I also helped clean up the code at the end with Jill.  But the functions for tabs and invitations and profile boxes were mostly Jill and Jen’s doing.  I think Jen did the profile box.  Jill did the invitations.  And both of them found the functions for tabs and we all tweaked them around.

I revamped the appearance of the presentation while Jen and Jill input the content.  I uploaded images into it… We really were a team.  It was very good.

Our last programming meeting was yesterday at our usual time, Wednesday 4-8pm.

There was a great feeling of triumph and accomplishment.  “finish strong!” we would say.  And i really feel like we’re on a good stretch towards the finish line.

We finished programming.  Our wonderful Jen Santos did away with the last CSS error that was showing up on Facebook.  I added some more buttons/caps to even out the list.  And we spent the last hour of our meeting looking up fun facts and enjoying ourselves with the ridiculous randomness in the world.

We are planning on meeting up tomorrow, Friday at 9am to figure out and delegate the paper.  Jen and Jill had already formulated a basic outline containing, Intro, Methods, Discussion and Results.

one thing i realized was that i really forgot the specifics of all the programming difficulties that really made life miserable.  We struggled so much but now, we don’t even remember what we struggled with because it’s solved in such neat little lines of code.

it’s amazing how much our code has shrunk.  there are like two lines of code for each major function and that’s it.  that’s all that’s needed.  while it’s refreshing, it also is kind of annoying because the process of getting to those few lines were hours and hours of experimenting and trying things out.

so a major lesson i learned was that one can always learn things online.  i don’t need a formal class or anything.  only motivation is necessary and required.

so the facebook app is coming together nicely.   of course, there’s always a few kinks but overall, i’m feeling very good with our progress.

the only thing we need to do now is:

1.  Allow the “Share” button coexist with the image that one posts to the profile box.

2.  Find a way of KEEPING the image one chooses- in the profile box regardless of logging out.

3.  Cleaning up our errors and CSS.

4.  Make sure that the “Share” button sends the correct image and URL.  find a way to record or capture what specific button one picks.

Man, it was seriously hit and miss.  Me and Jill were in the lab last Wednesday and we would change ONE thing at a time.  constantly saving our work because the order of the callbacks are still confusing.

If we move a certain callback, it has an error because it relies on another one to first define the function.  So, I pretty much spent a long time doing many different combinations of code lines and functions.  Can I put this code in this function?  What would happen?  All the buttons would disappear.  Then i’d put it back the way it was and try to take this other line of code and put it in another function, nothing happens.  So i leave it there and try to experiment with something else.  It’s pretty much getting a feel for what parts need to go where and ascertaining what its function is from the errors that they produce.

but yes, we’re almost done.  we’ll probably start our paper this week.  I think we’re almost right on schedule.

we met once again this past week on wednesday in CSB 115.

the biggest problems of the day were how to create tabs that were functional.  honestly, i wasn’t involved too much in this.  Jill and Jen were the ones who were wrestling with that while i was trying to find a way to make the logo look nice.  i created a bunch of div tags- and at first, it really wasn’t working.  i couldn’t figure it out.  i thought perhaps div tags were not allowed or it was a different language- i actually don’t really know which language it belongs to.  is it just html or is it java or javascript or css?  but then, css is just a better way of organizing html… but at the same time, it does use its own language.

so i was a bit confused.  aimlessly looked around for examples, didn’t make sense.

and so i just did exactly what we did for previous assignments.  and i found that it really was a matter of a curly bracket enclosing the styles… that’s why throughout the assignment, the fonts didn’t change with the styles specified.  so after that, i just moved things around… put the logo at the top, put the tabs in the middle, then the finding friends search bar and then profile link.

another huge chunk of my time went into designing the logo and explanation.  it irks me a bit to see that the quality of the image is not that great.  it’s fuzzy.  but i suppose it will have to do.  i’ve been uploading images to my facebook photo album… so perhaps in the future, it will be able to randomly pick one out…

so now, my biggest obstacle is how to make a button template and chagne the worrds that appear- so that we don’t ahve to manually do everything.

my main role so far has been in designing the appearance of the TopsBottom caps as well as sketching out a mock-up of what the final site would look like.  it’s amazing how time-consuming it can be.

here’s what i have so far:

enjoy…

today in class, some groups presented their projects.  ours (TopsBottom) will be presented on Thursday.  our group is meeting tomorrow again from 4-8pm at CSB 115.  most of that will be devoted to tinkering with Facebook again.

our wonderful Jill miraculously connected our code/server to Facebook.  i have yet to explore exactly what she did, though she sent an email specifying the steps she took and what we would need to take to understand the workings of it…

but now, all that we need to do is create the code, update the Facebook app and add features such as buttons and links and functions.  i say, “all that we need,” knowing that it will be much more complicated than we can ever imagine.  there are always bugs that crop up.  impossibly little and ridiculous bugs.  so at the end of our last meeting, last week wednesday, i started trying to create a nice, shiny, attractive lid bottom.  it was actually quite difficult.

i had forgotten how … limiting Adobe Photoshop can be.  I copied an image from Google images.  I opened it in Photoshop, got rid of the “Real Fact” on it… then adjusted the contrast, brightness, color and pixelation of the thing to make it look as appealing as possible.  That was okay.  It still took some grueling time but it was okay.

THEN, the problem of changing the colors of the outside edges of the lid bottom got difficult.  I remembered using Photoshop before and i KNOW that there’s a way to change the color to a shiny ruby red or a dark blue with the same luminance and reflecting qualities of the original.  However, I kept getting light, washed-out colors that were not satisfactory whatsoever.  The technique I used first of all was to copy only the area that I want the color to change, which was essentially a thin outer circle.  Then I could modify that into many reiterations with different colors and then paste it back onto the original and wallah!  I can have multiple colored lids.  Most of my time was swallowed up by simply erasing pixels to create a smooth curve or to blend the colors because it looked to jagged.  I’m sure there’s an Unsharp Mask or Sharpen tool that could easily solve my problems but I just can’t find it.  I suppose I can google it.

Look at our project page on the wiki for preliminary images:

 http://cogsci121.wetpaint.com/page/Images+and+Screenshots

we met last wednesday for the first time officially to get work done.

erik also met us in the CSB 115 lab.  we spent a lot of time figuring out our possibilities and whether changing the color scheme of facebook was do-able.  there was the talk about firefox plug-ins.

we all added the Developer application.  erik told us about AppJet which was a nice in-between platform between the user and Facebook.  but apparently, it’s unreliable.  so we created an application and spent a lot of time finding out what exactly we were going to do.

Jill came up with the idea of Snapple “Real Facts”.  you know, the caps always have random facts underneath the lid… and it seemed to really agree with what Facebook allows.  we also spent some time looking through all the applications that were already created.  my goodness!  there were soooo many!  previously, before the Snapple idea, there was the idea of doing a Guess Who? game but using your mutual friends as the faces.  we looked, and someone already made one!  it was so discouraging… we’d come up with a really exciting idea and we find out that our original brilliant brainchild was already done by someone else.

but we looked up Snapple and there weren’t any…  and then erik mentioned that there might be some copyright issues.  so we thought really hard… .pretty much the entire time when Jen finally came up with a winner.

TopsBottom. 
What’s under YOUR lid? 

hehe… get it?  the facts are on the bottom of the top of the bottle…

then today in class, we went over the Facebook API and it really helped.  it seemed … straightforward in a sense.  but i feel like when we actually try to do it, there will be so many confusing complications.  but anyway, no point in imagining future troubles.

we’re meeting tomorrow bright and early at 8am and working straight til 12 noon.  our goal is to get what Erik got done in class today, which was:

1.  Set up a box in the profile.
2.  Set up an Application page.
3.  Set up a link in the Side Nav.
4.  Display something in the News Feed.

the next week, we want to get some functionality, images, and understanding of Javascript, AJAX, and Facebook merging of the two…  see the schedule for our project page for more details…

around 7pm, wed, 2/6/08,

i finished it.  it was so relatively easy…  but as always, you just need to be in the know.

it was a little hairy but an example of the code i ended up with was:

if((textfields.city.value == “”)||(!(textfields.city.value.match(/^[a-zA-Z]+$/))) ) { 

if statement says: if the value entered for the city is empty OR if the value entered does NOT match a lower or upper case letter, then it will return the alert box: “Please enter your city” and not continue the process.

the regular expression, as it is called, is:  /^[a-zA-Z]+$/
the backslashes “/” enclose the regular expression,
the “^” indicates the beginning of the expression,
the “[ ]” show what the range of allowed characters are which are-
lower and upper case letters,
the “$” means the end of the expression.

i’m not too sure what the “+” sign is for…

i still wasn’t able to figure out how to allow spaces within the user input.

but yeah… that was all i really needed to figure out so i must say that this assignment was done faster than normal.  especially because erik helped me out a LOT.  but i think i learned from it as well and i know that this stuff will be useful.

the only thing that really frustrates me is the divide between common laymen users and hardcore life-long programmers.  little things like the regular expression have absolutely no learning curve.  you either know about it or you don’t.  there’s no way to really know about it unless you stumble across it online or if someone flat-out tells you.  perhaps that’s something programmers really need to develop.  i know that javascript and other stuff are very people-friendly with normal language but it’s still a bit of an alien language.

i went to office hours again, where erik very graciously stayed longer to help.

i chose option 3 which is to make forms.  there needs to be five fields.  the process looked like this:

1.  Structure and formatting

spent a goodly amount of time aligning and fixing the length of text fields.  I created a new html file, “A4_forms.html”.  it is essentially a new page added onto the previous assignment’s website.  it is titled, “Join Cirque”, with text fields for name, address(street, city, state, zip) and phone.  erik helped me straighten out the disgusting quirks.  previously, i had made div boxes solely for the purpose of appearance.  so there were random boxes floating in random places.  though at the time, it was a nice, easy way to organize, now, it came around to haunt me.  because i had specified so many lengths, heights, and widths to make them all match up, if i tried to add anything new, everything would go berserk on me.  and so erik guided me in getting rid of specified margin lengths and div box locations- using margin-left/right: auto, letting things be flexible.

one observation is that what with the actual html files, javascript files and CSS files… i’m getting very confused where to find certain bits of information.  although it’s much better than it would without the distinctions.  i know that CSS is where all my div tags and formatting are.  my javascript is where all the functions are.  and my new html for forms contains all the input text field and button tags.  but it’s still a lot of pages to shuffle through.

2. Functions and If-Statements

so, once i had the text fields in place, i had to focus on getting them to have some functionality.  i made the former alert button link to the new html page with the forms.  i put id tags on everything.  the overall form with all the text fields, i called it ‘form id= “textfields” ‘.  then in my javascript file, i called the function checkForm() which is linked to the “Submit” button.  within the checkForm() function, i grabbed the element, “textfields” by ID and created a bunch of if-statements.

the if statements checked to make sure there was input in each text field.  if there isn’t anything, it would reset the entire thing and popup an alert box telling you to fill it out.  i used many || statements to include multiple factors required for a successful filling out of the text field.

objects really are very useful.  i called things like: “textfields.name.value”, realizing that “value” is what the user types in.  later, when the function to be executed when the submit button is pressed, i created a new object.  it looks like this:

function dosubmit()
{
var personal = new Object();
personal.name = textfields.name.value;
personal.street = textfields.street.value;
personal.city = textfields.city.value; …

}

3.  Print and Validation

i passed the object ‘personal’ into another function devoted to printing out the user’s input out to the page.  i used the innerHTML to do this.  it looks like this:

confirmation.innerHTML =
“name:  “+personal.name+”<br>”+”<br>”+
“address:  “+”<br>”+personal.street+”<br>”+ …

it looks a bit messy but i suppose it does the job.  i formatted the margins and color in the CSS file.

i was able to validate whether the fields are empty, even the number of characters allowed in the state, zip and phone number fields.

so my biggest problem now as of Feb. 5, tuesday 7:36pm, is determining whether the input are numbers or letters only.  it’s infuriating!  the examples online are confusing and it doesn’t seem to apply.  also, whenever i change one little thing, my navigation div box suddenly disappears.  it doesn’t make any sense to me.  i’m afraid to change anything because it all seems so precarious.

i’m considering doing the “form” option just because it makes sense for my website.  but i know that it’s going to be convoluted.  especially with validating forms and making sure something’s entered, etc, etc.  but i think it’s a very  useful thing to know.

but wow, right now, i think i’m the most busiest i’ve ever been.  taking four classes including a 198 and work.  i know, that’s probably nothing compared to others who have like eight jobs and fifty units… but for me, it’s pretty frightening.  i just hope all the things i’m juggling won’t come tumbling down before week 10.