Oscurare il form oppure renderlo opaco, disabilitare gli elementi oppure nascondere il modulo inviato. Queste operazioni sono prassi per chi sviluppa siti web. Come tutte le operazioni ripetitive, c’è chi ha inventato il modo per risparmiare tempo.

Con Ladda possiamo creare bottoni che, una volta premuti, mostrano al loro interno un indicatore di caricamento. Sul sito ufficiale del progetto, troviamo una breve ma efficace descrizione:

A set of buttons which merge loading indicators into themselves to bridge the gap between action and feedback

A scatenare la visualizzazione dell’icona di loading all’interno del bottone ci pensa una semplice direttiva javascript:

Ladda.bind( 'input[type=submit]', { timeout: 2000 } );

che rende di tipo “Ladda” i bottoni submit con un timeout di scomparsa di 2000 millisecondi. Inoltre viene fornita una semplice API, documentata nel sito del progetto, per gestire manualmente il comportamento del bottone.

La compatibilità è garantita sui browser moderni come Chrome, Safari, Firefox e IE 9+.

L'articolo Ladda: bottoni con indicatori di caricamento sembra essere il primo su Dynamick.

Summer of Design si basa sul libro “Design for hackers” anche se non è necessario possederlo per seguirlo. Come afferma l’autore, David Kadavy, questa è un’occasione unica e non sarà mai più riproposto (almeno in forma gratuita).

Summer of Design non vuole fare l’elenco dei “10 migliori trucchi”, non pretende di migliorare le conversioni del 300% semplicemente cambiando il colore di un pulsante o suggerire le ultime tendenze del design. Summer of Design in realtà vi insegnerà le teorie alla base del design, in modo da poter veramente capire come funziona. Si potrà così osservare il design attraverso nuovi occhi, imparando a guardarlo con uno spirito nuovo.

Il corso durerà 12 settimane e si riceverà una lezione a settimana direttamente nella nostra casella email. Questa la scaletta delle lezioni:

GIUGNO

• 4 – Why Design Matters
• 11 – The Purpose of Design
• 18 – Understanding Typography
• 25 – Technology & Culture

LUGLIO

• 2 – Proportion
• 9 – Composition & Design Principles
• 16 – Visual Hierarchy
• 23 – Color Science
• 30 – Color Theory

AGOSTO

• 6 – Choosing & Pairing Fonts
• 13 – Typographic Etiquette
• 20 – Closing Remarks

Vista l’unicità dell’iniziativa vi suggerisco di non perdere questa occasione per imparare a capire il design.

L'articolo Summer of Design: corso gratuito di design via email sembra essere il primo su Dynamick.

Il core di Magnific Popup è leggerissimo, pesa solo 3KB, a cui si possono aggiungere i vari moduli per poterne estendere le funzionalità. Un comodo strumento online permette di creare il proprio pacchetto personalizzato a cui si possono aggiungere i seguenti moduli:

• inline, per poter generare un popup da un elemento della pagina
• image, per mostrare immagini
• ajax, per caricare il contenuto via ajax
• iFrame, per includere un iframe nel corpo del popup
• Gallery, per creare una gallery
• Hight-DPI, per supportare immagini su display di tipo retina
• Fast tap, per supportare il touch nello scorrimento delle foto

Oltre ad essere modulare è anche molto veloce e prestante perché il codice è stato scritto prestando attenzione al consumo di memoria complessivo (riuso degli elementi esistenti nel DOM).

Anche l’aspetto grafico è stato abbastanza curato, fornendo anche due tipi di animazioni che lo rendono più piacevole alla vista; si può quindi scegliere tra il fade-zoom e il fade-slide. Le animazioni sono ottenute tramite CSS3 e non via javascript, garantendo un’ottima fluidità e un minore consumo di risorse.

Ultima, ma non meno importante, è la caratteristica di essere responsive, con il ridimensionamento del popup demandato al foglio di stile e non a funzioni javascript.

La documentazione è esaustiva e permette l’installazione e la configurazione di Magnific Popup in pochi minuti.

L'articolo Magnific Popup, per lightbox responsive e performanti sembra essere il primo su Dynamick.

E’ stato sviluppato sulla base del codice di KIA Options Framework, che a sua volta è un progetto forkato dall’originale Options Framework di Devin Price. Alcune idee e miglioramenti grafici sono stati ispirati da Options Tree, progetto sponsorizzato da ThemeForest stesso. Ho provato questi pannelli, che devo dire di ottima qualità, ma SMOF, essendo il mix di tutti questi, li supera.

