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

Tools we need...

Posted by Annalisa Afeltra in Ruby on Rails - Web 2.0 - Whodo.es - no comments

When we look for a successful project management tool, what are the important aspects that we need to look for:

Share

• Upload files and share them with your team
• Tasks that need to be completed to reach deadlines
• Share ideas and comments on tasks
• Share e-mails with project e-mailer, keeping all e-mails archived

Collaborate

• Collaborate with team members even from other networks
• Teams collaborate with managers
• Fast plan your tasks and milestones with Fastplan

Manage

• Manage your tasks and milestones for a project
• Manage your team members and what needs to be completed to reach deadlines
• Keep Clients are satisfied by managing your teams and completing projects successfully

WhoDoes helps you: share, collaborate and manage your projects and team members. Simple and easy-to-use, quick registration.

Permalink

iPhone hype...

Posted by Annalisa Afeltra in Ruby on Rails - Web 2.0 - 6 comments

If we consider the business world, since the Blackberry was released in 2002, it broadened the use of IT in the business world. Receiving e-mail on your smartphone and being able to be updated in real-time was a useful tool for everyone.

But then came along the iPhone….

The iPhone changed the whole game of the smartphone. Not only is it an interesting little device that allows you to be updated with your e-mail, organize your appointments, manage what you need to do but so many more applications are being developed that have reached the top of the top 25 list of apps to have. Like the new Google voice search application that enables you to search a website using your voice, but I have tried it and maybe it didn’t like my voice…

iPhone applications have created another dimension in the development of web applications, not only to develop web 2.0 applications in Ruby on Rails but for our applications to be successful and competing within the current market, we need to develop iPhone web applications that are synchronized with our web applications. A simple to-do list application is much more useful if you can view it on your iPhone and manage it from there too.

But then I ask myself…

is it better to develop iPhone web applications or native applications?

Some advantages of web applications :

• web based therefore can be cross -browsered
• it can be used with other smartphones and not only for the iPhone
• you don’t need approval from Apple

If anyone has any comments I would appreciate it.

Thanks

Permalink

Google with our Web Applications...

Posted by Annalisa Afeltra in Ruby on Rails - Web 2.0 - 1 comment

With the release of Googles browser Chrome, as Web Developers I think we could take a few pointers that I am sure we all know about but sometimes we need to be reminded.

Technology

Google wanted to introduce a browser that had multiprocess architecture. Other browsers, if one of the tabs crash the whole browser crashes. In our web applications we need to take advantage of new technology like Rails 2.2 and develop applications that are innovative making use of technology to develop new concepts and ways of solving a problem.

We need to identify critical factors of the applications and understand how we will solve them, using existing plugins, gems or developing our own solution to solve the problem.

Keeping it simple and use only the technology that is needed. Redundant use of gems, plugins or scripts will slow down or application let alone the time spent to implement them.

Who is to blame?

As google puts it “Placing blame were blame belongs”.

Why did a web application fail? I think there are many factors that could lead to a project failing, one of the important factors is that not enough planning and brainstorming has been done before starting a project. We jump right into the code without understanding the concept and setting or goals on what we want to achieve.

Not having the technology available at the time. For example, with Rails, what is introduced in Rails 2.2 did not exist in previous versions of Rails.

Eliminate factors of a project that didn’t work before and develop a strategy on what can be done to improve them and how.

Testing

Testing is crucial as in the long run, it will save time and money. Doing continuous testing on a project will enable you to see come across errors sooner, being able to correct them immediately, saving time and cost from the start of development.

Develop a test analysis, identifying various testing paths that we need to do to test the application and be obedient to implement these test strategies.

Useful tools

Use useful tools at our disposal. Google used V8 or we could use WebKit. These tools help us develop faster and discover errors quicker. So much time is spent on testing, with the use of useful tools, we can develop applications faster, leaving more time for perfecting.

References for this article was taken from Google chrome

Permalink

Web design is about designing

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

It seems pretty obvious, but it isn’t. I assure you that.
I’ve just read Amy Hoy article “Design is not about solving problems” on Slash7 and I agree with her. She focused on the proactive role in designing, blaming the reactive role that design could have. Design is not about solving problems.

But I’d like to go further, remarking the obvious: design is about designing. Understanding the domain language (as recalled by Ryan Singer ), sketching the whole project down, positioning objects on a surface to fulfill the need and then build a mock-up. That is design. Web design makes no objections to this rule, but for sure it adds some constraints to the general process: the format. If a web designer builds up the complete idea of a project, without worrying about the final format of his work, he will probably have to plan a big rework. That project must be implemented by a software developer, so the format of the designer’s final object is fundamental.

Too often people speak different languages:

They simply don’t fit and sometimes tools don’t help a lot. This is why the big challenge is to forget about Photoshop and start promoting tools closer to the bare HTML.

HTML is composed by simple shapes. You can easily draw a rectangle, a square, color them, even blur the background. And again, set the font family, the boldness. Adding some AJAX you can get awesome effects… in a simple way. They are good and easily implemented, but you must study the fundamental of web development, the fundamental of browser rendering dialect.

People can keep basing their design work on tools like Photoshop, but they have to keep in mind that software developers will need user interface design objects in bare HTML/CSS format

If you are use to apply your work through a specific set of tools, it’s very difficult to change your habits in a short time. To train myself in this way I change the tools I use quite often, but of course I have my favorite tools too. At the moment I love using office tools like Keynote or PowerPoint to design web applications. They help you draw simple shapes and words quickly, and they avoid you to design hard things to implement.

In any case, independently from the tools I like to use, I’ve learned to sketch my ideas on paper first. That’s absolutely faster and cheaper than any software tool on earth.
I make a drawing and then I take a picture of it with my (i)phone to record it on WhoDoes. The drawing phase starts days later.

Permalink

In/Out by 37signals

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

In/Out is an internal application by 37signals first sited by Jason Fried 2 months ago. They implemented it to keep in touch with each other during the workday without useless interruptions:

In/Out is based on a simple need. People working together, on the same team or the same project, that sometimes need to know what each person is doing during the day.

What are you working on? When someone asks you this question it interrupts you and if 3, 4 or 5 people ask the same question during the day, it’s better that you take the day off.

In/Out helps to solve this problem efficiently. Each person in the team can use this tool to notify their actual status to others, and at the same time they can add log entries just describing what they have just accomplished.

The main page – and I suppose the only one – of this application allows you to see on the left side what has been finished by everyone during the day, while on the right side every worker can see each others status and the list of what they’ve already finished:

It’s probably one of the most innovative and simple tools that I’ve ever seen.

There’s only one thing that I cannot understand. Why they don’t release it as a stand alone product? I think it could be a major hit. Of course making something similar is not hard for anyone – so it cannot be considered a real asset for 37signals. Actually they only released it as part of Backpack.

But having conceived something so simple and at the same time so useful is really impressive. It’s like having designed the first non-Twitter application for the business, using the same fundamental principle of “simply useful” – I’ll get back on this concept again in future articles.

There’s only a subtle doubt I have. What if they decided not to release it stand alone to avoid cannibalizing their golden egg, Basecamp?
Mmmmhhhh…

If I was Jason Fried I would be studying a smart way to release it as a stand alone application and at the same time, have it integrated as a “module” of Basecamp – like they have already done with Writeboard.

For those of you that want to have some details there’s a short video describing this application at work – now renamed as Backpack Journal:

Permalink

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