Ruby On Rails, Design, Simplicity, Web 2.0, Ajax, Mac and Tons of Pizza.

Bruce Sterling talks about Web 2.0 in Italy

Posted by Massimo Sgrelli in Web 2.0 - no comments

I’ve just discovered this speech that Bruce Sterling made in Turin, Italy, just a few days ago. Bruce temporary transfered in Italy for 6-8 months to organize the Share Festival and met students to talk about Web 2.0 in a very easy way. The streaming is quite long, but it’s definitely interesting.

A small note: He talked about many things that could be the future of the Web like “3d web”, industry consolidation, the computing cloud … and… by the way in his opinion “semantic web” is not included, at the moment.

Permalink

Creating bubble tooltips.....

Posted by Annalisa Afeltra in Design - Web 2.0 - comments are closed

While trying to look for tips and tricks to make my web applications more interesting I came across an interesting article written by Alessandro Fulciniti . He uses javascript, css and a simple image to create bubble tooltips on web applications.

How it works:

Firstly the javascript, css and image must be saved in the same directory as the page.

It simply uses an image that is called from the css file, therefore this can be modified with an image that you prefer.

The following must be copied into the head section of the page to reference the javascript file and the javascript file BubbleTooltips must be copied into the same directory.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

If you require some links to be without the bubble tooltip, the following script should rather be used as it requires an id to be passed to it that specifies which link requires the bubble tooltip to appear.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>

<span class="tooltip">
<span class="top">title of the link</span>
<b class="bottom">url of the link, max 30 chars</b>
</span>

<a href="http://whodo.es">Who Does</a> 

 <div id ="content"></div>

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

How to add more callbacks to Sortable class

Posted by Sandro Paganotti in Web 2.0 - comments are closed

The Scriptacolous Sortable class contains istances of Draggable and Droppable; after a quick look I discover that there are very useful callbacks (onStart , onEnd) that you can’t trigger from Sortable.

Enabling these callbacks require just a few minutes and three (maybe four :) lines of code; to do this you need to open ‘dragdrop.js’ (I’m currently using Scriptacolous 1.8), go to line 652 and modify as follow:

      // Around Line 652   

      onChange:    Prototype.emptyFunction,
      onUpdate:    Prototype.emptyFunction,
      onStart:        Prototype.emptyFunction,   //  prepare an onStart function
      onEnd:        Prototype.emptyFunction   //  prepare an onEnd function 
    }, arguments[1] || { });

    // clear any old sortable with same element
    this.destroy(element);

    // build options for the draggables
    var options_for_draggable = {
      revert:      true,
      quiet:       options.quiet,
      scroll:      options.scroll,
      scrollSpeed: options.scrollSpeed,
      scrollSensitivity: options.scrollSensitivity,
      delay:       options.delay,
      ghosting:    options.ghosting,
      constraint:  options.constraint,
      handle:      options.handle, 
      onStart:     options.onStart,   // apply the onStart function to the draggable istance
      onEnd:        options.onEnd    // apply the onEnd function to the draggable istance
     };

In the same way you can implement also the callbacks related to the Droppable class. Hope this may be useful.

Sandro

Permalink

Enterprise 2.0 means definitely easier

Posted by Massimo Sgrelli in Web 2.0 - comments are closed

I was reading an article by Dion Hinchcliffe about “Reinventing the Enterprise” summit held in Boston a few days ago. Some “industry luminaries”, discussed about the adoption of Web 2.0 tools and habits in the enterprise.

In particular I,ve been worried about this quote by Andrew McAfee, creator of the Web 2.0 in business viewpoint:

“My personal view is that our software consumption habits are still so ingrained from the last 20 years of the tools we’ve had on our desktops that our migration to better solutions has been slowed”.

... and I agree with that, but the following part is different:

“Not to mention that many of these new tools, like Google Docs in my discussion below, are just now getting good enough for serious business use and finally contain enough Enterprise 2.0 ingredients to be a significant improvement“

