Pubblicato il 07/02/18 - aggiornato il  | 8 commenti :

Come usare Google Web Designer per creare siti e banner AdWords

Come funziona Google Web Designer per creare siti web, oggetti HTML, banner pubblicitari e altri progetti da web designer.
Google Web Designer è un programma gratuito per Windows, Mac e Linux per progettare siti web e pubblicità su AdWords e DoubleClick. È disponibile anche nella lingua italiana, però è un progetto ancora in Beta benché sia stato rilasciato diversi anni fa, ultimamente però ha ricevuto un importante aggiornamento.

Sotto certi aspetti è un Editor HTML, CSS e Javascript con cui creare pagine web, ma anche singoli elementi, come appunto dei banner da usare con il programma AdWords. Ricordo che AdWords è l'alter ego di Adsense ed è lo strumento che usano gli inserzionisti per creare delle campagne pubblicitarie.

In questo articolo vedremo quali sono gli strumenti principali di Google Web Designer mentre in un prossimo post  realizzeremo un annuncio secondo le regole HTML5. Si tratta di un tool piuttosto evoluto da usare come alternativa gratuita a programmi costosi e non altrettanti performanti.

Le pagine web, o il singolo elemento HTML che intendiamo realizzare, mostreranno in tempo reale la variazione di aspetto dopo la modifica del codice. Evidentemente per un utilizzo ottimale del Web Designer di Google, occorre avere almeno una conoscenza propedeutica dei linguaggi di markup HTML e CSS. Chi ancora non la avesse può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS.

Si può scrivere il codice manualmente oppure usare il trascinamento per inserire nella pagina web o nel banner gli elementi che vogliamo mostrare. Si apre la pagina del progetto Google Web Designer, per poi cliccare sul pulsante Download Web Designer Beta. In un PC Windows 7, 8 o 10 verrà scaricato un file .exe su cui fare un doppio click per iniziare l'installazione. Saranno scaricati automaticamente anche gli aggiornamenti disponibili.





Nella Home potremo scegliere se Creare un nuovo File, aprirne uno esistente oppure iniziare da un modello

google-web-designer

Si va su Crea nuovo file se siamo al primo utilizzo del software. Nella seconda finestra dovremo scegliere il tipo di elemento che intendiamo realizzare, p.e. Banner normale o  Estendibile o Interstitial in ambiente AdWords, DoubleClick, AdMob o Annuncio Non Google.

banner

Si impostano le dimensioni, si dà il nome al progetto e si sceglie la cartella di destinazione dello stesso. Si può anche optare per il layout Responsive e scegliere tra animazione veloce e avanzata. Per progetti non finalizzati alla creazione di annunci pubblicitari, sulla colonna di sinistra si può scegliere HTML per un Editor offline o HTML con pagine per la realizzazione di un sito web. Le opzioni CSS, Javascript e XML sono più specifiche. Si va su OK.






Qualunque sia il progetto prescelto si visualizzerà una area di lavoro bianca con gli strumenti di Editing

creazione-pagina-web
Si possono trascinare immagini e aggiungere Testo formattato con la scelta dei colori. L'area di lavoro è contornata da strumenti nei tre lati. In alto a sinistra viene attivata di default la Vista Struttura per vedere gli elementi del progetto. Si può passare al codice HTML cliccando su Vista Codice. C'è pure il pulsante Anteprima per vedere come appare il progetto aperto con Chrome, Edge e Internet Explorer. Accanto è presente pure il pulsante Pubblica che serve per salvare il progetto in locale oppure per pubblicarlo su Google Drive.

Vediamo quali sono gli strumenti principali di Google Web Designer:
  1. Strumenti della barra laterale di sinistra - Selezione, Percorso Animazione, Traslazione, Rotazione oggetti 3D, Strumento Tag, Strumento Penna, Testo, Riempimento, Mano, Zoom e Viewport. Si clicca sullo strumento che intendiamo utilizzare per iniziare a usarlo.
  2. Strumenti del Menù in alto e della barra superiore - Il menù è formato dalle voci File, Modifica, Visualizza, Finestra, Guida e ciascuna di esse ha dei sottomenù. Quando si seleziona uno strumento della barra laterale, nella barra superiore appaiono le opzioni per la personalizzazione di tale strumento. Per esempio con il Testo si potrà scegliere Stile (Intestazione, testo normale, ecc), Famiglia di Font, Dimensione dei caratteri, Allineamento, Elenchi, Rientri e Collegamenti.
  3. Strumenti del lato destro - Questi strumenti sono divisi in Colore, Proprietà, Componenti, CSS, Eventi e Raccolta. Si deve fare click sulla categoria prescelta per visualizzarne i tool.
barra-laterale-destra

Se siete sufficientemente esperti di codice non potete fare a meno di andare su Vista Codice

google-web-designer-vista-codice
per visualizzare il codice generato dagli elementi inseriti o digitati e per eventualmente modificarlo. In definitiva Google Web Designer è uno strumento utile, non solo per chi voglia creare una campagna pubblicitaria, ma anche per altri utilizzi nel mondo del web. In un prossimo articolo vedremo come creare un banner in formato HTML5 anche a prescindere dal suo effettivo utilizzo per diventare inserzionisti su AdWords.


8 commenti :

  1. Ernesto, ciao a te funziona Google web Designer o solo a me l'istallazione non funziona da mesi? :)

    RispondiElimina
  2. Non ho avuto alcun problema di installazione su W10.
    @#

    RispondiElimina
  3. ciao,sto iniziando ad usare google web designer, esiste qualche video tutorial in italiano che spiega come utilizzarlo? grazie

    RispondiElimina
  4. C'è un canale dedicato a Google Web Designer. Se hai difficoltà con l'inglese puoi attivare i sottotitoli in italiano
    https://www.youtube.com/user/GoogleWebDesigner

    @#

    RispondiElimina
  5. Ciao, ho creato un banner da utilizzare su blogger ma non so come inserirlo.
    Ho provato a copiare e incollare il codice nei gadget/html ma non funziona, resta statico (nessuna animazione) e sul clik non apre la pagina inserita. Cosa devo fare ?

    RispondiElimina
    Risposte
    1. Questo articolo è propedeutico mentre in questo post è specificato meglio come procedere
      https://www.ideepercomputeredinternet.com/2018/02/creare-banner-html5.html
      e c'è anche una Demo di un banner con gli elementi che si muovono
      @#

      Elimina
    2. Il banner io sono riuscito a crearlo grazie alla tua guida ma non so come inserirlo in blogger senza adworld o doubleclick. In soldoni quello che ho creato con Google Web Designer, posso inserirlo nei gadget di blogger ?
      Grazie

      Elimina
    3. Non te lo so dire mi spiace. Non ho mai provato 😑. Sono solo riuscito a creare una immagine animata che ho caricato su Blogger come hai visto nel post linkato.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy