Category Archives: Javascript

Framework per lo sviluppo mobile: PhoneJS

Pubblicato da

E’ molto tempo che non scrivo un post. La ragione è semplice: troppo lavoro.
Non che mi lamenti, sia chiaro. In questo periodo storico il vero problema è NON avere lavoro.
Tuttavia quando si è impegnati su più fronti lavorativi, si acquisiscono nuovi clienti e si imbastiscono nuovi progetti, anche trovare il tempo per scrivere un semplice post diventa un’impresa ardua. Leggi tutto

jQuery: jTable un plugin per creare tabelle CRUD semplicemente

Pubblicato da

jquery

CRUD è un acronimo (Create, Read, Update, Delete) ma è anche il cruccio quotidiano di chi deve gestire dati all’interno di un database.
jTable è un  plugin per la nota libreria jQuery che ci permette di creare tabelle per la gestione dei dati (CRUD appunto) scrivendo pochissimo codice HTML e con una piccola configurazione del javascript da inserire.
jTable funziona indipendentemente dal linguaggio di programmazione, utilizza AJAX per l’aggiornamento dei dati, è localizzato in molte lingue (italiano compreso), può funzionare con diversi temi predefiniti.

Il suo utilizzo base è semplicissimo. Basta includere oltre a jQuery le righe per il plugin e per il CSS del tema scelto

Poi si crea un contenitore

E si aggiunge il javascript per creare l’istanza jTable

Le azioni (action) indicano quali sono i file che gestiscono le interazioni col db.
Ogni colonna rappresenta un campo del db e possiamo impostarne la larghezza relativa in tabella e le caratteristiche come la modificabilità, il tipo, la possibilità di ordinamento su sua base.
Le tabelle così create caricano oggetti standard JSON risultanti delle azioni succitate (qualsiasi linguaggio serverside moderno può creare questo tipo di oggetto).

jtable-example-with-data

Link: jTable

Scrivere codice tramite smartphone: Touchcode

Pubblicato da

Disponibile per adesso solo per Android, Touchcode è un’applicazione per smartphone (o tablet) che permette di scrivere e modificare codice.
E’ supportata l’evidenziazione della sintassi, l’autocompletamento del codice per C++, C#, Python, Ruby, HTML, JavaScript, PHP e XML. Inoltre sono presenti la sempre utile ricerca incrementale, la sincronizzazione dei file (tramite Dropbox) e la funzionalità FTP.

Perchè usare un code editor su uno smartphone o su un tablet? Un po’ perchè l’ispirazione ad un informatico può arrivare ovunque e in qualsiasi momento e un po’ perchè certi progetti di tipo collaborativo potrebbero avere bisogno di interventi urgenti.
La versione Pro di Touchcode prevede il supporto alla piattaforma di social-coding GitHub

Link: Touchcode

Centratissimo: un layout originale che sta sempre al posto suo.. al centro

Pubblicato da

Centratissimo è

un template web con scrolling fluido tra le pagine e capacità di adattare le proprie dimensioni in funzione di quelle della finestra in modo da risultare sempre perfettamente centrato.
Centratissimo è stato testato e funziona bene a partire da Firefox 3.x, IE8, Safari 4.x, Opera 10.x., Chrome 11.x

Per fare questo basta jQuery, un paio di suoi plugin e tanta pazienza.
Il risultato è un originale layout adattissimo per pagine di presentazione, mini-siti e compatibile con tutti i browser moderni.
Da tenere d’occhio.

Link: Centratissimo

Un PDF reader in Javascript

Pubblicato da

PDF.js è un esperimento in HTML5 per creare un lettore PDF senza l’ausilio di codice nativo.
Lo scopo di questo esperimento è quello di creare una piattaforma conforme agli standard web per la visualizzazione e l’utilizzo dei PDF.
Dopo le batoste per Flash (che prima o poi verrà soppiantato in toto da HTML5) anche il mitico PDF sembra stia per essere levato dal monopolio di Adobe.

Link: https://github.com/mozilla/pdf.js
Demo: http://mozilla.github.com/pdf.js/web/viewer.html

PHP: adattare le immagini alla risoluzione dello schermo

Pubblicato da

