Google Web Designer

What is Google Web Designer?

Google Web Designer is an advanced web application that’s built with HTML5 which lets you design and build HTML5 advertisements and other web content using an integrated visual and code interface. Using Google Web Designer’s design view you can create content using drawing tools, text, and 3D objects, and you can animate objects on a timeline. Once you’re done creating your content, Google Web Designer outputs clean human-readable HTML5, CSS3, and Javascript.

When you create advertising creatives with Google Web Designer, you can use a library of components that lets you add image galleries, videos, ad network tools, and more.

Google Web Designer’s Code view lets you create CSS, JavaScript, and XML files, using syntax highlighting and code autocompletion to make your code easier to write, with fewer errors.

System requirements

	Minimum	Recommended
Operating system	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later
Processor	Intel Pentium® 4 or AMD Athlon 64 processor	Intel Pentium® 4 or AMD Athlon 64 processor
Memory	2 GB RAM	4 GB RAM
Screen resolution	1280×1024	1920×1080
Application window size	1024×768 minimum	1024×768 or larger
Internet connection	Required for initial use after download, for updates, and for help access.	Required for initial use after download, for updates, and for help access.

The Web Designer interface

Google Web Designer has a large central area for building your projects and editing code. The central area is surrounded by a tool bar, a tool options bar, a timeline, and a set of panels that let you do several things, including modify elements, add components, and add events.

1. Tool panel  2. Tool options panel  3. Timeline  4. Color, Properties, Components, Events and CSS panels

The workspace

In the center of the Google Web Designer interface is the workspace. In Design mode, the workspace shows your images, text, and other elements visually, just as they will be displayed as they will appear in a browser. In Code view the workspace shows your code with appropriate color coding and formatting.

View bar

The view bar lets you choose between Design and Code mode, lets you preview your HTML and publish your ad, and lets you change the zoom level and which page you’re working on.

Tools

The tool bar contains tools for creating and manipulating elements on the stage and in the workspace. This includes tools for creating text and simple page elements, color selection tools, and 3D tools.

Tool	Description
Selection tool	Select and move objects in the workspace
3D object rotate tool	Rotate objects in three dimensions
3D object translate tool	Move objects in three space
Tag tool	Create HTML tags of any type by clicking and dragging on the stage
Text tool	Add text
Shape tool	Create elementary shapes
Paint bucket tool	Modify the color of elements in your project
Ink bottle tool	Modify the line color and stroke of elements in your project
3D stage rotate tool	Change your 3D view of the project
Hand tool	Change your view of the workarea
Zoom tool	Zoom in and out on your creative

Tool options

The tool options bar shows options for the currently selected tool. For example, when the text tool is selected, the tool options bar shows font and text layout options.

Timeline

Quick mode

Advanced mode

The timeline lets you create animations using keyframes. In Quick mode, the animation is created scene by scene; in Advanced mode you can animate each element separately.

Panels

The panels section of the interface contains the Color, Properties, Components, Events and CSS panels. Panels can be minimized or dragged to a different position in the panels section.

Open source components and licenses

Included Software and Licenses

The following open source software is distributed and is provided under other licenses and/or has source available from other locations.

Package name	License
Webfont	Apache license 2.0
LESS – Leaner CSS v1.3.3	Apache license 2.0
GL-Matrix	The zlib/libpng license
jsbeautify	MIT license
uglifyjs	BSD license
Codemirror 2	MIT license
Chromium Embedded Framework	BSD Simplified license
NSIS (Nullsoft Scriptable Install System)	zlib/libpng license, bzip2 license, and Common Public License version 1.0
Zip Utils	info-ZIP license, zlib license
JSON CPP	MIT license
Google Fonts	Open source font licensing

Mobile Trading

The Procyon Holdings (PROHD) name is expanding again as we push out into another development area — the Android framework. When I abandoned my BlackBerry, the choice to move to the Android platform was an easy decision. Market saturation, the development community, and fluidity between devices make this platform shine.

I’ve been having a few end user problems with the current iteration of our trading website. First, the native Android Gingerbread browser lacks SVG support, an issue that has bewildered me since I read about it. I can solve this issue by using another browser such as Opera, but I would like to use the native one.

Also working with a HTML + Ajax website on a device with a touch interface feels like you are not getting the full user experience. I want to scroll down lists with my finder, click and hold to expose options, and speed around menus.

Mobile Architecture

We had to expand our design and create a few new pieces to get data to the mobile world. New items include the creation of a daemon to simply database population, exposing data via XML, and working with an existing library to enable Push notifications.

Information Flow

The Daemon runs on our server, periodically pulls transactions from the Eve API, and places that information in our wallet table.

Our previous design was that you would have to hit the transactions webpage and it would trigger an update. Getting a page to refresh on a desktop connected via broadband versus a mobile phone is quite the different experience.

