Come utilizzare Wix nella didattica, come portfolio dello studente e come sito aziendale. Lezione settembre - ottobre Classe III D e III E SIA

Guarda il video

Creare un sito web non è certo una cosa semplice: per creare un buon web-site, infatti, è necessario conoscere diversi linguaggi (HTML, CSS, Javascript, ecc.) e saper padroneggiare software per la grafica (come Photoshop) ed altri strumenti (client FTP, editor di codice, ecc.) non sempre alla portata di tutti.

Per chi vuole fare da solo (senza cioè rivolgersi ad un webmaster professionista o ad una web agency) la strada è davvero in salita: se non si hanno le giuste competenze tecniche ed una buona dimestichezza con gli strumenti informatici, creare da soli il proprio sito web può rivelarsi un'esperienza davvero frustrante e con esiti quasi sempre disastrosi.

Ovviamente la complessità del lavoro (ed il relativo risultato finale) è da mettere in relazione agli obiettivi che ci si pone: se crearsi da soli un sito aziendale è quasi sempre una pessima idea, mettere in piedi un piccolo web-site per esigenze personali è sicuramente fattibile a condizione di non avere aspettative esagerate (per un lavoro davvero perfetto è indispensabile avere dimestichezza coi codici) ed essere in possesso di una buona dose di pazienza e di perseveranza.

La strada più semplice per chi si è messo in testa di fare da solo è sicuramente quella di utilizzare uno dei cosiddetti website builder reperibili in Rete: si tratta, in pratica, di veri e propri software (utilizzabili on-line) attraverso i quali è possibile creare un sito web in modo visuale ed estremamente semplificato: non sarà necessario, cioè, scrivere nemmeno una riga di codice ma sarà sufficiente comporre i vari elementi seguendo semplici procedure guidate oppure attraverso semplici operazioni di drag and drop.

Tra le tante piattaforme di questo genere reperibili on-line, una delle più conosciute ed utilizzate è certamente quella di Wix, società israeliana che offre un servizio gratuito per la creazione siti web utilizzato in tutto il mondo.

In questo articolo vedremo quali sono le caratteristiche principali di Wix e come utilizzarlo per crearci da soli il nostro sito web personale.

Caratteristiche di Wix

Iniziamo col dire che la piattaforma Wix è tra le più collaudate ed affidabili al mondo: on-line sin dal 2006, Wix è oggi una solida realtà commerciale operativa in tutto il globo e quotata alla borsa di New York (NASDAQ). Forte dei sui 46 milioni di utenti e di uno staff di 450 dipendenti, Wix offre una soluzione chiavi in mano per la creazione di siti web, ricca di caratteristiche interessanti. Tra queste segnaliamo:

• possibilità di scegliere tra centinaia di template per ogni esigenza (suddivisi in 70 categorie tematiche) e pronti all'uso;
• possibilità di scegliere tra 50 stili cromatici (palette) pronti all'uso oppure di crearne di personalizzati;
• editor altamente intuitivo con funzionalità drag and drop grazie alla quale è possibile personalizzare l'aspetto del sito trascinando i vari elementi sullo schermo per poi posizionarli a proprio piacimento;
• possibilità di accedere ad una vasta raccolta di immagini gratuite da poter utilizzare nelle pagine del proprio sito web;
• editor grafico che consente di modificare, migliorare ed ottimizzare le immagini prima di metterle on-line;
• nessun limite sul numero di pagine che è possibile creare all'interno di ciascun sito;
• pagine web ottimizzate per i dispositivi mobili;
• possibilità di integrazione per i più noti social media (Facebook, Twitter, Google+, ecc.);

Oltre a queste caratteristiche è da segnalare che attraverso Wix è anche possibile creare dei blog oppure dei siti di commercio elettronico nonché utilizzare applicativi avanzati (come, ad esempio, sondaggi, strumenti di email marketing, ecc.) scegliendo tra le più di 140 apps presenti nel Wix App Market.

Primi passi con Wix

Per prima cosa rechiamoci sulla home-page italiana di Wix che potete raggiungere alla url:

http://it.wix.com

Clicchiamo sul bottone "Inizia Ora" per iniziare la nostra avventura che si concluderà con la nascita del nostro primo sito web!

Si aprirà il modulo di registrazione:

per iscriversi possiamo scegliere se utilizzare il nostro account Facebook o Google+ oppure procedere manualmente inserendo il nostro indirizzo email e la password che utilizzeremo nelle future sessioni di lavoro su Wix.

Alla pagina successiva ci verrà chiesto di scegliere la categoria tematica che più si adatta al sito web che stiamo per creare:

selezionando la categoria di nostro interesse, infatti, ci verranno mostrati i template più adatti a "vestire" il nostro nuovo sito web (nel mio caso ho scelto la categoria "Musica" e "DJ" come sotto-categoria).

