CarouFredSel: Creare Slider Animati Orizzontali e Verticali
october 2010 by hanicker
CarouFredSel è un interessante Plugin jQuery che permette in modo semplice e intuitivo di creare slider orizzontali e verticali di determinati contenuti HTML.
Questo slider (o carosello) è configurabile molto facilmente e si adatta con altri plugin esterni come effetti Lightbox
Il Plugin è personalizzabile al 100% anche grazie agli stili CSS e JavaScript, è possibile vedere le sue potenzialità dalla pagina demo.
Vediamo insieme come installare e utilizzare questo slider.
Installazione jQuery
Prima di tutto andiamo a richiamare tra <head> e </head> la libreria jQuery e il cuore del Plugin.
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-2.4.3-packed.js"></script>
Una volta inseriti questi due richiami dovremo aprire un JavaScript dove indicare il nome dell’ ID del DIV che vorremo animare.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#item1").carouFredSel();
});
</script>
Come vedete il div che faremo animare dovrà avere ID = item1.
Ora andiamo a vedere la parte HTML base da inserire per diverse tipologie di contenuto.
Per le immagini
<div id="item1">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
</div>
Per una paginazione
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
<li> u </li>
<li> F </li>
<li> r </li>
<li> e </li>
<li> d </li>
<li> S </li>
<li> e </li>
<li> l </li>
</ul>
Per un contenuto HTML
<div id="item1">
<div>
<h3>Infinity</h3>
<p>A concept that in many fields refers to a quantity without bound or end.</p>
</div>
<div>
<h3>Circular journey</h3>
<p>An excursion in which the final destination is the same as the starting point.</p>
</div>
<div>
<h3>jQuery</h3>
<p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
</div>
<div>
<h3>Carousel</h3>
<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
</div>
</div>
Caratteristiche
Ecco alcune caratteristiche fondamentali di questo Plugin jQuery.
Trasforma qualsiasi tipo di elemento HTML in uno slider orizzontale o verticale.
Scorre uno o più oggetti contemporaneamente.
Scorre automaticamente o con l’interazione dell’utente.
Ridimensiona automaticamente larghezza e altezza.
Ottimizzato per navigazione da tastiera.
Disponibili eventi personalizzati, metodi e molte opzioni.
Compatibile con i più diffusi (jQuery) lightbox-plugins.
GET e (re) SET opzioni di configurazione dopo l’esecuzione.
Esempi Extra
Inoltre vi segnalo questi esempi e metodi di implementazione dello slider.
Slider Base
Slider con diversi contenuti
Slider con interazione utente
Uso di funzioni Callback
Uso di eventi personalizzabili
Slider con diverse dimensioni di contenuto
Slider personalizzato da eventi
Slider + Lightbox
Uso di 15 Slider simultanei
Abbiamo la possilità di leggere la documentazione per la configurazione del plugin sul sito ufficiale oppure seguire il Forum.
Inoltre vi segnalo la possbilità di creare il codice Slider con un Wizard automatico.
Questo Plugin è molto simile ad un altro che avevo gia segnalato, jQuery Slider.
Altro
Design
Grafica
Immagini
Sviluppo
CSS
HTML
JavaScript
jQuery
Plugin
from google
Questo slider (o carosello) è configurabile molto facilmente e si adatta con altri plugin esterni come effetti Lightbox
Il Plugin è personalizzabile al 100% anche grazie agli stili CSS e JavaScript, è possibile vedere le sue potenzialità dalla pagina demo.
Vediamo insieme come installare e utilizzare questo slider.
Installazione jQuery
Prima di tutto andiamo a richiamare tra <head> e </head> la libreria jQuery e il cuore del Plugin.
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-2.4.3-packed.js"></script>
Una volta inseriti questi due richiami dovremo aprire un JavaScript dove indicare il nome dell’ ID del DIV che vorremo animare.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#item1").carouFredSel();
});
</script>
Come vedete il div che faremo animare dovrà avere ID = item1.
Ora andiamo a vedere la parte HTML base da inserire per diverse tipologie di contenuto.
Per le immagini
<div id="item1">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
</div>
Per una paginazione
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
<li> u </li>
<li> F </li>
<li> r </li>
<li> e </li>
<li> d </li>
<li> S </li>
<li> e </li>
<li> l </li>
</ul>
Per un contenuto HTML
<div id="item1">
<div>
<h3>Infinity</h3>
<p>A concept that in many fields refers to a quantity without bound or end.</p>
</div>
<div>
<h3>Circular journey</h3>
<p>An excursion in which the final destination is the same as the starting point.</p>
</div>
<div>
<h3>jQuery</h3>
<p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
</div>
<div>
<h3>Carousel</h3>
<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
</div>
</div>
Caratteristiche
Ecco alcune caratteristiche fondamentali di questo Plugin jQuery.
Trasforma qualsiasi tipo di elemento HTML in uno slider orizzontale o verticale.
Scorre uno o più oggetti contemporaneamente.
Scorre automaticamente o con l’interazione dell’utente.
Ridimensiona automaticamente larghezza e altezza.
Ottimizzato per navigazione da tastiera.
Disponibili eventi personalizzati, metodi e molte opzioni.
Compatibile con i più diffusi (jQuery) lightbox-plugins.
GET e (re) SET opzioni di configurazione dopo l’esecuzione.
Esempi Extra
Inoltre vi segnalo questi esempi e metodi di implementazione dello slider.
Slider Base
Slider con diversi contenuti
Slider con interazione utente
Uso di funzioni Callback
Uso di eventi personalizzabili
Slider con diverse dimensioni di contenuto
Slider personalizzato da eventi
Slider + Lightbox
Uso di 15 Slider simultanei
Abbiamo la possilità di leggere la documentazione per la configurazione del plugin sul sito ufficiale oppure seguire il Forum.
Inoltre vi segnalo la possbilità di creare il codice Slider con un Wizard automatico.
Questo Plugin è molto simile ad un altro che avevo gia segnalato, jQuery Slider.
october 2010 by hanicker
Fillerati: Un’alternativa al famoso Lorem Ipsum
september 2010 by hanicker
Fillerati è un servizio gratuito realizzato in HTML5 + CSS3, che permette di copiare porzioni di testo per paragrafai, titoli, liste durante la progettazione di un sito web.
Spesso durante la realizzazione di un sito web, bisogna inserire del testo per creare degli ingombri e verificare se tutto è corretto.
Di solito si utilizza una forma sintassica del tutto insignificante che prende il nome di Lorem Ipsum.
Questa idea nasce dai ragazzi di MadscienceApp che hanno pensato bene di provare a sostituire questa lingua latina in qualcosa di più sensato e interessante.
Infatti i testi sono presi da libri famosi come Moby Dick, A Princess of Mars o The War of the Worlds.
Cosa ne pensate? Sicuramente è originale non trovate?
Altro
Design
Grafica
Immagini
Sviluppo
Lorem_Ipsum
Web_2.0
Webdesign
from google
Spesso durante la realizzazione di un sito web, bisogna inserire del testo per creare degli ingombri e verificare se tutto è corretto.
Di solito si utilizza una forma sintassica del tutto insignificante che prende il nome di Lorem Ipsum.
Questa idea nasce dai ragazzi di MadscienceApp che hanno pensato bene di provare a sostituire questa lingua latina in qualcosa di più sensato e interessante.
Infatti i testi sono presi da libri famosi come Moby Dick, A Princess of Mars o The War of the Worlds.
Cosa ne pensate? Sicuramente è originale non trovate?
september 2010 by hanicker
WordPress non è solo Blog
february 2010 by hanicker
WordPress è un content management system ovvero un sistema di gestione dei contenuti che si focalizza sugli standard web e sull’usabilità.
WordPress è diventato più di un semplice strumento di blogging, ora è possibile creare qualsiasi tipo di sito che si possa immaginare con il giusto uso di plugin e temi.
Spesso molti non riesco ad entrare nell’ottica di WordPress, e capire che questa piattaforma non serve solo per creare e gestire blog.
Grazie ai plugin e i costanti aggiornamenti abbiamo la possibilità di aggiungere componenti per aumentare le funzionalità del nostro progetto in modo totalmente gratuito.
La gestione e quindi l’amministrazione da parte del cliente è davvero semplice e chaira, questo ci permette di avere un’area di back office personalizzabile, funzionante e semplificata.
Uso alternativo di WordPress
E-Commerce
Quante volte ci è capitato di dover creare un E-commerce?
ShopPlugin ci permette di trasformare WordPress in una piattaforma per gestire la vendita e acquisti di prodotti sul web.
Annunci di Lavoro
JobPress è un ottimo plugin che ci permette di usare WordPress per gestione annunci di lavoro.
Il plugin è a pagamento, circa 79 dollari, poco considerando il grande lavoro svolto e per quello che si può sviluppare.
Social Network
Grazie a BuddyPress è possibile creare un vero e proprio Social Network e una community appassionata.
L’installazione e la configurazione non è semplice ma il risultato finale è di successo.
Forum
BBPress permette di gestire e impostare WordPress come un Forum e creare una community.
Il grande sviluppo sugli standard web e sull’usabilità di WordPress aumentano il valore del Forum.
Entrare nell’ottica di WordPress
Oltre a questi Plugin dobbiamo renderci conto che possiamo trasformare WordPress a nostro piacimento grazie a temi e plugin, e non dobbiamo limitarci a usare WordPress solo per creare blog.
L’altro giorno mi è capitato di parlare con Federico, mi chiedeva consigli sulla creazione di un sito per la vendita di prodotti, la prima domanda che CMS posso usare?
Ovviamente gli ho detto immediatamente di usare WordPress con i giusti plugin e temi.
La cosa forse difficile è entrare nell’ottica di WordPress e individuare le aree che potrebbero essere trasformate in pagine, in articoli, in tag e capire dove posizionarle in modo corretto.
Vediamo un esempio pratico
Mettiamo il caso di dover creare un sito per una concessionaria di automobili.
Vediamo come usare plugin e elementi di WordPress in modo corretto e funzionale.
Come vediamo possiamo sfruttare a pieno WordPress per la gestione di un sito per una concessionaria, dalla visualizzazione delle schede dettaglio auto all’inserimento da parte del cliente tramite pannello di amministrazione.
I Plugin possono giocare un ruolo fondamentale, infatti in questo caso sono molto utili le gallerie di immagini, video per far percepire lo stato dell’auto e la newsletter per gli aggiornamenti ai visitatori.
Si potrebbero pensare ad altre caratteristiche da aggiungere ma per ora queste sono quelle indispensabili e più sinergiche.
Che CMS usi per i tuoi Clienti?
Spero che con questo articolo vi abbia aperto gli occhi sulle potenzialità di WordPress.
Attualmente per i miei clienti cerco sempre di proporre la soluzione WordPress in quanto ho avuto gia esperienza su questo CMS e conosco le sue potenzialità.
Vorrei sapere da voi se siete d’accordo con la mia tesi e se usate qualche altro tipo di CMS per i vostri clienti.
Altro
Design
Grafica
Immagini
Sviluppo
Blog
Community
Network
Webdesign
WordPress
from google
WordPress è diventato più di un semplice strumento di blogging, ora è possibile creare qualsiasi tipo di sito che si possa immaginare con il giusto uso di plugin e temi.
Spesso molti non riesco ad entrare nell’ottica di WordPress, e capire che questa piattaforma non serve solo per creare e gestire blog.
Grazie ai plugin e i costanti aggiornamenti abbiamo la possibilità di aggiungere componenti per aumentare le funzionalità del nostro progetto in modo totalmente gratuito.
La gestione e quindi l’amministrazione da parte del cliente è davvero semplice e chaira, questo ci permette di avere un’area di back office personalizzabile, funzionante e semplificata.
Uso alternativo di WordPress
E-Commerce
Quante volte ci è capitato di dover creare un E-commerce?
ShopPlugin ci permette di trasformare WordPress in una piattaforma per gestire la vendita e acquisti di prodotti sul web.
Annunci di Lavoro
JobPress è un ottimo plugin che ci permette di usare WordPress per gestione annunci di lavoro.
Il plugin è a pagamento, circa 79 dollari, poco considerando il grande lavoro svolto e per quello che si può sviluppare.
Social Network
Grazie a BuddyPress è possibile creare un vero e proprio Social Network e una community appassionata.
L’installazione e la configurazione non è semplice ma il risultato finale è di successo.
Forum
BBPress permette di gestire e impostare WordPress come un Forum e creare una community.
Il grande sviluppo sugli standard web e sull’usabilità di WordPress aumentano il valore del Forum.
Entrare nell’ottica di WordPress
Oltre a questi Plugin dobbiamo renderci conto che possiamo trasformare WordPress a nostro piacimento grazie a temi e plugin, e non dobbiamo limitarci a usare WordPress solo per creare blog.
L’altro giorno mi è capitato di parlare con Federico, mi chiedeva consigli sulla creazione di un sito per la vendita di prodotti, la prima domanda che CMS posso usare?
Ovviamente gli ho detto immediatamente di usare WordPress con i giusti plugin e temi.
La cosa forse difficile è entrare nell’ottica di WordPress e individuare le aree che potrebbero essere trasformate in pagine, in articoli, in tag e capire dove posizionarle in modo corretto.
Vediamo un esempio pratico
Mettiamo il caso di dover creare un sito per una concessionaria di automobili.
Vediamo come usare plugin e elementi di WordPress in modo corretto e funzionale.
Come vediamo possiamo sfruttare a pieno WordPress per la gestione di un sito per una concessionaria, dalla visualizzazione delle schede dettaglio auto all’inserimento da parte del cliente tramite pannello di amministrazione.
I Plugin possono giocare un ruolo fondamentale, infatti in questo caso sono molto utili le gallerie di immagini, video per far percepire lo stato dell’auto e la newsletter per gli aggiornamenti ai visitatori.
Si potrebbero pensare ad altre caratteristiche da aggiungere ma per ora queste sono quelle indispensabili e più sinergiche.
Che CMS usi per i tuoi Clienti?
Spero che con questo articolo vi abbia aperto gli occhi sulle potenzialità di WordPress.
Attualmente per i miei clienti cerco sempre di proporre la soluzione WordPress in quanto ho avuto gia esperienza su questo CMS e conosco le sue potenzialità.
Vorrei sapere da voi se siete d’accordo con la mia tesi e se usate qualche altro tipo di CMS per i vostri clienti.
february 2010 by hanicker
Copy this bookmark: