MoonKiKi: web2.0 and ajax... the evolution road

Saturday, January 31, 2009

ORANGE.COM: A GREAT MOOTOOLS' SITE EXAMPLE


When I read a comment in a video about MooTools, I just created some months ago, I went to see this site http://www.orange.com that a user (Giacomo) posted for have some information about technology and how to reproduce something similar.

It's maded with MooTools, in its first version (1.11), and I think it's a great way to show the power of our Moo Tools.

Friday, January 30, 2009

Exibart and iPhone... Another PhoneGap Application on the AppStore

As I said, I'd like a lot fo PhoneGap and I'm doing something with it.

Some years ago I registered to Exibart ( for help the starvation of the artist side of my soul) and I never stopped read it. Reaindg today the PhoneGap group news for Exibart on iPhone is a great wedding for the two sides of a geek brain.
The message is:

"Dear all
I'm proud to announce to the working group that my application fully
developed in phone gap is available in app store
Search for Exibart
I'm sorry that the apps is only in italian but is for related to
italian people.

The scope of the application is to show parts of the main website
(http://www.exibart.com) in iphone.

The xcode is the official one with the only modification for tel calls
(http://groups.google.com/group/phonegap/browse_thread/thread/
407f61cab3566bb0
).

The app is organized in this way. I call the html page in my server. I
use gap.js script, css from http://code.google.com/p/iphone-universal/
and a my JS that call in remote (XMLHttpRequest).
all main visites pages are cached in JS to have history functions. I
use phonegap to read uuid of the iphone + gps position to shows the
event near you (top right click menu and then l'arte รจ vicina). All
events can be identified in google maps for iphone. Some of these
events the have video and audio related opened in QT.
Ciao"

Thursday, January 29, 2009

DEV SNIPPET.


DevSnippet



An interesting web and ajax gallery, since today hosts iMoogle

see the page


Nunzio Fiore

Wednesday, January 28, 2009

Skadoo, iPhone, javascript and it's PhoneGap revolution...

As from the google group, I wanna make a spot for Skadoo. Me too, I'm following PhoneGap evolution, and I trust in them project.

From the Google Group:

"Skadoo is a PhoneGap-based application that is now available in the iTunes store.

The full server app is still under development (server queries are VERY slow still), but in short, it is a "people" search engine, for finding various profiles of someone online based on searching for their name. I was hired to build a client and get it into the App Store ASAP, and PhoneGap was the best solution (obviously!)

Development time was http://skadoo.wordpress.com/).

The app uses JQuery for server interaction and the UI was built in Dashcode."

CODE-IT, CSS II PART (from icTV)


One of CODE-IT videos in ictv.

CODE-IT is a format I created with icTV (http://www.ictv.it) on spring of 2008. We try to present a little widget, or a minitutorial in less than 5 minutes, and we associate a package to every video.

I (Nunzio Fiore) create idea, package, text (on "Trascrizione" tab), and the video. icTV makes the rest: voice (Fabio Montanari), cms, hosting.


You can find the complete video and it's download package: HERE

GMAIL OFFLINE VIDEO... CODE IS NOTHING WITHOUT FANTASY

I think that:

  • the idea of GMAIL Offline is great
  • use GEAR is a limit
  • we need GMAIL API (I'm searching for that)
  • the video about GMAIL OFFLINE IS GREAT, better than comics about chrome.

Look here:


Tuesday, January 27, 2009

IMOOGLE'S FIRST STEPS IN THE WORLD SINCE 20 JAN 2009

MoonKiKi blogspot associated



Hi all,
facebook, twitter, too many place where iMoogle and other MoonKiKi can expose themselves. Now it's blogspot's turn. I wish it will be a lucky kick start for these 2009 Moonkiki's travel. Visit Moonkiki's world.

It's a month that we are online and yet we had our first Web App to manage JSON portlets is online.



iMoogle is an open source web application, created with MooTools. Inspired from iGoogle and netvibes, iMoogle is the fastest tool you can use to make your own portlet's homepage, or social group page.


IMoogle
A portlet manager iGoogle's inspired based on MooTools

For any doubts and question ask to: Nunzio Fiore (tempozero@gmail.com) or Emanuele Crescentini
(ema@cosmobile.net)

Demo:

First of all the
DEMO 1 : http://www.moonkiki.com/imoogle/
DEMO 2 : http://www.moonkiki.com/imoogle/imoogle2.html
DEMO 3 : http://www.moonkiki.com/imoogle/imoogle3.html

DOWNLOAD

Second step: DOWNLOAD IMoogle: http://www.moonkiki.com/moonkiki/imoogle/

REQUIREMENTS

IMoogle is MooTools1.2 based. See the Mootools site to download the recent package. ( http://www.mootools.net )

Doc

The base idea is to use iMoogle to quickly expose your contents in an home page with two kind of portlets:

1. GRAPHIC FREE PORTLETS
2. USEFUL LIST'S

On startup code reads a json like this (IMPORTANT: read the meaning of each variable to customize your iMoogle):

{
"cols":n,//where n is the numbers of cols the user asked for the home page
"portlets":[// an id for a list of portlet
//(we have two kind of portlet: graphic portlet and list portlet)


{
"id":n// an id useful to retrieve the portlet
,"col":"n"// the columns [from 1 to n ] where user wants to put the portlet
,"title":"A TITLE"//the title of the portlet
,"body": "
...
"//a graphic content for the portlet
},
{
"id":n// an id useful to retrieve the portlet
,"col":"n"// the columns [from 1 to n ] where user wants to put the portlet
,"title":"A TITLE"//the title of the portlet
,"list":{//a list portlet is identified by the attribute list and NOT body
"baseUrl":"scripts/index.html"//the
base url where we wants the portlet go (with the complete list)
"limit":m,//a number limit for the little portlet display (when maximiezed, list are complete)
"els":[//the elements of the list
{
"id":n,//an id for the list's element
"title":"Calendar", //the title for the list's element, COMPULSORY: if omitted it won't be the possibility to expand and collapse the row
"text":"a script for calendar", //the text for the list's element
"link":"script/scriptLink.html"//link associeted
},
...
]}

},
...
]
}

A complete JSON is at the demo url: PORTLET'S JSON
http://www.moonkiki.com/imoogle/data/portlet.json

When a portlet is moved or dragged iMoogle launch a request to an url to store the new home's configuration choiced from the user. This service gives a JSON response like that:

{
"result":"ok",
"msg":"success"
}

or like that:

{
"result":"ko",
"msg":"Some problem is occurred...."
}

This is a response caused by two parameters like these:

1. serialized: col1|1|col2|2|5|4|col3|Empty|
2. user: iMoogleUser

The first parameter is a string that represent a serialization of portlet's presence and position separated by a pipe ( | ). The meaning is: colN|id1|..|idM . The id is equal to the id given in initial portlet.json. When a column is Empty, iMoogle send the keyworld Empty to the server.

The second parameter is the name that you pass when you create the IMoogle object. If you don'p pass a user, IMoogle uses a default value named IMoogleUser
CREATE AN IMOOGLE INSTANCE

To create an iMoogle instance use a minimal code like that:








A complete option's list:

1. id: An id fro the IMoogle object,
2. where: the zone where you want to put your iMoogle plugin,
3. width: base width dimension for portlets, default: 265,
4. height: base height dimension for portlets, default: 178,
5. user: the user who's using the page, default: 'iMoogleUser
6. headerText: A string in the header, default: 'A complete list of portlets',
7. waitImgSrc: a wait image, default: 'img/wait.gif'
8. portletsUrl: an url to portlets.json: default, 'data/portlet.json'
9. memoPortletsUrl: an url to service that store portlets: default, 'data/memoPanel.json'
DEVELOPED BY

IMoogle is developped by Nunzio Fiore ( ajax development: http://www.moonkiki.com ), Cosmobile ( creative and internet: http://www.cosmobile.net), NetComm ( housing, web development: http://www.netcomm.it )