Lesson 9 Advanced Topics (Continued)

Pandora Internet Radio: This project is part of the Music Genome Project. How music is composed is a mystery to me. I have no background in music and no idea how it works. The terminology is foreign to me. To read about the music genome project, then, is just as mysterious. This projects assembles musical qualities into a "genome."
The project examines attributes of the music, referred to as "genes," such as harmony, vocals, rhythm, instrumentation, etc. and matches similar types of music. For example, I chose a song by Bjork, and then the project brought up a song with similar qualities by a different artist. You can create up to 100 stations based on various artists, songs, or musical attributes.

I think that the concept is really cool. However, I guess when I decide I like a musician, I just want to hear that person. I don't necessarily want to hear other music like that person. I don't know why. But, I do think it is quite amazing that this sort of thing can be done.

I am not going to look at other web editors and text editors at this time. I am still struggling with how to use the one I have now. Because our book suggests using separate external style sheets, I am trying to build by pages step-by-step, using HTML. I want to learn how that works. Our MacDonald text warns against getting tangled up with the WYSIWYG editors. I want to be able to keep a handle on future changes.

I am also struggling with the fact that I have never learned Photoshop or a drawing program before. This is just too much new material to learn. I am just going to have to do the best that I can at this point with my text and some very simple graphics.

Lesson 9: Advanced Topics

Scripts are short pieces of code that add certain functions to your site. You can actually cut and paste a piece out and put it into your own.

In order to put an MP3 (compressed music file) on your site, you need to make a .M3U file in notepad.

Websites: FlashVista is a flash directory with flash resources and tutorials. I've been looking at some examples and the one that I like best is Thibaud's portfolio. He has all these little cards like color swatches, and when you hit on one, they all fan out. Then you can zoom in for a closer look. It's subtle. That's the only kind of flash I like. I am now on MONO*craft and fascination is competing with annoyance. I like the backgrounds, but the way everything starts flying by the screen when you put the mouse on it is driving me crazy. I feel like I'm playing a video game.

Flash Tutorials: The one that I wouldn't mind learning to do when I get beyond the basics is how to make the camera focus change effect in flash. Looking through the tutorials makes me think I have to get back to the basics first.

Site Pal Avatar: No thank you. I don't know why, but I find these fake cartoon people really annoying. Interesting to see how it's done, though.

HotSripts.com: a directory that compiles Web-programming information and resources. There are lots of scripts you can click on. This is all new to me. If you click on JavaScript, for example, you will see a clickable list of books, references, scripts and programs, software, tips and tutorials, and websites. Again, something to revisit when I get beyond truly understanding our text. Right now I'm combing through Chapter 7 again.

Basic Info about MP3's: MP3 is a technique for compressing audio files. The systems for doing this are called codecs. Earlier codecs were for real-time playing; MP3's were for downloading. Apple's iTunes offers AAC. ACC proved better than MP3 in testing.

How to create M3U files and streaming audio: I did not know this: When you are listening to streaming audio, you're listening to something as it's downloading. Streaming allows visitors to listen quickly. When not streamed, it takes longer and the person ends up with a copy of the audio item on their computer. To set up streaming audio, set up a text file that contains the link pointing to the MP3 you want to stream. Then save the file with an m3u extension.

Audacity: Free, open-source software for creating and editing sounds. You can use it to record live audio, convert tapes and records into digital recordings, edit various sound files, cut, copy and splice . . . There's a book that explains it, too! (I wish there was a book for GIMP. Reading the manual and flipping back and forth between screens is not cutting it for me.)

Musicovery Internet Radio: I'm trying to figure out how to select things. I see the "mood" box, and I'm cruising around there, but I wonder if there's a way to do a search for a particular artist. It doesn't look like there is. Also, I keep getting the message that my selection is too tiny. I don't know what that means or how to get out of it. I am kind of having fun seeing what I come up with by chance.

What I did yesterday

