Slick un JQuery carousel completo e responsive

jquery-carousel-center-mode jquery-carousel-multiple jquery-carousel-variable-width

Voglio segnalarvi uno dei tanti JQuery carousel (caroselli di slide) disponibili in rete: Slick. Questo carosello si segnala per un completezza di funzioni e un qualità del codice veramente eccellente.

Ottimo sia per i programmatori che per i web designer in quanto anche l’applicazione delle impostazioni più complesse risulta essere molto lineare e ben documentata in un sito one-page funzionale e anche bello da vedere.

Ecco le funzioni principali:

  • Supporta elementi singoli
  • Multipli
  • Multipli a larghezza variabile
  • Multipli con possibilità di impostare i breakpoint per decidere come cambia al diminuire dell’area a disposizione
  • Una modalità con la slide centrale più grande
  • Il caricamento “lazy” delle slide, ossia al momento in cui vengono rese visibili
  • Ovviamente l’autoplay
  • Il fade tra le slide
  • L’aggiunta e la rimozione dinamica delle schede
  • Il filtraggio delle slide
  • La sincronizzazione delle slide con un altro elemento al di fuori della stessa

Oltre a questo è molto ben documentato e l’ho personalmente usato per il sito internet sul quale sto lavorando adesso e sembra funzionare davvero bene.

Questo è il link alla home page del progetto:
Slick, Responsive JQuery Carousel

facebooktwittergoogle_pluspinterestlinkedinmail

Come vedere i dati effettivamente inviati da un form?

firebug1.3-img07Stiamo programmando un form e per fare il debug avremmo bisogno di sapere se i valori inseriti e inviati dopo la pressione del tasto submit sono quelli che ci aspettiamo?

Un’estensione di Firefox ci viene in aiuto: Firebug.

Scarichiamo l’estensione, clicchiamo sull’iconcina in alto a destra entriamo nella scheda Net e attiviamo il pannello: perfetto. Ora all’invio del form che vogliamo ispezionare nella finestra di Firebug compariranno parametri ed eventuali risposte.

Ovviamente Firebug fa questo e molto altro come: la visualizzazione dei cookie della pagina, la console javascript con i messaggi di errore, la modificazione live del contenuto della pagina, ecc…

Ecco li link diretto alla pagina ufficiale da cui scaricare l’add-on: Firebug

facebooktwittergoogle_pluspinterestlinkedinmail

Steve Jobs sulla programmazione…

Quote

Cominciamo con Steve Jobs questo viaggio nelle frasi più o meno illuminanti sul mondo della programmazione. Il fondatore della Apple, lo sappiamo bene, non era un programmatore, eppure sapeva benissimo di cosa si trattava!

steve-jobs

Everybody in this country should learn to program a computer…because it teaches you how to think.
Steve Jobs

Tutti dovrebbero imparare a programmare un computer…perché farlo ti insegna a pensare.
Steve Jobs

Come ben sappiamo noi programmatori, programmare vuol dire spremersi le meningi per risolvere problemi e trovare soluzioni. L’esercizio costante di questa arte allena le capacità logiche e il pensiero strutturato. Infatti è sempre possibile risolvere i problemi più complessi in una moltitudine di modi, dalla migliore soluzione possibile: semplice, efficiente ed elegante a quella ingarbugliata e inefficiente…

Insomma, programmare può aiutarci nella vita di tutti i giorni. Programmate gente, programmate…

facebooktwittergoogle_pluspinterestlinkedinmail

Design delle interfacce (di un sito internet)

Rendere tutti gli elementi attivi subito riconoscibili.
640x440x1_iOS_7_UI_Kit_Preview1Assegnare a tutti i link un colore che stacchi molto dagli altri colori usati nel sito, possibilmente un colore che verrà usato solo per i link in tutto il sito. Un esempio concreto possiamo vederlo con le ultime versioni di iOS (la 7 nell’immagine al lato) dove il testo cliccabile è di un colore blu neon molto appariscente.

Dare informazioni sull’utilizzo dell’interfaccia (icone, testo, colori).
popoverSe abbiamo un’icona mettiamoci del testo sotto che ne indica la funzione oppure facciamo comparire un popover al passaggio del mouse.

 

 


Dare un feedback visivo al passaggio su un elemento dell’interfaccia.

Il design dei pulsanti e dei link è molto importante. I rollover aiutanol’utente a capire che si sta passando su un elemento attivo. Questa tecnica è tanto più importante quando non ci sono aiuti testuali o colori che rendono l’elemento subito riconoscibile. Continue reading

facebooktwittergoogle_pluspinterestlinkedinmail

Codice Javascript per recuperare il valore di un parametro nell’url

Piccolo snippet di codice Javascript facile facile per leggere un parametro nell’url:

In PHP esiste il $_GET[‘parametro’], in javascript bisogna “spacchettarsi” da soli l’url per estrapolare il parametro che vogliamo andare a leggere…fatto!

facebooktwittergoogle_pluspinterestlinkedinmail

Programmazione e design di un sito internet: i software di cui ho bisogno

Qui parliamo di software (free, gratuiti) e non di competenze (che pure servono). Un piccolo elenco, ovviamente non esaustivo di programmi che spaziano dall’editor di testo al programma di grafica e ai sempre utili archivi di font gratuiti.