Dopo aver cliccato sul bottone "Vai" ci verranno mostrati i template attinenti alla nostra scelta:

Scegliamo quello che ci piace di più (per ingrandire basta cliccare su "Vedi") dopodiché clicchiamo sul bottone "Modifica". Io ho scelto il template "DJ Latino". Dopo aver cliccato sul bottone si aprirà la finestra di editing, il vero "cuore pulsante" della piattaforma Wix.

L'editor HTML5 di Wix

Attraverso l'editor possiamo modificare ogni aspetto del template, modificare e/o aggiungere pagine, spostare elementi, cambiare immagini... insomma possiamo fare davvero di tutto per personalizzare e rendere unico il nostro sito web. Ma andiamo per gradi e vediamo come funziona l'editor partendo da una descrizione della sua struttura e degli strumenti più importanti che ci mette a disposizione.

Da un punto di vista strutturale l'editor di Wix si suddivide in tre aree principali:

• la barra superiore;
• la barra laterale;
• l'area di lavoro.

La barra superiore può essere suddivisa, idealmente, in due aree distinte: a sinistra troviamo (accanto al logo Wix) alcune funzionalità di navigazione:

cliccando sulle icone accanto al logo è possibile cambiare la visualizzazione del template da desktop a mobile e viceversa.

Utilizzando la tendina "Pagina" è possibile spostarsi tra le diverse pagine del sito (inizialmente le pagine corrispondono a quelle originariamente previste nel template ma, come vedremo in seguito, potremo cambiarle e/o aggiungerne di nuove).

Nella parte di destra della barra superiore, invece, troviamo una serie di pulsanti e dei link:

Vediamoli nel dettaglio:

• Pulsanti (da sinistra verso destra):
  • Annulla: consente di spostarsi all'indietro nello storico delle modifiche;
  • Ripeti: consente di ripristinare un intervento precedentemente annullato;
  • Copia: consente di copiare un elemento o una selezione;
  • Incolla: consente di incollare l'elemento o la selezione precedentemente copiati;
  • Linee griglia: mostra/nasconde le linee griglia;
  • Allinea agli oggetti: consente di allineare l'elemento selezionato;
  • Righelli: mostra/nasconde i righelli.
• Link:
  • Anteprima: consente di vedere una preview del sito;
  • Salva: consente di salvare il lavoro per poi riprenderlo in un secondo momento;
  • Pubblica: cliccando il sito viene pubblicato e diventa visibile a chiunque (fino a quando il sito non è pubblicato lo possiamo vedere solo noi);
  • Upgrade: consente di aggiungere funzionalità aggiuntive.
