Oggi ti segnalo un sito che ho scoperto da poco e racchiude contenuti veramente interessanti e di qualità.

Il sito si chiama TrainingCreativo.com e al suo interno puoi trovare un sacco di risorse gratuite e a pagamento.

Principalmente il  sito si presenta come una sorta di contenitore di video tutorial su Photoshop (al momento puoi trovare 6 video corsi, formati complessivamente da 128 video) ai quali, periodicamente, se ne aggiungono sempre di nuovi.

Per accedere a questi video corsi (a pagamento) hai varie possibilità:

1) Iscrizione alla membership mensile.

In questo modo potrai vedere tutti i video corsi on-line (ma non potrai scaricarli sul tuo PC) e finche rimarrai iscritto/a, avrai accesso anche a tutti i nuovi video che verranno aggiunti nel tempo.

2) Iscrizione alla membership annuale.

In questo modo potrai vedere tutti i video corsi on-line e potrai scaricarli anche sul tuo PC e finche rimarrai iscritto/a, avrai accesso anche a tutti i nuovi video che verranno aggiunti nel tempo.

Con questa iscrizione risparmi anche 2 mensilità, pagherai in pratica 10 mesi invece di 12.

3) Acquistare i video corsi singolarmente (prezzo variabile a seconda del video corso).

Scegliendo questa opzione acquisti un video corso singolo e puoi scaricarlo sul tuo PC, senza vincoli ne ulteriori pagamenti nei mesi successivi.

Per chi vuole essere sempre aggiornato e imparare facilmente nuovi trucchi ed effetti speciali con l’uso di programmi per la computer grafica, l’opzione più  vantaggiosa, a mio parere, è  sicuramente la membership annuale, in quanto puoi scaricare tutti i video corsi ad un costo ben al di sotto del prezzo complessivo acquistando tutti i video corsi singolarmente. Per chi vuole toccare con mano la qualità dei video prima di acquistare un abbonamento è possibile scaricare gratis (dietro iscrizione alla newsletter) un mini video training composto da alcuni video tutorial, estratti dai vari video corsi, per farsi un idea dei contenuti che si possono trovare iscrivendosi alla membership.

Ma la cosa veramente interessante  che, oltre a contenuti a cui puoi accedere a pagamento, trainingcreativo.com mette a disposizione dei visitatori tantissimi tutorial, video e testuali scaricabili in pdf, esclusivamente gratuiti.

Inoltre puoi accedere ad alcune sezioni del sito dove troverai un vasto elenco di link a risorse utilissime come immagini e foto gratis, font, pennelli per Photoshop, texture, color tools, generatori di testo e tanto altro.

Il sito offre anche un glossario dove leggere il significato dei vari termini utilizzati nell’ambiente della grafica. Questa sezione, a mio parere  un po’ scarna di contenuti, è messa a disposizione di tutti gli utenti che possono contribuire all’ampliamento della stessa contattando l’amministratore del sito.

Anche il supporto è buono, infatti hai la possibilità di comunicare direttamente con l’autore dei video attraverso vari form per, ad esempio, fare domande o richiedere assistenza, suggerire tutorial, ma anche proporsi come collaboratori.

Concludendo, per chi lavora con la grafica o per chi semplicemente è un appassionato di questo mondo, queste risorse ci aiutano a lavorare in maniera più efficiente e a creare prodotti di qualità! Le risorse messe a disposizione dalla rete infatti sono degli strumenti che ogni web designer dovrebbe conoscere e avere sul proprio PC.

Adesso lascio a voi la scelta di andare a dare un’occhiata e sperimentare sui vostri progetti!

Uno dei compiti più ardui che un web designer deve affrontare ogni giorno è la compatibilità con i diversi browser presenti sul mercato. Infatti quasi sempre una bella interfaccia grafica che si visualizza in maniera perfetta su Mozilla Firefox o Google Chrome non viene visualizzata correttamente in Internet Explorer! Purtroppo è difficile da pensare ma è un browser anche Internet Explorer e nonostante il profondo odio che tutti i web designer provano verso di esso non può essere non considerato anche perchè aimè sono ancora tantissimi gli utilizzatori.

Ma Per fortuna esistono dei piccoli script che agiscono come estensione alle proprietà standard css e che ci aiutano a visualizzare alcuni elementi non compatibili in IE. Lo script che vi descriverò oggi è Css3PIE.

Quante volte abbiamo sognato di avere la trasparenza dei png in Internet Explorer 6 oppure i box con gli angoli tondi e l’effetto ombra?! Bene oggi lo potete fare sfruttando Css3PIE. Vediamo come utilizzarlo con un esempio.

Esempio

Facciamo finta che volessimo creare un box di colore arancione con angoli tondi e ombreggiatura, e che sia correttamente visualizzato in tutti i browser, compreso IE. Quindi il codice che utilizzeremo sarà il seguente:

.moduletable-box2{
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 3px 0 #666666;
box-shadow: 0 0px 3px 0 #666666;
border-radius: 3px;
-webkit-box-shadow: 0 0px 3px 0 #666666;
-webkit-border-radius: 3px;
background: none repeat scroll 0 0 #E6623C;
}

Notate come il codice box-shadow (per l’ombra) e border-radius (per creare li angoli tondi) è ripetuto 3 volte per la compatibilità con Firefox e Chrome, aggiungendo rispettivamente il prefisso -moz e -webkit, ma non ancora compatibile per Internet Explorer, perchè nonostante gli avessimo messo le proprietà queste non vengono riconosciute. A questo punto quello che vedremo sarà:

In pratica

Come potete vedere dallo screenshot sopra, in Internet Explorer ancora non viene applicata nessuna proprietà.
A questo punto richiamiamo tramite la proprietà behavior lo script css3PIE che scarichiamo da qui. Scompattato l’archivio, copiamo il file PIE.htc all’interno del nostro sito, e in coda alle proprietà css dell’esempio aggiungiamo

behavior: url("tuo_path/PIE.htc");

Ricordiamoci di specificare il giusto path al file PIE.htc, e stop! finito. Quello che vedremo anche in internet explorer sarà la stessa ed identica interfaccia:

Conclusioni

Sul sito dello script è spiegato anche come risolvere eventuali problemi di utilizzo come ad esempio in alcuni casi è opportuno inserire la proprietà position:relative; all’interno del blocco delle proprietà insieme al behavior. E poi come utilizzare la versione javascript dello stesso script.
Ricordiamoci che la proprietà la dobbiamo richiamare in ogni blocco in cui abbiamo bisogno di compatibilità in IE. Credo che questo sia un modo semplice ed efficace per ovviare a questi piccoli problemi che spesso ci fanno dannare!

Si avvicinano le vacanze di Natale e tutti i blog e siti famosi cambiano il loro logo aggiungendo qualche dettaglio natalizio, un modo carino per augurare un buon natale a tutti gli utenti! Ma il solito cappellino natalizio è ormai trapassato, perché non aggiungere invece qualcosa di originale? vediamo in pochi minuti come aggiungere le luci natalizie intorno al nostro logo!

