WEB DESKTOPS: A glance to where Rich Apps want to get

It seems everything is turning into RIA apps., and everything seems just so NEW and exciting, ..I still remember 8 years ago, not 1,2 or 3, 8 years ago, when I built my first windows like menu with js, or a wolfestein like game all made with js (I have to say it only worked in explorer and not in netscape)....snif, reading my words I realize I am a bit old!!, ..hey, just a bit!!, still at my 30s!! :)

So now web desktops are coming, many, but let me just talk about 3.



Mocha(ui);
A list of libraries to create advanced user interfaces. What can we choose from?? windows, buttons, menus, lists, treelists, selectors...

It is based on Mootools so the code is firefox, explorer, safari, chrome... ready.

Get the libraries at marvellous google code site, or just get to mocha(ui); homepage.

It also comes with PHP app which helps you integrate all these tools or libraries in your PHP projects.

Comet Desktop
A powerfull open source web desktop ".. that every one can use, and an application framework that will allow developers to build anything they can dream of" as the creators like to say. It seems very powerfull, but let's say that 75% of the solution is thanks to extjs, ...or haven't you seen this before :)

Obviously not extJS is all we can get with it, for example it supports web sockets, a secure login, integration with google analytics, ajaxterm support, and much more..

You can get a good article about extJS here, ...mine!! :), ..although these guys have thought about using Mojolicious (http://mojolicious.org/). I am not sooo into perl but i have heard many good stuff about this web framework for "perl".

James Luterek Web OS??
Nope, not talking about OS, but an OS like user interface or let's just call it a window handler..., OS involves soooo much, ..but know knows what James brings us for the future... By now we have this:

* Start Button
* Task Bar - view open windows and set focus/minimize
* Windows (Create, move, maximize, minimize, resize, etc.)
* Show Desktop on right click
* Properties (Theme Color, Text Color, Background Color, Background Image)
* Properties saved in cookies for next visit

Get to this project.

What's next??
Web Operating Systems??, ...why not??, actually have you ever take a look to eye OS??. You are going to like it!!,

..some new projects will come to live as skylight Project Javascrip Os development , as well as other closed down as youOS.

Since I mentioned wolfenstein before, ..I suggest you to relax and play for some minutes to this oldie, now in JS: Javascript Wolfestein 3D

SEO: 9 Strategies

This happy week has started. How is it going??? For sure a bit hateable because is monday but, in the other hand, full of new projects and dreams to achieve!!.

I have been mentioned, within my blog, about SEO Strategies so I will give you 9 general recomendations which will help you to position your portals and developments at the top of the rankings:

1. URLs or Links Optimization: When Googles, or any other seach engine, indexes a page, it also uses the info at links to that page, as well as it does to the links within the page. Try to include in the link text or in within the URL any word who might be significant!!. For example if using wordpress select the option which include the title of the post in the url, and not the ID.
   
2. Bloguer PageRank: Create not less than 3 contents in your blog in the weekly basis, and try to get linked by other bloguers, ....links from other sites do always help. I still remember a friend who created 10 blogs and linked one to the other..., this trick helps a little at the beginning but who is able to maintain 10 blogsss??. I still laugh at him when I meet him and joke about that funny idea.
3. Microformats or microtags: These are XHTML standard solutions used for specific cases. Some examples can be rel="nofollow" which google will discard for a vote to that page in the pagerank, or adding rel="tag" to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated "tag" (or keyword/subject) for the current page.



4. Tags: Always include tags in all your contents. Those will be registered by all the tags search engine (del.icio.us, digg, reddit, flickr, technotati, etc.).


5. Social Networking/Media: You have many friends, ..more than you might think, ..so publish your site by your name at msn, facebook, Googletalk......
6. Use the Personalized search engine by Google.
7. Wikis: Set the name of your Portal at any wiki!!. Start with wikipedia.
8. Peek on your visitors: which words are used by your visitors to get to your portal??. Used those words to increase your post or contents about those topics.
9. Friendly Titles.

JQUERY: Easy dropdown Window

This is just an easy example for a Dropdown Window or menu, ..very easy one :)

