Project preliminaries

so i met up with my group, which is me, Jill Iwasaki, and Jen Santos.  i really think we have a star team.  someone remarked how we were all very similar personalities, which is mainly: get it done as soon as possible and make it the best you can.

so i’m really excited.  we laid out a master schedule.  and we’re even going to meet on fridays at 8 in the morning!  needless to say, we are not going to have a problem meeting up and being consistent in getting things done.

our project is going to be making a facebook application that changes the colors and fonts of facebook.  it’s a simple concept but we think it’ll make a dramatic change.  because really, colors and visual appearance makes a big difference.  as it is, facebook looks like an office.  it has that drab, pale, drained boxy look.  and if we could just “spice” it up a bit, i’m sure everyone would appreciate it.

an exciting thought is that this is very usable.  we can see it really permeating the facebook culture.  we might even be going through our friends’ profiles and suddenly come across one that is colorful.  and we’ll know that “Hey!  That’s from us!”  it’s a sort of notoriety that is very possible.   and i suppose that’s the power of these laymen-built applications.  anyone can make it if they have the right ideas.  people attract people.

so the biggest obstacle is figuring out exactly how on earth this is fused into the facebook platform.  a quick glance shows a strange and alien markup language.  it looked quite daunting.  it might help a lot if we got more sites on how to do this.  and hopefully, if the TA or professor is actually reading through this entire entry, they could maybe drop by the computer lab during our meeting times?  mainly wednesday 4-8, or even friday 8 am-12noon?  that’d be absolutely wonderful.

A3: Javascript

1/30, Wed.  7:05 pm

i thought i was done yesterday but wow, i took another look at it and realized that i was not 100% confident in what i had.

the biggest obstacle was when i realized that i only used one function to do the stylesheet switching when the assignment specified two.  i hadn’t considered the possibility that i needed to follow the directions exactly.  so a bit of panic creeped in.  but then, i took a look at the code i had, which originally was:

/*
function setActiveStyleSheet(title)
{
var i, a, main;
for(i=0; (a= document.getElementsByTagName(“link”)[i]); i++)
{
if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”))
{
a.disabled = true;
if(a.getAttribute(“title”) == title) a.disabled = false;
}
}
}
*/

and i was able to figure it out pretty fast.  i just changed some things in the HTML, replacing all the files with the new code.  and it worked!  Firebug really helped speed it up by pinpointing what was wrong.

i felt very savvy.  hehe.. of course, this is after 3+ days of seriously working on it…  ahhh.

1/29, Tues. 

so i actually took advantage of that absolutely wondrous resource of a research university… the TA.

i went to office hours after class today and all my problems were solved within just ONE hour. it’s amazing how different the experience of programming is when one is floundering by oneself versus a guided learning process. truly, it was so ridiculously simple.

so Assignment 3 was using javascript in order to dynamically generate a navigation list and to add some cool buttons that pop up an alert notice and other buttons that change the stylesheets.

i discovered another use for firebug. it is really helpful to open up a window and then debug it by going through the html and seeing where there are errors or whether things went through. i used it mostly to check my progress in making the arrays and elements for the navigation links. it would show exactly where the code was lacking and that really helped me not to waste my time futilely changing other things.

in the future, i’m interested in doing some more fun and tasteful events such as mouseover to make the website look more sophisticated.

i have the link!

i found it! the problem that firebug popped up was:

a.getAttribute() has no properties

and so i googled that and up pops this site… http://www.webmasterworld.com/forum91/3524.htm.

i’m going to put this on the wiki as well. sooooo helpful!

yayyy!!!

monday (jan. 28)
9:56 am

i feel that incredible overwhelming of triumph as only succeeding after hours of programming can do.

i had attempted to start work on this program last week, even before the weekend because i knew i had a lot on my plate. but i had seriously hit a dead-end when it came to switching between stylesheets. i looked at the “A List Apart” stuff but the code just wouldn’t work. and i would get so confused about whether we need to insert our function “title” when the code said it…

so there was

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

and so i was so confused whether to insert my alternate stylesheet title which was “wild” into all the spots where it says ‘title’…

and the use i had for firebug was that it when i uploaded the window and tried clicking on the button to switch styles, a little red ‘x’ appears in the bottom corner. when i clicked on it, it kept saying that the “a.getAttribute” or some other line of code with the “a.whatever” had no properties. needless to say, i was completely flabbergasted. it seems like there’s no way to even start correcting because who knows what the magic words are? it’s so specific that one little thing off will ruin the entire program.

and so last week, i gave up in a huff, threw my hands up and stalked off. i tried to take a look at it periodically but there was no going forward.

but now, i think that website “A List Apart” was very misleading. i found another page that really helped. but sadly, i closed the window before recording its URL or else i would have posted it on the wiki. it was someone posting the exact same problem online and people replied with their suggestions. it was great because you could choose from the different solutions the one that matches the one that looks like yours…

so Firebug really helped me in locating my problem. i just typed in the error it kept showing up and someone else had already asked about it. i found the solution in about five tries. and it works perfectly.

