Massimiliano Raggi http://blog.massimilianoraggi.com Idee e riflessioni! Sun, 19 Feb 2012 15:26:57 +0000 en hourly 1 jQuery Mobile http://blog.massimilianoraggi.com/giude/jquery-mobile.html http://blog.massimilianoraggi.com/giude/jquery-mobile.html#comments Sun, 19 Feb 2012 14:49:34 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=552 Il progetto JQuery Mobile è un framework basato su jQuery realizzato di recente ma già offre ottima stabilità ed un numero di funzionalità adeguate per sviluppare applicazioni web mobile complete. Ottima alternativa anche per lo sviluppo di applicazioni native. Come? starai certamente pensando. E’ noto a tutti noi, che se pensiamo alla realizzazione di applicazioni per dispositivi mobili, siamo portati a pensare di sviluppare qualcosa di prettamente nativo. Anche se oggi creare un applicazione mobile nativa è il metodo migliore per sfruttare tutte le funzionalità dei dispositivi e l tempo stesso offire un’esperienza utente integrata e coerente fra tutte le applicazioni. Utilizzando questo framework avremo la possibilità di supportare più di un sistema operativo senza il bisogno di creare applicazioni native per ciascun dispositivo. Il framework, fa leva sulla struttura semantica delle pagine HTML5 e sugli attributi data- per definire le varie parti dell’interfaccia. Alla richiesta della vostra pagina ed al suo caricamento, la libreria utilizzerà questa struttura per arricchirla con altri tag e agganciare gli eventi e le interazioni ai componenti dell’applicazione. Utilizzando jQuery Mobile potrete realizzare applicazioni per i dispositivi:

  • Apple iOS 3.2-5.0
  • Android 2.1-2.3
  • Android 3.1 (Honeycomb)
  • Windows Phone 7-7.5
  • Windows Phone 7-7.5

Controllate le compatibilità qui: http://jquerymobile.com/gbs/ .Se volete avere un esempio di funzionalità e documentazione potete visitare: http://jquerymobile.com/demos/1.0.1/

]]> http://blog.massimilianoraggi.com/giude/jquery-mobile.html/feed 0 Modernizr 2.5.2 http://blog.massimilianoraggi.com/framework/modernizr-libreria-open-source-di-javascript.html http://blog.massimilianoraggi.com/framework/modernizr-libreria-open-source-di-javascript.html#comments Tue, 14 Feb 2012 14:40:40 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=545 Modernizr è una libreria open source di Javascript che facilita ai web designer il supporto per i diversi livelli di esperienze, basandosi sulle capacità del browser del visitatore del sito.
La libreria permette a designer e a sviluppatori, di poter approfittare di tutte le possibilità HTML5 e CSS3 offrono e che è già implementato in alcuni browser, senza sacrificare il controllo sull’esperienza d’uso in altri browser.
Il progetto Modernizr è stato creato basandosi sul principio del “miglioramento progressivo”, in modo tale da supportare la costruzione di siti layer per layer, partendo da una base senza JavaScript e aggiungendo uno alla volta i livelli di miglioramento.
Questo metodo è semplice con Modernizr, dal momento che saprete di cosa è capace il browser.  Modernizr vi permetterà di costruire siti web all’avanguardia.
Sul sito ufficiale potete anche trovare la lista completa delle feature che è in grado di rilevare.
Inserendo lo script Modernizr nella vostra pagina, vi “aiuterà” ad individuare se il browser corrente supporta le feature di CSS3 come @font-face, border-radius, border-image, box-shadow, rgba(), così come le feature introdotte da HTML5 come audio, video, localStorage ed i nuovi tipi e attributi dell’elemento <input>.
In pratica, potrete approfittare di queste implementazioni native nei browser che supportano queste feature e decidere se volete creare un fallback [ricadere, ndr] basato su JavaScript o semplicemente lasciar degradare gradualmente la pagina nei browser che non le supportano. Inoltre, Modernizr rende disponibili per la progettazione in Internet Explorer i nuovi elementi di HTML5, così che potete usare da subito la loro semantica migliorata e non avere più problemi.

]]> http://blog.massimilianoraggi.com/framework/modernizr-libreria-open-source-di-javascript.html/feed 0 Toolkit per lo sviluppo Web by: Twitter http://blog.massimilianoraggi.com/framework/toolkit-per-lo-sviluppo-web-by-twitter.html http://blog.massimilianoraggi.com/framework/toolkit-per-lo-sviluppo-web-by-twitter.html#comments Tue, 14 Feb 2012 14:03:26 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=538 Twitter Bootstrap è un framework dedicato allo sviluppo consentendo di scrivere codice e creare un progetto senza quasi preoccuparsi di web design.
Il progetto di partenza è ampiamente spiegato su un interessante e esustivo articolo pubblicato da Italian A List Apart .
Oggi è stato rilasciato un incredibile aggiornamento del famoso framework, il progetto è visitabile sul sito ufficiale e scaricabile direttamente da GitHub.
Cosa vi offre questo framework?