Per scrivere una pagina HTML?

Allora, le pagine di un sito internet sono fatte di testo e quindi un buon editor per la programmazione è indispensabile. Ok state pensano a Word? Sbagliato!

Notepad++ è uno degli strumenti più conosciuti dai web designer e web programmer di tutto il mondo. Riconosce la sintassi del linguaggio in cui state scrivendo (HTML, CSS e PHP…ma anche moltissimi altri), ha un potente strumento di ricerca sia nella pagina sia in pagine multiple in un percorso indicato, l’indentazione del codice (e la de-indentazione) e un sacco di altre belle cose attraverso i plugin…un must!

Per eseguire pagine dinamiche con connessione a database?

XAMPP ha tutto quello che serve (PHP, Apache e MySQL) lo installate, mettete le vostre pagine in una sottocartella di xampp/htdocs e create il vostro database usando PHPmyadmin che è incluso nel pacchetto. Continue reading

facebooktwittergoogle_pluspinterestlinkedinmail

CMS: Perch…wow!

Cercavo delle risorse sul sito CSS Tricks e m’è caduto l’occhio su un bannerino, questo:
264567-1427967048

Beh, ho cliccato sul magico quadrato e poi sul video dimostrativo nell’homepage del sito: stupendo! Perch è un CMS, semplice, intuitivo, leggero e…rivoluzionario. Prendi il tuo template html, definisci le aree che vuoi rendere editabili scrivendo per esempio

e se hai già configurato il CMS con le informazioni di accesso al database, andando al pannello admin ti ritroverai con il campo che hai appena creato nella pagina!

Pazzesco! Ha solo un difetto, è un prodotto a pagamento! Nonostante questo neo, penso che prima o poi un’occhiata gli darò.

Ecco il link alla home, buona visione: Perch

UPDATE
Curioso di scoprire se ci fossero alternative OPEN SOURCE a Perch ho scoperto Couch che fa più o meno le stesse cose!
Ecco il link al progetto: Couch CMS

facebooktwittergoogle_pluspinterestlinkedinmail

Mail marketing: le newsletter

Con che frequenza e su quali regole devo basarmi per l’invio di una newsletter?

  • La frequenza puo’ essere organicamente determinata dalla quantità e dalla qualità delle informazioni che abbiamo per i nostri utenti. Se abbiamo molte informazioni di qualità da dare allora possiamo spingere un po’ sul’acceleratore senza preoccuparci troppo del pericolo di essere cestinati.
  • Diamo all’utente la possibilità di scegliere la frequenza.
  • Raggruppiamo le informazioni in un’unica mail piuttosto che moltiplicare gli invii.
  • All’inizio della settimana (lunedì o martedì) le persone sono più ben disposte a leggere le news.
  • L’oggetto della newsletter deve essere interessante: incuriosire l’utente.
  • Il contenuto deve essere interessante.
  • Non ripetersi, non inviare newsletter con contenuti sempre uguali…la novità attira e interessa.
facebooktwittergoogle_pluspinterestlinkedinmail

Web Design: i siti one page? Efficaci!

Interessante articolo di design della pagina sull’utilizzo dello scrolling verticale nei siti come strumento utile al coinvolgimento del visitatore. I siti one page contro quelli multipage? Ricerche in questo campo dimostrano che l’utente di fronte a un contenuto interessante che procede bene nel “raccontare una storia” è spinto ad andare avanti e quindi a passare più tempo sul sito. Passare più tempo sul sito equivale a far aumentare la probabilità che l’utente risponda positivamente alle “call to action” e cioè agli inviti ad agire (comprare un prodotto o un servizio per esempio). E infine fa anche una considerazione di carattere “antropologico”….e cioè che l’essere umano è sempre affamato di storie interessanti da leggere!

Ecco a voi il link e come sempre…buona lettura!

Tutto quello che c’è da sapere sul trend dei siti da scrollare

facebooktwittergoogle_pluspinterestlinkedinmail

Product Thinking: Design dell’interfaccia in relazione al prodotto

Il design di una pagina web è strettamente correlato con il prodotto di cui è il contenitore. Qui di seguito riportiamo la traduzione delle conclusioni di un articolo che parla di “Product Thinking“, ovvero partire dal prodotto per arrivare a un desin efficace:

“Ragionare partendo dai prodotti fa in modo che il designer produca le giuste funzionalità per il target giusto risolovendo i problemi reali che hanno le persone. Aiuta a fare le giuste decisioni ed è alla base della costruzione di prodotti di successo che le persone desiderano. Pensare partendo dal prodotto stabilisce una fruttuosa relazione tra la Gestione del Prodotto e il Design delle interfacce e quindi porta naturalmente a prodotti più solidi. Questo è il motivo per cui Pensare partendo dal prodotto sta divento il prossimo passo evolutivo nella progettazione delle interfacce.”

Qui di seguito l’articolo completo che parla anche di due esempi concreti: la vendita di un prodotto come il milkshake e il contatore che mostra all’utente di Uber quando esattamente arriverà il taxi.

Buona lettura: Why Product Thinking is the next big thing in UX Design

facebooktwittergoogle_pluspinterestlinkedinmail