Pop! is this easy way to have pop menus, and very important unobtrusive javascript.

As usual to include Pop! is just a question of adding the js and css files:

<link href="/pop/stylesheets/pop.css" media="all" rel="stylesheet" type="text/css"/>
<script language="javascript" src="/pop/javascripts/jquery.pop.js" type="text/javascript"></script>

To initialize it:


<script type='text/javascript'>
$(document).ready(function(){
$.pop();
});
</script>


And just the class "pop" to the div you desire to apply the effect:


<div class='pop'>
<p>you can put anything you want in here!</p>
<p>images, links to freakzion posts, My demos!</p>
</div>


JQUERY: Twitter Visualization by tori's eye

The weeekend is here and as usual I have little time to post.., so time for a quick post!!. some weekes ago a crashed into a cool way to visualize twitter!!. ...using jquery. The name of it, Tori’s Eye, by Luis Abreu and Quodis Labs

It fetches search rss results and for each result it spawns and animates a paper bird that flies through the screen.

As I usually suggest you can get great ideas about Jquery coding sneaking into someone's else awesome code!!. Since i was changing part of my code from scriptaculous to jquery I took a look, ..a pity I am going back to scripty2!!!

JAVASCRIPT: Join your JS files all together!!

Sprockets!!, ..it seems a word someone would scream out loud when being angry, but it is just a nice and handy way to make one js file out of your, perharps, messy javascript.

When is it usefull??. Let me point out some examples:

• You are developing a portal framework tool and within the project you come up with a nice code to manage windows and dialog boxes. Suddenly your heart and mind decide to share that library with your friends, bloggers, techies.., ..use sprockets to take all the code used for that purpose to share it!!.
• As we all know, it is faster for the browser to handle one .js file of 100kbs than 20 .js 5kbs files . just because of the different calls to get files from the web server . So join up all your js files for speed your website.
• Work with seperate organized javascript files into separate folders, ..sprockets will just join them up.
• Having comments in your code is the normal way to work, and more baring in mind a big development. But comments translate into kbs, and we need our code lightweight..., hmmmm, no problem use sprockets to strip those comments!!.

So, remember, when your javascript code is ready, just say SPROCKETS!!. and see magic happens...

XQUID: Visual Development Tool for RIA apps

As you all know, everyday the develpments scaletimes are decreasing as well as the apps and portals need to be much more interactive full of delicious visual effects. The traditional model of development Web is remained obsolete compared with AJAX and the new RIA applications which are populating the web. For building these applications with efficiency, it is required a cross-browser framework and a productivity tool that allows visual development WISYWIG. xQuid is one solution.

XQuid is a visual publisher integrated within eclipse/RAD (IBM Rational Application Developer) which allows to use a unique tool in all the phases of the development, standarizing the way to codify and structure the UIs programming using AJAX and Javascript.

XQuid is designed so that frameworks integrates perfectly with others (DWR, Struts, Spring,…) and even with different server architectures side (J2EE, ASP.NET,…).

The development and maintenance of interfaces of user AJAX are much more productive and client resembling the development under the paradigm Client/Server but with remarkbly AJAX web technologies.

Some of the characteristics i have liked about it:

• Cross-browser framework
• 100% standard javascript CODE.
• It comes with interesting widgets (as DOJO and EXT JS).
• It integrates with Adobe FLEX. (yeah, ..it is not open source but let's think also about big companies that still do not trust in open source solutions YET...they will do soon... and with a big amount of budget for tecnology).

How do I know this development if it is not almost public yet??, ...As I always say, It is very important to be there, ..where everything is happening!!.

GOOGLE CODE: Google Ajax APIs

Since some days ago Jquery has moved code.jquery.com to google ajax apis. The google ajax APIs is a content distribution network which provides access to an arquitecture to help you load the most popular open source AJAX & Javascript libreries into your applications. These are right now:

• jQuery
• jQuery UI
• Prototype
• script_aculo_us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)
• Ext CoreNew!

