Category Archives: Javascript

CSS Javascript Php ruby on rails

Implementazione Javascript dei pre-processori CSS

Pubblicato da

Implementazione Javascript dei pre-processori CSS

I pre-processori CSS sono strumenti che estendono le potenzialità dei CSS. Due tra i più utilizzati sono LESS e SASS.
Queste librerie permettono di aggiungere variabili e classi, effettuare operazioni e nidificare i CSS.
Sia LESS che SASS devono però essere installate sul server per poter essere utilizzate.
Inizialmente LESS e SASS erano stati sviluppati come gem Ruby ma attualmente esistono dei porting per PHP e .NET.

Per chi volesse cimentarsi nei pre-processori CSS ma non vuole chiamare in causa Ruby, PHP o .NET, è stata realizzata una libreria .js che sostituisce le installazioni.
Secondo lo sviluppatore, questa libreria permette di essere fino a 40 volte più veloce (anche nei browser non di ultima generazione).
L’unica accortezza è quella di inserire il file LESS prima dell’inclusione alla libreria javascript

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Lo sviluppo è ancora agli inizi ma promette bene. Tutto nell’ottica di un utilizzo più semplice di questo strumento di estensione delle capacità dei “vecchi” CSS

Link: Less.js

Database Javascript

SQLike, un piccolo query engine

Pubblicato da

SQLike, un piccolo query engine

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: SQLike – demo

CSS Javascript Online service

8 strumenti per la compressione di script e CSS

Pubblicato da

8 strumenti per la compressione di script e CSS

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
CSS Javascript Online service Php Python

Comparazione framework

Pubblicato da

Comparazione framework

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

Google Javascript Online service Php

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

Aggiungere funzionalità a Google Maps con Geocubes

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

Javascript per raccogliere indirizzi e visualizzare mappe

Pubblicato da

Javascript per raccogliere indirizzi e visualizzare mappe

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

CSS Javascript

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):

    CSSHttpRequest.get(
        "http://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );

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:

@import url(about:chr:Hello%20World!);

Esempi

Downloads

Link: CSSHttpRequest

Javascript SEO Sicurezza

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)

Come capire quali social network il tuo visitatore utilizza

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/

CSS Javascript

YAML: molto più di un css framework

Pubblicato da

YAML: molto più di un css framework

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.

YAML: molto più di un css framework

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.

CSS Dhtml Javascript Online service

Creare menù evoluti in DHTML online

Pubblicato da

Creare menù evoluti in DHTML online

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ù.

Creare menù evoluti in DHTML online

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