What’s “serious business use”? “Enterprise 2.0 ingredients”?

Oh my God. It’s so sad. Web 2.0 means simplicity and Google Docs is many things but simple. Google Apps are trying to take the leadership of Office tools by Microsoft. It’s a business war played on the ground of the richest feature set and on complexity.

The enterprise could get all the benefits from Web 2.0 (re)evolution following the simplicity wave, without trying to get on a browser, what they already got through a fat client.

Things like xywrite it! or Writeboard are more 2.0 then Google Docs.

Permalink

Web 2.0 time: never redesign buttons

Posted by Massimo Sgrelli in Design - Web 2.0 - comments are closed

There’s something that I really can’t understand about the web. Every time people design a new web application, they usually re-draw “buttons” using Photoshop or similar programs. This is very common especially in this Web 2.0 time, where anyone wants to have cool brightly buttons.

HTML provide us a full feature set of web controls and each of them can be used through a simple tag on a page.

Why don’t people like them?

Why do they need to change what’s actually working well?

I’m not a designer, but have to admit that it happens to me sometimes. The truth is that every time we design a new web site we partially waste our time in users confusing tasks. They gratify ourselves, not the end user.

Let me explain why. A user can learn everything, but I’m pretty sure that there’s something which he’s already used to. It’s the operating system he has chosen (or not) to install on his PC. The great part of the PC users have a Wintel platform and I suppose they know it quite well. In any case, if a user has chosen a different OS, he probably likes it and he knows what its basic user interface controls mean. They definitely know what a button is and how it looks like.

Every time we decide to re-design the application buttons we could confuse the users, forcing them to learn a new metaphor.

Permalink

Apple strategy? Yes, thank you

Posted by Massimo Sgrelli in Web 2.0 - comments are closed

Yesterday I read an article about Apple published on Business Week. Peter Burrow perfectly defined Apple strategy in this way: “Focus on making the best product, and rewards will follow”. I think it’s a great and simple way to approach the market. It’s all there. Everything else is bullshit: Apple make wonderful hardware and software products. They know how to merge simplicity with stylish design and user experience. We try to make the same thing, knowing very well we are not Apple. We are 5 persons building Web Applications trying to be paranoid about how users feel when they use our stuff.

Apple and Ruby with their style inspire us and bring us to make our best. Believe me, it works.

Focus on making the best product, and rewords will come

Permalink

Ireland, thoughts on road signs

Posted by Sandro Paganotti in Web 2.0 - comments are closed

We’ve just come back from a short and relaxing trip to Ireland, while travelling around this amazing and inspiring country we found ourselves thinking about the way the Irish street signs are structured and which good and bad ideas are in the design.

Bad Ideas

There are two big sources of confusion related to Irish signs: sign colors, sign positions and shapes

• Sign colors
  There are two main colors in the Irish Street Signs, white and green. The problem is that both of these colors are often used out of their respective conventions (white signs for regional roads and green signs for national roads), so it could also happen that a sign pointing to a shop/bed and breakfast/place of interest has exactly the same colour and shape of the one pointing to a national road.

• Sign positions and shapes
  Other than colors, the position and the shape of the signs are also not standardized, it could happen that a national road, usually identified by a big green sign at eye level, belongs to a little green sign in the baseline of a roundabout.

Good Ideas

I found a lot of inspiration looking at the Irish way of structuring road signs:

• Parentheses
  If you are travelling on the N18 and you are nearby Limerick, while looking for Tralee you’ll find signals with a code like N21 Tralee (N69 Dingle). What does this means? That the way you’re going, taking the (N21) will bring you to Tralee and from there you’ll find a new road (N69). Smart isn’t it? It’s like building a 2 level direction tree for each sign.

• Progress bars
  On a national road in the proximity of an exit you’ll find a sort of street progess bar, three signs with three, two, and one white bar placed in the last 300meters before the exit, 100mt apart from the each other. Very useful especially at night.

• Named roundabouts
  Each roundabout in Ireland has its own name (‘Joyce’,’Martin’,ecc…). This result is very useful for anyone (like me) searching on the map for the exact point of where they are.