Il procedimento è veramente facile, basta un po’ di inventiva e poi Illustrator per disegnare il tutto.

Step 1: disegniamo le lampadine

La prima cosa da fare è disegnare le lampadine da aggiungere come decorazione al nostro logo, o header dove volete voi.

Aprimo un nuovo documento di Illustrator e con lo strumento penna iniziamo a creare base e vetro della nostra lampadina, in maniera molto veloce, non è importante fare un lavoro di precisione, perché applicate nel sito nelle dimensioni piccolissime non si riesce a percepire il dettaglio. Coloriamo con un riempimento sfumato con colori accesi.

Step 2: disegniamo il filo

Step successivo è quello di disegnare il filo della corrente attorno al nostro logo, quindi sempre con strumento pennino e dimensione tratto di 2px, iniziamo a disegnare dentro e fuori le gambette della scritta come se il filo fosse attorcigliato, quindi tagliando in maniera veloce i pezzi di linea che devono capitare dietro il logo e lasciando quelli avanti. Diamo alla linea il tipico colore verde scuro delle luci natalizie.

Step 3: applichiamo le luci

Ultimo step è quello di applicare le lampadine, in maniera casuale e con direzione diverse, sul filo appena creato.

Video del tutorial

Conclusioni

Ci sono diversi modi per rendere più originale l’elemento decorativo sotto le feste di natale, questo è uno dei tanti e come avete potuto vedere è molto facile realizzarlo. Possiamo anche dare diverse forme e dimensioni alle luci per caratterizzare ancora più la decorazione.

…e con questo GraphiCal vi augura un Buon Natale e Felice Anno Nuovo!

Con questo tutorial andrò a spiegare tutti i passaggi fondamentali per realizzare un template da zero, spiegando la struttura di base, quindi i file che lo compongono e le righe di codice necessarie per le funzioni tipiche di un blog in WordPress. Nel seguente tutorial non spiegheremo come applicare la grafica e il css, ma solo la struttura, il tutorial si completerà con la seconda fase appunto quella del design partendo ad esempio da un file photoshop, ma che vedremo nel prossimo post!

Abbiamo già visto come installare wordpress in locale, utilizzaremo quindi le conoscenze già acquisite per lavorare nel nostro ambiente di sviluppo locale, in modo da poter provare e riprovare senza creare danni. Iniziamo!

Introduzione

Il template che andremo a creare è un semplice tema a 2 colonne, che si compone degli elementi tipici di un sito/blog, quindi un header, un footer, il main content e la sidebar. Per seguire il tutorial non è necessario essere un mago della programmazione, bastano solo le basi per il resto spero di spiegare tutto nella maniera più accurata possibile.

La struttura

Il modello logico per lo sviluppo di un tema WordPress è basato essenzialmente su una struttura a pagine. Ogni pagina corrisponde ad un tipo di visualizzazione per il contenuto ed ogni tipo di visualizzazione corrisponde ad un file fisico (php) che dopo andremo a vedere uno per uno. Questo significa che per ogni tema ci potrebbe essere una file di visualizzazione per la lista dei post, per la vista singola o le pagine. Questi file sono indipendenti l’uno dall’altro e ogni uno contiene pezzi di codici e funzioni che nell’insieme costituiscono il sito come fosse un puzzle. Questo facilita di gran lunga il lavoro dello sviluppatore che lavora su singole porzioni di codice per modificare l’intera struttura di un template.

Non tutte le visualizzazioni però richiedono una visualizzazione diversa, avvolte la visualizzazione degli archivi è uguale a quella dei post, questo significa duplicazione di codice inutile. Per risolvere questo problema  il template è organizzato secondo una struttura gerarchica con la quale i file più generici rimpiazzano quelli più specifici. Quindi se nella struttura manca la parte di codice relativa agli archivi, verrà utilizzata la visualizzazione di default e cosi via. Il file di default che ci deve assolutamente essere in una struttura di template è index.php accompagnato da un file css che serve a dare la giusta formattazione agli elementi.

I file del template

Banalmente i file necessari per la costruzione di un template sono 7 (in realtà l’unico indispensabile come abbiamo detto è index.php), ma per costruire qualcosa di più articolato e scalabile è bene aggiungere più file dove ogni uno si occupapa di un’aspetto specifico del blog:

1. index.php: è la visualizzazione di default, l’homepage.
2. header.php: contiene la parte superiore del blog (il logo e il top menù)
3. footer.php: contiene la parte inferiore del blog (copyright, e altre info generiche sul sito).
4. page.php: è il template delle pagine interne del blog (come chi sono, contatti).
5. sidebar.php: la seconda colonna del sito contiene tutti i moduletti come le categorie, gli archivi dei post o in generale, i widgets per WP.
6. single.php: è il template per la pagina che contiene un singolo post (questa dal quale leggete il tutorial per intenderci)
7. style.css: è il file di stile che serve a dare la formattazione a tutti gli elementi del template.

E’ possibile anche aggiungere altri file per modificare altre parti di codice, come i commenti (comments.php), la ricerca (search.php) etc… per una guida completa leggere Template Hierarchy.

Step 1 – Creiamo i file

Iniziamo a creare la cartella che conterrà il nostro template e se stiamo sviluppando nel nostro ambiente locale con WAMP come abbiamo visto, la creiamo sotto C:/wamp/www/mioblog/wp-content/themes/  e la chiamiamo genericamente “wonderful” che sarà il nome del nostro template.

All’interno della cartella creiamo i primi 2 file della struttura, quindi creiamo un file di testo e lo rinominiamo index.php lo stesso facciamo con style.css. Più avanti andremo a vedere come riempire con il codice ogni singolo file.

Step 2 – Diamo un nome al Template

In teoria il nostro tema è già disponibile per essere attivato dal pannello di WordPress. Soltanto che è vuoto, non visualizzerà nulla se non una pagina completamente bianca, inoltre non avrà un nome ne un’immagine, un link, nessuna informazione sul tema creato. Quindi iniziamo a inserire queste informazioni semplicemente inserendo le righe di codice di seguito riportate all’interno del file style.css dove ogni tag è facilmente intuibile a cosa corrisponde.

/*
Theme name: Wonderful
Theme url: http://www.graphical.it
Description: Template sviluppato per il tutorial su GraphiCal
Version: 1.0
Author: <a href="http://www.graphical.it" title="Wonderful">Davide Calignano</a>
Author url: http://www.graphical.it
Tags: 2 colonne, clean, minimal
*/

Quando il nostro template sarà finito graficamente e vogliamo inserire una thumbnail nel riquadro predisposto, basterà inserire l’immagine rinominata screenshot.png all’interno della cartella del template.

Step 3 – Creiamo il layout

A questo punto iniziamo a scrivere il codice necessario a creare la struttura portante del nostro template. Iniziamo a lavorare su un singolo file per il momento e predisponiamo tutti i tag per poi riempirli successivamente con le funzioni wordpress.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Wonderful Blog</title>
</head>
<body>
  <div id="contenitore">
    <div id="header">
      <div id="logo"></div>
      <div id="menu"></div>
    </div>
      <div id="content"></div>
      <div id="sidebar"></div>
  </div>
  <div id="footer"></div>
  </div>
