Responsive Design, l’anno del boom

Il sorpasso dei dispositivi mobile sui PC

Responsive design. Nel 2012, per la prima volta dal 2001, a livello mondiale, le vendite di desktop sono state inferiori a quelle dell’anno precedente. Questo nonostante la tecnologia riesca bene o male, a cavalcare la crisi. La spiegazione è semplice: la vendita di Tablet ha raggiunto i 100 milioni di unita’ e gli smartphone stanno, a poco a poco, sostituendo i classici cellulari.

Può sembrare un fatto banale o scontato ma, per tutti quelli che, come noi, costruiscono siti web e servizi, questo fatto porta a considerazioni ben precise e cioè’ che cambia e si diversifica il modo di navigare sul web. Ai ‘classici’ personal computer (navigare da seduto) si affiancano altri modi di navigare: sugli smartphone (navigare in piedi) e tablet (navigare sdraiato). Ormai non si può’ più’ non tener conto di questo fatto quando si progetta un sito web.

mini iPadE’ sgradevole e poco professionale vedere una pagina web che non si adatta allo strumento su cui viene visualizzata. Gli stessi clienti sono ormai sensibili al problema e chiedono informazioni sull’adattabilità’ del loro futuro sito web rispetto ai dispositivi di nuova generazione.

Responsive design per i nuovi siti web

La soluzione al problema è quella di progettare siti web che rispondono, reagiscono in base alla dimensione del dispositivo in uso: il responsive design. La cosa è già nota da tempo, molti siti negli ultimi anni, sono stati creati con un occhio al responsive design, questo per ciò’ che riguarda la risoluzione grafica dei PC.

Data la grande diffusione di Tablet e Smartphone, il 2013 è l’anno del responsive design che offre, agli editori, la possibilità di diffondere le loro pubblicazioni su ogni tipo di schermo e, per gli utenti, la certezza della qualità sempre e dovunque, a prescindere dal dispositivo usato.

Sia che usiate Html e Css, sia che usiate un cms per i vostri siti, tenete conto di questo considerazioni se state per disegnare un nuovo sito web.

Temi WordPress per la scuola

Temi WordPress: Pasw2013

Una novita’ nel settore dei temi wordpress per la scuola. In questi giorni è stato rilasciato il tema WordPress  Pasw2013 per la costruzione di siti scolastici, è ancora una beta ma il team WordPress  assicura la versione definitiva di questo nuovo tema wordpress per i primi giorni di Settembre, giusto in tempo per l’inizio delle lezioni !! (altro…)

Come creare un tema WordPress

Per creare un tema wordpress esistono fondamentalmente tre strade: La prima, la più complicata è quella di scrivere tutto il codice partendo da zero. Inutile dire che occorrono delle conoscenze specifiche sui linguaggi come php e css e sulla costruzione delle pagine web.

In questo articolo parleremo delle altre due possibilità che sono quelle di creare un tema figlio, in inglese un child theme che eredita le funzionalità da un tema già esistente oppure utilizzare un applicativo specifico, il così detto drag and drop themes builder.

Scrivere il codice: child theme

Il child theme come detto viene realizzato partendo da un tema già esistente. Normalmente si sceglie questa opzione quando si vuole apportare qualche modifica al tema in uso. Il classico esempio è la personalizzazione del footer o note a piè di pagina che ogni sito possiede.

In wordpress si sceglie questa soluzione a causa dei continui aggiornamenti che le case sviluppatrici apportano ai loro temi. Infatti se entro a modificare direttamente il codice php modificando il contenuto che mi interessa, questo verrà sovrascritto la prima volta che gli sviluppatori rilasceranno una nuova versione del tema wordpress in uso.

Come creare un tema wordpress child

Create una directory sul vostro sito per il tema child. In wordpress la directory dei temi sta nella cartella wp-content/themes. Create una nuova cartella, ad esempio wp-content/themes/miotemachild. Ora create un file denominato style.css e apportate le modifiche desiderate.

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/
Description: Tema Child per il tema Twenty Thirteen
Author: Qui il vostro nome
Author URI: http://example.com/about/
Template: twentythirteen
Version: 0.1.0
*/