Android has a framework called C2DM(Android Cloud to Device Messaging) which enables you to send lightweight push notifications to devices.

Our vision is that when a sell order clears, a large/special sale has occurred, or a significant milestone has been reached, we send a notice. This will be visible on phone’s Status Notification Bar and cause me to act if deemed important. I have been forgetting to buy or trade a particular item after the sell orders have cleared. Forget things — loose profit.

Getting data out of our database required the creation of a webservice to produce XML output from our wallet table.

Here is an example of the sale of one item in our XML feed:

<?xml version="1.0"?>  
<TransactionList>  
<Transaction>  
<transactionDateTime>2012-04-19 06:21:04</transactionDateTime>  
<typeID>21096</typeID>  
<typeName>Cynosural Field Generator I</typeName>  
<quantity>1</quantity>  
<price>1948939.91</price>  
<profit>147803</profit>  
<stationName>STATION</stationName>  
<icon>21096_32.png</icon>  
</Transaction>  
</TransactionList>

Alpha Screenshot

This screenshot is our first proof of concept. We’re able to get information from an XML feed, display it, and get/cache images from the Eve image server. Major credit goes to my trading and corporation partner James, who has been doing the development work and educating me on the Android framework.

There is a lot we want to do with the mobile version. Menus, tabs, charts, reports, and the ability to add items to a shopping cart/wish list are all things on the drawing board.

Future Collaboration

This project is our first exposure to the Android framework and after the initial learning curve, we might perhaps coolabrate with the Aideron Robotics team on Aura. So maybe some of our trading mechanics will make their way into the Aura application.

XML to Array in php Function

function xml2array($contents, $get_attributes=1, $priority = ‘tag‘) {

if(!$contents) return array();

if(!function_exists(‘xml_parser_create’)) {
//print “‘xml_parser_create()’ function not found!”;
return array();
}

//Get the XML parser of PHP – PHP must have this module for the parser to work
$parser = xml_parser_create(”);
xml_parser_set_option($parser, XML_OPTION_TARGET_ENCODING, “UTF-8“); # http://minutillo.com/steve/weblog/2004/6/17/php-xml-and-character-encodings-a-tale-of-sadness-rage-and-data-loss
xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0);
xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, 1);
xml_parse_into_struct($parser, trim($contents), $xml_values);
xml_parser_free($parser);

if(!$xml_values) return;//Hmm…

//Initializations
$xml_array = array();
$parents = array();
$opened_tags = array();
$arr = array();

$current = &$xml_array; //Refference

//Go through the tags.
$repeated_tag_index = array();//Multiple tags with same name will be turned into an array
foreach($xml_values as $data) {
unset($attributes,$value);//Remove existing values, or there will be trouble

//This command will extract these variables into the foreach scope
// tag(string), type(string), level(int), attributes(array).
extract($data);//We could use the array by itself, but this cooler.

$result = array();
$attributes_data = array();

if(isset($value)) {
if($priority == ‘tag’) $result = $value;
else $result[‘value’] = $value; //Put the value in a assoc array if we are in the ‘Attribute‘ mode
}

//Set the attributes too.
if(isset($attributes) and $get_attributes) {
foreach($attributes as $attr => $val) {
if($priority == ‘tag’) $attributes_data[$attr] = $val;
else $result[‘attr’][$attr] = $val; //Set all the attributes in a array called ‘attr’
}
}

//See tag status and do the needed.
if($type == “open”) {//The starting of the tag ‘<tag>’
$parent[$level-1] = &$current;
if(!is_array($current) or (!in_array($tag, array_keys($current)))) { //Insert New tag
$current[$tag] = $result;
if($attributes_data) $current[$tag. ‘_attr’] = $attributes_data;
$repeated_tag_index[$tag.’_’.$level] = 1;

$current = &$current[$tag];

} else { //There was another element with the same tag name

if(isset($current[$tag][0])) {//If there is a 0th element it is already an array
$current[$tag][$repeated_tag_index[$tag.’_’.$level]] = $result;
$repeated_tag_index[$tag.’_’.$level]++;
} else {//This section will make the value an array if multiple tags with the same name appear together
$current[$tag] = array($current[$tag],$result);//This will combine the existing item and the new item together to make an array
$repeated_tag_index[$tag.’_’.$level] = 2;

if(isset($current[$tag.’_attr’])) { //The attribute of the last(0th) tag must be moved as well
$current[$tag][‘0_attr’] = $current[$tag.’_attr’];
unset($current[$tag.’_attr’]);
}

}
$last_item_index = $repeated_tag_index[$tag.’_’.$level]-1;
$current = &$current[$tag][$last_item_index];
}

} elseif($type == “complete”) { //Tags that ends in 1 line ”
//See if the key is already taken.
if(!isset($current[$tag])) { //New Key
$current[$tag] = $result;
$repeated_tag_index[$tag.’_’.$level] = 1;
if($priority == ‘tag’ and $attributes_data) $current[$tag. ‘_attr’] = $attributes_data;

} else { //If taken, put all things inside a list(array)
if(isset($current[$tag][0]) and is_array($current[$tag])) {//If it is already an array…

// …push the new element into that array.
$current[$tag][$repeated_tag_index[$tag.’_’.$level]] = $result;

if($priority == ‘tag’ and $get_attributes and $attributes_data) {
$current[$tag][$repeated_tag_index[$tag.’_’.$level] . ‘_attr’] = $attributes_data;
}
$repeated_tag_index[$tag.’_’.$level]++;

} else { //If it is not an array…
$current[$tag] = array($current[$tag],$result); //…Make it an array using using the existing value and the new value
$repeated_tag_index[$tag.’_’.$level] = 1;
if($priority == ‘tag’ and $get_attributes) {
if(isset($current[$tag.’_attr’])) { //The attribute of the last(0th) tag must be moved as well

$current[$tag][‘0_attr’] = $current[$tag.’_attr’];
unset($current[$tag.’_attr’]);
}

if($attributes_data) {
$current[$tag][$repeated_tag_index[$tag.’_’.$level] . ‘_attr’] = $attributes_data;
}
}
$repeated_tag_index[$tag.’_’.$level]++; //0 and 1 index is already taken
}
}

} elseif($type == ‘close’) { //End of tag ”
$current = &$parent[$level-1];
}
}

