Archivi tag: js

Librerie ed esempi per lavorare con Canvas

Canvas è una estensione dell’HTML standard che permette il rendering dinamico di immagini bitmap gestibili attraverso un linguaggio di scripting.

In questo articolo mostro una serie di librerie widget per lavorare con Javascript Canvas

Vi ricordo inoltre che è possibile iscriversi gratuitamente ai nostri feed: RSS feed.

Processing.js

http://ejohn.org/apps/processing.js/screens/Picture%2014.pngJohn Resig : processo di visualizzazione in Javascript

Canvas Photo Experiment

Canvas Photo Experiment interfacccia simile a “photo table” di Microsoft Surface.

Canvas 3D JS Libary

http://www.c3dl.org/wp-content/themes/c3dl4/images/headers/header.pngCanvas 3D JS Libary (C3DL) è una libreriache permette di scrivere facilemtne applicazioni 3D usando canvas 3D. Fornisce un insieme di classi matematiche, e altri oggetti 3D.

Pixastic Image Processing Library

Pixastic logoPixastic è una libreria sperimentale che permette di sviluppare diverse operazioni sulle imaggini usando pochissimo javascript. Gli effetti supportati sono desaturazione/scala di grigi,  flipping, brightness/contrast adjustment, hue/saturazione, emboss, blur e molti altri.

Coverflow in Javascript

La libreria permette i creare uno slider di immagini in javascript.

Bevel.js

Bevel.js permette di aggiungere bordi e cornici, eventualemnte sfumate alle proprie immagini. Usa un codice javascript non intrusivo e funziona tutti i browser.

Ben Joffe examples


Ben Joffe ha scritto un alibreria xhe permette di creare grafici 3D in javascript Ben Joffe web page.

ProtoChart

ProtoChartè una nuova libreria opensource che usa Prototype e Canvas per creare grafici.

IECanvas

IECanvas è una implementazione con  ActiveX delle API Canvas. Si basa sulla implementazione di Mozzilla s ulla libreria di rendering Cairo.

explorercanvas – Drawing canvas for Internet Explorer

Firefox, Safari and Opera 9 supporta i canvas. ExplorerCanvas aggiunge le stesse funzionalità ad Internet Explorer.

Mozilla presenta Bespin editor web based

webkit-editor-medium

Mozilla Labs ha presentato Bespin un code editor web based di grande facilità d’uso, che ha come scopo quello di migliorare la produttività degli sviluppatori, consentendo la collaborazione tra utenti da remoto.

Basato su Javascript, Bespin permette sviluppare interfacce web in HTML 5, garantendo velocità di prestazioni per importare rapidamente anche codice incluso in file di grandi dimensioni, annullare modifiche apportate al progetto e presto la possibilità di condividere in real time la sessione di lavoro relativa al codice implementato.

Le funzionalità di Bespin sono destinate a crescere verso una più completa integrazione di strumenti che possano garantire una collaborazione diretta di modifica del codice sul web mai vista prima, come ha dichiarato Galbraith, il co-direttore dell’area developer tools del Mozilla Labs.

Per provare il tool e testare da subito le funzionalità di cui è dotato, è possibile registrarsi al sito ufficiale.

Via | labs.mozilla.com

Importare un file css o js all’interno del body

Una limitazione nell’inclusione dei fogli di stile css mediante l’utilizzo del tag html <link> consiste nel fatto che lo stesso debba essere incluso all’interno del tag <head> affinchè gli stili inclusi possano essere utilizzati dal browser.
Nel caso in cui si voglia includere un file css in un qualsiasi punto della pagina, ad esempio nel <body>, magari associando l’inclusione ad un determinato evento o ad una determinata condizione risulterebbe impossibile se non ci venisse in contro il framework Javascript : MooTools.

E’ possibile mediante questa classe includere anche file javascript a runtime, così come per i file css.
E’ necessario importare all’interno della pagina 2 file javascript:
– Il core dei mootools
– il more dei mootools contenente il plugin Asset
I 2 files sono disponibili qui (core) e qui (more).

<script src="http://fritzzz.altervista.org/bloggerContent/mootools/mootools-1.2.1-core-nc.js" type="text/javascript"></script> <script src="http://fritzzz.altervista.org/bloggerContent/mootools/mootools-1.2-more.js" type="text/javascript"></script>

Il passo successivo è quello di utilizzare all’interno della pagina il seguente codice:

// include un file css a runtime
var myCSS = new Asset.css("style.css");
// include un file javascript a runtime
var myJS = new Asset.javascript("jsdefinition.js");

Di seguito è presente il codice per poter gestire la stampa del javascript per la chiamata ai metodi dei mootools mediante una classe PHP.

class MooTools{
/**
* Metodo per recuperare la chiamata al metodo della classe Asset dei mootools per
* importare un file css a runtime (quindi non necessariamente nell’head della pagina)
*
* @param $cssFile : path al file css
* @return    : stringa javaScritpt contenente la chiamata al metodo della clase
*        Asset dei mootools
*/
public static function getAssetCss($cssFile){
// nel caso in cui non si voglia usare un nome univoco , è possibile decommentare questa riga
// ed eliminare la seguente
//return “var myCss = new Asset.css(‘”.$cssFile.”‘);”;
return “var myCss”.Random::string().” = new Asset.css(‘”.$cssFile.”‘);”;
}

/**
* Metodo per stampare la chiamata al metodo della classe Asset dei mootools per
* importare un file css a runtime (quindi non necessariamente nell’head della pagina)
*
* @param $cssFile : path al file css
*/
public static function printAssetCss($cssFile){
echo self::getAssetCss($cssFile);
}

/**
* Metodo per recuperare la chiamata al metodo della classe Asset dei mootools per
* importare un file js a runtime
*
* @param $cssFile : path al file js
* @return    : stringa javaScritpt contenente la chiamata al metodo della clase
*        Asset dei mootools
*/

public static function getAssetJs($jsFile){
// nel caso in cui non si voglia usare un nome univoco , è possibile decommentare questa riga
// ed eliminare la seguente
//return “var myJs = new Asset.javascript(‘”.$jsFile.”‘)”;
return “var myJs”.Random::string().” = new Asset.javascript(‘”.$jsFile.”‘)”;
}
/**
* Metodo per stampare la chiamata al metodo della classe Asset dei mootools per
* importare un file js a runtime
*
* @param $cssFile : path al file js
* @return    : stringa javaScritpt contenente la chiamata al metodo della clase
*        Asset dei mootools
*/
public static function printAssetJs($jsFile){
echo self::getAssetJs($jsFile);
}
}
Attenzione : nel codice si fà riferimento alla classe Random la cui implementazione è possibile recuperarla sul post Generazione valori random in php.
Sicuramente questo post sarà utile a coloro, come nel mio caso utilizzino un controller per la gestione centralizzata dell’inclusione di file js e file css.

Continua la lettura di Importare un file css o js all’interno del body