once more… appearance

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.

validation is a pain!

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.

maneuvering for assignment 4

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.

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.

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.

my plan…

so for some reason, i’m dreading this stretch before thursday. it’s almost as if i know that once i start, i will not want to – or CAN’T – stop. and so i’m preparing myself for the final lap.

i decided that i want to work with all tables to organize everything. i’m going to go for simple. i also want to make something a bit different and crazy… but i don’t know if i have enough time to experiment and be creative. i sorta don’t want to do a website about me anymore… some other ideas are websites about cats, a storybook perhaps, that one might flip through… or some interesting juxtaposition of random information. i don’t know. maybe something eclectic like the Dangerous Book for Boys… things that are useful but people never really thought of doing.

anyway, i need to MAKE it first. maybe i can get creative for later projects.

rudimentary attempts at making a website

during the time between classes, i went to the geisel library’s dark and murky computer lab. a few days before, i had experimented with html when i had difficulty falling asleep. i looked up sites on google and created very basic pages. i’ve been meaning to perhaps create a website where i could store my resume and projects for employers to look at. however, for this project, i want to experiment and relax so my vision for it is a whimsical, quirky little website about me- the academic side, the fun side, and whatever side…

so today i expounded on my review of html. i had learned html in an art class before- sorta weird. but i am familiar with the process. the tags, the color values, the images. but today, i found a CSS style editing thing. i read on one website that one should use it because it’s more recent and easier to organize…? i’m not sure. but it reminds me of java. especially with the java scripting of classes and calling things.

i was thinking of creating an outline first. like, i want a heading in here, a picture here… a menu link here. but on second thought, i realized that making an outline at this point would probably only limit me. i wanted to flow with whatever tools, whatever code i learn.

my strategy will probably be to look at increasingly complex website source codes and attempt to glean what they do. it seems to work well so far. i’ve been finding w3schools.com very helpful. i will probably try the other websites mentioned in class today. though i won’t make a very sophisticated and accomplished site, i would like to make it look composed and elegant.