Uno dei crucci di chi sviluppa per il web è quello di rendere la propria applicazione fruibile per la maggior parte dei dispositivi.
Questo significa o creare più versioni di una stessa applicazione o creare un unico layout che sia fluido e adattabile alle varie situazioni.
Ma le immagini?

Una tecnica per adattare le immagini alla risoluzione dello schermo è quella del sistema chiamato Adaptive Images che sfrutta Javascript e le librerie grafiche di PHP.
Il metodo è semplice

  • il javascript rileva la dimensione dello schermo e crea un cookie che ne immagazzina il valore
  • il file .htaccess intercetta ogni richiesta per file grafico .jpg, .gif o .png
  • questa richiesta viene inviata al file PHP che controlla se esiste una versione già “cachizzata” del file nella dimensione adatta
  • se non esiste nella cache, il file viene generato e inviato in output

Il sistema Adaptive Images richiede

  • Apache 2
  • PHP 5.x
  • GD lib

Link: Adaptive Images

Interfacce utenti semplici ed efficaci con jQuery EasyUI

Pubblicato da

jQuery EasyUI è una collezione di plugin per jQuery che aiuta a creare interfacce utente in maniera semplice e con pochissimo codice.
Ogni componente di EasyUI ha proprietà, metodi ed eventi. Lo sviluppatore può estendere qualsiasi parte del pacchetto semplicemente.
L’intero progetto è ben documentato e dispone di moltissimi tutorial per trasformare “semplice” HTML in avanzate interfacce.
Una vera manna per chi vuole utilizzare jQuery senza perdersi troppo nello sterminato materiale a disposizione.

Link: jQuery EasyUI

Validazione form: il modo semplice e veloce

Pubblicato da

Chi sviluppa per il web sa che la validazione dei dati inseriti in un form è un passaggio obbligato per la sicurezza dell’applicazione che lo ospita e per la validità degli stessi.
Il metodo più utilizzato è quello che fa uso di script javascript.
Ve ne propongo uno molto semplice e veloce da implementare in qualsiasi form esistente.

  1. innanzitutto si scarica questo script da Javascript-Coder
  2. si inserisce questa istruzione tra i tag <HEAD> della pagina

    <script src="gen_validatorv4.js" type="text/javascript"></script>

  3. si aggiunge poi il codice javascript che richiama la funzione di controllo e validazione subito dopo il form

    <form id='mioform' action="">
    <!--qui vanno i campi input -->
    </form>
    <script type="text/javascript">
    var frmvalidator  = new Validator("mioform");
    //dove mioform è l'id/nome del form

  4. poi si aggiungono tutte le validazioni richieste per il form come ad esempio

    frmvalidator.addValidation("Nome","req","Inserisci il tuo nome");
    oppure
    frmvalidator.addValidation("Email","req");
    frmvalidator.addValidation("Email","email");

  5. qui c’è una lista completa delle validazioni possibili

La funzione permette di controllare l’input in maniera molto completa. Anche tramite l’uso delle espressioni regolari.
I messaggi di errore e di dialogo possono essere visualizzati sia nella maniera classica tramite finestrine javascript che attraverso l’utilizzo di DIV all’interno della pagina stessa.
Oppure ancora i messaggi possono essere visualizzati vicino i campi di input stessi. Si legga qui per la spiegazione estesa di questa modalità avanzata.

[da Javascript-Coder]

bMap, un plugin jQuery per un uso semplificato ed esteso delle mappe di Google

Pubblicato da

Se utilizzate la libreria jQuery e volete inserire le mappe di Google nel vostro sito web, il plugin bMap è quello che fa per voi.
Aggiungendo questo plugin sarà possibile:

  • inserire mappe semplici
  • aggiungere al volo marcatori
  • aggiungere marcatori, polilinee, poligoni
  • aggiungere una sidebar che illustri ed elenchi i marcatori
  • aggiungere markers da un’altra pagina con AJAX
  • utilizzare funzionalità avanzate AJAX per agire su markers e layer della mappa
  • aggiungere set di icone personalizzate (anche al volo)
  • cambiare la gif per il loading
  • cambiare la finestrella informativa di un marcatore con qualsiasi altra window
  • sovrapporre immagini

Link: bMap

Implementazione Javascript dei pre-processori CSS

Pubblicato da

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

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