Blog ITek

Il kit di risorse IT

Recensione di Google Web Designer: è il futuro?

Revisione di Google Web Designer

Oggi ho incontrato la nuova versione beta di Google Web Designer, il nuovo strumento rilasciato da Google per la creazione di design basati su rich HTML adattivi e universalmente utilizzabili, inclusi gli annunci.

Lo scopo principale sembra essere quello di fornire un modo per produrre animazioni in stile Adobe Flash in HTML5 / CSS3 senza utilizzare Flash.

"Riteniamo che Google Web Designer sarà la chiave per rendere HTML5 accessibile alle persone di tutto il settore, avvicinandoci all'obiettivo di" crea una volta, esegui ovunque "", ha scritto l'ingegnere di Google Sean Kranzberg

La pagina YouTube di Google Web Designer è ricca di esempi:

Google Web Designer

Avvio di Google Web Designer per la prima volta ...

Google Web Designer è disponibile come download gratuito (come nella birra) per PC Windows e Mac OS X, quindi in questa fase non funziona su Linux o Chromebook.

Caricamento di Google Web Designer

Schermata principale di Google Web Designer

Revisione del prodotto

Hai diversi preset da cui iniziare. Puoi iniziare creando un nuovo banner pubblicitario o HTML / CSS / JS / XML come puoi vedere:

L'interfaccia utente è intuitiva e tuttavia potente. Hai ottimi strumenti per lavorare con la creazione del tuo file HTML.

Strumenti oggetto 3D: Puoi spostare / ruotare qualsiasi oggetto in modalità 3D.

Strumento di testo: puoi scrivere dove vuoi nel documento e non in direzione HTML (posizione: assoluto;)

Strumento tag: crea blocchi (DIV) di oggetti.

Strumento penna: puoi disegnare vettori. Proprio come Flash o Illustrator.

Puoi anche trovare gli strumenti Tratto e Riempimento come previsto. inoltre puoi trovare il normale strumento Zoom, lo strumento Selezione e lo strumento Mano

Un'idea. Qualsiasi schermata.

Google Web Designer ti aiuta a creare un HTML reattivo. tutto ciò che crei è accessibile da qualsiasi schermo - desktop, tablet o dispositivo mobile - senza problemi di compatibilità.

Amplifica con il codice

Se ti senti più pratico, tutto il codice alla base dei tuoi progetti è modificabile a mano.

Due modalità di animazione

In modalità Rapida, crea le tue animazioni scena per scena e il web designer di Google si occuperà dei fotogrammi intermedi. In modalità avanzata, anima i singoli elementi utilizzando i livelli, cambiando facilmente la posizione degli elementi all'interno della pila.

Ambiente di creazione 3D completo

Crea e manipola contenuti 3D utilizzando una serie di strumenti e la potenza dei CSS3. Ruota gli oggetti e persino i progetti 2D lungo qualsiasi asse, visualizzando le trasformazioni e le traduzioni 3D mentre crei.

Riepilogo

Sebbene altri utenti di Hacker News ritengano che il codice generato da GWD sia sfavorevolmente paragonabile a Microsoft FrontPage 2000. Ho trovato il codice in qualche modo a posto, se ispezionato e modificato manualmente. Questo strumento è ottimo per creare parti HTML (widget) che sono responsabili di più browser (come annunci, menu, carosello, ecc.).

Continuerò a giocare con Google Web Designer per un po 'di tempo, ma devo ammettere di non essere mai stato il tipo del "generatore di HTML" .. Non credo che strumenti del genere risolveranno il lavoro dei grandi designer di HTML / CSS lì ... Come scrivere il loro codice usando un IDE decente.

Vale la pena notare che progetti come Adobe Muse / Dreamweaver, Reflow e altri includono anche la maggior parte delle funzionalità di Web Designer. Tuttavia, rendendo Web Designer disponibile gratuitamente, Google sta esercitando una certa pressione sui concorrenti.

Ecco fatto. Cosa ne pensi di Google Web Designer?

Google Web Designer 10.0.1

Crea design e grafica animata accattivanti e interattivi basati su HTML5 che possono essere eseguiti su qualsiasi dispositivo.

Scarica

Specifiche

Novità

  • Windows
  • macOS
  • Linux

Crea animazioni

Puoi creare animazioni in Google Web Designer in due modalità, modalità rapida e modalità avanzata.