so now, i’m trying to move on to the generating of the navigation list. once again, it was really easy to find how to load when the window opens because of other people’s questions. it’s really quite nice.

javascript

interesting…  but seems to just add the fun button-clicking, things changing aspect.  doesn’t really influence the fundamental structure of the site.  something which i am intensely grateful about…

got the linking to an external javascript file…  got the popup alerts- very simple really.   it gets confusing figuring out how to make things external and not internal.  most of the examples on w3schools is internal stylesheets…

the problem i got stuck on is finding sites that explain how to switch between stylesheets that are BOTH external.  i’m finding external stylesheets and switching stylesheets but not something that tells how to do BOTH at the same time.

right now, i’m focusing on how to get the assignment done.  maybe when i have more time, i can have more fun and branch out to other interesting looking functions.  but man, it’s already down to crunch time with other classes…  i know i want to do my best in 121 but right now, it’s swallowing everything else.

A2: CSS benefits

Wednesday, January 23, 2008
(10:30 pm)

I finished programming Assignment 2. The page looks almost identical to the first assignment but in reality, I had hand-touched and re-created every single aspect of it. Although the point of the assignment was that one only need change one file in order to impact all the others, I still needed to reformat the HTML file as well because it was in such a mess. It was simpler to just start again from scratch. No more tables except for listing data. I learned more control over the layout of the page with floating blocks.

CSS is most definitely useful. Mostly because it is so intuitive. The categorization of content structure vs. formatting and styles is probably what i would have naturally done by myself.

The usual praises for CSS which are, nevertheless, very true are its simplicity and dexterity in changing styles across multiple pages. Having an external stylesheet that is linked to all the pages promotes consistency. Declaring a selector and then listing all its properties in one section is refreshing. Also, the HTML file is much cleaner and one can get a better sense of its layout. When one is editing the content, one does not need to bother about its appearance. When one is changing the style, one does not need to worry about the structure being affected. There is a nice buffer there. When one is changing things in one file, one is assured that the other is still static and dependable.

Some more benefits are that CSS enables a faster download, it enables different formats for multiple devices such as printers or mobile use. The content is intact but the style can be varied. CSS is also much more efficient because it requires less code.

Really, although there is some coordination involved in making multiple files to format an HTML, it is very worth it in the end. CSS makes files much more usable and manipulable. HTML tags within the code is very messy. CSS enables different layers and focuses for more powerful programming.

Classes vs. IDs

One would use CSS classes when one wants to format a group of objects.  IDs are only for single items.  Classes are for when there are more than one instance of the object within a page.  IDs are for when there is only a unique instance in the page.   So for example, one would use <ul class=”Navigation”> if there were many times that “Navigation” is used.  But if there’s only one, which is the case for my websites, one could use <ul id=”Navigation”>.

CSS- so familiar yet so strange.

tuesday, 1/22/08

(3:00 pm)
the deeper and deeper i go into CSS, the more i realize that i have a long road ahead of me. i thought that it’d be a simple enough assignment. simply reformat the website i’ve already made into an external file. but i realized that it needs to be completely revamped.

i had made the layout with tables. and of course, i heard today in lecture that we should NOT do that. and though there are many pages online about how to create an internal CSS style, there aren’t so many about external ones. such as how one should format the .css file and how one is supposed to call it.

the biggest problems i’ve run into were about tables. but since we’re not supposed to use them anyway, perhaps it’ll be easier. i guess i need to figure out what the <div> tags are…

wednesday, 1/23/08
(9:30 pm)

the areas that took up the most time and research were the floating blocks with div tags.  it took a little while to figure out how the blocks behaved when floating left or right or if it clears both…  Also, i played around a lot with pixel values and percentages.

the hyperlinks were frustrating.  for some reason, they kept displaying only the “visited link” color.  Even after I exited Firefox, they kept showing up in blue.  Even now, the problem isn’t really figured out.  and i even looked up the order others recommend but it still didn’t work.

one interesting thing i found was the image formatting.  i realized that the images can all be formatted to be the same size by simply defining the region they would occupy.  Then, it flexes to whatever window size the user sets.  And it looks good.  the navigation bar was also difficult to position and center.

one can make a navigation bar with the <ul> tag for a list.  similarly one can edit and format the horizontal rule in the CSS external stylesheet.  it was quite simple to change the format into something else.  though it couldn’t be changed too much because the order and content of blocks are still set by the HTML.  only the style is changed, which involves colors, fonts, sizes of blocks, etc.

martin luther king, jr. holiday

looking over assignment 2 requirements, i realized i already did some of the requirements.  like changing the hyperlink’s hover color, laying out the navigation in a horizontal line.  but i guess i’ll have to do it with new CSS wording.

i had started doing a pixar new website but realized that it’ll take way too much time.  so i guess i am just reformatting the old one.  text editor is still annoying, especially trying to save it as certain files.  i opened my external style sheet and the formatting of the lines were all off.  half of the code was trying to fit onto one line.  not fun.

i need to figure out mainly, what is structural and what is visual.  that way, i can divide them into their respective style sheets.

