Friday, September 28, 2007

HTML 5.0 Tag Spotlight: <canvas>

For those web developers out there who don't know: HTML 5.0 is under development. I have decided that I will spotlight a tag or a change from 4.x to 5.0 from time to time in this here blog.

Enjoy!

Today's tag is: <canvas>

Available attributes: height, width.

Tag description: Essentially mspaint for your browser. Included with HTML5 is an entire API for writing images on the fly. You can specify shapes and lines, as well as stroke styles and images. You can trigger changes to the shapes with events in your page, including altering opacity, adding or removing images or shapes, or moving the shapes around.

One noted feature of the <canvas> tag is the ability to grab a specific part of an image:



I can also see the <canvas> API as being a quick replacement for much of what Flash does. Because you can make changes at any time to the canvas, it seems that with a bit of scripting, most visual SWFs can be reproduced easily.

At the very least, this tag will find use when a person wants to display some vector graphics. At the very most, we may see entire videos done in a <canvas>.

I'll be interested to see where this tag ends up being used.

Labels: , , , , ,

Tuesday, September 25, 2007

Kuler: a tool for the design-challenged developer

If you're anything like me, you can code a web page with little trouble, but when it comes to figuring out what colors are good and what images to select, it becomes more difficult to make decisions.

Enter Kuler: a color-scheme repository open for everyone to post.

Kuler Screenshot

Using the website or the widget (download below) built on the Adobe Air framework, this Flash based application lets me figure out what actually talented graphics people think goes well together.

If you happen to be one of those people who knows one color from another you can try your hand at creating color strips for others to vote on, the most popular displayed on the main page @ kuler.adobe.com.

Check this useful tool out here: http://kuler.adobe.com/
Download the desktop widget built with Adobe Air here: !Download!
(note you need the Adobe Air runtime for this widget.)

Labels: , , , ,

Friday, September 14, 2007

Review: Avant Web Browser [3/5]


Avant Logo

My initial impression about this browser is that it's very much like IE. Loading up my website I notice that dashed borders (as you see in the side bar on the right) show up exactly as they would in IE7, and many of IE's quirks seem to follow. As I write this, the scroll bar in the small box does not work properly for IE, and it does not work in Avant in the same way.

edit: Upon further research... I happened across this bit of information:

Avant Browser enhances your copy of Internet Explorer, even if you've upgraded to IE7, with ad-blocking and other handy features.

Back when Internet Explorer was languishing without a major update, a few enterprising developers figured out how to build a tabbed interface and other missing amenties around IE's basic web-page engine. One of those products, Avant Browser, was a boon to IE 6 users, adding much-needed tabbed browsing and newsfeed support.

Even today, the program still improves on IE 7 with ad blocking, a flash animation filter, mouse gestures, and skins. The program also lets you store your bookmarks, saved passwords, newsfeeds, and other configuration data online allowing you to synchronize your browsing experience among multiple locations.


The reason it looks so similar is because it basically is IE with enhancements.

Comparison between how each browsers render my blog page

As for the UI, it has some nice features.

The first thing that caught my eye while poking through the menus (which are oddly, but not annoyingly located on the upper right hand corner of the browser by default) was the abundance of preloaded skins.

Menu for selecting skins.

The skins range from bland grayish themes to good enough grayish themes with a bit of color for menu selections. My eventual selection was AthenX. Although most of the selections are more or less the same with slight variation in color and texture, at least Avant gives you a choice.

Other tools I found interesting:

Built in auto-fill

screenshot of autofill box.

This is something that is accomplished by the Google toolbar in other browsers, but Avant has one thing they don't. You can sign up for an account that will host your password information online so you can access it from any computer via a login.

Screenshot of login box.

I don't know how comfortable people are with sending all of their login information to where ever the online password storage is, but it certainly is convenient to keep things consistent between computers.

In addition to built in adblock, which comes with an extensive pre-populated black list consisting of sites such as doubleclick.com and adserver.com, as well as subdomains such as i.us.rmi.yahoo.com which are known advertising sources, there are other tools that users might find useful.

As in Firefox and Opera, this browser will also save your sessions if you like. Instead of just a dialogue at the beginning, you get one both when you close the browser and when it starts up. When you close the browser for the first time, you're asked to set a default: save all sessions, save no sessions, or ask upon closing. I select saving all my sessions, and restart the browser. This dialogue pops up:

Screenshot of startup dialogue

This is a cool feature, letting me pick and choose what I want to load, rather than loading every Wikipedia page I was looking at and forgot to close in addition to the 2 or 3 pages I actually want to load. Takes less time than closing each window I didn't actually want.

There are other nice features, such as a well organized tools menu which takes a lot of the obscurely placed options and places them in a much more accessible place. (see skins image above) You can clear your records such as form data you've typed, and you can enable/disable all types of multimedia without hunting for the right tab in the options menu.