L’idea è di fornire agli sviluppatori di temi per WordPress un aiuto alla costruzione del pannello di amministrazione del tema, dando così più tempo da utilizzare effettivamente per la costruzione del tema.
SMOF viene fornito con un pacchetto ricco di opzioni che dovrebbero soddisfare la maggior parte delle esigenze di personalizzazione dei più moderni temi WordPress.

La caratteristica principale di SMOF è la sua interfaccia intuitiva e user-friendly, utilizzando i widget e le caratteristiche native di WordPress. La documentazione, benchè non prolissa, è buona e facilmente comprensibile. Anche il Wiki su Github aiuta con un facile tutorial per la prima installazione.

Tra le caratteristiche che è utile ricordare, SMOF implementa:

• Uploader nativo per il caricamento di media
• Slider Drag and Drop
• Layout Manager
• Gestione di background ripetitivi
• Backup e ripristino delle opzioni

Il mio prossimo tema, che sto già sviluppando, include SMOF e credo di non abbandonarlo mai più.

L'articolo SMOF, il più bel pannello opzioni per WordPress sembra essere il primo su Dynamick.

Tra i progetti più interessanti che ho visto in questi giorni, X-editable è degna di nota. E’ un plugin jQuery che si integra con Bootstrap e permette di creare elementi sulla pagina web modificabili in-place, ovvero direttamente dalla pagina stessa. Basta un click sull’elemento che questo diventa un popup o un campo di testo, pronto per essere modificato.

Il salvataggio avviene server-side, tramite una richiesta AJAX via post. L’installazione è davvero molto semplice e X-editable si applica facilmente ad ogni elemento della pagina. Basta indicare al javascript il markup che dovrebbe essere modificabile, di solito un elemento <A> e specificare gli ulteriori parametri attraverso gli attributi data-*.

La caratteristica che rende X-editable davvero molto potente, è la versatilità dei tipi di campo che riesce a gestire: dalle date ai checkbox, dai dropdown ai pannelli WYSIWYG.

Fatevi un giro sulla demo per verificare tutte le caratteristiche di questo ottimo plugin che potrebbe diventare indispensabile in particolari progetti web.

L'articolo X-Editable e Bootstrap: per modificare una pagina web in-place sembra essere il primo su Dynamick.

Probably the majority of buyers of my theme doesn’t know the principles of web development, nor even how Twitter Bootstrap works. So I don’t want disturb them with a lot of shortcodes just only for follow Bootstrap paradigm. In particular, the Bootstrap concept of “row” and “span” have to be translated into two shortcode.

I want to process them into a only one shortcode, called “cols”. The user should be more familiar with the concept of columns and so I’ll make his life easier.

The shortcode

Let’s go deeper into code. The default Bootstrap scaffolding use 12 columns. The problem is to insert a row every 12 columns. The solution adopt a global variable $cols to count the number of current columns. Before the first column a row-fluid column markup is opened and after the twelfth the markup is closed.

Here is the final shortcode function:

/**
* Create all the markup needed to manage rows and span and
* create columns in the document layout.
*
* @since Soave 1.0
*
* @param array $attrs Default n=1.
* @return string Columned layout.
*/

function soave_cols( $atts, $content = null) {
  global $cols;
  $open_row = "";
  $close_row = "";

  // Extract parameter and normalize it
  extract( shortcode_atts( array(
    'n' => '1'
    ), $atts ) );
  $n = intval($n);

  // if it is the first, open the row
  if ($cols == 0) {
    $open_row = '<div class="row-fluid">';
  }

  $cols += $n;

  // if cols >= 12 the row have to be closed
  if ($cols >= 12) {
    $close_row = '</div>';
    $cols = 0;
  }

  // produce the html
  $out .= $open_row . '<div class="span' . $n . '">';
  $out .= do_shortcode($content);
  $out .= '</div>' . $close_row;

  return $out;
}

…where $cols is the global variable.

This solution should remove all the strange shortcodes that are found in various themes around the net, such as [one_third], [two_third] or [column_last] and so on. However this automatic columns calculation require precision and so the user must be looking forward to create rows with only 12 columns.

Examples

Some wrong example:

[cols n=4]Lorem Ipsum[/cols]
[cols n=9]Lorem Ipsum[/cols]

The sum is 13 and the layout break. The right example is:

