Web predictions for 2008

What will be popular on web in 2008?

• semantic apps (ish ?)
• mobile web, mobile office, mobile web apps, services
• behavior monitoring, better personalised ad targeting
• OpenID
• content recommendation
• facebook platform
• distributed social networks
• open platforms?

source: various and 2008 Web Predictions - ReadWriteWeb

Bootstrapping PHP application

What?

Bootstrapper is a single access point (index.php script located in the web's document root) of the web application. Its purpose is to handle all incoming requests by 1. setting up the application environment, 2. routing the request to the correct action controller and 3. dispatching it.

Why?

Easy application configuration (all that is common is in single bootstrapper file).

How?

Setting up the application environment

1. set up php environment if necessary (error reporting, include paths,...)
2. set up class loader (and register is as autoloader within php)
3. load common classes
4. load configuration into registry
5. setup db and store db handle into registry
6. set up caching
7. set up front controller
8. set up router
9. dispatch front controller

Routing the request to the action controller

10. set up router

Dispatching the request (dispatch loop)

11. dispatch front controller

Links

• Blueprint for PHP Applications: Bootstrapping (part 1) by Jayson Minard
• Blueprint for PHP Applications: Bootstrapping (part 2) by Jayson Minard

ReacTable (music controller)

Today I discovered a music controller with a unique user interface. It is called ReacTable and it looks like a round table with blue backlight on top of which you place various types of blocks, each of them representing different sonic modules (VCO, LFO, Sample player,...). The parameters are controlled by rotating the blocks and moving them on the table. As you put new block to the table, icons and links between blocks are displayed on the table under each block. Here are some links: http://www.youtube.com/watch?v=0h-RhyopUmc http://www.youtube.com/watch?v=MPG-LYoW27E http://www.youtube.com/watch?v=WEDia3CFdfg http://mtg.upf.es/reactable/ http://en.wikipedia.org/wiki/Reactable

Prototype javascript framework

What?

Prototype javascript framework (prototype.js) is a library of front-end javascript classes and class extensions (Array, Ajax, Event...) aimed to help building interactive web pages. The library (current version 1.6.0) was originaly written in 2005 by Sam Stephenson and is published under MIT License (same as Ruby on Rails) which means it can be used in any project almost without limits.

Who?

Prototype core team consists of web developers from all around the world (USA, Canada, Austria, UK...) - Sam Stephenson, Thomas Fuchs, Justin Palmer, Andrew Dupont and others.

Why?

What makes this library so good?

• published as single 120kB file
• lincense allows free use in almost any project
• easy to use, simplifies many standard tasks
• standard compliant, supports all current browsers
• good documentation (e.g. official api docs, tutorials or Using Prototype by Sergio Pereira)

Where?

The latest version is available at prototypejs.org/download

All round webdesign tips

1. site logo on top of every page (linked to homepage)
2. search bar on top of every page
3. personal bar on top of every page (login/logout, profile (prefs, favs, watchlist, friends,...))
4. top tags or tag cloud on homepage
5. top searches suggestion on homepage
6. search... text in the searchbox to save space
7. clever (color coded) tabs
8. breadcrumbs nav (path from homepage or session history)
9. flag/spam button on every article/comment
10. article filtering by age (24 hours - 7 days - 30 days - all)
11. flexible column width with defined min- and max-width (in em)
12. all important information must be placed above the fold
13. the optimal column width is 30-70 characters
14. ↑ go to page top link at the bottom of the page (using up arrow)
15. thumbing/starring of articles/comments/users
16. never define only single color. always define the whole set (color and background
17. choose page <title> carefully
18. every action that adds/updates/deletes data on server should be accessed by http POST method (html form)
19. use em units when setting font-size. Don't use px because it does not respect user's preferences (is not relative to parent object's settings)

CSS global reset

When creating a style sheet from scratch it's a good thing to start with a global css reset to avoid problems with possible different presets of margin and padding properties in different browsers. The code (inspired by Andrew Krespanis's article) can look like this (notice the asterisk above h1): /* global reset */ * {padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:0.6em 4%; } li, dd { margin-left: 4%; } fieldset { padding: .6em; }