Tipografia, colori, pulsanti, dropdown, tabs, slider e altro ancora possiedono un CSS definitivo con stili e convenzioni esteticamente accettate e condivise da milioni di persone.
Twitter Bootstrap 2.0 include una più dettagliata documentazione di tutti i suoi componenti, nuovo sistema di  griglia, nuove media queries per responsive design, nuovi stili di base, nuovi componenti e 12 ottimi plugin jQuery pronti per l’uso.Ancora una volta un sentito ringraziamento a tutti quelli che hanno reso possibile il progetto.

]]> http://blog.massimilianoraggi.com/framework/toolkit-per-lo-sviluppo-web-by-twitter.html/feed 0 Disqus – Scopri la tua community http://blog.massimilianoraggi.com/socialnetwork-2/disquss-aggiungi-la-tua-community.html http://blog.massimilianoraggi.com/socialnetwork-2/disquss-aggiungi-la-tua-community.html#comments Mon, 13 Feb 2012 13:22:08 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=451 Disqus è una piattaforma di commenti che ti aiuta a costruire una comunità attiva da parte del pubblico del tuo sito web. Ha caratteristiche impressionanti, strumenti potenti, ed è facile da installare.
Disqus vi offre la possibilità di integrare nei vostri siti una comunità.
Ecco alcune Featured:

Sistema di commento del  in tempo reale

Commenti diventare più simili a discussioni dal vivo con distacco e l’aggiornamento in tempo reale. Offrendo un’esperienza più veloce, più intuitivo, Disqus è il modo preferito di tutti a commentare .

Integrazione sociale

Piena integrazione con Facebook, Twitter e altro ancora. Lascia login persone, il commento e condivisione utilizzando i servizi sociali che già utilizzano e amano.

La Comunità in un Box

Un modo veloce per mostrare ciò che la vostra comunità è composta da.  La casella di comunità dà a tutti una visualizzazione di riepilogo delle attività e persone che partecipano sul sito.

Comunità collegati

Disqus raggiunge i 200 milioni di persone ogni mese in tutto mezzo milione di siti web e le comunità sul web. Tenere le conversazioni vivaci collegando il pubblico con i milioni di altri già presenti sul Disqus.

Commenti dal cellulare

Pienamente compatibile con siti web per cellulari per commentare, mentre in viaggio. Il tema predefinito mobile è formattato con gli smartphone, come i telefoni cellulari iPhone o Android, in mente.

Simpatia e condivisione

La gente può votare quello che vogliono dalla simpatia pagine o commenti e condivisione che su Facebook, Twitter, e altre reti.

]]> http://blog.massimilianoraggi.com/socialnetwork-2/disquss-aggiungi-la-tua-community.html/feed 0 jQuery come utilizzarlo http://blog.massimilianoraggi.com/giude/jquery-come-utilizzarlo-nei-nostri-progetti.html http://blog.massimilianoraggi.com/giude/jquery-come-utilizzarlo-nei-nostri-progetti.html#comments Sun, 12 Feb 2012 18:20:25 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=413 Siete ai primi approcci e non avete idea di come includere la fantastica libreria jQuery?
Se siete interessati a comprendere meglio di cosa sto parlando potete leggere il mio post precedente jQuery un framework alleato!
Per utilizzarla non occorre essere programmatori affermati, ve lo dimostro subito senza bisogno di giri con le parole.

Per prima cosa scarichiamo la libreria dal sito ufficiale http://www.jquery.com, ricordatevi di scaricare il pacchetto compresso o minimizzato.
Scompattate il pacchetto zip e includetelo nel vostro progetto, il mio consiglio è creare una dir js dove posizionare il core di jQuery.
Esempi di inserimento:
Se utilizzate un server online per le prove http://www.miosito.com/js/jquery-1.7.1.min.js.
Se utilizzate un server in locale http://localhost/miosito/js/jquery-1.7.1.min.js.

Create la vostra pagina index.html o copiate il codice

<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
<head>
<head>
<script type="text/javascript" src="http://www.miosito.com/js/jquery-1.7.1.min.js"></script>
</head>
<body>
<h1>jQuery</h1>

<p>Inseriamo la libreria jQuery nei nostri progetti</p>
</body>
</html>

Ovviamente questo non basta, con questa prima opreazione avremo incluso solo la libreria, mentre per vedere jQuery all’opera avremo anche bisogno di creare anche il “codice” per il funzionamento.

