I'm finished!

I made it! I am not ecstatic with the result, but I am satisfied. This is the most challenging class I have ever taken. I am very happy that I didn't give up.

Back from Tampa

I had a crazy few days before going to class to present. I got panicky trying to get everything to work, and a couple of times, ended up with indecipherable stuff on my screen and had to start back.

The experience: KompoZer was frustrating, to say the least. I think if I had had a tutor to sit down with me through this and explain just the simple "how to's" of it, I would have been more sane. Instead, I would get frustrated, scap the mess I had in KompoZer, and go back to writing everything out in Notepad. Then I would be unable to make something work there, and go back to KompoZer. Eventually, I just had to start from scratch and go ONE STEP AT A TIME.

Ideally, I would have done external stylesheets and kept control of the whole thing, but when I had to drop everything into KompoZer, that changed.

My plans for my page were nothing like what I ended up with, but, in the end, I am happy that anything showed up there at all. Also, I am happy that, although it is not snazzy, it is organized.

Today's lesson:

I came back from Tampa with some ideas about things I wanted to change. For instance, I wanted to be able to click on the pictures in my photo gallery and enlarge them. Seems pretty simple. A classmate mentioned Googling free photogallery templates. I found one that looked pretty simple and followed the directions, but it didn't work. I really don't understand Java Script, and I am not sure what I did wrong.

I think I am getting to the LARGER LESSON here: I need to build on the foundation I have, no matter how small, and be patient with what I know and fully understand. I can't jump ahead and just hope that, by chance, I will hit a button and my work will be transformed. I have to build on what I have.

At this point, that means doing the "simplest" things that need doing: Fixing my links, putting in a footer, and making sure everything is in there that the list requires.

Practice, learn, practice, learn, practice, learn. Be patient where you are, and be happy with all that you have learned.

Regrouping

I am starting over again. I am determined to take something away from this class besides the memory of failure. I haven't failed, for I have learned so much and internalized so much that I didn't have a clue about before. But, I will feel like a failure if I just throw together a site with no organization. At the very least, I want to have mastered external style sheets and the use of HTML. As for graphics and drawing, I have decided that the skills I need for even begin to get a handle on that are way beyond where I am right now. If I am going to get anything meaningful out of a drawing program, that will require another course. I literally spent days trying to find a gimp tutorial that I could make sense of, and I've tried to get a handle on Photoshop Elements, but I really need some separate instruction.

So, to recap, I am going to master something well when I leave this class. It will not be everything, but it will be a base, something solid, that I can take away. I want to make sense out of something in all of this.

Lesson 12: SmartWebby

A free design guide.

Web Design Tips:

Wait. . . Before I go here, I want to go back and take a few more notes on last week's sites:

One Page Love: Luigi Marco Simonetti: Gray, simple, yet cool.

Ideas: Gray with library red writing.
Subtle brush stuff like on Altgold and Zahngold.
CSS Imagine: Samtech: leaves under paper in corners.
DamonBauer: colors.

I'm now switching tactics. First I had planned to do a site devoted to Hastings Library Youth. Then I decided that was too much stress, and I would make a site about making a site. Then I could be thinking about what I was learning as I was learning it. BUT, I now am back to the Hastings Youth. It is better suited to a web page, while the other topic is more suited to a blog. The library site is better suited to something that will be constantly changing.

Latest and Last Plan:

One page devoted to Teen Lounge: Take pictures on the 15th!

One page devoted to Past Events: Picture Hastings, Halloween, and Talent Show.

One page devoted to Upcoming Events: December Poetry Reading: Juice up the True Say and Found Art.

One page devoted to Story Time

One page devoted to In the Works: Teen Book Club

Now, Smartwebby:

I looked at the feather tutorial that Pamie recommended. This would be some handy knowledge if I decided to use images like that. I don't have Dreamweaver, but there is probably something comparable in Photoshop Elements.

A place that I may want to revisit when I sit down with my site this weekend:

"Cool Text Effects Using CSS Styles in Dreamweaver." It's under CSS Styles Tutorial. I don't have Dreamweaver, but maybe I can translate to the tools I have. Specifically, I want to get rid of the underline and use text spacing.

