kids-toy

Everyone knows that Google is actively promoting the complete replacement of Flash technology with HTML5. And we must admit that it acts not only with prohibitive measures, but also takes care of the developers. So in 2013, the company released a free tool for designers and programmers, Google Web Designer, with which you can create banners and entire interactive HTML5 pages. This powerful tool will be discussed in the article.

The first version of the program appeared in 2013. Despite the fact that a lot of time has passed, and many versions of the program have been released, they are all beta versions. By the way, you can always download the latest version here.

Now let’s look at the main features of the program, and maybe you will like it:

1. Localization

Google Web Designer supports a large number of languages, including Russian. The system language is automatically set, but you can easily change the language to another in the menu «Help -> Language«. In addition, the help system also supports the Russian language.

2. Cross-platform

Google Web Designer can be installed on many operating systems: Windows 7 and eight, Mac OS X 10.7.x or later versions Ubuntu 12.04 or later versions Debian 7 or later versions OpenSuSE 12.2 or later and Fedora Linux 17.

3. Visual editor

visual editor Google Web Designer allows you to draw using simple primitives such as lines, ovals, rectangles and curves. Here you can add text, 3D objects, interactive components and change their properties. The components are the following:Interactive area«,»Gesture«,»Graphic button«,»Call/SMS button«,»sprite table«,»swipe gallery«,»Gallery navigation«,»circular gallery«,»panoramic gallery«,»Video«,»YouTube«,»Audio«,»Map«,»street view«,»Add to calendar«,»iframe window«. In addition to standard components, you can create your own components and use third-party components, some of which are collected in the Google Rich Media Gallery.

4. Code editor

The code editor allows you to immediately see the code of the page that you have drawn in the visual editor. The editor understands and highlights the syntax of the following formats: HTML, css, JavaScript and XML. Here you can create and edit files of these formats.

5. Library of objects

All media files necessary for your project are added to the object library. Image formats supported .JPEG, .JPG, .gif, .png, .svg, .BMPvideo formats .MP4, .M4V, WebM, .OGG and audio formats .MP3, .WAV, .OGG. In addition to media files, the object library automatically includes groups of objects. Any objects can be combined into a group. The resulting group can be used as a single object several times in different places on your banner or page. Also, objects can pack in separate div and after that work with them as with one object.

6. Timeline for animation

For creating animations in Google Web Designer there is time scale, with which it is extremely convenient to make smooth transitions between frames, for example, the smooth appearance or disappearance of pictures or their movement on a banner or page. There are two modes for working with animation: fast and advanced. In the quick mode, animation frames are built scene-by-scene for all elements at once (see the first figure below), and in the advanced mode, you can control the animation of each element separately, independently of other elements (see the second figure below).

Various types of dynamics are supported during the transition between frames: constant speed, fast acceleration and slow deceleration, fast at the beginning and slow at the end, slow at the beginning and fast at the end, slow acceleration and slow deceleration, see the picture below. If the standard types of dynamics are not suitable, you can manually adjust the change in speed to your taste.

7. Ready-made templates for creating advertisements

In total here you can find three different types of ads: banner (simple declarations of a fixed size), expandable declaration (expanding ads from small to large) and interstitial ad (suitable for mobile devices, because the vertical and horizontal position of the page is automatically determined here). In addition, the ads you create may support multiple ad platforms: AdMob, double click and AdWords. And, of course, you can make an advertisement without the ad platform code.

8. Preview and publish

Preview automatically opens a browser window and displays your ad or HTML page in it. By default, the preview opens in Chromebut you can also choose another installed browser. Publication consists of preparing files and storing them in a local folder or on Google Drive. Before publishing, you can set publishing options, such as packing in a ZIP archive and compressing HTML markup. Publishing is also supported. Double Click Studio.

So, if you are still thinking about what you can use to create advertisements for sites or just edit HTML pages, pay attention to the editor Google Web Designerbecause here there is all the necessary minimum for this.