It provides also the ease to choose your preferred version of the library to be loaded using google.load()




• google.load("jquery", "1.3.2");
• google.load("jqueryui", "1.7.2");
• google.load("prototype", "1.6.1.0");
• google.load("scriptaculous", "1.8.2");
• google.load("mootools", "1.2.3");
• google.load("dojo", "1.3.2");
• google.load("swfobject", "2.2");
• google.load("yui", "2.8.0r4");
• google.load("ext-core", "3.0.0");

In my opinion, if you are building an app that will be hosted in a internet provider this is the better way to be up to date with your Javascript framework libreries, ..but if your solution has the ability to work locally and offline, for example an app as joomla installed in your laptop to build portals, then download the js files into the software package.

PHPBB: Change Header

Good stressed afternoon!!.

As i mentioned last sunday, I was asked by my bro to integrate the header of his WordPress Header blog within the PHPBB forum he just setted up. I had never played around with PHPBB beyond knowing about that fantastic Development. I decided to search over internet and I found little info about that integration so that night i just decided to get into de code and try to figure it out. Easy work I must say, ...which I always says that it is translated into a beatifully design of the product.

The first thing to do was to look in he main directory where I found an Index.php file, ....hmmmm, that seemed the first place to look for. Within the PHP code I found that file index_body.html was being searched. Where was that file??. hmm It should the in templates folder: /styles/prosilver/template (if the theme used is other than prosilver then change the name to that theme) ..and there it was. Curious the first line of that file:

<!-- INCLUDE overall_header.html -->

Mission one acomplished!!, I have found the header!!, now we know the file to change. The Header has two parts within the div <div id="page-header">:

• <div class="headerbar">
• <div class="navbar">

The headerbar is the one with the logo and the navbar is the one containing links to FAQ, Registration and Login. So the mission 2 was just to change headerbar with the code of the head of wordpress and that is all this divs:


• <div id="menu">
• <div id="header">
• <div id="rss-big">
• <div id="portrait-bg">
• <div id="catmenu">