Potete cambiare quello che volete ma i campi theme name e template sono obbligatori. In questo esempio l’intestazione di un child theme che eredita dal tema (padre) twentythirteen. Il foglio di stile child sovrascriverà quello del genitore. E’ probabile che vogliate includere il foglio di stile del genitore (l’alternativa è di riscrivere l’intero codice). Per fare questo modificate il file functions.php e inserite la funzione wp_enqueue_style()

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

ATTENZIONE. Fate queste operazioni solo se siete utenti esperti di wordpress e comunque, ricordatevi sempre di fare un backup del sito wordpress. Infine per attivare il tema, andate su Bacheca / Aspetto / Temi e attivate il vostro nuovo tema.

Utilizzare uno drag and drop themes builder

Se invece non conosci il codice php e css ma vuoi creare un sito internet di qualità con wordpress, ecco una serie di prodotti che potreste trovare utili.

Divi

Per me il migliore in circolazione con decine e decine di moduli con centinaia di opzioni per qualsiasi esigenza. Completamente responsive e personabilizzabile e con decine di layout già pronti all’uso. E’ a pagamento ed è un prodotto di elegant themes. Qui trovi la demo.

Caratteristiche

  • 20+ pagine di template,
  • integrazione con WooCommerce,
  • editing front-end live,
  • Ottimizzato SEO,
  • widgets e shortcodes,
  • responsive design.

divi

Elementor

Un altro ottimo drag and drop themes builder che con un’interfaccia semplice e intuitiva ti permette con il metodo del drag and drop di creare temi e siti completi e splendidi layout. Questa è la pagina della demo.

Caratteristiche

  • non è richiesta la conoscenza del codice,
  • compatibile con qualsiasi tema WordPress,
  • importa progetti da altri temi,
  • opzione drag-and-drop,
  • personalizzazione widgets terze parti,
  • mobile friendly,,
  • gestione palette di colori.

elementor

Per completezza di informazione vi indico altri prodotti con il relativo link

 

WordPress 3.4

WordPress il CMS più popolare al mondo

Siete pronti a rendere il vostro blog migliore, più veloce e attraente? Gli sviluppatori di WordPress sono pronti a offrirvi questo e molto altro attraverso l’ultima versione di WordPress. Con la versione 3.4, un aggiornamento che molti utenti aspettavano da tempo, sono state sviluppate diverse novità per il CMS più popolare del mondo. (altro…)

Come installare wordpress online

Una guida per installare Wordpress su hosting

Attualmente quasi ogni provider fornisce procedure automatiche su come installare wordpress. Questo articolo si rivolge a chi vuole fare da se per avere un controllo totale nella realizzazione del proprio sito web. Fino a qualche anno fa però, era questo l’unico modo per installare wordpress e quindi la procedura non è complicata però deve essere eseguita seguendo le istruzioni passo per passo.

Naturalmente  prima di cominciare, assicurati di avere ricevuto dal tuo provider, le credenziali per l’accesso al pannello di controllo.  Inoltre verifica di avere uno spazio web che utilizzi  Linux, Apache, MySql, Php. Questa guida è stata realizzata per questo tipo di utenza, poiché è di gran lunga, la più numerosa se si parla di installazioni wordpress nel mondo.

Il pannello di controllo

Per installare correttamente wordpress, bisogna lavorare con il pannello di controllo fornito dal provider. I pannelli di controllo più diffusi sono Cpanel e Plesk ma, qualunque sia il pannello di controllo messo a disposizione, la procedura da seguire è simile.

La prima cosa da fare è quella di creare il database del nostro sito web. Se non abbiamo pratica con il pannello, cerchiamo un’icona che ci indichi ‘database’ o ‘creazione database’. A questo punto seguiamo le istruzioni assegnando i nomi appropriati. Prestate particolare attenzione ai seguenti parametri:

  • nome del database
  • username del database
  • password del database

