Blog ITek

Le kit de ressources informatiques

Avis Google Web Designer - C'est l'avenir?

Examen de Google Web Designer

J'ai rencontré aujourd'hui la nouvelle version bêta de Google Web Designer, le nouvel outil que Google a lancé pour créer des conceptions HTML riches adaptatives et universellement utilisables, y compris des annonces.

Le but principal semble être de fournir un moyen de produire une animation de style Adobe Flash en HTML5 / CSS3 sans utiliser Flash.

"Nous pensons que Google Web Designer sera la clé pour rendre HTML5 accessible aux personnes de tout le secteur, nous rapprochant de l'objectif de" créer une fois, exécuter n'importe où "", a déclaré l'ingénieur Google Sean Kranzberg

La page Youtube de Google Web Designer regorge d'exemples:

Google Web Designer

Démarrage de Google Web Designer pour la première fois…

Google Web Designer est disponible en téléchargement gratuit (comme dans la bière) pour Windows PC et Mac OS X, donc à ce stade, il ne fonctionnera pas sous Linux ni sur les Chromebooks.

Chargement de Google Web Designer

Écran principal de Google Web Designer

Évaluation du produit

Vous avez plusieurs préréglages pour commencer. Vous pouvez commencer par créer une nouvelle bannière publicitaire, ou HTML / CSS / JS / XML comme vous pouvez le voir:

L'interface utilisateur est élégante et pourtant puissante. Vous disposez d'excellents outils pour créer votre fichier HTML.

Outils d'objets 3D: Vous pouvez déplacer / faire pivoter n'importe quel objet en mode 3D.

Outil de texte: vous pouvez écrire où vous voulez dans le document et non dans le sens orienté HTML (Position: absolue;)

Outil de balise: créez des blocs (DIV) d'objets.

Outil plume: vous pouvez dessiner des vecteurs. Tout comme Flash ou Illustrator.

Vous pouvez également trouver l'outil Contour et l'outil Remplir comme prévu. vous pouvez également trouver l'outil de zoom normal, l'outil de sélection et l'outil de main

Une idée. N'importe quel écran.

Google Web Designer vous aide à créer un HTML réactif. tout ce que vous créez est accessible sur n'importe quel écran - bureau, tablette ou mobile - sans problèmes de compatibilité.

Amplifier avec du code

Si vous vous sentez plus pratique, tout le code derrière vos créations est modifiable à la main.

Deux modes d'animation

En mode rapide, créez vos animations scène par scène et le concepteur Web Google s'occupe des images intermédiaires. En mode avancé, animez des éléments individuels à l'aide de calques, en changeant facilement l'emplacement des éléments dans la pile.

Environnement de création Full 3D

Créez et manipulez du contenu 3D en utilisant un éventail d'outils et la puissance de CSS3. Faites pivoter des objets et même des conceptions 2D le long de n'importe quel axe, en visualisant les transformations et les traductions 3D au fur et à mesure que vous créez.

Résumé

Bien que d'autres utilisateurs de Hacker News estiment que le code généré par GWD se compare défavorablement à Microsoft FrontPage 2000. J'ai trouvé que le code était en quelque sorte correct, s'il était inspecté et modifié manuellement. Cet outil est idéal pour créer des parties HTML (widgets) qui sont responsables de plusieurs navigateurs (comme des annonces, un menu, un carrousel, etc.).

Je continuerai de jouer avec Google Web Designer pendant un certain temps, mais je dois admettre que je n’ai jamais été le gars du "générateur HTML". là ... Comment écrire leur code en utilisant un IDE décent.

Il convient de noter que des projets comme Adobe Muse / Dreamweaver, Reflow et d’autres incluent également la plupart des fonctionnalités de Web Designer. Mais en rendant Web Designer disponible gratuitement, Google met un peu de pression sur ses concurrents.

C'est tout. Que pensez-vous de Google Web Designer?

Google Web Designer 10.0.1

Créez des conceptions et des animations HTML5 interactives et attrayantes qui peuvent fonctionner sur n'importe quel appareil.

Télécharger

Spécifications