</body>
</html>

La nostra struttura è completa. Spieghiamo brevemente cosa sono quei div, innanzitutto un div è un contenitore come una scatola, che contiene al suo interno altre scatole, quindi raggruppa più div. Creare dei contenitori ci aiuta a dare una corretta formattazione agli elementi.

Dal codice si nota infatti che il div “contenitore” raggruppa tutto il resto. In questo modo tramite il css possiamo dire che il div contenitore deve avere ad esempio una larghezza di 900 pixel e deve stare al centro della pagina, in questo modo tutti i div in esso contenuti si adattano alle dimensioni della scatola e seguono lo stile del div padre.

Ricapitolando di seguito vediamo lo schema dei div utilizzati:

Step 4 – Header

Abbiamo detto che il template è composto da pezzi di codice che nell’insieme formano la struttura. Quindi a questo punto vediamo come suddividere il codice appena scritto in vari file. Partiamo dall’header.

Creiamo un nuovo file di testo e lo rinominiamo header.php al suo interno conterrà tutti gli elementi che si ripeteranno in ogni pagina del blog, quindi logo e menù oltre ai tag tipici di una struttura html ed eventuali script. Copiamo l’intestazione della pagina di codice creata prima, sino alla chiusura del div <header>, non ci preoccupiamo di chiudere tutti i div, resteranno aperti perché poi verranno chiusi successivamente nel resto dei file, infatti bisogna sempre lavorare tenendo in mente la visione completa della struttura e alla fine tutti i div devono ritornare chiusi. Quindi il nostro file header sarà così composto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Wonderful Blog</title>
</head>
<body>
  <div id="contenitore">
    <div id="header">
      <div id="logo"></div>
      <div id="menu"></div>
    </div>

Step 5 – Index, Page e Single

La vista index, page, e single sono apparentemente uguali, ma solo come div, in realtà poi ogni una andrà personalizzata con delle funzioni specifiche di wordpress. Per il momento saranno così composte:

<div id="content"></div>

Step 6 – Sidebar

La sidebar sarà formata dal div relativo:

<div id="sidebar"></div>
  </div>

Step 7 – Footer

Allo stesso modo dell’header il footer conterrà la parte finale del nostro blog/sito che si ripeterà ad ogni pagina, per cui sarà così composto:

  <div id="footer"></div>
  </div>
</body>
</html>

Step 8 – Style

Ed in fine ci occupiamo dello stile che lo vedremo in maniera non approfondita, ma ci servirà soltanto per dare le dimensioni giuste hai vari div in modo da iniziare a vedere la struttura del template, quindi in cosa alle informazioni del template scriviamo:

/*

Theme name: Wonderful

Theme url: http://www.graphical.it

Description: Template sviluppato per il tutorial su GraphiCal

Version: 1.0

Author: <a href="http://www.graphical.it" title="Wonderful">Davide Calignano</a>

Author url: http://www.graphical.it

Tags: 2 colonne, clean, minimal

*/

@charset "utf-8";

/* CSS Document */

body {

color:#333333;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

background-color:#CCCCCC;

}

div {

width:100%;

float:left;

}

a:link {

color:#fff;

}

a:hover {

color:#6666FF;

}

#contenitore {

width:900px;

margin:0 auto;

float:none;

min-height:100%;

height:100%;

background:#214b93;

}

#header{

background:#179594;

width:900px;

padding:15px;

}

#logo {

font-size:18px;

font-weight:bold;

background:#06dd42;

}

#logo h1 {

text-transform:capitalize;

font-size:18px;

margin:5px 0 0 0;

padding: 5px;

}

#logo a {

text-decoration:none;

padding: 5px;

}

#logo h5 {

margin:5px 0;

padding: 5px;

}

#menu {

margin-top:5px;

background:#08f5cb;

}

#menu ul {

list-style-position: inside;

list-style-type: none;

padding: 0px;

}

#menu li {

margin:0px 0 10px 10px;

padding: 0px;

list-style-type: none;

float:left;

}

#body {

margin-top:5px;

width:930px;

}

#mainBar {

width:730px;

background:#f5a100;

padding:10px;

}

#sidebar {

width:160px;

padding:10px 0 10px 10px;

margin-left:10px;

background:#d83a1d;

}

#sidebar form {

display:block;

margin:20px 0;

}

#sidebar h3, #sidebar h4 {

font-size:13px;

margin:10px 0 0 0 ;

}

#sidebar ul {

list-style-position: inside;

list-style-type: none;

padding: 0px;

}

#sidebar li {

margin-bottom:10px;

padding: 0px;

list-style-type: none;

}

#footer {

margin-top:5px;

padding:20px 0;

background:#faed00;

text-align:center;

width:930px;

}

#footer a{

color:#b00;

}

Step 9 – Le funzioni PHP

A questo punto non abbiamo fatto altro che disegnare la struttura, ma di fatto se facciamo una preview del template non visualizzeremo nulla perché ancora il nostro template non dialoga con wordpress.

Per far si che il tutto interagisca dinamicamente, c’è bisogno del PHP e wordpress ci mette a disposizione moltissime funzioni molto utili con le quali messe al posto gusto ci permetteranno di estrapolare le informazioni dal database e presentarle nel nostro template in maniera corretta.

Tra le più importanti c’è la bloginfo() la quale ci fornisce molti dati in base al valore della variabile passata come parametro. Vediamole in dettaglio:

• name -> restituisce il titolo del blog
• description -> è il motto del blog
• url -> l’indirizzo url
• rdf_url -> l’url del feed RDF/RSS 1.0
• rss_url -> l’url del feed RSS 0.92
• rss2_url -> l’url del feed RSS 2.0
• atom_url -> l’url del feed Atom
• pinback_url -> l’url di pingback
• admin_email -> l’indirizzo email dell’amministratore del blog
• charset -> il tipo di Encode utilizzato
• version -> la versione di WordPress installata
• wpurl -> l’url dell’installazione di WordPress
• template_directory -> l’url della directory del template in uso
• stylesheet_url -> l’url del foglio di stile style.css
• stylesheet_directory -> l’url della directory contenente il foglio di stile, e più in generale la root del vostro tema

Per una guida completa visitare: http://codex.wordpress.org/Template_Tags

Quindi se noi scriviamo <?php blogInfo(‘name’); ?> il browser ci restituirà il nome del nostro blog. Quindi verrà utilizzata nel nostro file header.php come segue:

<div id="logo"><h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1> <h5><?php bloginfo('description'); ?></h5></div>

Per capire più a fondo come funziona un tema WordPress, è necessario introdurre i concetti di “loop”.

Il loop è il ciclo attraverso il quale vengono estratti i dati di ogni post (o lista di post), e si compone praticamente di un ciclo while simile a questo:

<pre><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// output dei dati del post
<?php endwhile; endif; ?></pre>