• Pulsante di aiuto: cliccando sul pulsante blu (posizionato all'estrema destra della barra superiore) è possibile aprire il centro assistenza di Wix dove è possibile reperire aiuto sulle diverse funzionalità dell'editor.

La barra laterale consente, invece, di spostarsi tra le varie funzionalità dell'editor:

Gestione delle pagine

Il primo pulsante (partendo dall'alto) è Pagine: tramite questo bottone si accede alle funzionalità di gestione delle pagine del sito:

Possiamo spostare le varie pagine trascinandole nell'ordine desiderato:

trascinando in direzione verticale (verso l'alto o verso il basso) sarà possibile cambiare l'ordine delle pagine all'interno del menu; trascinando in orizzontale sarà possibile creare delle sotto-pagine (pagine, cioè, "figlie" di quella di livello superiore).

Sempre da questa finestra è possibile aggiungere nuove pagine, modificare le impostazioni SEO di ciascuna pagina e cambiare l'effetto di transizione che verrà applicato durante la navigazione tra le pagine del sito.

Tra le varie funzioni, particolarmente utile ed interessante è quella dedicata alla SEO:

Attraverso questa scheda, infatti, è possibile personalizzare non solo il titolo e la URL della pagina ma anche aggiungere delle meta-informazioni come la descrizione e le keyword. Se necessario, inoltre, è possibile escludere la pagina dai risultati di ricerca dei motori selezionando l'apposita spunta.

Personalizzare il Design

Il secondo pulsante della barra laterale dell'editor di Wix consente di accedere alle funzioni di personalizzazione del design del nostro nuovo sito web. Queste funzioni sono raggruppate in tre sotto-sezioni:

• Sfondo
• Colori
• Font

La funzione Sfondo, come lascia intuire il nome, consente di modificare l'aspetto dello sfondo del nostro sito applicando un colore pieno, una texture oppure un'immagine di background scegliendo tra quelle disponibili nel sistema oppure caricandone una propria. Una volta scelta (o caricata) l'immagine da utilizzare come sfondo sarà possibile personalizzarne l'aspetto cliccando su "Personalizza lo sfondo":

Da questa finestra, infatti, sarà possibile definire le dimensioni dell'immagine di sfondo, il suo ancoraggio nonché l'eventuale scroll dello stesso insieme ai contenuti del sito.

Selezionando la voce Colori, invece, è possibile scegliere tra le palette di colori predefinite nel sistema (cliccando potrete notare subito quale impatto avranno sul vostro sito) oppure crearne una ex-novo.

La terza ed ultima voce del menu Design è Font e consente, appunto, di variare l'aspetto dei caratteri tipografici utilizzati nel sito.

E' possibile scegliere tra diverse combinazioni di caratteri e, successivamente, personalizzare cliccando su "Personalizza Font".

Da questo pannello sarà possibile variare ogni aspetto del carattere utilizzato per il titolo, il menu, gli headings o per il corpo della pagina, specificando non solo il font da utilizzare ma anche dimensione e colori!

Aggiungere contenuti al sito

Attraverso il menu Aggiungere è possibile riempire il sito di contenuti scegliendo tra i diversi elementi: testo, immagini, gallerie d'immagini, elementi multimediali, forme e linee, tasti e menu, liste.

Vediamo, di seguito, come inserire degli elementi di testo e delle immagini all'interno del nostro sito creato con Wix.

Aggiungere un elemento di testo

Per aggiungere un box di testo all'interno del nostro sito clicchiamo sulla voce Testo del menu Aggiungere. Si aprirà un sotto-menu nel quale dovremo scegliere se vogliamo aggiungere un titolo o un paragrafo di testo. Selezioniamo l'elemento desiderato (nel mio caso seleziono il paragrafo).

Cliccando l'elemento comparirà all'interno dell'area di lavoro. A questo punto potremo:

• trascinarlo nel punto desiderato;
• espanderlo o ridurlo in altezza e larghezza (tenendo cliccato sui punti di ancoraggio evidenziati sul perimetro dell'elemento e trascinando col mouse);
• modificarne il contenuto: facendo un semplice doppio click si aprirà un'editor in stileWord attraverso il quale potremo modificare il contenuto e la formattazione del testo;

• modificare le impostazioni dell'area di testo (cliccate col tasto destro del mouse e selezionate Impostazioni);
• aggiungere un effetto animazione in fase di caricamento (cliccate col tasto destro del mouse e selezionate Aggiungi animazione).

Aggiungere un'immagine

Sempre attraverso il menu Aggiungere possiamo inserire immagini all'interno del nostro sito. Per farlo selezioniamo la voce Immagine. Si aprirà il seguente sotto-menu:

Selezioniamo nuovamente Immagine per aprire la nostra libreria:

In questo momento non sono presenti file tra le "Mie Immagini" quindi possiamo decidere di caricarne una (cliccando sul bottone "Carica Immagini" in alto a destra) oppure approfittare della raccolta di immagini gratuite che ci vengono offerte da Wix. In quest'ultimo caso navigheremo tra le diverse categorie tematiche in cerca delle giuste immagini da utilizzare sul nostro sito. Una volta trovate basterà cliccarci sopra per selezionarle. Possiamo selezionare quante immagini vogliamo; una volta finita la fase di selezione clicchiamo sul bottone "Aggiungi Immagini" per importarle nel nostro sito.

Così facendo si chiuderà la libreria e le immagini selezionate appariranno nell'area di lavoro. Come di consueto potremo ridimensionare e spostare le immagini esattamente come abbiamo fatto con il paragrafo di testo.

Cliccando sull'immagine col tasto destro del mouse apriremo un menu contestuale attraverso il quale potremo: cambiare l'immagine (scegliendone un'altra ripetendo il processo visto poco sopra), modificare l'immagine (attraverso un editor d'immagini on-line), aggiungere un link all'immagine, cambiare lo stile (aggiungendo, ad esempio, una cornice) o applicare un'animazione.

Sicuramente degno di nota è l'editor delle immagini:

Attraverso la finestra di editing per le immagini, infatti, sarà possibile non solo ritagliare e ruotare l'immagine, ma sarà anche possibile variarne la luminosità, il contrasto, la saturazione, ecc. e sarà altresì possibile disegnarci sopra, applicare delle scritte o degli effetti esattamente come sarebbe possibile fare utilizzando un editor grafico come Adobe Photoshop.

Elementi avanzati: Blog, E-Commerce e strumenti Sociali

Con la stessa semplicità è possibile aggiungere tantissimi altri elementi al nostro sito web. Oltre a quelli già citati all'inizio di questo capitolo, il menu Aggiungere consente di inserire anche funzionalità evolute come Blog, E-Commerce e strumenti Social per soddisfare anche gli utenti più esigenti ed in cerca di soluzioni avanzate per il proprio sito web.

Arricchire il sito utilizzando l'App Market

Cliccando sul bottone App Market si avrà accesso al marketplace integrato nella piattaforma Wix al cui interno sono catalogate più di 140 app che è possibile applicare, gratuitamente o a pagamento, al proprio sito per aggiungervi funzionalità avanzate.

Le app sono suddivise per categorie tematiche. Tra le tante app è possibile trovare strumenti per l'e-commerce, per l'integrazione coi social media, strumenti di marketing e molto altro ancora.

Una volta trovata la giusta app sarà sufficiente cliccarci sopra per aprirne la scheda dove troveremo una descrizione dettagliata, una demo, l'elenco delle funzionalità e le recensioni degli altri utenti.

Per aggiungere l'app al nostro sito sarà sufficiente cliccare sul bottone "Aggiungi al Sito" presente in alto a destra.

Moltissime applicazioni sono gratis, altre sono disponibili in duplice versione (gratuita ma limitata / completa a pagamento) oppure in "prova gratuita".

Le impostazioni del sito

L'ultimo pulsante della barra laterale consente di personalizzare le Impostazioni del sito.

Le voci disponibili in questa sezione sono:

• Indirizzo Sito: consente di acquistare un pacchetto premium con un dominio da associare al proprio sito web;
• SEO (google): consente di personalizzare le impostazioni SEO del sito, specificando titolo, descrizione e parole chiave; cliccando sul link "Impostazioni SEO avanzate" è possibile inserire manualmente dei meta-tag aggiuntivi;
• Impostazioni sociali: consente di aggiungere funzionalità sociali come, ad esempio, i tasti "Mi piace" di Facebook;
• Statistiche: consente di integrare Google Analytics per monitorare le performances di traffico del sito; per farlo, però, è necessario effettuare l'upgrade alla versione Premium;
• Favicon: consente di personalizzare la favicon del sito (l'icona di 16x16 pixel posizionata accanto alla URL nella barra degli indirizzi del browser)... peccato che per farlo sia necessario sottoscrivere un pacchetto premium.

Pubblicazione del sito

Durante tutta la fase di editing è possibile cliccare sul link anteprima (posizionato nella barra superiore dell'editor) per vedere l'aspetto del nostro sito web man mano che applichiamo elementi e facciamo modifiche alle varie pagine del nostro template.

Una volta ultimato il lavoro dovremo ricordarci di pubblicare il sito. Fino a quando il sito non viene pubblicato, infatti, non sarà visibile a nessuno all'infuori di noi (una volta pubblicato il sito è visibile a chiunque tuttavia potremo ugualmente continuare ad effettuare modifiche ed aggiunte senza alcun problema).

Dopo aver fatto le nostre scelte clicchiamo sul pulsante "Pubblicare" per aprire il nostro sito al mondo!

Una volta pubblicato il nostro sito sarà accessibile attraverso una URL del tipo:

nome-utente.wix.com/nome-sito

Per avere un dominio personalizzato sarà necessario sottoscrivere un abbonamento premium. Attraverso la sottoscrizione di un piano a pagamento si avrà diritto, oltre ad un dominio personale anche ad altre interessanti feature come, ad esempio, la possibilità di monitorare il traffico del sito con Google Analytics, o alla possibilità di inserire una favicon.

E' bene ricordare, infine, che tutti i siti gratuiti, oltre a non avere un dominio personale, ospitano degli spazi pubblicitari con delle auto-promozioni di Wix. Per eliminare queste pubblicità è necessario sottoscrivere un abbonamento premium (ad esclusione del pianoConnect Domain che prevede solo il dominio personale ma non la rimozione degli spazi pubblicitari di Wix).

Conclusioni

Il servizio di website builder offerto da Wix ha il grosso vantaggio di rendere accessibile a chiunque la possibilità di crearsi da soli il proprio sito web: non servono competenze particolari ma solo un po' di pazienza e tanta voglia di fare. Dopo una prima fase di "apprendimento", infatti, la piattaforma diventa piuttosto intuitiva nel suo utilizzo e consente di raggiungere risultati discreti anche a chi è completamente a digiuno di nozioni di web design.

La possibilità di utilizzare il servizio gratuitamente è sicuramente un punto a vantaggio della piattaforma Wix ma se il sito che volete creare non è strettamente personale la sottoscrizione di un piano a pagamento è quasi obbligatoria: avere un dominio personalizzato e rimuovere gli spazi pubblicitari di Wix non possono essere considerate scelte facoltative se la vostra intenzione è quella di creare un sito per la vostra attività.

Link originale: http://www.mrwebmaster.it/primi-passi/guida-wix-website-builder-html5_11691.html