We feel fine

Nov 30, 2008
We feel fine

We feel fine is an interesting Java Applet utilizing colors, shapes, and motion. It summarizes phrases from blogs on the Web based on emotion keywords, weather, age, sex, etc.

Check out the presentation that its creator, Jonathan Harris made during a TED conference:

Here is a quote from their mission page:

Since August 2005, We Feel Fine has been harvesting human feelings from a large number of weblogs. Every few minutes, the system searches the world’s newly posted blog entries for occurrences of the phrases “I feel” and “I am feeling”. When it finds such a phrase, it records the full sentence, up to the period, and identifies the “feeling” expressed in that sentence (e.g. sad, happy, depressed, etc.). Because blogs are structured in largely standard ways, the age, gender, and geographical location of the author can often be extracted and saved along with the sentence, as can the local weather conditions at the time the sentence was written. All of this information is saved.

At its core, We Feel Fine is an artwork authored by everyone. It will grow and change as we grow and change, reflecting what’s on our blogs, what’s in our hearts, what’s in our minds. We hope it makes the world seem a little smaller, and we hope it helps people see beauty in the everyday ups and downs of life.

Six movements of We Feel Fine

Six movements of We Feel Fine

I’ve been creating some demo movies as part of my on-line classes and have posted them out on blip.tv.

I thought you might like to look at the series. I’ll be adding new ones on a regular basis.

Here’s a link showing all the videos available out on Blip.tv.

I’m using ScreenFlow to create my onscreen videos. This is an amazing program that allows me to capture video and sound and edit using scrolling and panning. Mac only. What is displayed here is only the video portion of the more complete tutorials I offer as part of my online and face2face courses.

The videos shots of my whiteboard talks are taken using a very inexpensive ($150) Aiptek HD1080P pocket-size video. Chad Peterson, one of my students is working on the editing. These resulted from one of my online students asking me to record my entire class. That is very difficult, getting good sound, but I thought I’d try some simple videos that focused on specific concepts to see how enhance the learning activities for each module.

I’d be interested in your comments on how useful these would be to you as a student. Thanks!

Page Layout with CSS

Nov 7, 2006

3ColLayout.jpgUsing CSS for Page Layout

Back in the old days, people had to use tables to position things on a web page. Often tables inside of tables inside of tables were required to get the right effect. Needless to say, this added a lot of extra markup tags to every web page, making it difficult to maintain.

Then, along came SEO – Search Engine Optimization. Web programmers and designers discovered that search engines were using the keywords listed in the title and the main heading (h1 element) of each page to calculate a ratio between key words and number of characters on the page. Having all those table tags greatly reduced the SEO ratio and pages that used table layout received a much lower SEO rating.

Here is a tutorial showing how to layout out a page with a two-column or three-column layout using CSS. This moves all of the styling and layout tags out of the SEO equation, leaving more undiluted text on the page. You can use these layouts as a starting point of your page design without having to build everything from scratch.


Technorati :

Got API?

Sep 7, 2006

gotAPILogo.gif.jpg

Got API?

An Application Programming Interface is a set of functions that let you “hook” into a system without having access to the source code or inside workings of that system. There’s an API for all the modern languages like Java, PHP, Ruby On Rails, and HTML. Sites such as Google, Amazon, and eBay all have an API allowing programmers to access information from their sites. Here’s a list of the APIs Google has available for many of its services including maps, adwords, and Blogger data. This lets a savvy programmer include all types of eBay or Amazon services on their web site by using what these sites have already created.

You can also think of an API as a dictionary. Just like an English dictionary displays words and their meanings, an API lists all the functions available in the API as well as what type of information each one is expecting and what type of information each function will return. Programmers use an API as a reference in using functions correctly.

Up until now a programmer had to keep a copy of each API on their computer or keep a list of bookmarks pointing to the APIs out on Web.

gotapi.com changes all of that. All the common language APIs are now available from a single link page. (Sorry, the application APIs such as Google, Amazon, and eBay aren’t listed yet.) As a programmer this means you can find information quickly as you are writing code.

gotAPIStartMenu.jpgTip: With the gotapi.com page displaying, click and drag the icon in the Address field gotAPIURL.jpgof your browser and drop it on upper part of your Start menu button. You’ll see a solid black line showing you were it will be positioned as you drag it into the Start list.

Anytime you need to look up a function, gotAPI.com is only a click or two away.