La parte fondamentale di questo codice è rappresentata dalla funzione the_post(), che inizializza un oggetto PHP globale $post che contiene tutti i dati della pagina. Visto che tutte le funzioni per la visualizzazione e formattazione dei dati si appoggiano all’oggetto $post, il loop è necessario anche per visualizzare un singolo post.

Per una guida completa sullo sviluppo dei temi fte riferimento a questo indirizzo.

Questa funzione sarà utilissima per estrarre tutti i post e visualizzarli in home, per cui è necessario aggiungere quelle 2 righe di codice all’interno del nostro index.php e all’interno tutta la formattazione necessaria dei dati, che diventerà così:

</div>

</div>

<div class="storycontent">

<?php the_content('Read more &raquo;'); ?>

</div>

<small class="metadata">

<span class="category">Filed under:

<?php the_category(', ') ?>

<? if(!is_single()) echo "|"; ?>

<?php edit_post_link('Edit', '', ' | '); ?>

<?php comments_popup_link('Comment (0)', ' Comment (1)', 'Comments (%)'); ?>

</span>

<?php if ( function_exists('wp_tag_cloud') ) : ?>

<?php the_tags('<span class="tags">Article tags: ', ', ' , '</span>'); ?>

<?php endif; ?>						  </small>

</div>

<!-- fine elenco post -->

<?php comments_template(); // mostra l'include dei templates ?>

<?php endwhile; ?>

<div class="navigation">

<div class="alignleft">

<?php next_posts_link('&laquo; Previous Entries') ?>

</div>

<div class="alignright">

<?php previous_posts_link('Next Entries &raquo;') ?>

</div>

</div>

<?php else : // se non sono presenti i post mostra questo codice  ?>

<h2 class="center">Not Found</h2>

<p class="center">Sorry, but you are looking for something that isn't here.

</p>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

Il nostro index è diventato sicuramente più articolato, perchè presenta tutto il cuore del template, con tutte le funzioni per la corretta formattazione degli elementi estratti dal db.

Da notare anche l’aggiunta in testa e in cosa delle funzioni get_header() e get_footer(). Infatti, come dicevamo, queste funzioni permettono di inglobare il codice presente nel file relativo header.php e footer.php, in sostanza non c’è bisogno di riscrivere tutto il codice ma solo la funzione per includerlo, in questo modo si realizza la scalabilità di cui parlavamo all’inizio.

Risultato finale:

Conclusioni

Già soltanto con questi pochi elementi, studiando il codice che parzialmente è stato spiegato e capendo la logica che sta dietro è possibile costruire template abbastanza articolati. Non ho spiegato tutti i file e tutte le funzioni altrimenti mi sarei dilungato troppo, ma metto a disposizione  lo zip con il template appena realizzato in modo che potiate vedere il risultato finale e il codice nel suo intero. Nel prossimo Post andremo ad applicare la grafica e quindi font, colori ed immagini.

Dopo aver spiegato in pochi è semplici passi come installare wordpress in locale, e come comprare uno spazio web oggi vedremo il terzo ed ultimo step per pubblicare il nostro lavoro da locale a remoto e viceversa quindi andremo a sviluppare tutti i passaggi fondamentali e qualche trucchetto per farlo in maniera meno laboriosa possibile e veloce!

Innanzi tutto come abbiamo già detto nei precedenti post, WordPress è composto essenzialmente da file e da un DB, quindi per pubblicare tutto il lavoro online occorre recuperare questi due elementi.

Step 1

Recuperiamo i file che per chi ha installato il pacchetto WAMP per Windows si trovano in C:/wamp/www/, mentre in Linux con LAMP si trovano in var/www/. Identifichiamo la cartella del nostro progetto che abbiamo chiamato blog e creiamo un archivio zip della cartella blog (l’archivio zip ci semplifica i tempi per l’operazione di upload che dopo vedremo).

Step 2

Recuperiamo il DB esportandolo tramite l’utility di gestione database, phpMyAdmin. Se non è già avviato facciamo partire il nostro web server, quindi doppo click su WAMP Server nella cartella dei programmi, lui si occpuerà di far partire tutti i servizi necessari. Dall’icona di WAMP Server nella barra delle applicazioni facciamo click con il tasto sinistro del mouse e dal menù di scelta che viene fuori selezioniamo phpMyAdmin.

Dal pannello di phpMyAdmin nella colonna sinistra selezioniamo il database relativo al progetto che vogliamo pubblicare online, e nella colonna destra clicchiamo su Esporta si aprirà una nuova schermata per settare le opzioni di esportazione. Se non sono già selezionate facciamo attenzione a selezionare tutte le tabelle con l’apposito link Seleziona tutto e settiamo SQL come formato di esportazione, il resto lasciamo come di default. In fondo alla pagina selezioniamo la casella di spunta Salva con nome e proseguiamo con il pulsante Esegui. Abbiamo salvato il nostro DB che sarà un file con estensione sql.

Step 3

A questo punto che abbiamo il pacchetto dati e il pacchetto DB, passiamo a configurare l’ambiente remoto. Nel precedente post abbiamo visto come comprare uno spazio web, ora dobbiamo configurarlo in modo che sia pronto ad ospitare il nostro database.

Quindi accediamo al pannello di amministrazione dell’host, clicchiamo sull’icona di gestione DB e dalla procedura guidata  del nostro pannellino creiamo un nuovo database e associamogli un utente che avrà  un nome utente e una password. Cerchiamo di inserire una password abbastanza complessa, con numeri, lettere e simboli, che non sia uguale al nome del database o all’utente FTP. Bene abbiamo appena creato un nuovo DB vuoto, appuntiamoci le informazioni che abbiamo configurato, quindi ricapitolando:

• il nome del database
• l’utente associato al DB
• e la password del’utente

Queste informazioni ci serviranno in seguito quando dovremmo configurare wordpress dopo l’importazione dei dati sull’host.

Dal pannello di gestione DB importiamo il pacchetto sql del nostro sito tramite l’apposita funzione import. Se tutto è andato bene dovremmo vedere il nostro db popolato con le tabelle e i dati.

Step 4

Ora passiamo a caricare il pacchetto zip dei  file di wordpress nel nostro spazio host, ricordo che nel precedente post, abbiamo visto come configurare un nuovo utente FTP e come accedere all’host tramite il client FileZilla.

Quindi apriamo FileZilla, connettiamoci all’host, menu File > Gestore Siti > “nome-blog” > Connetti, dovremmo avere nella parte destra dell’applicazione tutte le cartelle che sono presenti sull’host, quindi individuiamo la root del dominio, che generalmente è www o public_html entriamo in quella cartella, mentre nella parte sinistra individuiamo l’archivio zip che abbiamo creato precedentemente nello step 1, che se non è stato spostato lo dovremmo trovare sotto C:/wamp/www. Ora facciamo un semplice drag and drop dello zip dalla parte locale alla parte remota, spostandolo nella cartella www.