[cols n=4]Lorem Ipsum[/cols]
[cols n=8]Lorem Ipsum[/cols]

The sum is 12 and the layout is consistent.

L'articolo A WordPress shortcode for smartly manage Bootstrap scaffolding sembra essere il primo su Dynamick.

reveal.js fornisce una vasta gamma di funzioni, tra cui slides nidificate, codifica markdown, esportazione PDF, note del relatore e un’API JavaScript. E’ preferibile utilizzare browser moderni con il supporto per le trasformazioni CSS 3D ma comunque il framework è robusto e implementa una serie di fallback per assicurare che la presentazione possa in ogni caso essere vista bene.

Le slides sono scritte utilizzando HTML o Markdown ma c’è anche un editor online per quelli di voi che preferiscono un’interfaccia utente più tradizionale. Provatela liberamente su www.rvl.io.

Reveal.js mette a disposizione diversi temi e modalità di transizione da una slides all’altra, tutte molto carine e con effetti 3D davvero sorprendenti.

Cominciare a creare una presentazione è facile. Includiamo la libreria javascript e il foglio di stile di Reveal e poi cominciamo la codifica HTML. Questo è un semplice esempio:

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

dove section rappresenta una singola slides e può essere ripetuta illimitatamente. Per creare slides verticali, basta annidare una section all’interno di un’altra. Per maggiori informazioni comunque consultate il sito ufficiale del progetto su github.

Per gli amanti dell’HTML eccovi quindi un valido sostituto di PowerPoint, ecologico e liberamente accessibile.

L'articolo Reveal, un framework html per creare presentazioni online sembra essere il primo su Dynamick.

Una delle difficoltà maggiori quando si rimane senza scrivere per molto tempo è proprio quella di ritrovare i binari per poter produrre testi con frequenza. Cosa serve ritrovare?

• La scrittura che, come ogni disciplina, richiede pratica e allenamento;
• Il lavoro del blogger richiede inoltre un continuo aggiornamento per rimanere con la testa nel presente, bisogna infatti lavorare molto sulle proprie fonti e sulle proprie tecniche;  affinare il proprio metodo per rimanere al passo con le novità, specialmente  qui su Dynamick, dove trattiamo argomenti di innovazione e tecnologia con una certa verticalità.

Con questo post voglio rompere il ghiaccio mostrandovi come ho impostato la mia riorganizzazione dopo questo lungo periodo di inattività:

RSS e Articoli

Uno dei primi sintomi di una sospensione dall’attività di blogger è l’accumulo di tantissimi articoli nel mio feed reader o nei miei account Pocket e Instapaper. Il problema di questi strumenti è che posticipano il lavoro con un criterio Last In First Out, rendendo poi molto difficile organizzare una ripresa veloce. La difficoltà è districarsi tra notizie ormai vecchie e quelle che invece possono ancora fornire spunti di lavoro interessanti. Una buona abitudine è prevenire questo comportamento, organizzando i servizi sopracitati. Come? Distinguendo gli articoli informativi da quelli che riportano solo del materiale; creandosi un database per le nostre risorse ad esempio con Evernote, lo strumento ideale per questo lavoro.

La soluzione che ho trovato a questo problema è molto drastica ma sicuramente efficace.

• Selezionare pochi argomenti molto precisi da cui si vuole ripartire a lavorare e definite delle keyword: per me sono Blogging, iOS ( e derivati Jailbreak, iPhone…), OS X
• Riorganizzare anzitutto il proprio feed reader, in quanto strumento di inbox per eccellenza
  • Cancellare le fonti troppo vecchie
  • Cancellare le fonti troppo prolifiche e utilizzare strumenti di filtro come ad esempio Yahoo Pipes per ridurre la mole di articoli che ogni giorno aggravano la nostra situazione si lavoro arretrato
  • Selezionare tra gli articoli non letti quelli esplicitamente legati a materiale utile per i nostri post e ripulire definitivamente il Feed Reader
• Per gestire la propria lista di articoli su Pocket o Instapaper dovrete utilizzare soprattuto ordine. Iniziate scremando gli articoli in lista attraverso ricerce mirate attraverso le keyword degli argomenti selezioni inizialmente. In questo modo potrete recuperare subito del materiale da cui ricominciare a lavorare.
• Scrivete uno o due articoli con quel materiale per ricominciare a lavorare, evitate di posticipare questo passaggio perché finchè non vi rimetterete al lavoro tutto la riorganizzazione vi sembrerà intuile e finirete per abbandonare l’idea e perdere altro tempo senza rimettervi in moto.

