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.

E’ un mercato in fortissima crescita ed essendo libero e non ancora monopolizzato, è terra di conquista aperta a tutti noi, web designer.

Partiamo con ordine. Con tema intendo una veste grafica preconfezionata per siti web, pronta per essere personalizzata nei colori e nei contenuti prima di essere pubblicata. Utilizzare temi è una maniera semplice ed economica per pubblicare siti web in brevissimo tempo.

Il lavoro artigianale per la costruzione di un sito web, ora diventa industriale con l’avvento dei temi, perchè fatto una volta, può essere rivenduto innumerevoli volte. Il fattore scatenante di questa rivoluzione è stato sicuramente l’affermarsi di WordPress, una piattaforma di blogging che ha reso semplice l’installazione dei temi grafici, pur preservando i contenuti del sito.

La prima società ad intuire questa nuova possibilità di guadagno online è stata Envato, società australiana che, con il suo ThemeForest ha lanciato il business della compravendita di temi online. Themeforest conta nel suo market più di 3.000.000 di temi e oltre i 2.500.000 di utenti iscritti. Essendo anche io un autore esclusivo di Themeforest, vorrei prenderlo come esempio, per indicarvi la strada per cominciare a creare un redditto dalla vendita di temi online.

Come funziona Themeforest

Per essere autore di ThemeForest è necessario superare un test online, che certifica alcune vostre conoscenze di base. Il neo autore di temi poi deve decidere se affidare completamente la vendita dei propri lavori a Themeforest cioè diventare Autore Esclusivo. In questo caso si guadagna dalla vendita dei propri temi il 50% del loro valore. Nel caso si decidesse di venderli anche su altri market, la quota cala al 30%.

Un autore esclusivo di Themeforest è vincolato al market in tutto e per tutto e non può nemmeno regalare i suoi temi ai propri amici. L’unica concessione è data dall’utilizzo dei temi sui progetti di proprietà dell’autore stesso.

ThemeForest mette in vendita non solo temi per wordpress ma anche per siti statici, per Joomla, OpenCart e per tutti i più popolari framework di content management presenti sul web.

Consiglio quindi di provare a pubblicare temi scegliendo il framework di cui si ha maggior dimestichezza. Io ho già pubblicato un paio di temi per WordPress perchè lo conosco abbastanza bene.
Chi invece è più orientato al web design per il front end ed è meno competente di PHP, consiglio di cominciare col pubblicare temi HTML. In questo caso il guadagno è minore (il prezzo di temi HTML si aggira sui 15€ invece dei 45€ per temi WordPress), ma si ha maggiori chance di riuscire a pubblicarlo sul market.

Per poter pubblicare un tema su Themeforest si deve superare il vaglio del team di revisione di Envato che è abbastanza severo. Esistono due tipi di risposta che ci possono essere date: l’hard reject e il soft reject. Nel primo caso il tema è scartato definitivamente e non può più essere riproposto. Il tema probabilmente non è così moderno, non è piaciuto oppure è stata constatata qualche violazione delle norme imposte da Envato. Nel secondo caso, il tema ha bisogno di essere migliorato ma è ritenuto pubblicabile (se e solo se verrà modificato secondo le loro indicazioni). Per farvi un esempio, il mio tema Clinto ha subito 4 soft rejection prima della pubblicazione.

Quanto si può guadagnare vendendo temi?

Fatevi un giretto sui temi più popolari della settimana e fate i vostri conti. Prendiamo Avada, un tema per WordPress pubblicato il 12 Agosto 2012 che sta spopolando in questi mesi.

Ha quasi raggiunto le 15000 vendite, che corrisponde ad un incasso di 675000 dollari. Il guadagno per l’autore corrisponde a circa 350000 dollari, considerando i bonus che si ottengono con grosse vendite.

Vi ho stimolato l’appetito? Se volete cominciare questa avventura e avete bisogno di un supporto, sono a disposizione per qualsiasi vostra domanda.

L'articolo Come fare soldi online: vendere temi su Themeforest sembra essere il primo su Dynamick.

Requisiti

Andiamo con ordine ed elenchiamo i requisiti necessari per poter ottenere i primi risultati. Non vorrei illudervi inutilmente. Se possedete entrambi i seguenti requisiti allora avete le carte in regola per cominciare a generare guadagni.

1. Questi suggerimenti sono rivolti agli sviluppatori web e a coloro che hanno dimestichezza con le tecnologie web (SEO, SEM, web designer). 
2. Essere determinati nel raggiungere un obiettivo o, meglio ancora, un sogno. Chi ha dei sogni nel cassetto ha anche le capacità e le energie per poterli realizzare.

Reddito passivo

Cosa intendo per reddito passivo? Sono piccole entrate che con il tempo tendono a crescere e a sommarsi insieme. Uso il termine “passivo” perchè sono guadagni che non richiedono sforzi ulteriori oltre a quello iniziale. E’ come fare uno stampino per poter vendere così centinaia di oggetti tutti uguali.

Potrebbe essere necessario fornire assistenza ai clienti o aggiornamenti per il prodotto, ma la maggior parte del lavoro sarà svolto nella fase di produzione di ciò che si sta vendendo.

Cosa possono allora fare i web designer per generare reddito passivo? Di seguito illustro il primo di una serie di esempi e storie di successo da cui potete prendere ispirazione.

Corsi online

Molte persone desiderano entrare nel mondo del web design e potrebbero pagare profumatamente chi li può aiutare. Sono affamati di informazioni e desiderano conoscere i segreti per diventare bravi “web master” (parola d’altri tempi, ma in questo caso calza bene).

Sono mossi da ambizione personale, forse perchè è un mestiere “figo” o forse per esprimere la loro vena creativa. Ad ogni modo è certo che sono disposti a pagare per imparare e se sei un bravo web designer non farai fatica a stregarli con la tua “professionalità“.

I video corsi online sono un mezzo eccellente per insegnare il web design. Puoi pubblicarli sul tuo blog o meglio ancora pubblicarli su  Treehouse, Code School o Udemy.

Prendiamo come esempio Chris Converse, un designer/sviluppatore  che ha attualmente più di 3.500 iscritti al suo corso online su Udemy sulla creazione di un design reattivo web ($150 a iscritto). Ad oggi sono 3688 gli utenti che si sono iscritti al corso, generando un volume di vendita di più di 550 mila dollari. Non male, vero?

Questo vuole essere il primo di una serie di articoli che trattano il tema del guadagnare sul web. A breve seguiranno gli altri.

L'articolo Come fare soldi sul web: i corsi online sembra essere il primo su Dynamick.

Semplice e intuitivo, PaperKit dispone di 3 tipi di carta: carta quadrettata, a righe o con semplici punti. Una palette flottante ci consente poi di personalizzare gli altri aspetti del foglio:

• Formato della carta: A4, A3, Legal, Letter, Tabloid
• Unità di misura
• Spaziatura della quadrettatura
• Margini del foglio
• Spessore delle guide
• Colore del tratto

Concluso il lavoro di personalizzazione la nostra carta millimetrata sarà pronta per essere scaricata in formato PDF e successivamente stampata.

E’ sempre mia premura consigliarvi di non sprecare carta inutilmente, farete un favore al nostro pianeta.

L'articolo Fogli di carta millimetrata fai da te sembra essere il primo su Dynamick.