Ora dobbiamo decomprimere l’archivio zip e questo tramite FTP non si può fare, quindi lo facciamo tramite il file manager del pannello di amministrazione dell’host.  Quindi accediamo al pannello, individuiamo il file manager, e tramite questo strumento che ci aiuta a navigare tra le cartelle presenti sull’host, individuiamo il pacchetto appena caricato, lo selezioniamo e  tramite l’opzione relativa lo decomprimiamo.

Non sempre il file manager ha questa opzione, in genere in cPanel c’è, ma ad esempio nel pannello proprietario di Aruba no! In questo caso possiamo utilizzare un trucchetto, che di seguito vi spiego:

1. Scaricate questo il file unzip.zip e ringraziamo Davide De Simone per la condivisione.
2. Decomprimete l’archivio e caricate la cartella unzip sull’host remoto in www tramite filezilla.
3. Posizionate il file zip da estrarre nella sottocartella upload, e richiamate il file index.php all’interno della cartella unzip (quindi dalla barra degli indirizzi del vostro browser andate su www.tuodominio.it/unzip/index.php), verrà creata nella stessa cartella upload una cartella con il file zip estratto con lo stesso nome del file, al termine l’archivio verrà rimosso.
4. A questo punto spostiamo i file di wordpress di 2 livelli superiori, in modo che siano nella root del dominio, in www/.
5. Possiamo eliminare la cartella unzip.

In poco tempo siamo riusciti a caricare tutto il sito sull’host con notevole guadagno di tempo.

Step 5

Abbiamo finito di caricare tutti gli elementi necessari, ma il sito non è ancora visibile perché la configurazione non è stata aggiornata con le nuove impostazioni del db. Quindi procediamo quanto segue.

Editiamo il file wp-config.php nella root del dominio. Wp-config.php è il file di wordpress che contiene tutte le informazioni per creare la connessione al Database. E siccome il database è cambiato perchè ne abbiamo creato un nuovo, dobbiamo di conseguenza aggiornare il file.

Le righe di condice da aggiornare sono le seguenti:

• define('DB_NAME', 'wordpress'); Inserite il nome del nuovo db
• define('DB_USER', 'userdatabase'); Inserite il nome utente associato al db creato prima
• define('DB_PASSWORD', 'dI0ò%a2jh7'); La password dell’utente
• define('DB_HOST', 'mysql.netsons.com'); Questo dipende dal vostro hosting, solitamente quest’informazione è esplicitata nella mail di configurazione inviata dal provider nel momento che lo acquistate.

Fine! Se avete eseguito tutti i passaggi correttamente, ora dovreste vedere il vostro sito pubblicato online!

Esportare un sito da remoto a locale

Per esportare il sito da remoto a locale, basta che eseguiamo tutto il procedimento al contrario, quindi:

Recupero del pacchetto DB esportandolo tramite phpMyAdmin.

Recupero dei file di wordpress scaricandoli dal’host remoto in locale tramite FileZilla.

In locale avvio tutti i servizi di server web e db con WAMP

Ricreo il database importando quello nuovo.

Posiziono i file di wordpress sotto il percorso locale C:/wamp/www

Modifico il file di configurazione di wordpress, wp-config.php, con le nuove impostazioni, ricordando che

• user: ‘root’
• pass: ‘ ‘
• host: ‘localhost’

Abbiamo il nostro sito in locale! ;)

Conclusioni

Spero che questa guida sia stata utile per chi come me qualche anno fa si affacciava in questo mondo e non aveva la minima idea da dove cominciare. Se pensi che sia stato così ringraziami condividendola in rete ;)

Dopo aver parlato di come installare WordPress in locale, è opportuno acquistare uno spazio web per poter pubblicare tutto il lavoro in rete. Nel seguente post andrò a sviluppare tutti i passaggi necessari e i consigli utili per poter fare la scelta giusta, se sei alle prime armi e non sai da dove partire qui troverai tutto ciò che ti serve.

Panoramica (Le basi)

Innanzitutto per spazio web intendo hosting e dominio. Infatti per pubblicare qualcosa in rete è fondamentale avere uno spazio su un server remoto dove poter inserire i file del nostro sito web o blog, questo è l’hosting. Fisicamente non è altro che una porzione di hard disk su un computer che si trova in una sala server chissà dove, ma collegata in rete con un indirizzo IP pubblico in modo che possa essere raggiunta dal mondo intero, almeno teoricamente finché non si ha un nome a esso associato.

Per far si che i tuoi utenti possano raggiungere i file che hai inserito nell’hosting è necessario avere un nome di dominio, il nome di dominio è quello che viene digitato nella barra degli indirizzi nel browser per poter visualizzare un sito, è generalmente un nome che identifica il blog, nel mio caso, il mio nome di dominio è graphical.it, questo nome non è altro che un modo più semplice per raggiungere i tuoi file, senza non sarebbe possibile visualizzarli, ne essere ricercabili in google o altri motori di ricerca.

La scelta del dominio

Scegliere un buon dominio è uno dei passaggi fondamentali di tutto il processo, infatti essere visibili in internet con un nome corto, facile da ricordare e che abbia anche un senso darà sicuramente una marcia in più per raggiungere il proprio obiettivo sia esso un blog di condivisione o a maggior ragione per attività commerciali.

In questa fase è molto importante essere flessibili, perché non sempre il nome con cui abbiamo sognato di chiamare il nostro blog è disponibile. Quindi quasi sicuramente dovremmo cambiarlo perché è occupato, perchè il nome che hai scelto è il nome di una grossa azienda a livello mondiale o di un prodotto commercializzato, perchè c’è già un sito con un nome simile.

Per ovviare a problemi di questo tipo iniziamo a trovare un’idea valida, che può essere una parola che fa pensare al tema del nostro sito, o l’unione di più parole, nel mio caso GraphiCal è  l’unione di Graphic e Cal che è l’iniziale del mio cognome, ma la parola in se (graphical) ha anche un significato in italiano che significa “grafico”.

Iniziamo a provare tutto quello che ci viene in mente scrivendolo su domai.nr. Domai.nr è u servizio come c’è ne sono molti in rete che ci dice se il nome di dominio è libero o occupato e in oltre restituisce una serie di varianti alla parola utilizzata, utile a farci venire nuove idee nel caso fosse occupato.

Trovato un buon nome di dominio, non cantiamo vittoria troppo presto, il secondo passaggio è quello di ricercarlo in google. Ricercandolo possiamo vedere se c’è già qualcosa di simile in rete. Se è un nome troppo famoso, di un popolare sito web o  azienda e la prima pagina dei risultati è piena di link riferiti a quel sito, è inutile provarci, avremo scarse possibilità di superare un dominio del genere. Il consiglio è quello di cambiare nuovamente nome e scegliere qualcosa di poco famoso o comunque in grado di riuscire a fargli concorrenza in termini di posizionamento.

Altro aspetto da considerare è la scelta dell’estensione del dominio. Questo dipende dal tipo di sito che dovremmo andare a creare, se è un sito tutto italiano il mio consiglio è indubbiamente di scegliere un dominio .it se invece si pensa di espandersi rivolgendosi anche all’utenza straniera allora possiamo pensare di acquistare un dominio .com, in entrambi i casi il costo e la procedura di acquisto è identica (non era così fino a qualche anno fa!).