{A short interruption: Pamie alerted us to a website called Post Modern Shrines by Michael De Meng. Don't forget to go back there when you have time!}

Still Lesson 11: Inspirational Websites

Cool Websites dk: I was intrigued by the green background and parchment-type paper in a thumbnail of a website called Topia World. Upon enlarging it, I wasn't so enchanted, but I did notice something I haven't yet encountered on a website. It's a 3-D menu in the form of floating cards in a circle. You can click on an arrow on either side to spin to the next card. Topia World is a fantasy game website. Actually, the more I look at it, the more I am appreciating it. There is very subtle movement, too, when you move the mouse without actually clicking on the arrows. The cards float left, right, up, or down, depending on where you point. This further creates the illusion that the cards are floating.

I just clicked on Rudebox, and I'm seeing a pattern here. Now I'm in the center of a room, and when I click on the arrows, the room spins. The menu is on display on different sides of the room. Again, moving the mouse moves your perspective up, down, etc. When you click on a place to go, like video, you zoom in, and fade into a different scene. Wow. In the new window, the menu remains on the left, and when you move to different parts of the menu, the menu, and the layered textures that make it up, move, too. There is so much going on visually that it is hard to describe in words. I admire the artistry involved in this.

There were many "I'm so old" moments for me on this site. The menu is written in graffiti-style writing - and I can't read it! Some words I can make out after sitting there a while or moving the mouse over them and watching the words being written (That's another feature I've never seen).

Also, I'm not technologically/visually sophisticated enough to realize that the countdown numbers on the first screen were just reflecting the download time. I sat there saying, "Gosh Darn it - What is this newfangled thing?" Then I didn't have the sense to click the mouse when it was finished to start the tour.

What's more, I didn't notice the subtly incorporated "sound on/sound off" button. When I finally figured out what to do with the mouse, "WHY YOU SO NASTY?" blared out loud enough to blow me off my chair.

Wow. It doesn't take very long before a person can become visually illiterate.


CSS Heaven:

Hooping.net: I can really appreciate the difficulty of trying to stuff as much information as possible into as little space as possible. This site does everything possible to remedy overload. For example, pages are lined up vertically at an angle, so that you can see about 5 clearly and then can scroll forward if you want. Meanwhile, beneath that area but still above the fold are a set of three pictures which are switching out by the use of fades. Meanwhile, a very slow scroll menu is in between. A menu, with large type (relatively) is on the right and there's a place above to input personal info. This is a very delicate balancing act, getting all of these elements in one space. It almost doesn't work, but it does. It is extremely easy for me to feel overloaded by stimuli, but this works well enough that I don't just click out. If I were truly interested in the info here, I would be happy to stay.

FWA:

OMG. I found most of the thumbnails somewhat disturbing. I just clicked on the RoutanBabyMaker 3000. An idea engineered by Volkswagen, it is creepy genius. I picked that thumbnail out of many because of the cute, yet disturbing quality of the baby. That's because it is a virtual baby made out of a convergence of two photos, one of mom, one of dad. The baby's eyes move when you move the mouse. The site is made, I think, to appeal to women whose biological clock may be ticking, or who may just want to be mothers. Brooke Sheilds is the model. The goal of making a baby, supposedly, is to show you how safe the Routan is. From here you can go from designing a baby to designing your own car.

Aside from the marketing genius, the design of the site is pretty effective. The menu is a designed to look like a radio, and when you move your mouse over it, a blue light comes on for each menu item. I hit on the VW radio button, literally, and a promotion for thing called "Sign and Drive" comes up. Move the mouse over the cars, and the headlights come on. I was totally sucked into this. Can you tell I'm a children's librarian?

I consider myself pretty saavy when it comes to advertising, but they got me this time!

Best Web Gallery: These thumbnails are much more inviting. A lot of them appeal to me, and I'm not sure what to click on first. I'll try Paperheads. (BTW, I like this gallery. When you float over a thumbnail, a slightly larger version of the site comes up. Cool.) Oh, I really like this! I have no idea what is being promoted here, but two guys in business suits and paperbags for heads (with faces drawn on) come up in front of different backgrounds. Each background stays for a while. The first looked like somewhere in Tokyo, the next was on a beach, the next was in a convenience store. . . Oh, it looks like they are back in Tokyo.
This so cool. This company does web design. The menu on the right provides four visuals of work they've done. You can click on any number of pages for each client. A simple "About Services, Contact, Clients" menu is on the top of the primary screen. There is too much to describe in words what I like about this site. It is hilarious and cool without trying too hard. I'm sure it, too, will be passe one day!

Lesson 11: More Inspirational Web Sites

CSS Creme! Best Web Flavours

Larissameek.com: I like that when you float the mouse over her tag at the top or the "about" ticket next to her picture, they change color. Also, her links change color, but in addition have a little grooved thing that pops up as you pass over it. Also, she has a lot of information on the page without making it look too busy or crowded. I think that has to do with the relative size of all the elements: the type, the pictures, etc. - everything balances nicely. I also like the background. It's subtle - a dark sort of wallpaper over which a smooth similarly colored slate is placed. That is not solid, but graded, yet everything is so subtle that works together. I wonder how she made those cartoony lollipops at the top?

I notice quite a few of these sites have quite a bit of black and subtle grays. On the other hand, there are sites with a lot of white and clean, simple fonts. Doodies Doodles is one that I like: her artwork is colorful, yet has a pastel look to it. It looks very good on a white background.

Lesson 11: Advanced Topics

I'm trying to stay afloat here. Not being able to make sense of GIMP tutorials on layers, I've hit a brick wall. I've spent hours and hours starting over with it, and it's not clicking. What I really need to do is sit down with someone and do a hands-on lesson. I would have not been happy about traveling to Tampa for more classes, but this is very hard to do with a book and on-line tutorials. I gave up on GIMP and went to my husbands Photoshop Elements 2. I got some books out of the library and am looking them over, trying to figure out the basics. If I had come into this class with even a basic understanding of the image program, I wouldn't be in such a funk. It stresses me to go on to advanced topics when I'm back in remedial basics, but I have to go on.

This week we look at five to ten websites on places to get inspiration.

I will start out with "One Page Love":

I like Sako Karalekian's very simple one pager. I sort of had something in mind like that for my page. She uses images of office stuff like paper, tape, push pins, and is very minimal. That's what I like; not a page that blows you out of the room with too much stimuli.

I also like Marianna Gibara's. Again, very simple. I don't know though - Isn't that organic swirly stuff getting old? Maybe not yet. I just seem to see it everywhere, from websites to t-shirts, which makes be think people will soon tire of it. I do like it, though.

Web and iPhone Application Development: Here is a very simple site with some movement. Though I like the cleanness and simplicity of it, I still don't like images moving on a site. Maybe I'm just an old fuddy-duddy.

I love the chapstick conspiracy by Zeke Shore. This is only one item in his portfolio. As for his site, I like that, too. You can scroll through each item, while his menu remains static on the left-hand side.