Category Archives: Javascript

SQLike, un piccolo query engine

Pubblicato da

Talvolta può sorgere la necessità di compiere operazioni di tipo SQL come GROUP, SUM, SELECT DISTINCT ecc. su array di dati che sono il risultato di una query contro un db.
Voi direte: “ma io queste operazioni le posso fare già nella query contro il db”. Ed è vero ma immaginate di fare un’unica operazione di SELECT contro il database, magari estraendo tutto quello che c’è (parliamo di al massimo qualche migliaio di record per una decina di colonne) e poi di operare su questo array di array o array di oggetti.
Avremmo una sola operazione in cui è chiamato in causa il db (la SELECT), mentre tutte le  altre operazioni potrebbero essere svolte lato client da …qualcosa.

Quel qualcosa è una libreria javascript che si chiama SQLike.
Lo scopo della libreria (o motore o funzione q) è quello di utilizzare una sintassi simile a SQL per operare sui risultati della query.
Questa “query della query” viene poi presentata in una comoda forma tabellare.
A seconda del javascript engine che si utilizza (e quindi del browser) si hanno risultati sorprendenti.
SQLike è scritto in ActionScript2, ActionScript3 e Javascript.

Link: SQLikedemo

8 strumenti per la compressione di script e CSS

Pubblicato da

Ci sono molti servizi online che aiutano nella compressione degli script (Javascript nella quasi totalità) e dei fogli di stile CSS.
Spesso, nelle pagine di questi servizi, è anche presente il codice sorgente in svariati linguaggi. Codice che è possibile riutilizzare per i nostri progetti.
La compressione serve per aumentare la velocità con cui una pagina viene visualizzata, riducendo il peso di file CSS o di lunghi script.
Ecco una lista di quei servizi con cui mi trovo meglio.

  1. shrinksafe – compressione javascript. E’ sia un servizio online che uno script completamente scaricabile
  2. JSMin – compressione javascript. Si può scaricare l’eseguibile o gli script in moltissimi linguaggi
  3. Packer – compressione javascript. Online, con copia e incolla dello script, oppure disponibile in .NET, Perl e PHP
  4. CompressorRater – comparazione tra i vari tipi di compressione. Ottimo per decidere quale compressore può fare al nostro caso
  5. YUI compressor – compressione CSS e Javascript. Scritto in Java
  6. CSS Compressor – compressione CSS online con nessuna opzione
  7. CSS Compressor by Antarius –  compressione CSS online con qualche opzione
  8. CSS Compressor by CSS Drive – compressione CSS con tre livelli di compressione

Comparazione framework

Pubblicato da

Immagine000_500x141

La necessità di “non inventare la ruota” ogni volta che si mette mano ad un progetto ha dato impulso alla nascita e allo sviluppo dei framework.
Esistono framework per quasi tutti i linguaggi e settori della programmazione.
Quelli più famosi ed utilizzati riguardano PHP, Ruby, Javascript e CSS (di meno quelli per Python e Java).

Per comparare i framework e scegliere quello che meglio risponde alle esigenze dello sviluppatore possiamo dare un’occhiata a Bestwebframeworks.
In una sola schermata è possibile comparare le caratteristiche più importanti dei vari framework.
Cliccando sui nomi si accede ad una scheda con maggiori dettagli.

Tramite form è poi possibile segnalare ai gestori del sito nuovi framework da comparare.

Link: Bestwebframeworks

Aggiungere funzionalità a Google Maps con Geocubes

Pubblicato da

Le mappe di Google sono una grande risorsa per gli sviluppatori. Sono utilizzate per i più svariati motivi: dai siti di agenzie immobiliari a quelli di segnalazione ristoranti.
La personalizzazione tramite API (Application Programming Interface) permette di aggiungere nuovi modi di utilizzo. I marker, ad esempio, permettono di individuare geograficamente punti di interesse (o geo-punti), fornendo anche informazioni aggiuntive.
Ma se questi iniziano a diventare numerosi? Il rischio è quello di creare confusione e di non fornire più un servizio utile.
Geocubes permette di risolvere questo problema suddividendo le macroaree in quadrati che indicano il numero di geo-punti inclusi.

Tramite javascript Geocubes sovrappone un layer sulla mappa di Google modificando visivamente le informazioni sui marker

geocubes_clustering_360x111

Il layer di Geocubes e la mappa di Google si caricano in parallelo evitando lentezze di sorta. L’unica condizione è quella di mantenere le coordinate sui punti di interesse sui server di Geocubes.
A disposizione degli sviluppatori ci sono le API dell’applicazione e una libreria PHP che permette di inserire, modificare e eliminare i geo-punti.
Fino al 28 febbraio 2009 tutto è completamente gratuito. Poi la gratuità rimarrà fino a 10.000 geo- punti.

Link: Geocubes

Javascript per raccogliere indirizzi e visualizzare mappe

Pubblicato da

screenhunter_02_411x182

Mapeed.AddressChooser è uno script in Javascript utile per creare accattivanti form finalizzati a raccogliere indirizzi.
L’utilizzo combinato di Prototype (ma è possibile utilizzare anche altri framework) e delle mappe di Google (anche il sistema di mappe può essere cambiato) permette di visualizzare al volo la mappa dell’indirizzo che stiamo digitando.

E’ possibile utilizzare lo script in due modi.

  • Basic: permette di vedere aggiornata la mappa ad ogni nostra digitazione.
  • Autocomplete: vengono visualizzati suggerimenti per completare più rapidamente l’inserimento dell’indirizzo.

Lo script è leggerissimo (6KB nella versione compatta) e semplice da usare perchè ampiamente documentato.