In modalità Rapida, costruisci la tua animazione scena per scena: aggiungi una nuova visualizzazione dell'intera pagina, cambi gli elementi che desideri animare e, facoltativamente, modifichi i tempi di transizione e gli andamenti.

Per un'animazione più complessa, la modalità avanzata ti consente di animare individualmente ciascuno degli elementi, modificando facoltativamente anche i tempi di transizione e l'andamento. La modalità avanzata mostra anche i livelli, che ti consentono di cambiare la posizione di ogni elemento nella pila di elementi.

Ambiente di creazione 3D completo

Crea e manipola contenuti 3D utilizzando una serie di strumenti e la potenza dei CSS3. Ruota oggetti e persino progetti 2D lungo qualsiasi asse, visualizzando le trasformazioni e le traduzioni 3D durante la creazione.

Vista struttura e vista codice

La visualizzazione codice ti consente di visualizzare e modificare il codice nello strumento di modifica del codice integrato di Google Web Designer. La vista codice consente di creare file CSS, JavaScript e XML. La vista codice utilizza il completamento automatico del codice che semplifica la scrittura del codice con meno errori.

Per gli annunci e i file HTML, puoi passare dalla visualizzazione codice alla visualizzazione struttura e le modifiche apportate al codice nella visualizzazione codice si riflettono nella visualizzazione struttura. Ciò ti consente di verificare immediatamente come le modifiche al codice influenzeranno i tuoi progetti.

Puoi anche selezionare oggetti con lo strumento di selezione e modificare lo stile CSS per quegli oggetti nel pannello CSS.

Strumenti di illustrazione

Importa risorse da qualsiasi altra suite creativa o utilizza gli strumenti di illustrazione incorporati per creare grafica in stile vettoriale, mantenendo i tuoi progetti leggeri. Per creare nuovi tag HTML nei tuoi progetti, disegnali semplicemente con lo strumento Tag.

Il pannello CSS ti consente di modificare gli stili correnti e di aggiungere nuove regole CSS.

Flusso di lavoro degli annunci semplice

Google Web Designer semplifica la pubblicazione di annunci su qualsiasi piattaforma. Scegli tra DoubleClick Studio o AdMob oppure scegli l'opzione Generica per trasferire i contenuti attraverso qualsiasi altra rete pubblicitaria. Nessuna codifica richiesta.

  • Risolto il problema per cui Google Fonts non veniva caricato durante l'aggiunta di nuovi caratteri.
  • Risolto il problema con il carattere, lo stile e il colore del testo non impostati in modalità di modifica del testo.
  • Risolto il problema con la rimozione dello spessore del carattere dai file pubblicati quando il carattere è definito in un foglio di stile esterno.
  • Risolto il problema con i caratteri "Normale", "Grassetto" e "Corsivo" mancanti nei file pubblicati.
  • Risolto il problema con la rimozione delle chiavi dei caratteri dai file pubblicati.
  • Risolto il problema con l'attivazione del cursore dello zoom quando si passa con il mouse sulle barre di scorrimento dello stage.
  • Risolto il problema con l'elenco delle proprietà errato visualizzato per un div nella finestra di dialogo delle associazioni dinamiche se esiste già un'associazione per un gruppo.
  • Risolto il problema per cui una galleria popolata da un gruppo dinamico (con un'associazione per l'attributo "Ripeti per ogni elemento nella raccolta") visualizzava solo la prima immagine locale nell'anteprima nel browser.
  • Risolto il problema con l'anteprima dei documenti con caratteri dinamici da Google Fonts.
  • Risolto il problema con i caratteri dinamici di Google Fonts che non venivano caricati quando un documento con associazioni dinamiche veniva caricato con dati di esempio già selezionati.
  • Risolto il problema con l'editor di dati di esempio che non salvava le modifiche dopo la compressione o la chiusura del riquadro dinamico.
  • Note complete sulla versione qui.

Videos about this topic

Google Web Designer - Quick Tutorial. Next and Previous Buttons for Swipeable Gallery
How to create a Website in Google Sites for Free
Google Web Designer\: Creating an HTML5 Banner Ad (Part 1)
Timeline Advanced Mode Overview - Google Web Designer
GOOGLE WEB DESIGNER TUTORIAL - Make an animated Web Banner
Google Web Designer Tutorial - Building a Valentine\'s Banner in GWD