Sconsiglio di prendere estensioni strane come .ch o .uk lo so che potrebbe essere fico, ma le versioni nazionali dei motori di ricerca (google.it, yahoo.it)  privilegiano i domini con estensione .it

La scelta dell’hosting

Per scegliere un buon hosting dobbiamo capire fondamentalmente quanto è grande il nostro sito e stimare quanti utenti potrebbe avere. Siccome siamo all’inizio è inutile spendere grosse cifre per acquistare un ferrari che non sfrutteremo, meglio mantenerci bassi, con conseguente riduzione delle spese, e poi un giorno possiamo sempre decidere di passare ad un hosting più performante.

Per comprare uno spazio bisogna rivolgersi a qualcuno che lo vende e si chiama Internet Service Provaider,  o abbreviato provider, che tradotto letteralmente in italiano significa “fornitore di servizi Internet”. Ci sono diversi provider più o meno buoni e a diverse soluzioni di prezzo. Basta effettuare una ricerca in rete per trovare quello adatto alle nostre esigenze, magari controllando anche l’esperienza utente nei diversi forum in cui ne parlano.

L’importante che abbia almeno le seguenti caratteristiche (per una soluzione base):

• Spazio web 1Gb
• PHP
• FTP
• MySQL (in alcuni casi è un servizio aggiuntivo, quindi ricordiamoci di includerlo nella nostra spesa)

Non arriveremo a spendere nemmeno 20 euro annui.

Poi ci sono molti altri servizi interessanti e utili, ma non strettamente necessari per il funzionamento in se del blog/sito come le e-mail, il backup, l’antivirus e antispam, etc … che comunque un sito più importante deve avere.

Per quanto riguarda il server se piattaforma Linux o Windows, il mio ragionamento di fondo è questo, anche se entrambi hanno moduli di estensione per eseguire diversi linguaggi di programmazione, windows ha tutte le funzionalità di base per eseguire pagine ASP, quindi è ottimizzato per questo tipo di programmazione, Linux invece allo stesso modo ma per PHP. Per cui se sappiamo che andremo a sviluppare in PHP o che comunque il cms che andremo ad utilizzare è in PHP allora privilegerei un server Linux. Al contrario se dovrei sviluppare ASP la mia scelta ricadrebbe su Windows.

Dove e come comprare

Allo stesso modo dell’estensione del dominio se il sito è frequentato da utenti italiani sarà meglio acquistare hosting su un server in italia invece di uno americano ad esempio, perché, facendo un ragionamento “fisico”,  la risposta in millisecondi delle richieste internet dall’Italia in america sarebbero ovviamente più lunghe rispetto a un richiesta internet di un utente italiano che visita una pagina su server in italia. Fisicamente il dato deve attraversare mezzo mondo per poter giungere in america e ritornare, la differenza è impercettibile, ma su grandi richieste la differenza si nota.

Come abbiamo detto ci sono diversi provider che offrono hosting, di seguito una lista di alcuni provider italiani da dove partire, non è detto che siano i migliori per voi, sull’hosting ho poco da dirvi, dipende tutto da quello che vi serve e questo si apprende solo dopo tanta esperienza e qualche sola ;)

• netsons
• register
• aruba
• tophost

(Molti pacchetti hosting comprendono anche il dominio, in altri casi è opportuno acquistarlo a parte)

Quindi per acquistare l’hosting andiamo sul sito del provider e consultiamo attentamente i pacchetti offerti, facciamo sempre riferimento alle caratteristiche di cui sopra, e aggiungiamo eventuali servizi che ci potrebbero essere utili, ripeto in alcuni casi MySQL è venduto come servizio, quindi facciamo attenzione a includerlo nella nostra spesa.

I prezzi per un hosting base senza nessun servizio particolare aggirano intorno ai 20 – 30 euro/anno e credo che vada più che bene per chi sta iniziando. Vi verrà chiesto di creare un account, di spuntare gli eventuali servizi aggiuntivi, di inserire il nome di dominio scelto, di accettare il contratto e di effettuare il pagamento generalmente tramite carta di credito oppure con un conto virtuale come PayPal.

La configurazione base

Eseguiti tutti i passaggi vi verranno spedite via mail tutte le credenziali per poter accedere al pannello di amministrazione del vostro host e del db.

I pannelli di amministrazione host sono diversi in base al tipo di host utilizzato, essi consentono di facilitarti nell’operazione di configurazione e gestione dell’host tramite interfaccia grafica web. Tra i pannelli più comuni abbiamo cPanel e Plesk, ma in alcuni casi può essere proprietario.

Accediamo al pannello di amministrazione host e se non è già configurato automaticamente è necessario creare un account FTP.

L’FTP è un protocollo di comunicazione veloce, è utilizzato fondamentalmente per poter caricare i dati sull’hosting in maniera facile e diretta. Per poter caricare i dati viene utilizzato un client FTP, uno dei più famosi è: FileZilla.

Scarichiamo FileZilla, lo installiamo e lo configuriamo per poter accedere in FTP sull’host. Quindi andate in menu File > Gestore siti > Nuovo Sito, vi verrà chiesto di inserire:

• il nome Host, che dovrete avere in una delle e-mail che il provider ha spedito con le credenziali,
• La Porta, potete lasciare in bianco, di default è 21,
• Tipo di server, selezionate FTP
• Tipo di accesso, selezionate Normale
• Password e Account, dovreste averle nell’e-mail se l’account è stato configurato automaticamente dal provider, altrimenti inserite quelle dell’utente FTP che avete creato prima.

Click su Connetti.

L’interfaccia che si presenta è abbastanza intuitiva, è divisa in 2, la parte sinistra indica lo spazio locale, con tutti i file presenti su vostro computer, la parte destra indica lo spazio remoto, quindi la spazio del vostro host. Tra le cartelle nello spazio remoto dovreste avere una cartella che è definita come root del dominio, ovvero la cartella padre che contiene il tuo sito, generalmente è chiamata www, in altre html_public a seconda dell’hosting, lì vanno inseriti tutti i file del vostro sito, ricordo che dovrà esserci un file rinominato come index.html o index.php in modo che l’host possa riconoscere il file di default dal quale partire per visualizzare il sito visitando www.tuodominio.it.

Utilizzando Filezilla si risparmia una grande quantità di tempo, perchè basta effettuare drag and drop dei file da una parte a l’altra del disco, come se si stesse lavorando in locale, in maniera quasi impercettibile per l’utente, in più è possibile utilizzare tutte le operazioni comuni delle cartelle e dei file, come il rinomina, copia, elimina.

Adesso prendiamo tutti i file del nostro sito e carichiamoli sull’host con filezilla!

NOTA: E’ possibile che nel momento che acquistiamo il dominio, questo non sia disponibile immediatamente ma ci vorranno 24 ore prima che sia attivo. Quindi non potremmo visualizzare il sito prima dell’attivazione.

Conclusioni