return($xml_array);
}

Share API

Reading and Creating Shares

Use the Share API to have a member share content with their network or with all of LinkedIn. This can be a simple short text update, similar to Twitter.  Or a URL with a title and optional photo. Or both.

You can also forward the shared content to Twitter and reshare another member’s share.

This feature replaces the deprecated Status Update API and fields.

Adding New Shares

To add a new share, you markup the content in XML and issue a  HTTP POST to the following URL:

URL

POST	http://api.linkedin.com/v1/people/~/shares

To have LinkedIn pass the status message along to a member’s tethered Twitter account, if they have one, modify the URL to include a query string of twitter-post=true.

Fields for the XML Body

Node	Parent Node	Required?	Value	Notes
share	—	Yes	Child nodes of share	Parent node for all share content
comment	share	Conditional	Text of member’s comment. (Similar to deprecated current-status field.)	Post must contain comment and/or (content/title and content/submitted-url). Max length is 700 characters.
content	share	Conditional	Parent node for information on shared document
title	share/content	Conditional	Title of shared document	Post must contain comment and/or (content/title and content/submitted-url). Max length is 200 characters.
submitted-url	share/content	Conditional	URL for shared content	Post must contain comment and/or (content/title and content/submitted-url).
submitted-image-url	share/content	Optional	URL for image of shared content	Invalid without (content/title and content/submitted-url).
description	share/content	Option	Description of shared content	Max length of 256 characters.
visibility	share	Yes	Parent node for visibility information
code	share/visibility	Yes	One of anyone: all members or connections-only: connections only.

Sample XML

Here is an example XML document:

<!--?xml version="1.0" encoding="UTF-8"?> 83% of employers will use social media to hire: 78% LinkedIn, 55% Facebook, 45% Twitter [SF Biz Times] -->http://bit.ly/cCpeOD Survey: Social networks top hiring tool - San Francisco Business Times http://sanfrancisco.bizjournals.com/sanfrancisco/stories/2010/06/28/daily34.html</submitted-url> <submitted-image-url>http://images.bizjournals.com/travel/cityscapes/thumbs/sm_sanfrancisco.jpg</submitted-image-url> </content> <visibility> <code>anyone</code> </visibility> </share>

Response

Returns 201 Created on success. It will also provide a Location HTTP header with a URL for the created resource. However, at this time, you cannot retrieve the Share from that location. It’s there for future compatibility.

Resharing An Existing Share

When a member does a reshare, they can pass along a previously shared item to their network. This can either be as-is, or they can annotate the share to provide their own thoughts. The process is similar to creating a new share, but you provide an attribution/id value instead of a content block.

You can only reshare a share with a content block. If this block is empty, you will get a 400 error saying “Specified share {s28311617} has no content”.

Read Retrieving Share Information for instructions to retrieve these value using the API.

URL

POST	http://api.linkedin.com/v1/people/~/shares

Fields for the XML Body

Node	Parent Node	Required?	Value	Notes
share	—	Yes	Child nodes of share	Parent node for all share content
comment	share	No	Text of member’s comment. (Similar to deprecated current-status field.)	Max length is 700 characters.
attribution	share	Yes	Parent node for information on reshared document
id	share/attribution/share	Yes	id of reshared document	Currently in the format of s12345678, so is not guaranteed to be an integer.Post must contain id if it does not contain content and id must be from a share with a content block.
visibility	share	Yes	Parent node for visibility information
code	share/visibility	Yes	One of anyone: all members or connections-only: connections only.

