

Ask HN: Web 2.0 Interface, how to? - grep

There are super pretty web 2.0 interfaces such as:<p>http://chartbeat.com/demo/#<p>https://indinero.com/dashboard?ajaxpopup=livedemo<p>among others...<p>How do they do it? I'm not a designer but I always wanted to know what's the web 2.0 "secret".<p>BR
======
dryicerx
There's no secret, it's just a eye-candy veil over several very basic and
simple tricks. There are lot of definitions of what 'web2.0' is, and
personally I despise that term...

The user interface exposed to the user would extensively use javascript to
make the web pages interactive. By using Ajax, the webserver can send and
receive data without making the user go to a whole new page (eg. clicking the
upvote button on HN), this makes the webpage act more like a application. This
can be done via javascript, which can send and recieve json/xml/html. You can
use libraries such as jQuery, mooTools, YUI which allow you to more easily and
cleanly implement these. You can also combine these with flash do even more
nifty things (eg. graphs on google finances). As far as getting ajax stuff to
work on the server side, all you need to do is have specific urls return
json/xml documents instead of html.

As far as looks, it's all about the stereotypical pastel colors, rounded
corners, gradients, minimalistic looks, beautiful typography, and usually
accompanies with a 'beta' label no matter how early or finished the product
is.

As far as server side, sites like these are also expected to have a API
exposing the web page's functionality to the outside (eg. a desktop
screensaver that uses flickr's photos).

Another aspect is making the so called web2.0 site also more connected to
'social' networks such as facebook/twitter. This can be done via the web APIs
exposed by facebook/twitter on the client side, or you can connect those
site's server APIs using your own web server.

------
jolan
The standardish way is to use jQuery ajax calls to pull JSON data from the
backend and then various jQuery plugins and animations to format the data in a
visually appealing way.

------
tjpick
rounded corners.

~~~
mhd
Gradients. Misspelled titles (missing vowels is web 2.0's metal ümlaut).
Whitespace. Styled form elements. Search fields with DHTML suggestions. Grids.