- Special thanks to Sean Washington for reminding me about this really great programming tool.


Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :

Here’s an interesting CSS technique that Gil Hanson uses to pre-load images onto his website. He uses the first few moments a person is looking at his page for the first time to quickly download all the images to his site.

In his CSS at the top of the page he creates the following CSS class selector:

.hiddenPic { display:none; }

at the bottom of the page he loads up all the images used on his website including the class selector as one of the attributes of the <img /> element.

<img src=”image/gil_bw.jpg” alt=”B&W of Gil” class=”hiddenPic” />
This causes all the images to be loaded into memory, but not displayed because of the class assignment. Then, when the user goes to another web page in the site, the pictures display immediately, because they have already been downloaded. This is a great way to handle images with graphic intensive sites.

You can see this code in action on his resume at http://webpages.charter.net/gilh/resume.html As the page loads keep your eye on the status bar at the bottom of the browser. You’ll see all those files quickly and quietly downloading behind the scene.


Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :

CSS (Cascading Style Sheet) coding is gaining a lot of popularity. And, because it is often edited you should think about writing your code with a bit of style. This will help prevent errors and typos from creeping in and make your code much easier to decipher and update anytime in the future.

I’ve started adopting a three-column layout for my CSS code. Here’s a sample styling my <p> element and a header id selector.

writeYourCSSInStyle.jpg

(Click on the image for a larger view.)

At the top of each element block I add a comment describing what this will do. For the standard XHTML elements this isn’t necessary, but it is really critical for any custom id or class selectors you create.

In the first column I list the element (in pink) then the attributes. I’m always consistent with the curly braces putting the opening one right after the element going down two lines and typing in the closing one right away, so I don’t forget it.

In the middle column I list the value, lining them all up with each other. I use spaces to do this because tabs will expand and contract on other computers making a mess of things.

In the third column I add comments describing what each item does. This has saved me hours of work. It makes quick work to track down a specific item when making minor changes. This is especially true if you are smart in your commenting. Instead of stating the obvious, describe any weirdness that may be happening or how this attribute relates to the others. I pretend that whoever will be reading this is the future has only the basic knowledge of CSS.

Follow these guidelines for some very stylish CSS code. It will make you look very professional as well as making your web programming future a lot less stressful.


Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :

gibsonCSSMenu.jpg

If your web site needs a menu, this is the one to look at.

Steve Gibson, the author of SpinRite, a hard-disk repair program, has written a very high-quality CSS menu system that does not use JavaScript.

Works with all browsers. The code that Steve has crafted works in all popular browsers including IE, FireFox, NetScape, Opera, and Safari. And he graciously put it in the public domain.

Just a simple, unordered list - The menu starts out as a simple, unordered list. Its appearance is changed using CSS (Cascading Style Sheets), an idea that has caught on quickly since it was first introduced on A List Apart and promoted by Eric Meyer in his book Eric Meyer On CSS.

Excellent Commenting – In addition Steve has added lots and lots of comments so you can utilize his techniques in other CSS style sheets.

Valid CSS - After some readers complained about non-valid code, Steve went back in and fixed all the errors/warnings so the CSS code is now 100% valid.

Hear him talk about this project - Steve talks briefly about this menu system in his podcast with Leo Laporte, Episode #54 – The Blue Pill. While you are at it, check out the other podcasts they have on the page – many colleges use this material as part of their computer security courses. (You’ll never use wireless, unprotected at a coffee shop or hotel again!).

By the way, I’ve been using SpinRite on my computers since the 1980’s and highly recommend it. Back then it saved several hard drives on the first computer’s our company owned. And just a few months ago I used it to save the data on my wife’s computer. (She thought I was the hero, but it was really Steve Gibson!) Steve is known for writing Windows programs using assembler language. His programs are so tiny he doesn’t even need to zip them for downloading. He’s a true craftsman when it comes to code.


Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :

Here’s how you can use CSS to insert page breaks in your web pages for printing.

I often print a web page to a PDF file in order to keep all the graphics and layout together. I’ll often do this with my own pages for presentation handouts.

In my CSS file I add the following class definition:

.pageBreak { page-break-before: always; }

To use this I simply add a DIV tag where ever I want the printer to start a new page:

<div class="pageBreak">
<p> </p>
</div>

Keep in mind that this CSS class is only triggered in the printing of a document. It won’t affect how the page appears in the user’s browser window.


Technorati :
Del.icio.us :
Ice Rocket :