Sample XML

Here is an example XML document:

<!--?xml version="1.0" encoding="UTF-8"?> Check out this story! I can't believe it. s24681357 -->connections-only

Response

Returns 201 Created on success. It will also provide a Location HTTP header with a URL for the created resource. However, at this time, you cannot retrieve the Share from that location. It’s there for future compatibility.

Retrieving Share Information

A particular member’s current share is detailed in their Profile API, so you can get a member’s current share by requesting:

GET	http://api.linkedin.com/v1/people/~:(current-share)

Use the ~, id, or public profile URL to identify the user.

To retrieve a stream of shares for the member or their member first degree network, use the Get Network Updates API resource requesting the SHAR update type.

For the specified member also use a query parameter of scope=self:

GET	http://api.linkedin.com/v1/people/~/network?type=SHAR&scope=self

Omit the scope for their first degree network:

GET	http://api.linkedin.com/v1/people/~/network?type=SHAR

You will receive:

<!--?xml version="1.0" encoding="UTF-8"?> s12345678 1279577156654 83% of employers will use social media to hire: 78% LinkedIn, 55% Facebook, 45% Twitter [SF Biz Times] -->http://bit.ly/cCpeOD</comment> <content> <id>123456789</id> <title>Survey: Social networks top hiring tool - San Francisco Business Times</title> <submitted-url>http://sanfrancisco.bizjournals.com/sanfrancisco/stories/2010/06/28/daily34.html</submitted-url> <shortened-url>lnkd.in/abc123</shortened-url> <submitted-image-url>http://images.bizjournals.com/travel/cityscapes/thumbs/sm_sanfrancisco.jpg</submitted-image-url> <thumbnail-url>http://media.linkedin.com/media-proxy/ext...</thumbnail-url> </content> <visibility> <code>anyone</code> </visibility> <source> <service-provider> <name>LINKEDIN</name> </service-provider> <application> <name>Your Cool App</name> </application> </source> <current-share>

Fields for the XML Body

Beyond the fields listed above, you also receive:

Node	Parent Node	Value	Notes
id	share	Identifier for share.
timestamp	share	Time of posting in miliseconds since UTC. (Divide this number by 1000 to get the standard Unix timestamp.)
shortened-url	share/content	Short version of the submitted-url. If the submitted-url is generated via a URL shortener, this is the original URL and the submitted URL is the expanded version. Otherwise, this is a LinkedIn generated short URL using http://lnkd.in/.
resolved-url	share/content	The submitted-url unwound from any URL shortener services.
author	share/attribution/share	Information on the author of the original shared item.	Only appears when retrieving a reshare, not an original share.
name	share/source/service-provider	Platform where the share came from, such as LINKEDIN or  TWITTER.
name	share/source/application	Application where the share came from, such as the name of your application.

10 PHP programmers wanted

We are going to recruit 10 PHP programmers in our Chennai branch.  The candidate should have minimum 1 year experience in PHP and Joomla like open sources are added advantage.  If you know anybody who is looking for a job, please send their resumes to prabakaran@securenext.net or murugan@securenext.net .  We need the following details

Current CTC

Expected CTC

Referred By

Number of days to Join

Wanted :: Web Developer – PHP (10 Positions 2009)

SecureNext Software Solutions showcases the best designs for all its online and offline solutions & services. With us you will learn about an emerging field, work with world-class clients in a dynamic/entrepreneurial environment and have a free hand to experiment and try out new ideas.

Responsibilities/ Role Description:

• Will have to work on PHP, MySQL, Linux, XML, HTML, VB Script, JavaScript and Web Authoring tools etc.
• Will be required to do thorough analysis on Database Structures.
• Excellent Working knowledge of Codes and Syntax is essential.
• The incumbent will be required to work under pressure and stringent deadlines.

Desired Profile/ Skills:
M.Sc / MCA / B.Tech/B.E with minimum of 1+ years of experience as a Web Developer .

• Should have handled projects alone.
• Excellent Working knowledge of Codes and Syntax is essential with strong troubleshooting skills.
• Good understanding for the working and architecture of RDBMS.
• Knowledge of Open source is added advantage.Like(WordPress and Joomla, etc ..)
• Project Management skills (needs to demonstrate a degree of self- sufficiency and be a self starter).
• Should be aggressive enough to learn new technologies and work under pressure and stringent deadlines.
• Excellent communication skills (written and verbal).
• Solid understanding of Web Production process.

Note:- This is a Chennai based position. Kindly Send your Updated profile to baburaj@securenext.net