discovering, exploring CSS basics

1. PART ONE: .css files

(9:30 am)
started out by googling “CSS external file” like it says to on the wiki Assignment 2 page. linked to “http://www.tizag.com/cssT/external.php”

just followed the example they had up. wow! amazingly simple. i can see how it’s powerful. so for this assignment, we don’t really change too much, right? except i think i’m going to run into some problems because I think i had one header be a certain color, font, and size in one page and doubled it as something different on another page. hmm… so the appearance may be a bit different. but at least it’ll be more consistent. right?

(10:25 am)
yup, i had to change my headings. now they’re a different font and color… oh well. it still looks okay. i’ve spent most of the time renaming files and stuff. now, i’m confused about whether i can format tables in the external css file. i’m gonna go look for that… because there’s still a lot of gunk around there… like specific size of the images and table widths. i’m just afraid that in the process of making things easier with CSS, it’ll mess up the delicate balance i have. but that’s the point i suppose. we don’t just have a tenuous grasp but a confident one.

some changes that i might want to add is the feature where, when you click on something, it automatically goes to that spot on the page. i don’t want people to constantly be scrolling up and down… and maybe even have some animation going on… like the picture changes when you hover over it or something. i guess i’m just going to keep building off my old website. too much to start from scratch. but then again, it’s harder to wade through all the old bits.

(1:10 pm)
so i just spent three hours trying to find a text editor that i can easily use on a mac.  i must confess i had heretical thoughts that in this instance, windows is much better than macs because they have a simple solution:  Notepad!!!  i downloaded Emacs, tried gvim and they were really scary interfaces.  it looked very intimidating.  so i downloaded creatext, a sort of obscure, new thing but i liked the simple interface…  but then, it won’t let me save a regular .css file.  instead, i had to name it __.css.html.  but that works so i might just go along slowly…  gah!  i’m quite frustrated.

besides that fiasco, i’m going through the CSS tutorials.  i don’t trust myself to know it just by knowing basic HTML so i’m going to do a very thorough browsing.

A1: HTML website

i finished thursday morning at 2 am.  and this is not because i procrastinated.  i am somewhat of a perfectionist.  so i spent valuable hours formatting spacing and placement.  but this is what my schedule looked like:

thur (wk 1) – tues (wk 2)

after three practice websites, i finally started on my official one.  i decided to document my obssession with Cirque du Soleil.  Cirque du Soleil is a higher class of modern circus with tickets ranging near $100.  so you can see that there is definitely an obssession when i tell you that i have gone to at least 8 shows, 5 of them being in the past five months.  so i most certainly had material to work with.

wed (1/16)
11:30 – 3 pm,  5 – 8 pm

went to Geisel library with my trusty Mac Powerbook.  began making pages, using HTML and i’m sure a hybrid of methods.  i used CSS text style- i guess an internal style sheet.  anyway, it was a smattering of things i picked up.  mostly from w3schools.com.

from previous websites, i realized that i did NOT want to use frames.  the linking looked too complicated.  so i heard from people that tables were much more preferable for structuring, etc.  so i set out to learn about tables.  my entire website is a table within a table.  i had a lot of fun finding and photoshopping images from the Cirque website and Google images.  i had done some graphic work before so it was actually a joy to work with images.  and it went in seamlessly to the black background.  i already had experience with the black hole of photoshopping images so i restrained myself from making all the text into graphical images.  i decided to stick to simply text and font changes.

there is the “home” page, a page “about cirque”, a “chronology” of my history of cirque shows i’ve seen, and a page “about me”.   a single table row provides the basic navigation.  i had fun making different colors for hovering and clicking, etc.  the “chronology” page, i suppose, is the main bulk of the website.  it was also the most ridiculously difficult page to program.  first, i didn’t have a clear grasp of tables.  so i actually had a lot of help from a friend.  we had to draw out the table on a piece of paper to understand where we were in the programming- especially after spanning rows and columns- it gets tricky.  and then, the table would do crazy random things such as pushing perfectly fine texts into another column or some such nonsense.  anyway, i put pictures of the show titles and where i saw it and when and linked the pictures to a little description of my experience at the show- NOT a description of the show itself.  i thought that was a nice personal touch.  hopefully, i didn’t give anything away.

but there are stories worth telling.  one was Corteo and it was a surprise birthday gift.  we sat in the front, on the aisle.  so the performers messed with us, one handed me his business card and told me to give him a call sometime, another serenaded me- haha!  and the crowning moment of the night was realizing that Kevin Bacon was sitting directly across the aisle from us.

it was an infinitely practical assignment.  though commenting was a little weird.  i didn’t know what was supposed to be commented on.  like, is the font tag supposed to have a comment saying that it designates a font?  or do i have to specify that one had to close all tags?  also, i guess there are areas where one shouldn’t comment or it messes up  the code.  and though the scope of what i did was manageable, it definitely pushed me.  i don’t even want to think about how to make things animated and pop up and fade out and all that other fancy stuff.  at least not right away… it is nice to know that they are all within my grasp.  it’s a simple google search away.