Google Launches Web Designer, A Visual Tool For Building Interactive HTML5 Websites

Google has released a new professional HTML5 design application on Sept 30th 2013 named Google Web Designer for building interactive HTML5 sites and ads. The Google Web Designer enables users to create animated HTML5 creative content, 3D effects, design view and code view. Google calls a professional-quality design tool, is now officially in public beta and available for download for Mac and Windows

google web designer
google web designer

 

Features:

  • Create Animations: Google Web Designer provide quick mode and advanced mode. In Quick mode, build your animations scene by scene and we’ll take care of the frames in between. In Advanced mode, animate individual elements using layers, easily changing the location of elements within the stack.
  • 3D Effects: Create and manipulate 3D content utilizing an array of tools and the power of CSS3. Rotate objects and even 2D designs along any axis, visualizing 3D transformations and translations as you author.
  • Design view and code view: While a visual tool is helpful, it can never represent your creativity, imagination and vision in full. That’s why you can flip back and forth between Design View and Code View as you work, immediately seeing any changes made to code reflected back in your designs.
  • Illustration tools: Import assets from any other creative suite or use the built-in illustration tools to create vector-style artwork – keeping your designs light. To create new HTML tags in your designs, just draw them in with the Tag tool.
  • Ad workflow: Google Web Designer makes it simple to publish ads through any platform. Choose from DoubleClick Studio or AdMob, or go for the Generic option to push content through any other ad network. No coding required.

Please follow the link to download Google Web Designer.

Add Speech Recognition icon to your html textbox

Wouldn’t it be nice if you could offer users where they can just speak instead of typing? Well all you need to do is to add keyword ‘x-webkit-speech’ to the existing textbox.

<input type="text" name="search" />

Try out a live demo – click the microphone icon and speak

To enable language based speech recognition add international language code to lang attribute of text box

<input lang="fr" type="text" name="search" x-webkit-speech/>

You can also set the language code at head section

<meta http-equiv='Content-Language' content='fr'/>

Currently, only Google Chrome supports the HTML speech input API and the microphone icon will be visible. For all other browser, it appears as normal text box.

Simple and stylish Drop down using CSS

We have found a simple and decent way to achieve stylish select dropdown using CSS. It works across all browsers, simple to implement and moreover stylish.

1. Create a normal select dropdown as follows:

<select id="ddlCountry">
   <option value=""> --- Choose ---</option>
   <option value="India">India</option>
   <option value="China">China</option>
   <option value="Pakistan">Pakistan</option>
   <option value="Sri Lanka">Sri Lanka</option>
</select>

2. Now wrap the select with a div tag

<div class="ddlWrap">
   <select id="ddlCountry">
      <option value=""> --- Choose ---</option>
      <option value="India">India</option>
      <option value="China">China</option>
      <option value="Pakistan">Pakistan</option>
      <option value="Sri Lanka">Sri Lanka</option>
   </select>
</div>

3. Basically we are going to make the opacity 0 and add a background image for that

.ddlWrap select {
   opacity: 0;
   width: 215px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   background: url("arrow_select.png") no-repeat 100% 0 #2D2D2D; //for IE
   -webkit-appearance: none; //for Google Chrome
   color: #fff;
   height: 32px;
}
.ddlWrap {
   width: 215px;
   overflow: hidden;
   background: url("arrow_select.png") no-repeat 100% 0 #2D2D2D;
   border: solid 1px #333333;
   border-radius: 5px;
   position: relative;
}

4. Now you will find a drop down with an arrow and no text to display, thats because the opacity is 0. Here we need to do a small tweak. We add addional span tag above the select and display the selected content.

<div class="ddlWrap">
   <span> --- Choose ---</span>
   <select id="ddlCountry">
      <option value=""> --- Choose ---</option>
      <option value="India">India</option>
      <option value="China">China</option>
      <option value="Pakistan">Pakistan</option>
      <option value="Sri Lanka">Sri Lanka</option>
   </select>
</div>

5. And update the style for span

.ddlWrap span {
   position: absolute;
   left: 10px;
   top: 5px;
}

6. Now with the help of jQuery we update the span with the selected dropdown text

$('select').click(function () {
   $(this).prev('span').text($(this).find('option:selected').text());
});

That’s it, we have done it. You can trigger a  ready event and update the selected content, if you do not wish to hard code ‘— Choose —‘.

Select drop down using CSS
Select drop down using CSS

 

Click here to download the full source code.

 

Courtesy: Biswanath Dey (BD)