In questo tutorial sono spiegati in maniera più o meno approfondita tutti i passaggi fondamentali per poter aver le basi e le capacità per acquistare un hosting+dominio e pubblicare un sito online. Ma ti ricordo l’importanza di fermarsi a riflettere sul nome del dominio perché è una scelte importante che solo tu puoi fare e se fatte bene, potrà portarti ad un facile successo.

Il passaggio successivo è l’hosting, ti ho dato alcuni punti di riferimento ma non è detto che siano le soluzioni ideali per il tuo progetto. Organizza le tue idee, fai una stima reale del tuo progetto e in base a quello ti muovi di conseguenza.

Non affrettarti a partire senza un minimo di planning, ma pensa, pensa e ancora pensa. Chi parte bene è già a metà dell’opera ;)

B9XBFKC39NW9

Per iniziare a realizzare un blog o un sito internet è fondamentale un ambiente di sviluppo su cui testare i nostri template e smanettare con i plugin, in questo caso con questo tutorial parleremo di WordPress che è uno dei CMS più utilizzati per la realizzazione di piattaforme blog e multiblog (ma non solo).

Per mettere in piedi una piattaforma come WordPress sono necessari 3 elementi:

• Un web server: Apache
• Un database: MySQL
• Un linguaggio di programmazione: PHP

Per installare velocemente questi tre elementi possiamo utilizzare un pacchetto di installazione che si chiama WAMP Server.

WAMP è un acronimo che prende il nome dalle iniziali dei componenti software con i quali è realizzata, Windows Apache MySQL PHP. Si può scaricare liberamente perchè rilasciato sotto licenza GNU GPL. E c’è anche la versione ottimizzata per Linux che si chiama LAMP.

Step 1

Download di WAMP Server e procediamo con l’installazione lasciando tutte le impostazioni di default. Il pacchetto istallerà tutto ciò che ci serve, oltre a qualche utility fondamentale, come phpMyAdmin che è un tool per poter lavorare sul Database da interfaccia web, che dopo vedremo.

Step 2

Download dell’ultima versione di WordPress. Decomprimiamo il pacchetto scaricato all’interno del percorso C:/wamp/www e diamogli il nome blog (o quello che vogliamo). Questa directory è una directory creata da WAMP e indica il path di riferimento per i siti che dovranno essere pubblicati, funziona come in un web hosting reale e indica la root del sito, in alcuni casi si chiama www in altri public_html…

In C:/wamp/www possiamo inserire quante istanze di WordPress o di qualsivoglia CMS vogliamo, a patto che sia in PHP.

Step 3

Installato WAMP Server se non è già avviato lo avviamo facendo doppio click sull’icona dell’applicazione all’interno dei nostri programmi. Comparirà un’icona nella barra delle applicazioni. Cliccando sull’icona con il tasto sinistro si aprirà un menù a tendina dal quale possiamo scegliere tra una serie di opzioni, che altro non sono che dei link alle rispettive directory o web page.

Clicchiamo su phpMyAdmin, verrà aperto in una nuova scheda del browser il tool di gestione dei database di MySQL. Questo ci consentirà di creare un database che servirà a WordPress per poterci inserire tutte le informazioni e i post del blog. L’utility in questione è divisa in 2 colonne, quella sinistra ci dà informazioni sui database presenti in MySQL, quella destra visualizza le tabelle e i record del database selezionato.

Per creare un nuovo Database, dalla colonna destra inseriamo un nome all’interno della textbox sotto la voce “Crea un nuovo database”, per nome intendo una parola che lo identifichi univocamente, va più che bene “wordpress” visto che non abbiamo altri db, e lasciando tutte le impostazioni di default clicchiamo su Crea. In questo modo abbiamo appena creato il nostro database, che sarà ovviamente vuoto, senza tabelle. Ogni DB creato avrà un utente di default associato, l’utente di default ha come user: root e come password vuota, cioè niente. Ovviemente questo vale solo in locale, eseguendo la procedura in remoto verrete obbligati a creare un utente con una password. Ma se volete comunque aumentare la sicurezza del vostro database locale :) è possibile creare un utente, da phpMyAdmin > scheda Privilegi > Aggiungi nuovo utente.

Step 4

A questo punto siamo pronti per installare WordPress. Tramite il nostro browser andiamo a questo indirizzo http://localhost/, apparirà una schermata con i dettagli riguardanti il nostro web server e sotto la voce Your Projects dovremmo avere un link con il nome della cartella che abbiamo dato nel momento in cui abbiamo decompresso l’archivio di WP in www.

Clicchiamo sul nostro progetto, che abbiamo chiamato blog e partirà l’installazione di WordPress che dalla versione 3.0 ha una procedura guidata per creare il file di configurazione. Procediamo cliccando sul pulsante “Crea file di configurazione” e a questo punto wordpress ci avvisa che per poter procedere ci occorre avere le seguenti informazioni:

1. Database name
2. Database username
3. Database password
4. Database host
5. Table prefix

…e direi che le abbiamo tutte. Per cui procediamo con la prossima schermata e inseriamo tutti i dati, rispettivamente:

1. Database name: wordpress
2. Database username: root
3. Database password:
4. Database host: localhost
5. Table prefix: wp_ (di default)

Avvia l’installazione!

Digitando nella barra degli indirizzi http://localhost/blog e se abbiamo fatto tutti i passi correttamente dovremmo vedere il nostro blog in esecuzione in locale. Al solito tramite http://localhost/blog/wp-admin accediamo per amministrarlo.

E se vogliamo modificare direttamente i file? Basta andare dall’esplora risorse del nostro computer in C:/wamp/www/blog dove risiedono tutti i file di WordPress.

Ora buon divertimento! Testate, modificate e riprovate perchè è provando e riprovando che si impara! E se qualcosa va storto non vi preoccupate, potete sempre reinstallare tutto quanto ;)

Nel prossimo post spiegherò step by step come pubblicare un sito da locale a remoto.

Quante volte siamo stati vincolati dall’utilizzo dei soliti font compatibili per il web, perché gli unici permessi dallo standard  browser, a scapito del design del sito stesso. Infatti i font che solitamente vediamo in giro, parliamo di Arial, Verdana, Times.. sono font incorporati all’interno del browser che utilizziamo per la navigazione.

Inizialmente i web font , che garantivano una buona compatibilità negli ambienti Windows /Mac erano veramente molto pochi. Con le ultime versioni dei sistemi operativi le possibilità di scelta sono un po’ aumentate. E google amplia questa possibilità introducendo una serie di nuovi font sicuramente utilissimi agli sviluppatori creativi i quali vogliono fare del proprio sito o blog un lavoro unico!

Il funzionamento è abbastanza semplice, google inventato una font directory e una font API che aiuterà lo sviluppatore a usare i font offerti, di alta qualità ed open source,  nei loro siti.

La font directory offre per adesso 18 nuovi font tra qui quello Android utilizzato per l’omonimo sistema operativo, tra cui alcune varianti degli stessi.

L’utilizzo è semplicissimo con le API Font messe a disposizione da google, vediamo come.