Assegnate nomi che non siano facilmente individuabili, non usate termini che che ricordino il dominio del sito web per non rendere il gioco troppo facile agli hacker. Segnateveli e andiamo avanti.

Adesso scarichiamo e scompattiamo in locale sul nostro PC, l’ultima versione in italiano di wordpress che, al momento in cui scrivo, è la versione wordpress 4.5.2  (N.B La presente guida è sempre valida a prescindere dalla versione di wordpress poiché’ il procedimento è sempre lo stesso)

Modifica del file config.php

Una volta scompattato il file in una cartella del vostro hard disk dovreste trovare, nella directory principale, un file chiamato wp-config-sample.php. Facciamone subito una copia e rinominiamo il nuovo file chiamandolo wp-config.php. Attenzione a salvarlo con l’estensione giusta (.php). Per installare wordpress correttamente, abbiamo bisogno di questo file che, come è intuibile dal nome, e’ il file che serve a configurare wordpress. Entriamo in editor su wp-congig.php e cerchiamo le seguenti righe

/** Il nome del database di WordPress */

define(‘DB_NAME’, ‘database_name_here’);

/** Nome utente del database MySQL */

define(‘DB_USER’, ‘username_here’);

/** Password del database MySQL */

define(‘DB_PASSWORD’, ‘password_here’);

Sostituiamo i parametri di prova con quelli che abbiamo assegnato in fase di creazione del database. ATTENZIONE sostituire tutto quello che è contenuto tra apici. Facciamo un esempio. Se abbiamo chiamato il nostro database  miodb la riga di define del DB_NAME diventera’

define(‘DB_NAME’, ‘miodb’);

Ripetere l’operazione per username e password del database e salvate il file wp-congig.php. Attenzione a non cambiare altro.

Come installare wordpress : copiare online i files

Adesso occorre copiare i files di wordpress con le modifiche apportate, sul nostro spazio web online.  Per fare questo, ci occorre un software, un client FTP. Personalmente io utilizzo e consiglio Filezilla, un ottimo software gratuito, ma ce ne sono anche molti altri.

Il provider che vi ha affittato lo spazio web, dovrebbe avervi fornito le credenziali per l’accesso FTP, se non lo ha fatto, richiedetele. Installate Filezilla e configuratelo. Definite un’accesso FTP al vostro sito. Una volta entrati nel nostro spazio web, dovreste vedere lo schermo diviso in due parti: sulla sinistra vi è la rappresentazione delle directory del disco fisso, sulla destra il contenuto, anche questo suddiviso in directory, del spazio web.

Copiamo una alla volta, dal nostro disco fisso allo spazio web, le seguenti directory,

\wp-admin

\wp-content

\wp-includes

con tutto il loro contenuto. La directory di destinazione del nostro spazio web e’ /httpdocs

Giunti a questo punto, non ci resta che copiare tutti i file della cartella che abbiamo scompattato nel nostro disco fisso compreso il wp-config.sys da noi creato, sempre sotto la cartella /httpdocs del nostro spazio web. Un’ultima cosa. Cancellate o rinominate, se presente nel vostro spazio web, il file index.html. WordPress utilizza index.php e se li trova entrambi fa confusione.

Abbiamo quasi finito. Digitiamo, nel nostro browser, l’indirizzo del nostro sito, ad esempio http://www.miosito.it e, se tutto è filato liscio, completiamo la fase di installazione di wordpress, seguendo le istruzioni. Se, alla fine del processo, compare la home page del vostro sito, siamo riusciti ad installare wordpress su hosting in maniera corretta. Se questo non dovesse accadere, vi consiglio di rivedere i precedenti punti con calma. Se avete qualche difficoltà, oppure se qualcosa non vi è chiaro, postate e sarò felice di rispondervi. Buon lavoro e spero di esservi stato utile.