Nouveautés

  • Windows
  • macOS
  • Linux

Créer des animations

Vous pouvez créer des animations dans Google Web Designer en deux modes, le mode rapide et le mode avancé.

En mode Rapide, vous construisez votre animation scène par scène: vous ajoutez une nouvelle vue de la page entière, changez les éléments que vous souhaitez animer et, éventuellement, modifiez vos temps de transition et vos accélérations.

Pour une animation plus complexe, le mode avancé vous permet d'animer individuellement chacun des éléments, en modifiant éventuellement les temps de transition et en facilitant également. Le mode avancé affiche également les calques, qui vous permettent de modifier l'emplacement de chaque élément dans la pile d'éléments.

Environnement de création 3D complet

Créez et manipulez du contenu 3D en utilisant un éventail d'outils et la puissance de CSS3. Faites pivoter des objets et même des conceptions 2D le long de n'importe quel axe, en visualisant les transformations et les traductions 3D au fur et à mesure que vous créez.

Vue de conception et vue de code

La vue Code vous permet d'afficher et de modifier votre code dans l'outil d'édition de code intégré de Google Web Designer. La vue Code vous permet de créer des fichiers CSS, JavaScript et XML. La vue code utilise la saisie semi-automatique du code, ce qui facilite l'écriture de votre code, avec moins d'erreurs.

Pour les annonces et les fichiers HTML, vous pouvez basculer entre le mode Code et le mode Création, les modifications que vous apportez au code en mode Code étant reflétées dans le mode Création. Cela vous permet de tester immédiatement comment les modifications apportées à votre code affecteront vos conceptions.

Vous pouvez également sélectionner des objets avec l'outil de sélection et modifier le style CSS de ces objets dans le panneau CSS.

Outils d'illustration

Importez des éléments de n'importe quelle autre suite créative ou utilisez les outils d'illustration intégrés pour créer des illustrations de style vectoriel, tout en gardant vos créations claires. Pour créer de nouvelles balises HTML dans vos conceptions, il vous suffit de les dessiner avec l'outil Balise.

Le panneau CSS vous permet de modifier les styles actuels, ainsi que d'ajouter de nouvelles règles CSS.

Flux de travail publicitaire simple

Google Web Designer simplifie la publication d'annonces sur n'importe quelle plate-forme. Choisissez entre DoubleClick Studio ou AdMob, ou optez pour l'option Générique pour diffuser le contenu via n'importe quel autre réseau publicitaire. Aucun codage requis.

  • Correction d'un problème où les polices Google ne se chargeaient pas lors de l'ajout de nouvelles polices.
  • Correction d'un problème avec la police, le style et la couleur du texte non définis en mode d'édition de texte.
  • Correction d'un problème avec l'épaisseur de la police supprimée des fichiers publiés lorsque la police est définie dans une feuille de style externe.
  • Correction d'un problème avec les poids des polices "Normal", "Gras" et "Italique" manquants dans les fichiers publiés.
  • Résolution du problème de suppression des clés de police des fichiers publiés.
  • Résolution du problème d'activation du curseur de zoom lors du survol des barres de défilement de la scène.
  • Résolution du problème d'affichage de la liste de propriétés incorrecte pour un div dans la boîte de dialogue des liaisons dynamiques si une liaison existe déjà pour un groupe.
  • Résolution du problème suivant: une galerie remplie par un groupe dynamique (avec une liaison pour l'attribut "Répéter pour chaque élément de la collection") n'affichait que la première image locale dans l'aperçu dans le navigateur.
  • Correction d'un problème avec l'aperçu des documents avec des polices dynamiques de Google Fonts.
  • Correction d'un problème avec les polices dynamiques de Google Fonts qui ne se chargeaient pas lorsqu'un document avec des liaisons dynamiques était chargé avec des exemples de données déjà sélectionnés.
  • Correction d'un problème avec l'éditeur d'exemples de données qui n'enregistrait pas les modifications après la réduction ou la fermeture du panneau dynamique.
  • Notes de version complètes ici.

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
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
Google Web Designer - What It Is and How to Use (Basic Tutorial)