This exercise has been great because it has made me realize how visual communication isn’t just about graphics and how it can have more similarities with product design and interface design than graphic design. And how much the dynamics of design changes when you use it in the digital dimension versus a static poster. The involvement of the user/reader, the interaction levels, the methods of expression are completely different and I think all of these are influenced by the content and in turn, they influence the content in the digital arena as well.

The mouse is mightier than the pen

Since I couldn’t figure out the js, I decided to not depend on it at all (for now) and pull in by wednesday with atleast a functioning html+css site. Last post’s reference to how technology makes life simpler and yet more difficult seems to be resonating strongly.

*I read in this book called ‘the Design of Everyday Things’ that if an error is possible, someone will make it so designers ahould assume that all particular errors will occur, but right now, I’m not really a designer but a user (of DreamWeaver or whatever other coding software) and I completely agree with that statement. The same book also explains the ‘Paradox of technology-the same technology that simplifies life by providing more functions in each device also complicates life by making the device harder to learn, harder to use.’
I can connect this paradox to the cycle of the evolution of how computers have been (and are currently being) used and how how they are used affects how it has evolved.

And we worked out the javascript for simple functions. js is like the z axis to the html x-axis and css y-axis. Simple (for now atleast)  flash like functions with interrelations between elements.

I should have figured out how exactly jquery/mootools works yesterday but Iwas too hassled about resizing images. Instead, what I did to take a break from Photoshop, was to find out why JavaScript was called JavaScript. How did a coding language get such a nice exotic holiday-y name? This is what I found in Wikipedia:

“James Gosling initiated the Java language project in June 1991 for use in one of his many set-top box projects. The language, initially called Oak after an oak tree that stood outside Gosling’s office, also went by the name Green and ended up later renamed as Java, from a list of random words”

That seemed a like a bit of a letdown so I followed one of the references listed below the article

From: James Gosling
Date: August 24, 2007 8:16:58 PM PDT
To: Jonathan Schwartz
Subject: How was Java named?

The story goes like this:

We needed a name. We had been using “oak” (which was selected essentially randomly by me), and while the team had grown attached to it, the trademark lawyers ruled it out. We had lots of email debates about names, but nothing got resolved. We ended up in the awkward position where the #1 thing stopping us from shipping was the name.

Our marketing lead knew someone who was a “naming consultant” (I don’t remember his name, but he was great). We could neither afford the price nor the time of a conventional product naming process. He agreed to do something rather odd, but effective and quick: he acted as a facilitator at a meeting where about a dozen of us locked ourselves in a room for an afternoon. He started asking us questions like “How does this thing make you feel?” (Excited!) “What else makes you feel that way?” (Java!) We ended up with a board covered with essentially random words. Then he put us through a sorting process where we ended up with a ranking of the names. We ended up with a dozen name candidates and sent them off to the lawyers: they worked down the list until they hit one that cleared their search. “Java” was the fourth name on the list. The first name on the list was “Silk”, which I hated but everyone else liked. My favorite was “Lyric”, the third one on the list, but it didn’t pass the lawyers test. I don’t remember what the other candidate names where.

So, who named Java? Marketing organized the meeting, the consultant ran it, and a whole pile of us did a lot of yelling out of random words. I’m honestly not real sure who said “Java” first, but I’m pretty sure it was Mark Opperman.

There certainly wasn’t any brilliant marketing mind who went through a coherent thought process.

And this is what the Javanese script looks like:

Compared to the other work we’ve done so far, web design seems to be more about uniformity and
making disparate elements work together.  The web page can’t be too simple because it wouldn’t do justice to the possibilities in web design. On the other hand, complexity (in terms of navigation or visual elements) can be a pain for the user. While going through the websites, I also found that what I found cool, someone else might find annoyingly distracting. People have such different views on aesthetics and browsing through a website is such a personal experience. I don’t quite know how you can design for an audience you don’t know.

The homework assignment included everything we’ve done so far which itself is quite a lot. Plus, there’s hardly been a couple of hours of electricity the entire day. So no internet. So no references. And sudden shutting down of laptops.
The other ‘design’ issue I have right now is that all my layouts so far look ugly. I really need to get more comfortable with the CSS properties so that I have the time to execute a complete layout done in photoshop instead of playing around with sizes and things on Dreamweaver.

Still not very comfortable with the text wrap that happens in a floater either. Maybe I’ve placed it with a wrong reference but all the DIV nestings and closings are fine. I think.

Solution  1-Save the image as a transparent png in Photoshop. There is also some cool way of doing it on HTML(for backgrounds). Later I guess.
Solution 2-Fix the length and width of the DIV
Solution 3-I forgot to ask
Solution 4-By placing DIVS within DIVS

Solution 5- Obviously, nothing.

Lesson for today was to keep all the coding as organized and uniform as possible. The semantics of the language makes so much more sense after that.

While doing yesterday’s assignment, the problem with the layout was that all the elements would just stack. Figured out today that relative positioning and nesting DIVS within DIVS was the key.

+classes and multiple classes and img tags

Got the concepts of links and pseudo classes but I haven’t had the time to try it out. That and floats.

The CSS labels on the HTML tags seems to make coding much faster, more flexible and more organized. As do the divs.

So we used all of these plus tons more stuff to create a page using the concept of DIVS as divisions to create a web page on photoshop.
The tougher part, the actual coding for the web page was what we had for homework.

It was really simple actually when I started off. Up to the point where I had to define a no repeat header. For some reason, the header just wouldn’t load. I tried converting the image to jpegs, tifs, pngs. I tried taking a smaller image. I tried taking an even smaller one and tiling it to check if there was something wrong with my CSS scripting. I tried filling in colour, background colour; defining borders, thin, thick, red and dotted. I restarted the entire process. I gave up. I downloaded a template with a header to check if something was missing or wrong in my coding. I tried validating my CSS file to http://www.w3.org/. Everything was fine except that Firefox would refuse to show me any image other than the tiled background. I spent 3 straight hours getting to this point.

THEN I discovered that I could view the HTML file as a design on DreamWeaver itself.

After that it was really cool playing around with the images, colours, DIVS, alignments, font families, font sizes, background colours.

I still haven’t figured out
1. How to apply translucency or reduce the opacity (without making it transparent) of the background

2. I had to manually fix my header width and height because I couldn’t manage to make it non-repeating image despite {image: non repeating}

3. How the background clip works

4.How exactly does div positioning using absolute positioning, the X and Y-axis and the percentage methods work

5. And what’s wrong with my firefox

Our first assignment was to design the homepage of an artist on Photoshop, working with only one image and minimal text. I don’t think any of us had thought of how the site would look if the browser window was shrunk but it was fun to try and find solutions for the websites on the table itself which included using patterns, fluid layouts, scroll bars, pop up windows with a fixed browser size and increasing the space around the image or text or both.

The hardest part in class was trying to understand the language (and its application) but I think the tutorial on http://www.htmldog.com/ made it a lot simpler. It seems a lot like the BODMAS concept in maths where you work from the outermost brackets in an equation to the innermost.  And it made understanding what exactly the next assignment was a lot easier.

I struggled with the next assignment because though I got the HTML bit fine, I had no idea how to check the CSS part of it. The next problem was linking the CSS to the HTML. I didn’t know where to insert the link into the body of the HTML and none of the options I tried worked out. Finally, I found a simpler template and it worked alright. Not pretty at all but that can be easily played around with.