And for the pleasue of every Ruby coder I found this masterpiece:

Permalink

Web 2.0 aka old stuff that works

Posted by Massimo Sgrelli in Web 2.0 - comments are closed

Last week I won an auction on eBay and I go my first Macintosh SE. I started it up and soon I discovered it was perfect in its simplicity, both in design and software. Less than 1 MB for the OS. Black and white 9 inches display. Clear and readable fonts. Great attention to details. Of course others aspects were not so good in 2007 as well. No ethernet network, no Internet, no browser, no email, no calendar and cell phone sync.

That machine make me think of Web 2.0 and what it really means to me.

Macintosh SE has really advanced features for that time and the same characteristics are equally amazing now.

Is Web 2.0 a new way to conceive and design UI and code?

Often Web leaders talk about 2.0 as a shift in the paradigm, as new way to think about the Internet, more and more as the right place to interact each other, to meet people, gaining fame and fortune. New rising tendencies, new startups setting the standard, new way to exchange services and information.

Aggregation – both info and people – get a specific role about new Net-rising stars. Who first understood that, first got millions of aficionados transformed into users – the registered ones – attracting advertising and media companies. I always try to view the version 2 of the Web as something that simplify my daily life through the Internet, leaving my old emotions in terms of taste, style and feeling untouched. For me it’s like using a stylish and old fashion car of the 60s – in Italy we got the mythical FIAT 500 – or an icon of the technology history like Macintosh in 1984, equipped with the best of innovation we get nowadays, behind the scene. Something like “simplicity in usage preserving emotions”. Seamless simple.

The 2.0 way = old stuff that works… better

Permalink

Web 2.0 Map

Posted by Luca Cremonini in Web 2.0 - comments are closed

While searching for a complete picture of Web 2.0 galaxy I found some nice collages of application logos: the one from Ludwig Gatke is amazing. Then if you are looking for a more schematic map of Web 2.0 you can find some over-connected graphs and little more: from the original meme map by Tim O’Reilly, to the very crowded tag-cloud image from Markus Angermeier.

Tim O’Reilly picture is a brainstorming mind map: an image-centered diagram that represents semantic or other connections between portions of information related to Web 2.0, simple but useful. On the other hand Angelrmeier work is fascinating but a bit cramped; it looks like a mix between a tag cloud and a concept map, you enjoy the easy of use and immediateness of tag clouds mixed with the downward-branching structure typical of a concept map.

I found Angelrmeier’s work very expressive, but too complicated and static, therefore I set my mind to improve the tag-cloud representation of Web 2.0, starting from that image, but working on a different graphic format. I was aiming at a more dynamic image, easy to edit, and more linked with external information sources, basically much more readable. I selected the .svg format Scalable Vector Graphics and created it using Inkscape

This was the final result:

• more tags/links related to Web 2.0 companies and web applications
• deeper analysis of complex concepts, like Economy, or Design

If you want to contribute to the revision of the map, or have some suggestions, just post a comment.

Permalink

Web for ordinary people - part 1

Posted by Massimo Sgrelli in Web 2.0 - comments are closed

What makes Web 2.0 real is its new way to intend web applications. At the beginning there was simply the Web – or Web 1.0 as we know it today. It was a new cool and innovative technology to share, interact and make things ‘virtually’ happen. In the TV movie ‘Pirates of silicon valley’ the HP business man said about Apple I – ‘What on earth would ordinary people want with computers?’ – Didn’t the same thing happen with the Web a few years ago?

Today Ajax and technologies like Ruby on Rails are contributing to change everything and firms like 37signals are riding this change. Now its time to make ‘web for ordinary people’ real. And we think we can contribute it a lot too. We have put together a small team: a creative mind, two smart developers, an evangelist and we have faced the challenge.

We believe we live in a great time: the Web is changing face, new metaphors are rising, new opportunities for small and talented teams are just around the corner. Check it out!

Permalink