Talvolta rincorrere idee passate è proprio la causa del nostro attuale blocco lavorativo;

Per quanto mi riguarda iniziare a eliminare il lavoro arretrato, decidendo cosa non trattare, riduce l’indecisione che spesso mi coglie vedendo tanto materiale accumulato in disordine.

Infine, l’imminente sospensione di Google Reader potrebbe essere un sistema per ripulire la propria selezione RSS mentre si cerca un’alternativa valida al servizio.

Ordine mentale e pulizia degli strumenti

La riorganizzazione dei propri strumenti di lavoro non può che ricominciare con un Reset delle impostazioni. Da poco ho riaggiornato iPhone, iPad e effettuato un Jailbreak nuovo e pulito. Per quanto riguarda il Mac ho fatto la stessa cosa, liberando spazio su disco e eliminando molte applicazioni scaricare per effettuare ad esempio test e recensioni. Ripartire da zero, con una todo list serrata e senza possibilità di divagare è un modo semplice per rimettersi al lavoro.

Sono ripartitto poi da alcune applicazioni chiave che ho ormai approvato nel corso del tempo:

Mac:

• Evernote: da ormai un anno il mio tool di organizzazione principale, il mio database e anche diario digitale per spunti, bozze e raccoglitore di idee. Amo ancora la carta ma avare tutto in digitale è fondamentale
• Reeder: la mia porta verso il web, ancora preferisco iniziare le mie ricerche dal feed reader e non dalla rede nuda con un motore di ricerca.
• Safari : che da poco ha sostituito Google Chrome nella mia navigazione quotidiana, vi spiegherò la mia scelta prossimamente.
• Marsedit: il tool per eccellenza per chi blogga su OSX, ripulisco le bozze che conservo in Evernote e ricomincio a lavorare da zero.
• Pocket: client desktop per il servizio online, altro strumento per proteggersi dal web sconfinato dei browser e concentrare il lavoro.

iPhone & iPad

Oltre all’aggiornamento ho ripulito il sistema da moltissime applicazioni accumulate nel tempo e mai entrate nella quotidianità dell’utilizzo. Ho disposto alcune app distraenti in una cartella in terza pagina così da disincentivarne l’utilizzo ma mantenendole comunque nei dispositivi.

Un criterio per la scelta tra alcune applicazioni è stata la semplicità, ad esempio un ritorno al calendario tradizione può voler dire rinunciare a funzionalità avanzate in favore di un’immediatezza nell’organizzazione che in un momento di blocco lavorativo non può che essere un punto di forza. E’ inutile perdere 5 minuti per inserire un articolo in agenda con le giuste tag se poi non si ha l’intraprendenza per portarlo a compimento.

Eliminare la ridondanza tra le applicazioni è una soluzione intelligente, avere applicazioni equivalenti è fonte di indecisione. Purtroppo a me capita spesso perché provando sempre nuovi tool è frequente la presenza di applicazioni simili che confronto tra loro.

Anche introdurre qualche nuovo tool è importante, ad esempio ho scoperto da poco Read Quick che promette di aiutare a leggere più velocemente gli articoli presenti su Instapaper e Read it Later, il risultato è da subito apprezzabile ma rimando ad una recensione più approfondita in futuro.

Ho infine aggiunto alcuni nuovi strumenti alla mia schiera di applicazioni quotidiane:

• Flipboard: vecchio nuovo per quanto mi riguarda. Fedele utilizzatore di Zite per le news, ho da poco ricominciato ad usare quest’app che integra anche i punti salienti dei miei stream sui social.
• Tumblr: un diario personale con cui condividere qualche pensiero; l’ideale per chi cerca continuità nel proprio lavoro è raccontarsi online nei propri progressi e fallimenti.
• Google Drive: strumento di lavoro di gruppo che ho iniziato ad apprezzare ultimamente e che completa perfettamente Dropbox.

Conclusioni