<script type="text/javascript">
$(document).ready(function() {
   // Il vostro codice inizier&agra; a funzionare quando il DOM è pronto
   // Inserite qui il vostro codice
 });
</script>

Modificate quindi la vostra pagina index.html (la parte in evidenza è la porzione di codice in da utilizzare) questo modo:

<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
<head>
<head>
<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

></script>
<script type="text/javascript">
$(document).ready(function() {
   $('p').append(' <a href="#">Cliccami</a>');

   $("a").click(function() {
     alert("Ciao Mondo! La libreria funziona perfettamente");
   });

 });
</script>
</head>
<body>
<h1>jQuery</h1>

<p>Inseriamo la libreria jQuery nei nostri progetti</p>
</body>
</html>

In questo ultimo passaggio ho aggiunto il codice per la funzionalità, una piccola banalità che ci permette di aggiungere alla pagina elementi anche se non inseriti prettamente nell’html.
Questa tecnica è anche chiamata manipolazione del DOM.
In pratica “cerco” appendo a tutti gli elementi p presenti nella pagina, faccio aggiungere un link e nell’struzione successiva dico di aprire una finsestra di dialogo con un testo a piacere io ho scelto “Ciao Mondo! La libreria funziona perfettamente”.
jQuery vi offre un mondo di possibilità, lascio a voi tutta la sperimantazione, consultate la documentazione ufficiale http://docs.jquery.com

]]> http://blog.massimilianoraggi.com/giude/jquery-come-utilizzarlo-nei-nostri-progetti.html/feed 0 Fluid 960 Grid http://blog.massimilianoraggi.com/design/fluid-960-grid.html http://blog.massimilianoraggi.com/design/fluid-960-grid.html#comments Sat, 11 Feb 2012 15:18:51 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=410 Se avete bisogno di un ottimo “framework” CSS che vi aiuti sensibilmente nella creazione dei vostri layout e non conoscete questo ottimo supporto, mi permetto di consigliarvi Fluid 960 Grid System.
Consultate l’esempio per entrare subito nel vivo del progetto http://www.designinfluences.com/fluid960gs/.
Sono moltissimi i template o siti che utilizzano questo tipo di griglia. In pratica vi permette di sfruttare le numerose classi css preimpostate dal framework per realizzare dei blocchi di qualunque tipo. Inutile dirlo che la griglia si basa su una dimensione di massimo 960px.

Con l’esempio riuscirete a comprendere meglio come funziona e cosa potete realizzare, senza il bisogno di aggiungere troppe parole.

]]> http://blog.massimilianoraggi.com/design/fluid-960-grid.html/feed 0 jQuery un framework alleato! http://blog.massimilianoraggi.com/giude/jquery-un-framework-alleato.html http://blog.massimilianoraggi.com/giude/jquery-un-framework-alleato.html#comments Fri, 10 Feb 2012 15:33:09 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=357 jQuery è una libreria meglio definita come framework  JavaScript, sviluppato da John Resig con startup dal 2006, l’intento del framework è di rendere il codice più sintetico e di limitare al minimo l’estensione degli oggetti globali per ottenere la massima compatibilità con altre librerie.
Anche se troppo semplicistico definire il progetto jQuery in questo modo:   sostanzialmente è un insieme di funzioni JavaScript che permettono di facilitare  compiti più o meno complessi.

Molto diffuso e differente con gli altri framework javascript per la sua capacità di avvalersi della conoscenza di base sia CSS che HTML,  invece che di modelli di programmazione complessa. Compatibile quindi anche per quei  webdesigners sprovvisti di nozioni javascript. Con jQuery potete applicare facilmente effettipiù o meno complessi ai vostri siti web.
Negli ultimi anni anche grazie alla diffusione di tecniche come AJAX e alla possibilità sempre più estesa di riprodurre effetti grafici dinamici senza la necessità di plugin come Flash, jQuery ha finalmente rimpiazzato l’utilizzo di Flash, rendendo possibile la visualizzazione di effetti, gallery, slideshow anche per dispositivi mobili.
Possiamo definire anche la libreria come cross-browser compatibile, di fatto la libreria è compatibile con:

  • Firefox 3.6, 5.0.x, 6.0.x
  • Internet Explorer 6+
  • Safari 5.0.x
  • Opera Current – 1 version
  • Chrome Current – 1 version

La documentazione ufficiale è visitabile a questo indirizzo: http://docs.jquery.com/Main_Page.

Il framework è anche compatibile con altre librerie, come Mootools, Prototype ecc., offre un’ampio range di funzionalità, dalla manipolazione dei CSS,  elementi HTML, agli effetti grafici, invio dati per i form cross-browser senza necessariamente creare degli oggetti nativi JavaScript.

