toucheatout  2006-03-26 04:15  Web  

There come a basic web survival guide with the most important stuff I stumbled upon so far to create in proper (CSS) style. Some more unordered experiments with CSS, javascript and ajax and apis etc... at the labs.

Content Management Systems

While the content and design of websites get the maximum attention, medium-size websites usually don't have every page made individually. It would require too much technical knowledge for updating, enriching etc...

The most common system nowadays is a blog system. The system is constrained in such a way that only 2 elements are needed for a new page : the title and the writeup. Other content management platforms existed before the blog format and still are used (as here, this site is made using the drupal CMS). They propose integration in a multi-user by design publishing platform of tools (usually forums, blogs, news pages, link pages, "regular" pages etc...) while keeping the design template common.

While CMS is a general term, and systems that use that appellation are usually very versatile, blog platforms, forums systems (as phpBB), bulletin board systems, etc... are also all about content management.

Most famous CMS are Joomla (ex-mambo), drupal, typo3 (reputed the most potent, but a whole world in itself), and many others. opensourcecms CMS testing site proposes testing nearly all available opensource CMSes. As the site is regularly refreshed, you only have a bare bone installation. In the normal case, one has quite some work to choose, install, test and maybe tweak the theme to be used, the modules to be added, activated, coordinated, the access control and permission system, the format of the homepage, the navigational elements...

Social networking, social bookmarking

Those are all the rage in the trend of the web to become more and more participative. This is indeed nice for website makers, as they abandon any responsibility on the content, and its production. On the other hand, it makes web user feel empowered : they do not only watch what is proposed, they get to author content as well... Or participate by giving their opinion in comments on on-site blogs or qualifying websites with tags. Those tags are then made public for each user and aggregated for the front-page. Example: del.icio.us social bookmarking website user's profile.

And as trends govern, there is retrievable code that allows you to very easily display a tag cloud :

Javascript + CSS useful features

Playing with Visibility

The CSS visibility property allows the control of wether an element is visible or not. It can be used and manipulated through javascript to create dynamic menus, with the advantage of not reloading the full page when browsing through. Likewise, images or text sections can be displayed and hidden at will. State of elements (for instance selection state of form elements) can be dynamically set. Etc... This creates the opportunity to manage the user interface client-side, at reactivity and network usage benefits.
A typical javascript show/hide of my_elt_id:
Show: document.getElementById('my_elt_id').style.visibility 'visible';
Hide: document.getElementById('my_elt_id').style.visibility 'hidden';

NOTE: display and visibility have a different effect: while the former makes as if the whole block element wasn't even mentionned, the latter only makes it invisible, preserving the space it would have taken.

CSS cursors style

Really useful to hint user about what is going on, or make functionnality explicit on rollover resize etc

• default: style="cursor: default;"
• Automatic: style="cursor: auto;"
• Movement: style="cursor: move;"
• Wait...: style="cursor: wait;"
• link: style="cursor: pointer;"
• Hand: style="cursor: hand;" (non valide, IE seulement)
• Help: style="cursor: help;"
• Crosshair: style="cursor: crosshair;"
• Text: style="cursor: text;"
• resize from top (north): style="cursor: n-resize;"
• resize from left (west): style="cursor: w-resize;"
• resize from bottom (south): style="cursor: s-resize;"
• resize from right (east): style="cursor: e-resize;"
• resize from northwest edge: style="cursor: nw-resize;"
• resize from northeast edge: style="cursor: ne-resize;"
• resize from southeast edge: style="cursor: se-resize;"
• resize from southwest edge: style="cursor: sw-resize;"

Text editor in javascript for your page

There are a couple choices for this purpose, yet TinyMCE from moxiecode is both LGPL and performant...

Javascript and AJAX APIs

Those APIs are the basic ingredients for mashup construction. For instance one can pull the content data from a web search, integrate the results on a map etc...

Google got a whole lot of AJAX APIs that allow you to do researches from code or display maps enriched with your specific data (for instance the location of appartments for rent, declared location of friends, etc...) and much more (calendar, adwords, ...), which work so far perfectly well.

Yahoo replied with their SDK, but I haven't had alot of return on that...

Free and commercial geotargeting

Maxmind has an opensource geolocalisation API and database (well and more on the commercial side). Works rather well and installs easily

Program some ActionScript 2 without any macromedia/adobe tools!

Follow the great tutorial at this address...:
http://www.flashkod.com/tutoriaux/CREER-SWF-SANS-IDE-FLASH-SUR-TOUT-SYSTEME_426.aspx