Link: Mapeed.AddressChooser

CSSHttpRequest (CHR): AJAX tramite CSS

Pubblicato da

Il trasporto delle informazioni AJAX generalmente avviene tramite XML, il famoso oggetto XMLHttpRequest.
E’ possibile, però, sfruttare anche CSS tramite il metodo CSSHttpRequest

Le richieste sono limitate al metodo GET invocando la funzione CSSHttpRequest.get(url, callback):

I dati sono codificati sul server in una stringa URI compressa di 2KB (limite per Internet Explorer) e serializzata in un comando CSS @import con uno schema URI modificato del tipo about: . La risposta è decodificata e restituita alla funzione come stringa:

Esempi

Downloads

Link: CSSHttpRequest

Come capire quali social network il tuo visitatore utilizza

Pubblicato da

Nell’ottimizzazione di un sito riveste una parte rilevante l’analisi delle abitudini di navigazione del visitatore.

In questi ultimi periodi hanno assunto un’importanza notevole i cosiddetti social network, infatti in calce ai post di un blog così come agli articoli di un portale sono comparse tantissime icone per segnalare i contenuti.
I social network sono, però, divenuti tantissimi e inserire le relative icone significa fare un pastrocchio come questo (clicca per ingrandire)

Una delle soluzioni è capire quale social network viene utilizzato dal visitatore in preponderanza (n.b. non stiamo parlando di link di provenienza, cioè di qualcosa che possiamo notare dalle statistiche del sito) e limitare la pubblicazione dei badge/pulsanti.
Per questo possiamo usare SocialHistory.js

Si sfrutta il fatto che i CSS colorano in maniera diversa i link dei siti già visitati. Leggendo queste info è possibile ricavare il social network di maggiore utilizzo.
Non è un sistema perfetto e quelli di Firefox stanno già lavorando per vanificare questo “bug” potenzialmente pericoloso (potrei sfruttare la stessa tecnica per sapere da quale sito di banca provieni).
La tecnica è però interessante.

Materiale per questo post: http://azarask.in/blog/post/socialhistoryjs/

YAML: molto più di un css framework

Pubblicato da

Oltre ai framework di sviluppo PHP sono molto in voga in questi tempi i framework CSS, ossia tutto un insieme di istruzioni CSS che facilitano la creazione di layout compatibili con le varie versioni dei browser , accessibili e standard.
“Yet Another Multicolumn Layout” (YAML) è un framework (X)HTML/CSS di buon successo e con un’estesa community di utilizzatori.
Sul sito è possibile vedere degli esempi di layout che è possibile creare con pochissime istruzioni. Insomma lo scopo è sempre quello di non reinventare la ruota ogni volta e concentrare gli sforzi dello sviluppatore in altre direzioni.

Un discorso a parte merita lo YAML Builder, un’applicazione AJAX che si basa sul framework YAML per creare al volo layout puliti e personalizzati. Il vantaggio rispetto alla creazione manuale del codice è quello di risparmiare tempo anche nell’apprendimento della sintassi e delle convezioni utilizzate all’interno del framework.

Veramente un ottimo progetto.

Creare menù evoluti in DHTML online

Pubblicato da

izzymenu2.jpg

Dopo l’articolo sulla creazione dei CSS online è il turno di IzzyMenu. Un’applicazione online che permette in pochi step di creare gradevoli menù con effetto hover e la possibilità di sub-menu a discesa.
Si crea tutto online potendo scegliere tra moltissimi stili ed infiniti abbinamenti di colori ed effetti. Al termine della creazione si scarica tutto il pacchetto: codice HTML, Javascript, CSS ed eventuali immagini utilizzate per la creazione del menù.

izzymenu.jpg

Creando un account presso IzzyMenu è possibile salvare più menù realizzati, avendoli a disposizione per altri eventuali lavori.

Javascript e CSS: una barra dei comandi sempre nell’angolo in basso a destra

Pubblicato da

Può capitare, nella creazione di applicazioni per il web, di avere la necessità di una barra dei comandi che abbia una posizione assoluta rispetto allo schermo e non rispetto alla pagina. Questa necessità si ha soprattutto quando la quantità di dati causa uno scroll eccessivo della pagina.
Per fare questo basta un po’ di CSS e di Javascript.

Innanzitutto il CSS. Niente di particolare, dà semplicemente uno stile alla barra dei comandi

#topbar
{
PADDING-TOP: 5px;
PADDING-BOTTOM: 5px;
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
VISIBILITY: hidden;
BORDER-TOP: black 1px solid;
BORDER-BOTTOM: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-LEFT: black 1px solid;
WIDTH: 450px;
FONT-FAMILY: Tahoma;
POSITION: absolute;
BACKGROUND-COLOR: white
}

e poi il javascript che oltre alle istruzioni per tenere la barra sempre ad una stessa posizione, contiene una funzione closebar() per la chiusura della stessa ed un gestore di cookie (la chiusura della barra setta il cookie come preferenza per la sessione in corso).

var persistclose = 1
var startX = 3
var startY = 3
var verticalpos = "frombottom"
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

Nel <BODY> del html la barra è un layer così richiamato


<div id="topbar">
<table width="100%">
<tr>
<td width="99%">
<strong>Barra dei comandi</strong>. <br />
Da qui puoi stampare o <a href="javascript:location.replace(location.href)">effettuare calcoli</a> in questa pagina</td>
</tr>
</table>
</div>

Qui una demo dell’effetto e qui lo zip dell’esempio.
Funziona con Firefox e Internet Explorer 6 e 7.