Change all neccesary "fixed names" to PHPBB variables, for example the name of the site by {SITENAME}. Finally the styles!!. Remember to refer at the top of the page to the wordpress stylesheet (in this case wp-content/themes/amazing-grace/style.css and in some case include the styles within the elements making sure it overrides the PHPBB styles for the header.

This may not be the most elegant way to do it, ...but it just took me 1 hour and a half..

Soon my bro will ask me to change the styles of the forum to the same colors as the header, ...I know that will happen, but shhhhhhh!!, don't tell him, maybe i get rid of that task. I love code!!, but styles...

SCRIPTY2: The new Script.aculo.us!!

Lately I've been talking about script.aculo.us, ..no wonder cause I have been using it much along my developments. Now i was morphing my coding ideas to jquery&mootools just because i was wondering what could happen to script.aculo.us in the short future... And look who is back??. It comes Scripty2, the rebirth of a beast!!. May I keep coding with Thomas Libraries??, ...Of couse YES!!.

Scripty2 is just script.aculo.us 2, and the alpha version is just out there so join the forum group at google and start coding!.

Thomas has divided its javascript framework in three blocks:

• Core: Contains various JavaScript and DOM extensions used by scripty2 fx and scripty2 ui, plus developer utility classes.
• Fx: Provides for time-based transformations of DOM elements and arbitrary JavaScript objects. The famous morphing capabilities of script.aculo.us.
• UI: functions for CSS parsing, color normalization and CSS value interpolation.

All have been recoded, eliminating all workarounds for browsers no one uses any more and with all the knowledge gained by Thomas from years of using the effects on various of his projects.

Also a very singnificant change comes to the documentation. It is made with PDoc, a system where the documentation is written directly in the source code using specially formatted comments, augmented by interactive examples, ..huh, it seems Prototype guys also had that idea!!. Brilliant idea I must say.

...and what to say about the gzipped size of the library, ...only 5kbs!!.

YUI: V.2.8.0

Sunday is getting over and we must get our things ready for work or university, a new week is coming but this one has brought a new version of Yahoo User Interface.


This version is v2.8.0. I could write a bit about this version, as for example the components it brings: Storage Utility, ProgressBar Control, Swf and SwfStore Utilities, ...or a bit about other very interesting changes in YUI as an extension to the event handling component to support event delegation without having to write it in detail, the connection manager supporting crossdomain requests and Carousel control getting a "gallery style", ...or a bit about the roadmap to YUI 3.0 which is already available as beta...

..yes, I could write about all this but as I have to help my brother to integrate PHPBB with wordpress tonight, it is already 01:30 a.m at spain, and there is a good source about this info at the YUI Blog, ..then I better link you to that BLOG

Do u hate mondays??

SCRIPT.ACULO.US: Dropdown Menu

The weeekend is Here and I still got 15 minutes before my gf comes and I prepare some soup and sushi!!. In this 15 minutes I do not have many time to write so I will just point out a very simple dropdown menu that I found when looking for one for my site. It comes from Jan Sovak at Graphika Studios.

The code is pretty simple and very powerfull in the sense that will be very easy to customize. Change the Blind down effect:

new Effect.BlindDown( $(dEl), { duration: dropliciousShowingUpDuration });

to for example Slide Down:

new Effect.SlideDown( $(dEl), { duration: dropliciousShowingUpDuration });

As well as being able to add styles when appearing and disappering the menu:

$(dropElement).addClassName('hidding');

...what about adding third, fourth and next levels??? ...keep an eye on my blog and I will let you know!!! :). Now time to buy the wine and set the dinner!!. Have a great weekend!!

SCRIPT.ACULO.US: Opacity

Here we go with another cool effect, ..and "outOfTheBox", which comes with scriptaculous is the opacity effect. How would u like to have a list of facebook style users and be able to check/uncheck them with a cool opacity effect??.

That's way too easy, ...not even in need of using the "famous" queues which I would recommen at any case but to make this example easier i will skip them.

As usual remember to enclose your Elements into a div, ..that it is always MANDATORY in script.aculo.us for not having unexpected results. Here we have an user entry:


<div class="vCard">
<div id="user1">
<img src="img/user1.jpg" align="left" style="margin-right:10px;"/>
<span class="check"><input type="checkbox" id="vcard1" value="0" onClick="javascript:changeOpacity(1)"></span>
<span class="title">Fuchs Thomas</span>
<span class="desc">Script.aculo.us Framework Founder. A Genius, The Ninja GURU!!</span>
</div>
</div>


Let's have three users entry, one of them is me!! :), and let's wrap them into a div. And now lets just apply the effect opacity to the entry selected:


new Effect.Opacity('user' id, {duration:0.5, from:1.0, to:0.3});


and you are done... Yes it is just this!!. Of course the facebook style is just a matter of styles. Here you have a link to the example

SCRIPT.ACULO.US: Drag and Drop

Drag&Drop??, ..of course i need in my portal the drag&drop utility, and i could ask, Who doesn't??. Let's then get into it with script.aculo.us, which will help us with no doubts.

Let's set the blocks with DIVs as it should be. We will have 3 divs, the global containers (myPage) where all the Drag&Drops Actions will happen and the 2 containers (tools, frameworks) which will hold the elements. In each container ww will have a list of elements, in the first one javascript libreries and in the second one a list of Portal CMS&tools (PressXine will appear at the end of year..).


Let's start giving all this containers the ability to be "draggable". We will use the following syntaxis: Sortable.create('containerID',[options]);* , check the options to see the possibilies and to get acquainted to the example below.

* A Sortable is a quick way to initialize many Draggable elements in a container element.