Below is the culmination of all my days off from work trying to figure this stuff out. (Of course, I couldn't include my background, my picture, or the groove border I used.) I think now that I spent too much time on GIMP for too little return. I made a valiant effort, but I must stop putting my energy into it. I must go back to HTML. This time I will start over with my real website. Below was just practice.


I am building a web site at the speed shifting tectonic plates. I mean I am going slow. I mean I am doing it piece by piece. I mean I have tried doing bits and pieces at least fifty times and I get tangled up and confused every time. This has been a truly humbling experience. I tried to find a picture of tectonic plates on stock.xchng, but there wasn't one there. I'll have to say that building this site is happening as slowly as your toenails grow.

My book is telling me that using inline images is the simplest way to arrange pictures. I'm going to add a bit of code to make the picture float left.

Mmmmm. . . . I love plain vanilla.


So, my action plan has changed. I have decided that instead of devoting my website to something I am doing at work, I am going to devote it to the trials of learning to make a website. This subject may be better suited to a blog, but all things considered, this is the best thing to do. There is too much newness, learning, and stress connected to my job and too much of the same in this class to lump the two together. Not doable.

So, keep going . . . .

Lord, Help Me

In class, we are now on Chapters 15 and 16. In terms of what I'm now understanding and learning, I'm back on Chapter 7. It is so very discouraging. I have had the last few days off from work, and I've spent hours just trying to find tutorials to the most basic parts of GIMP. Paths, Dialogs. . . I don't get it yet. But, I have to start somewhere, so I will forge ahead.

I am not by any means ready to put into practice the techniques in Chapters 15 and 16. In the case of Chapter 16, I don't care as much because I personally hate things that move and jump around on websites. Cannot stand them.

Chapter 15 address issues that I will eventually incorporate, providing I catch up. It is about fancy buttons and menus. A few basics:

Dynamic buttons, also called rollover buttons, change subtly when a mouse hovers over them. Some dynamic buttons have three pictures: one for the initial state, one for the hover state, and one after the button's been clicked.

It is important that buttons are lined up, the same size, and consistent throughout. To accomplish this, go to www.buttongerator.com

Reminder: anti-aliasing is a feature that smooths the edges of a font by blending them with background.

Be careful when naming buttons so that you don't get tangled. Use a descriptive name, followed by an underscore, followed by the button state (normal or mouseover).

To keep things simple, make a picture list. Use a JavaScript element called an array. Create two arrays, one for the normal images, one for selected buttons

MacDonald also suggests preloading images so that buttons are as responsive as possible.

There is a section describing the alternative way of setting all this up in Dreamweaver or Front Page. I don't know yet if KompoZer has anything Komperable.

For now, in order to save myself, I MUST go back to chapter 7.

Lesson 8: Imagery

I am such a technophobe. This is how much: My husband has had Adobe Photoshop 3.0 for what seems like years, and I’ve never touched it. I am going to look at the tutorials for the first time.

Notes: Gimp: Open source software to edit and retouch photos and images. Photoshop Elements is Photoshop Lite, according to the first turtorial on YouTube. I just downloaded gimp in case I get overwhelmed by Photoshop.

The first tutorial went down very easily. I edited one of my pictures and compressed it enough to email. What I learned:

1. For brightness/contrast: go to colors

2. To sharpen: go to filters, enhance, sharpen

3. To compress, go to scale, image, percent. Make sure locked. Bring down to about 20% (451?)

4. When asks quality, choose around 70%. Lower means smaller file, but too small may lead to degredation.

The Joy of Painting with Gimp tutorial has no sound and is about 10 times to fast to follow. Waste of time.

Oh my God! I just spent so much time searching for an understandable tutorial for Gimp. Good Lord! If I ever learn how to do this, it will be my mission to make a tutorial that is understandable, i.e. visible, audible, and at the right speed. What’s the point of doing the tutorial at the speed of light? If I could process that fast, I wouldn’t be doing the tutorial.

I finally found one the right speed. I bookmarked it. To distill:

1. Scaling (I think this is like compressing) click scale tool, drag handles, or lock to keep proportional.

2. Cropping: Pick exacto knife icon. Click inside area when done.

3.Cutting with transparency. Get paths tool. Pick stuff you want. Shift V, Conrol I, Delete.

Chooe PNG format for images with transparency.

Part 2 of the tutorial shows how to make a button in Adobe Flex. ? I’m not that advanced yet.

I’ve been perusing a number of tutorials for Gimp on YouTube, and so many of them are talking about “dialog”. I don’t see that anywhere on mine, so that must be something old.

I’ll go on to the other websites for this week and see if they help.

Let’s try the Gimp User Manual: I don’t know why I have the tools screen but not the image screen. I’ll have to put an email out to the class. I have spent all day doing this. Gotta stop!

Chapter 5: Beaird

Imagery:

Things to remember: Is it relevant? Is it interesting? Is it appealing? I have to be careful that I answer these questions correctly with my imagery. If I take a picture of a bunch of teens hanging around Teen Lounge or playing games, how will I make that look intriguing? The backdrop of the library meeting room isn't that exciting. Hmm . . . I really want to use images of the actual library and people because using flashy, even slightly stylish images, would look like I was trying too hard. That is just NOT our library. Anything that looks commercial would look fake.

Maybe not for this project, but for future reference: get free stock photography from Stock.XCHG
I doubt I will ever be purchasing images in any form, royalty free or not.

Google Ganking: getting an image off a search and then manipulating them to fit your needs. Don't do it. Assume images are copyrighted. If an image is marked as free, let the creator know how you are going to use it.

Hotlinking is another no-no. That's when a site links to files on the designers' own servers.

Creative cropping. I don't often compliment myself in this course, but I have to say I do have an eye for composition. That is probably the ONLY time I will feel confident in this course. Maybe not, though. I could have a breakthrough.

I have GOT to look at my video tutorial on Photoshop. This is something that my husband has played with, but I haven't.

Typography Websites (Continued)

Microsoft Typography: Reading about TrueType. It looks like that's what is on my screen right now. It's a digital technology developed by Apple, but now used on both Apple and Microsoft platforms. The TrueType rasterizer is the program that reads the font description and generates the bitmaps.

Micorsoft ClearType: Technological innovation that improves screen readability.
The TrueType rasterizer is the program that reads the font description and generates the bitmaps.

This site doesn't do much for me. It's getting into detail that is beyond me at this point.
But, I'm looking to download some of the free fonts. I don't even know how to install a font. I need a tutor. What I really need is to have taken a basic "How to use a computer" class before this. This little things are big stumbling blocks simply because I don't have the basic knowledge.

ABC Typography (virtual museum). I'm a little confused by this site. I'm trying to look at the classical typefaces, but every link is dead. Okay, I was able to open the 20th century, and at least read about Albertus, Eras, and Rockwell. The links on the drop-down menu are dead. Same is true of the modern collection. Interesting to find that some fonts were designed, at least in part, to compensate for the difficulties of reading from a screen and laser printing. Lucinda Bright is an example, d.o.b 1991.

A List Apart:

Typography Websites

Typography Websites:

I Love Typography: My favorite part was the portion of found type. I did a little reading on the history of humanist type. I have never really thought of the historical and cultural influences of type. It shows how much I take it for granted. I was surprised to read in the Beautiful Web Design book that there was such an outcry against sans serif.

I Love Typography: 15 Examples of Excellent Web Typograhy:

I like the type and the whole look of the website of Jesus Rogriguez Velasco. There are a lot of elements mashed together in the graphics, but also a lot of white space so that you’re not overwhelmed. It makes you stop and take time to look at each graphical element. Oh, yeah – I like the font, too, the larger sloppy looking one that he must have put in as an image. I like the oddly shaped search box, too. Picture at the top: There’s an old floppy disk, a giant computer, and a monk tumbling down.

There’s Bearskinrug again. I remember that from our text.

Typographica: Typography Journal and News

Cyrus Highsmith, a designer and faculty member a the Rhode Island School of Design, points out in his interview that 1,800 new typefaces a year are introduced to the public and wonders what that effect will have on the people who see them. Will they become more sensitive to type design, or less? I have the feeling I always have: overwhelmed. I guess I like to look at all of the different designs, but when it comes to choosing one, what do I do? With so many choices, you really have to know what is appropriate for what you’re doing. I can just picture a designer looking at what I did and saying, “That’s awful.”

Oh, no! Now I’m reading about the importance of good handwriting! I’m so self-conscious about my handwriting, especially when I have to write something in large letters on a sign for the library. My writing has no energy or style. Weird.

I totally understand what Highsmith is saying about how writing on paper makes ideas flow better and different parts of his brain light up. I often feel like I’m wasting time by taking notes the old-fashioned way, but I feel more connected to what I’m trying to absorb. Maybe if I had been born 20 years later, that wouldn’t be the case.

Wow. I really like the different FF BeoSans OT by Rossum and Blokland that has a “shaken, distraught” appearance. It costs $54.

Notes on Baeird: Typography

My Internet is down again so I’ll do this in word and then cut and paste into my blog later.

Chapter 4 of Beaird’s text: Typography

Beaird says that “the majority of the decisions that need to be made in our work with type involve the space around the letter forms and text blocks rather than the actual type itself.” That is a new way of thinking of it for me.

The SAFE LIST consists of nine font families.

CSS allows you to choose multiple fonts in order of preference.

If you really want your font to appear in a certain way, use images to display.

If you want to replace text that changes periodically, the solution is “siffer” sIFR, scalable Inman Flash Replacement. It uses Flash and JavaScript

You can control spacing horizontally and vertically.

Kerning refers to adjusting the space between letters

You can use the CSS property to adjust a fonts tracking. Add pixels to make text more open, e.g.

Vertical spacing: known as leading. You can use CSS line-height property. The unit that measures the size of a font in CSS is an em.

Fonts:

Serif: provide horizontal line reference.

Sans serif: They stand out at headlines, esp. when the main text is serif. On the web, though, the opposite it true. Probably not a good idea to use as headlines these days on the web.

Handwritten: Convert to images or use sIFR to make sure everyone can see.

Fixed-width or monospaced font: not proportionally spaced.

Novelty fonts: Can be good for logo design.

Dingbat fonts: Many available on the web. Try ScrapiCons.

Choosing the right fonts: Define feelings trying to evoke in target audience. Rule of thumb: don’t use more than four different fonts in a web design. Don’t combine two different serif with two different sans serif in same project.

Section on setting font size and em’s is going over my head ??? p. 122

The homepage should have a singular message that’s conveyed in large type. Not too much reading. It’s a hub.

Style Sheets: AGAIN

I will do my utmost to maintain external style sheets because there is a pretty strong warning in the book. Given my propensity to get tangled up with this new stuff, that's probably what I should do.
To review:
A selector id's what you want to format.
A property id's the type of format
The value sets the property.
It looks like this: selector { property: value}
You must include a link in the HEAD. There are three partas (see p. 143), the first and last of which never change.
Cascading: This term refers to the sequence of rules that are followed. They follow this order in terms of power: Inline, Internal, External, Browser.
Inheritance: Tags in HTML contain other tags. You can apply a rule to a tag that contains others. On the other hand, when they overlap, the rule closest to the tag wins.
Things to remember about color: There is COLOR and BACKGROUND COLOR.
In order to get around the plain old 16 color names, use the RGB values.

Colors on the Web:

Spinning the Color Wheel is like playing Roulette. My wrist hurts. What's interesting is that as I do this, and I happen on a color I happen to find pleasing, I then look at it again, think of how the teens would react to it, and have a crisis of confidence. Because colors go in and out of style just like clothing fashions, I worry that I'm picking a color that is "out." I'm sick of imagining being uncool.

Hmm. . . I just looked at other people's choices for colors, though, and I didn't really like theirs either.

Chapters 11 and 12: Notes

I am still back on Chapter 6 and style sheets. It's hard to believe. But, I've gone ahead and read Chapters 11 and 12 so that I can at least be timely in my note taking this week.

Chapter 11: Notes on Attracting Visitors:
Advice to heed: Entice visitors to come back with fresh content and add-on features.
Perfect you meta tags, both description and keyword. These go in the HEAD section. Put them in every page you create. Description should be a couple of sentences; keyword 25 words or less.
Submit site to web directories and search engines
Use hit counters and server logs to monitor traffic.
Find other websites like yours and establish reciprocal links. These will help your ranking.
Taking part in a web ring is another possibility, though you could end up in a ring with hideous sites. Be careful who you associate with.
Building a community, through forums, promo events, and newsletters help to keep your site viable.
Add a favicon (easily recognizable in a Favorites list)
Submit and application to ODP, the Open Directory Project. See page 299 for tips on how to do it the right way. Hint: don't be obnoxious. Other directories are Yahoo and Looksmart.
PageRank: the value of your site is determined by how many others link to it.
Another way to boost self: Google AdWords. Typical cost of a click is 35 cents.

Chapter 12 is about letting visitors talk to you and each other. In other words, give your site life by transforming it into a community.

Good tips: Be dynamic in the meta description part. Address what the site hopes to accomplish.
Add discussion forums and chat boards.
Advertise new content before adding it. Links to new content should be on first page.
Promote regular events.
The rest of the chapter explains the HTML necessary to create forms and check boxes, and how to manage a group.

I am far off from this last part. In fact, I can't imagine having the time to keep up with it. MacDonald suggests creating things like forums with threads that perpetuate themselves.

That's all for now. Back to remedial training.