Step 1: basta aggiungere questo script all’interno dei tag <head>:

<link href=’http://fonts.googleapis.com/css?family=Tangerine’ rel=’stylesheet’ type=’text/css’>

in questo modo, al momento della visualizzazione della pagina facciamo scaricare al browser anche il font google che poi andremo a richiamare nello stile del paragrafo.

Step2: adesso impostiamo il font per un paragrafo di testo nel solito modo, ovvero:

<h1 style=”font-family:’Tangerine’, arial, serif;”>

hello world

</h1>

e adesso dovremmo vedere gli effetti del nuovo font, applicati al testo! (scarica l’esempio in fondo all’articolo)

Per adesso, Google supporta solo le lingue Europee, ma molto presto pensa di ampliare il supporto anche per le restanti lingue.

Credo che sia un’ottima soluzione che in futuro se ampliata potrà portare molti vantaggi lato design nel mondo del web 2.0!

Di seguito puoi scaricare un  esempio di file html con lo script che abbiamo descritto prima:

Da un po’ di giorni alcuni utenti mi hanno scritto, descrivendomi le loro difficoltà ad utilizzare il tracking code di google con actionscript  2, in un vecchio post infatti avevo descritto con un tutorial la possibilità di utilizzare google analytics solo con AS3, ho pensato quindi di creare un post apposito per schiarire un po’ le idee su questo argomento, e infondo all’articolo la possibilità di scaricare il file sorgente in entrambi i linguaggi AS2 e AS3.

Il codice di google è sostanzialmente sempre uguale per entrambe le versioni di actionscrip, la differenza tra il AS2 e AS3 è ovviamente il modo in cui sono trattati gli eventi pulsante.

Ma partiamo dall’inizio, velocemente riscrivo i semplici passi da seguire prima di operare sul file flash:

1. Iscriversi a Google Analyics tramite questo link. (Bisogna avere un account google per poter fare ciò).

2. Registrare un nuovo dominio, quindi ricavare il codice html di tracking code.

Dovremmo avere qualcosa tipo questo (a seconda l’utilizzo del codice vecchio o nuovo di anayltics):

<!– LEGACY GOOGLE ANALYTICS CODE –>

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script>

<script type=”text/javascript”>

_uacct = “UA-000000-0″;

urchinTracker();

</script>

<!– NEW GOOGLE ANALYTICS CODE –>

<script type=”text/javascript”>

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);

document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

</script>

<script type=”text/javascript”>

var pageTracker = _gat._getTracker(“UA-000000-0″);

pageTracker._initData();

pageTracker._trackPageview();

</script>

3. A questo punto incolliamo l’intero codice sopra riportato infondo alla pagina html (index.html o index.php) prima del tag </body>

4. A questo punto passiamo a inserire il nostro codice all’interno del flash (nell’esempio è sempre visualizza in doppia versione vecchio è new codice per entrambe le versioni di AS):

AS2

// legacy tracking code
indexLegacy_mc.onRelease = function():Void
{
getURL(“javascript:urchinTracker(‘/home/indexLegacy’);”);
};
// new tracking code
indexNew_mc.onRelease = function():Void
{
getURL(“javascript:pageTracker._trackPageview(‘/home/indexNew’);”);
};

AS3

indexLegacy_mc.addEventListener(MouseEvent.MOUSE_UP, doLegacyRelease);
indexNew_mc.addEventListener(MouseEvent.MOUSE_UP, doNewRelease);
indexLegacy_mc.buttonMode = true;
indexNew_mc.buttonMode = true;
// legacy tracking code
var legacyURL:String = “javascript:urchinTracker(‘/home/indexLegacy’);”;
function doLegacyRelease($evt:MouseEvent):void
{
navigateToURL(new URLRequest(legacyURL));
}
// new tracking code
var newURL:String = “javascript:pageTracker._trackPageview(‘/home/indexNew’);”;
function doNewRelease($evt:MouseEvent):void
{
navigateToURL(new URLRequest(newURL));
}

In entrambi i casi, vediamo come viene inserita all’interno della funzione che è richiamata quando si clicca sul pulsante un particolare codice come se si richiamasse un url, ma non richiamiamo un url vero e proprio ma un codice javascript di questo tipo: “javascript:urchinTracker(‘/home/indexLegacy’);”

Con questo codice non facciamo altri che passare alla funzione urchinTracker di google un parametro (/home/indexLegacy) o può essere il nostro pulsante di “Home” come “Chi Siamo” o “Contatti” e se il pulsante si trova in una sottosezione di “Chi Siamo” come ad esempio facciamo che sia “La Mission” in questo caso come parametro all’interno del pulsante “La Mission” inseriremo il seguente codice “javascript:urchinTracker(‘/home/indexLegacy’);”

Il nome utilizzato all’interno della funzione javascript sarà quello visualizzato all’interno del nostro pannello di statistiche analytics, quindi questo ci permette di capire con facilità che le statistiche si riferiscono a quella particolare sezione raggiunta tramite la sezione “ChiSiamo”. Nel caso la stessa sezione è anche raggiungibile tramite un pulsante posizionato in home sarà /home/LaMission, in questo caso avremo le statistiche su questa particolare sezione visualizzata all’interno di analytics come Home/LaMission, quindi raggiunta direttamente da Home.

Lo stesso, accade per l’ AS3.

Di seguito è possibile scaricare anche il sorgente del progetto!

Google Search Stories un nuovo servizio by Google creato per la creazione di video in modo automatico e creativo da pubblicare, non a caso, su YouTube. Con questo servizio è possibile creare interessanti video appoggiandosi a gran parte dei servizi di Google, come abbiamo notato infatti da qualche giorno google ha cambiato un pò la sua struttura per mettere in evidenza alcune funzioni utili per una buona ricerca, possiamo infatti ricercare per blog, per immagini, per news, per libri oppure una ricerca globale in tutto il web.

Tramite questo servizio è possibile creare senza alcuna conoscenza di video editor alcuni lavori creativi per diffondere notizie, fare un po’ di pubblicità e  di marketing! Infatti studiando per bene questo servizio e sfruttando le sue caratteristiche si può pensare di fare con un video che focalizza l’attenzione dell’utente su un determinato argomento, presentandolo in maniera originale. Ad esempio per presentare luoghi tramite video sfruttando la ricerca con Google Maps oppure con Images per foto e immagini di un determinato argomento. Gli usi sono svariati, basta aggiungere un po’ di fantasia a quella messa a disposizione da Google!

Il funzionamento è abbastanza semplice e intuitivo, basta andare nella pagina youtube dedicata a questo, cliccare su Search Stories Video Creator per iniziare a creare il tuo video, aggiungere una musica scelta tra quelle preimpostate da Google e uplodare sul proprio canale youtube! (Una volta pubblicato il video sul canale,  dall’interno del pannello youtube è possibile modificare la descrizione, cambiare la musica, e inserire tag e annotazioni..ma shhhh non lo diciamo a nessuno! :) )

Ecco il mio lavoro ;)

Adesso a voi la parola!