Sooo, here is how we set the propoerties to the containers:
<script type="text/javascript">
// <![CDATA[
  Sortable.create('frameworks',{
    tag:'div',
           dropOnEmpty: true,
           containment:["frameworks","tools"],
           constraint:false});
     Sortable.create('tools',{
           tag:'div',
           dropOnEmpty: true,
           containment:["frameworks","tools"],
           constraint:false});
     Sortable.create('myPage',{
           tag:'div',
           only:'container',
           handle:'drag_drop'});
// ]]>
</script>


and then just set the HTML of the containers and the objects:

<div id="myPage">
<div id="frameworks" class="container" style="float: left; width: 150px;">
   <h3 class="drag_drop">Javascript Frameworks</h3>
   <div>Prototype</div>
   <div>Mootools</div>

   <div>Dojo</div>
   <div>Jquery</div>
   <div>Script.aculo.us</div>
</div>
<div id="tools" class="container" style="float: left; width: 150px;">
   <h3 class="drag_drop">Portal Tools</h3>
   <div>PressXine</div>
   <div>Joomla</div>

   <div>OpenCMS</div>
   <div>WordPress</div>
</div>
</div>

Here you have a link to the example

JQUERY: Thickbox and Superbox, ModalBoxes for JQuery

...modalboxes for prototype, mootools..., and where are the modalbox for Jquery??. Here it comes....

As usual there are more than one to choose from. Here are my favourites. The veteran Thickbox which is the version 3.1 and coming directly from France we have Superbox. Which are the differences, ..what could I say, ...there are almost none!!. Both can show:

• Pictures
• Galleries
• Inline Content
• Iframes
• Ajax

Both have almos same size (if you use the thickbox-compress), Superbox is around 200 bytes smaller. Both have a CSS which can be used to define de styles, you can changed the loader image, etc, etc. MIT License in both...

Maybe the differences may be in which browsers may be supported, ..thickbox has that info in its Homepage but no idea about superbox (I have tested over Explorer 7, Firefox 3 and Opera 9 with no problems). At any case these modalboxes run over Jquery so using extensively standard Jquery code and being caferull with CSS, then the browser shouldn't be an issue to worry about. Thickbox code, we could say, is more elegant meanwhile Superbox is more techie but this is just likes because both modalboxes work pretty good.

I had only one question when writting this post, ..which image to add..., in 3 seconds I starting laughing and wnet back to superbox project homepage..., which one better that the one from SuperBox Example???? :)

MOOTOOLS: ModalBox

Building a modalbox with Mootools is really easy!!, ... why??, well it is already within the objects included in it: fb-modal

As I always state, it is much more easy to learn how to build things with examples by one side, ..so let's just use David Walsh example, ..I also know a cool programmer guy called Mike Walsh at London but they are not related. He has just made a simple example following the facebook css. Here it is.

OPENCMS: Version 8.0

What are planning the guys of Alkacon for this new version which will come up around July next year??. It will Require Java 6 runtime, ..remember that this version of the Java Runtime appeared in december 2006 and as main characteristics:

• Supports JSR 170
• Offer access to VFS via Web Service
• Integrates Workflow Engine
• Most likely JBPM
• Uses JPA for DB persistence
• Drop individual DB persistence layers
• Includes native support for JavaScript
• Scripting access to OpenCms API
• It ill make use of extended APIs such as Web Services (JAX-WS) and Scripting language integration
  

OpenCMS 8.0 is making a very clear, and right, move to RIA Applications, orienting this new version to the use of AJAX, JAVASCRIPT and XML ....something that is not new as we can check in the improvements for XMLContent to the editor at version 7.5.

JOOMLA: Happy Birthday!!. 4 Years

As yesterday was the Joomla's 4th birthday, I think a good way to celebrate it is to link to a presentation reviewing versión 1.6. A short Post for not eclipsing a great birthday:




Lifting The Lid On Joomla 1.6 at www.slideshare.net by Andrew Eddie