Mettere le proprie scelte e i propri piani per iscritto è di per se un ottimo inizio per ricominciare a lavorare con ritmo. Questo articolo è un esempio di come si possano unire il lavoro e la necessità di riorganizzarsi.
Infine voglio sottolineare come sia importante dividere adeguatamente il tempo a nostra disposizione per lavorare al meglio. Prendersi gli spazi necessari per rilassarsi è fondamentale in qualsiasi lavoro ed è bene ricordarsi che è impossibile per chi fa il blogger pensare di poter star dietro all’intero mondo del web. Per questo è importante selezionare dei momenti dedicati all’aggiornamento ed al mantenimento delle proprie fonti e lasciare che la rete vada avanti anche senza di noi per qualche ora. Un viaggio sui mezzi pubblici, parte della pausa pranzo sono i momenti ideali per ritagliare lo spazio necessario a rimanere aggiornati senza impazzire per incastrare la fase di ricerca con quella di stesura. Ricordandosi che questo lavoro è soprattutto passione.

L'articolo Come rimettersi a scrivere dopo lunghi periodi di pausa sembra essere il primo su Dynamick.

In rete si è creato un ricco mercato di compravendita di template per email. La richiesta è tanta perchè gran parte delle applicazioni web ha bisogno di inviare email in formato html ai propri utenti.
Ad alimentare tale mercato influisce il fatto che sviluppare codice html per email è davvero un operazione delicata perchè si deve essere sicuri che possa essere ben visualizzata su tutti i client di posta del mondo che sono davvero tanti, talvolta anche abbastanza obsoleti. Per scendere nell’aspetto tecnico, è necessario utilizzare le tabelle <table> per creare layout complessi, è sconsigliato usare markup semantico come, <p> <strong> <h1> <h2>, meglio usare css inline, evitare shorthand sui css e molto altro ancora.

Ecco perchè si preferisce acquistarli già fatti.

Da qualche anno a questa parte il compito di chi sviluppa template per email si complica ulteriormente dal momento che, con la diffusione capillare dei dispositivi mobili, le email dovrebbero essere responsive ed adattarsi ai dispositivi su cui vengono visualizzate.

Antwort è un’ottimo template responsive per email ed è oltrettutto open source. Nel repository ufficiale su GitHub del progetto sono disponibili per essere scaricati due template.

• “_container.html” è un template semplice, formato da una sola colonna di testo ma comunque ben formattato.
• “3columns-to-rows.html” è un template basato sul precedente ma nella prima parte, impagina il testo su 3 colonne, che diventano 3 righe se visualizzata su display di piccole dimensioni.

A provare la bontà di Antwort ci sono gli screenshot dei test effettuati sui vari client di posta che dimostrano la robustezza di questo template.
Può essere un buon punto di partenza, da personalizzare secondo l’immagine coordinata del servizio web sui cui verrà utilizzato, ma vi assicuro che gran parte del lavoro è stato già fatto!

L'articolo Antwort: un template responsive open source per email HTML sembra essere il primo su Dynamick.

Con Compare Ninja, un comodo servizio online, sarà possibile creare rapidamente delle tabelle comparative quasi completamente personalizzabili senza scrivere una riga di codice e sfruttando tutta la potenza e flessibilità di CSS e Html5.

Come prima cosa bisognerà recarsi sulla homepage del servizio e registrare un account gratuito: all’interno del vostro profilo saranno salvate tutte le tabelle che creerete. Le tabelle salvate non solo saranno facilmente recuperabili, ma saranno anche gestibili direttamente dal vostro account. Ogni modifica fatta a una tabella dell’account comporterà l’aggiornamento della tabella pubblicata sul vostro sito, senza dover applicare cambiamenti al codice inserito precedentemente nella pagina!

L’editor WYSIWYG permette di scegliere tra i 24 template già pronti all’uso (solo i primi 10 sono gratuiti) e di organizzare facilmente gli elementi, inoltre, ciascuna cella è personalizzabile in maniera molto flessibile: oltre ai segni di spunta predefiniti si possono inserire immagini, link, pulsanti Paypal e stelline per il rating.

Purtroppo, per gli account gratuiti  la dimensione massima delle tabelle è limitata a 10 righe e 10 colonne, che comunque dovrebbero essere sufficienti per la maggior parte degli utenti.

Per chi dovesse aver bisogno di tabelle più ampie o di qualche opzione extra è possibile acquistare un account premium al costo di 3 dollari al mese il quale sblocca le seguenti funzionalità:

• Premium templates (sono quelli indicati con una stellina)
• Righe e colonne illimitate
• Importa file CSV
• Inserimento tooltip (permette di creare dei suggerimenti)
• Nessuna pubblicità
• Tabelle private

L'articolo Come creare tabelle online sembra essere il primo su Dynamick.