Probably my favorite new feature is in the toolbar: an undo closed tab/window button. While you can undo a closed tab in Firefox, you actually have to have at least 2 tabs open in order to do so... and it just so happens that more often than not, it's when I have 1 tab open that I need to reopen a tab that I just closed. This button streamlines the process nicely, a welcome feature.

Screenshot of the undo close button.

Beyond those mentioned, there isn't a whole lot new and special about this browser. I miss the gestures built into Opera, and availible via extension to Firefox. Avant only has forward and back gestures set like the other browsers, the rest would either have to be reset or relearned.

The benchmark of whether a browser is good or bad, the webstandards.org Acid Test, is good for checking if web standards matter to the people writing the browser... and this browser fails that test miserably.

Here's a set of screenshots showing how all the browsers check out on the Acid 2 test:


This is what is supposed to be displayed.


This is how browsers attempt to display it:


Internet Explorer 7.0
(What. Is. That.)

Firefox
(Good enough... Firefox is quality)

Opera
(Opera wins this round!)

Here's one just for kicks, as a means of revenge on the version of IE I hate so much:

Internet Explorer 6.0
(Hey! You can almost see a smile in that picture!)


There's the basic overview of the Avant Browser. I encourage you to check it out for yourself and leave a comment about good or bad things you find with the browser. I won't be switching to this browser as none of the features I like are key features, and the lack of standards compliance bothers me.

Stick with Opera or Firefox for the strength of the extension communities and quality of page rendering.

The Good: The interface
The Bad: Based on IE, lack of typical gesture motions. [Andrew, in the comment below, pointed out that gestures did exist, just with different motions than I'm used to. Since I was tempted to give a 2.5 due to using IE as the base, I'll leave the rating as a solid 3, rather than the previous tentative 3.]

Bottom Line: 3/5

Labels: , , , , , , ,

Tuesday, September 11, 2007

Twinoo: How to squish your brain without trying too hard.

Has the right side of your brain ever played a game against the left?

Now it can... and the result for me tends to be the odd sensation of a squishy brain.

The concept of this game is to answer the questions before time runs out... two at a time. The left side deals with math, where the right side is all colors. Don't let either timer run out to keep the game going.

Check it out here: http://www.tetris1d.org/zigah/twinoo/twinoo.php

If my brain didn't hurt so much right now, I'd tell you what my best score was... but it is and I can't cause I forgot.

edit:

When I made this post, I noticed that the right side of my brain hadn't won a single game.... but I also realized I was listening to the jazz stream from www.wrti.com. This apparently distracted the right side of my brain, so it demanded a rematch. Upon removing my headphones, the right side of my brain scored a win!

The brain world cup is coming shortly... I will edit once again with my findings of which side of my brain is more powerful. However, at the moment both sides are rather tired and squishy from this exercise, so that will come at a later time.

Feel free to leave a comment saying how you did... Can anyone score higher than my meager scores below? If you're too embarassed about your score, you can feel free to relate how squishy your brain feels after this activity.

Best Scores to date: (9/11/06)

Left: 35
Right: 36
--
Total: 71

Left: 37
Right: 35
--
Total: 72

Left: 39
Right: 36
--
Total: 75

Clearly my brain was going easy, so as not to discourage competition. I could do better, but I want other people to feel like they're doing well. (right?)

Labels: , , , , ,

Saturday, September 1, 2007

The Internet Savvy Environmentalist

What does a person concerned about the levels of power consumption do when they're faced with the need to surf the internet?

They use Blackle, naturally.

What is Blackle? Blackle is the spawn of a curious blog post that pointed out that if Google used a black background, then the world would consume ~8.3 Megawatt-hours less per day, or roughly $75,000 saved per year.

Apparently this doesn't apply to LCD displays though... so unless you run a CRT you can't end the world's energy crisis. Tough luck for you.

Taken from http://www.blackle.com/about/:


How is Blackle saving energy?


Blackle was created by Heap Media to remind us all of the need to take small steps in our everyday lives to save energy. Blackle searches are powered by Google Custom Search.



Blackle saves energy because the screen is predominantly black. "Image displayed is primarily a function of the user's color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen." Roberson et al, 2002


In January 2007 a blog post titled Black Google Would Save 750 Megawatt-hours a Year proposed the theory that a black version of the Google search engine would save a fair bit of energy due to the popularity of the search engine. Since then there has been skepticism about the significance of the energy savings that can be achieved and the cost in terms of readability of black web pages.


We believe that there is value in the concept because even if the energy savings are small, they all add up. Secondly we feel that seeing Blackle every time we load our web browser reminds us that we need to keep taking small steps to save energy.


Labels: , , , , ,