Avvicinandosi a jQuery per la prima volta è quindi fondamentale sapere che tutto il framework si basa attorno all’oggetto/funzione $ , a sua volta un abbreviazione o anche alias di jQuery stesso. Uno dei punti di forza è il potente e performante motore di selezione.

E’ possibile richiamare la libreria di base di jQuery in tre modi, o attraverso le
Google Libraries API o tramite CDN Hosted jQuery oppure scaricando e caricando la libreria sul proprio server.
Nelle prime due modalità la libreria risiede su server esterni al vostro e altamente performanti, ma sopratutto in spazio https.

]]> http://blog.massimilianoraggi.com/giude/jquery-un-framework-alleato.html/feed 0 Volunia, un nuovo fenomeno social media http://blog.massimilianoraggi.com/socialnetwork-2/volunia-un-motore-di-ricerca-sociale.html http://blog.massimilianoraggi.com/socialnetwork-2/volunia-un-motore-di-ricerca-sociale.html#comments Mon, 06 Feb 2012 19:47:16 +0000 Massimiliano http://blog.massimilianoraggi.com/?p=397 Il 6 Febbraio è stato presentato questo “nuovo” progetto dal nome Volunia definito come nuovo  motore di ricerca sociale. Progetto veramente ambizioso, lodevole ma competere con grandi colossi come Google e Facebook sarà veramente dura, anche se l’obbiettivo è rendere un’esperienza di navigazione “alternativa” a quella dei motori di ricerca più utilizzati.
Il progetto Volunia è stato ideato da Massimo Marchiori, puro made in Italy, il motto è “cerca e incontra”.

Dal profilo su wikipedia  Massimo Marchiori leggo … “Dal 2006 è professore associato all’Università degli studi di Padova ed è ricercatore scientifico nel W3C. Si occupa attivamente della ricerca e dello sviluppo del web semantico. Da aprile 2010 Massimo Marchiori è chief technology officer di Atomium Culture.”….

Attualmente Volunia è accessibile solo in qualità di Power User, è possibile richiedere l’accesso dalla pagina: http://launch.volunia.com/.
Il rumor intorno a questo progetto è incredibile, prima di dire la vostra vi invito a provare, per il momento io attendo il mio invito.

]]> http://blog.massimilianoraggi.com/socialnetwork-2/volunia-un-motore-di-ricerca-sociale.html/feed 0 Corso CSS3 http://blog.massimilianoraggi.com/corsi/corso-css3.html http://blog.massimilianoraggi.com/corsi/corso-css3.html#comments Fri, 27 Jan 2012 11:23:28 +0000 Massimiliano http://test.verticalrhythms.com/myblog/?p=300 Che ne diresti se avessi la possibilità di rendere più “interattivo” il tuo sito web senza utilizzare programmazione e il buon vecchio flash?

Personalmente ho provato le nuove possibilità offerte dalla grande potenza dei CSS, che nella versione CSS3 ci offrono molte possibilità esplorative e praticità nella realizzazione di complessi layout senza utilizzare necessariamente della grafica.
Potremmo creare un mokup del sito in pochissimo tempo e modificarlo a seconda delle necessità dei propri clienti o delle impressioni dei nostri utenti.

  • Bordi arrotondati
  • Effetti sul testo
  • Sfocature
  • Background con gradienti
  • Animazioni

Presto potrai verificare le possibilità con delle dimostrazioni che ho preparato, nel prossimo post pubblicherò l’indirizzo a cui potrai accedere.

]]> http://blog.massimilianoraggi.com/corsi/corso-css3.html/feed 0 Benvenuta Joomla 2.5 http://blog.massimilianoraggi.com/joomla/benvenuta-joomla-2-5.html http://blog.massimilianoraggi.com/joomla/benvenuta-joomla-2-5.html#comments Tue, 24 Jan 2012 10:58:18 +0000 Massimiliano http://test.verticalrhythms.com/myblog/?p=294 Lo staff di joomla.org ha rilasciato la nuova versione stabile dell’immenso progetto di joomla, prontamente è stata localizzata anche in italiano.

Potete scaricare o aggiornare la vostra versione di Joomla 2.5  stabile in italiano da qui: http://www.joomla.it/component/rokdownloads/451-joomla-2.html
Per chi avesse bisogno di una guida per per l’installazione di aggiornamento potete leggere questa utile guida http://wiki.joomla.it/index.php/Aggiornamento_da_una_versione_di_Joomla_1.7_alla_nuova_2.5.0 .

Un ringraziamento particolare a tutti quelli che con sacrificio hanno contribuito alla localizzazione in Italian.

]]> http://blog.massimilianoraggi.com/joomla/benvenuta-joomla-2-5.html/feed 0