Google releases a new Web Designing tool!

iwillnbd · Oct 1, 2013

Google has released a new web designing tool yesterday!

Check it out here:

Code:

[URL]http://www.google.com/webdesigner/[/URL]

Direct download link:

Code:

[URL]https://www.google.com/webdesigner/thankyou/[/URL]

EDIT

Since this has already been shared here, I would like to ask your experience with it !?

Conor · Oct 1, 2013

Looks cool

Gonna try it out. I like new things.

searchwiser · Oct 1, 2013

Not bad, Looks like WYSIWYG however

BusinessMagnet · Oct 1, 2013

It has already been shared here in BHW twice.

http://www.blackhatworld.com/blackhat-seo/white-hat-seo/611526-google-launches-web-designer-tool-convert-visual-html-css.html

http://www.blackhatworld.com/blackhat-seo/blackhat-lounge/611602-google-web-designer-html5-ad-designer.html

iwillnbd · Oct 1, 2013

Treeofl1 said:
Looks cool Gonna try it out. I like new things.

Do post your experience here!

iwillnbd · Oct 1, 2013

BusinessMagnet said:
It has already been shared here in BHW twice.

http://www.blackhatworld.com/blackhat-seo/white-hat-seo/611526-google-launches-web-designer-tool-convert-visual-html-css.html

http://www.blackhatworld.com/blackhat-seo/blackhat-lounge/611602-google-web-designer-html5-ad-designer.html

Woops! Didn't check.

Aty · Oct 1, 2013

Just another tool of theirs to spy on us, to get our accounts banned and our sites deindexed.

Gogol · Oct 1, 2013

This should go to the graphics section, and not in the blackhat SEO tools.

iwillnbd · Oct 1, 2013

aty1985 said:
Just another tool of theirs to spy on us, to get our accounts banned and our sites deindexed.

I was struck with a similar thought..

Conor · Oct 1, 2013

iwillnbd said:
Do post your experience here!

Well, first time dabbling has yielded the following results:

Code:

<!DOCTYPE html>
<html><head data-gwd-animation-mode="proMode"><meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJl0f009078e2ff6301b2f7d409a325f326"/>
    <title>undefined</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="generator" content="Google Web Designer 1.0.0.924">
    <style type="text/css">html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}


body {
  background-color: transparent;
  -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}


.gwd-div-zvzq {
  position: absolute;
  font-family: 'Times New Roman';
  text-align: left;
  color: rgb(0, 0, 0);
  border-image-source: none;
  border-color: transparent;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  top: 171px;
  left: 190px;
  width: 356px;
  height: 131px;
  -webkit-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1);
  -moz-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1);
  transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1);
  -webkit-transform-origin: 178px 65.5px 0px;
  -moz-transform-origin: 178px 65.5px 0px;
  transform-origin: 178px 65.5px 0px;
}


.gwd-gen-q4dzgwdanimation {
  -webkit-animation: gwd-gen-q4dzgwdanimation_gwd-keyframes 4s linear 0s 1 forwards;
  -moz-animation: gwd-gen-q4dzgwdanimation_gwd-keyframes 4s linear 0s 1 forwards;
  animation: gwd-gen-q4dzgwdanimation_gwd-keyframes 4s linear 0s 1 forwards;
}


@-webkit-keyframes gwd-gen-q4dzgwdanimation_gwd-keyframes {
  0% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: ease-in-out; }
  25% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: linear; }
  50% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(-0.5742929388, -0.0300978422, -0.8180964127, 0, 0.814824782, -0.1175060343, -0.5676732392, 0, -0.0790455255, -0.9926159639, 0.0920073535, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: ease-in; }
  75% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(-0.9934501027, 0.0860777357, 0.0751499624, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.1051702449, -0.4316478879, -0.8958902391, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.8, -0.095); }
  100% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(0.9943319734, 0.0023593972, 0.1062937437, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.0964770112, 0.4401405559, 0.8927309099, 0, 0, 0, 0, 1); -webkit-transform-origin: 50% 50% 0px; -webkit-animation-timing-function: linear; }
}
@-moz-keyframes gwd-gen-q4dzgwdanimation_gwd-keyframes {
  0% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: ease-in-out; }
  25% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: linear; }
  50% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(-0.5742929388, -0.0300978422, -0.8180964127, 0, 0.814824782, -0.1175060343, -0.5676732392, 0, -0.0790455255, -0.9926159639, 0.0920073535, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: ease-in; }
  75% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(-0.9934501027, 0.0860777357, 0.0751499624, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.1051702449, -0.4316478879, -0.8958902391, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: cubic-bezier(0.25, 0.25, 0.8, -0.095); }
  100% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(0.9943319734, 0.0023593972, 0.1062937437, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.0964770112, 0.4401405559, 0.8927309099, 0, 0, 0, 0, 1); -moz-transform-origin: 50% 50% 0px; -moz-animation-timing-function: linear; }
}
@keyframes gwd-gen-q4dzgwdanimation_gwd-keyframes {
  0% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: ease-in-out; }
  25% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: linear; }
  50% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(-0.5742929388, -0.0300978422, -0.8180964127, 0, 0.814824782, -0.1175060343, -0.5676732392, 0, -0.0790455255, -0.9926159639, 0.0920073535, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: ease-in; }
  75% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(-0.9934501027, 0.0860777357, 0.0751499624, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.1051702449, -0.4316478879, -0.8958902391, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: cubic-bezier(0.25, 0.25, 0.8, -0.095); }
  100% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(0.9943319734, 0.0023593972, 0.1062937437, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.0964770112, 0.4401405559, 0.8927309099, 0, 0, 0, 0, 1); transform-origin: 50% 50% 0px; animation-timing-function: linear; }
}
.gwd-gen-q4dzgwdanimation-gen-animation0keyframe {
  top: 171px;
  left: 190px;
  width: 356px;
  height: 131px;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-transform-origin: 178px 65.5px 0px;
  -moz-transform-origin: 178px 65.5px 0px;
  transform-origin: 178px 65.5px 0px;
}


</style>
  </head>
  
  <body>
    <div class="gwd-div-zvzq gwd-gen-q4dzgwdanimation gwd-gen-q4dzgwdanimation-gen-animation0keyframe">I am a text. Bow before me minion</div>
  


</body></html>

Gogol · Oct 1, 2013

Chrome only css3 rules as I fear

Treeofl1 said:

Well, first time dabbling has yielded the following results:

Code:

<!DOCTYPE html>
<html><head data-gwd-animation-mode="proMode"><meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJl0f009078e2ff6301b2f7d409a325f326"/>
    <title>undefined</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="generator" content="Google Web Designer 1.0.0.924">
    <style type="text/css">html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}


body {
  background-color: transparent;
  -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}


.gwd-div-zvzq {
  position: absolute;
  font-family: 'Times New Roman';
  text-align: left;
  color: rgb(0, 0, 0);
  border-image-source: none;
  border-color: transparent;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  top: 171px;
  left: 190px;
  width: 356px;
  height: 131px;
  -webkit-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1);
  -moz-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1);
  transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1);
  -webkit-transform-origin: 178px 65.5px 0px;
  -moz-transform-origin: 178px 65.5px 0px;
  transform-origin: 178px 65.5px 0px;
}


.gwd-gen-q4dzgwdanimation {
  -webkit-animation: gwd-gen-q4dzgwdanimation_gwd-keyframes 4s linear 0s 1 forwards;
  -moz-animation: gwd-gen-q4dzgwdanimation_gwd-keyframes 4s linear 0s 1 forwards;
  animation: gwd-gen-q4dzgwdanimation_gwd-keyframes 4s linear 0s 1 forwards;
}


@-webkit-keyframes gwd-gen-q4dzgwdanimation_gwd-keyframes {
  0% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: ease-in-out; }
  25% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: linear; }
  50% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(-0.5742929388, -0.0300978422, -0.8180964127, 0, 0.814824782, -0.1175060343, -0.5676732392, 0, -0.0790455255, -0.9926159639, 0.0920073535, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: ease-in; }
  75% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(-0.9934501027, 0.0860777357, 0.0751499624, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.1051702449, -0.4316478879, -0.8958902391, 0, 0, 0, 0, 1); -webkit-transform-origin: 178px 65.5px 0px; -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.8, -0.095); }
  100% { top: 171px; left: 190px; width: 356px; height: 131px; -webkit-transform: matrix3d(0.9943319734, 0.0023593972, 0.1062937437, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.0964770112, 0.4401405559, 0.8927309099, 0, 0, 0, 0, 1); -webkit-transform-origin: 50% 50% 0px; -webkit-animation-timing-function: linear; }
}
@-moz-keyframes gwd-gen-q4dzgwdanimation_gwd-keyframes {
  0% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: ease-in-out; }
  25% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: linear; }
  50% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(-0.5742929388, -0.0300978422, -0.8180964127, 0, 0.814824782, -0.1175060343, -0.5676732392, 0, -0.0790455255, -0.9926159639, 0.0920073535, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: ease-in; }
  75% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(-0.9934501027, 0.0860777357, 0.0751499624, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.1051702449, -0.4316478879, -0.8958902391, 0, 0, 0, 0, 1); -moz-transform-origin: 178px 65.5px 0px; -moz-animation-timing-function: cubic-bezier(0.25, 0.25, 0.8, -0.095); }
  100% { top: 171px; left: 190px; width: 356px; height: 131px; -moz-transform: matrix3d(0.9943319734, 0.0023593972, 0.1062937437, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.0964770112, 0.4401405559, 0.8927309099, 0, 0, 0, 0, 1); -moz-transform-origin: 50% 50% 0px; -moz-animation-timing-function: linear; }
}
@keyframes gwd-gen-q4dzgwdanimation_gwd-keyframes {
  0% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: ease-in-out; }
  25% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(0.4079526596, -0.1850647181, -0.8940501539, 0, 0.9130030819, 0.0826915543, 0.3994840164, 0, 0, -0.9792411128, 0.2026988975, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: linear; }
  50% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(-0.5742929388, -0.0300978422, -0.8180964127, 0, 0.814824782, -0.1175060343, -0.5676732392, 0, -0.0790455255, -0.9926159639, 0.0920073535, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: ease-in; }
  75% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(-0.9934501027, 0.0860777357, 0.0751499624, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.1051702449, -0.4316478879, -0.8958902391, 0, 0, 0, 0, 1); transform-origin: 178px 65.5px 0px; animation-timing-function: cubic-bezier(0.25, 0.25, 0.8, -0.095); }
  100% { top: 171px; left: 190px; width: 356px; height: 131px; transform: matrix3d(0.9943319734, 0.0023593972, 0.1062937437, 0, 0.0446778806, 0.8979257899, -0.4378734551, 0, -0.0964770112, 0.4401405559, 0.8927309099, 0, 0, 0, 0, 1); transform-origin: 50% 50% 0px; animation-timing-function: linear; }
}
.gwd-gen-q4dzgwdanimation-gen-animation0keyframe {
  top: 171px;
  left: 190px;
  width: 356px;
  height: 131px;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-transform-origin: 178px 65.5px 0px;
  -moz-transform-origin: 178px 65.5px 0px;
  transform-origin: 178px 65.5px 0px;
}


</style>
  </head>
  
  <body>
    <div class="gwd-div-zvzq gwd-gen-q4dzgwdanimation gwd-gen-q4dzgwdanimation-gen-animation0keyframe">I am a text. Bow before me minion</div>
  


</body></html>

Conor · Oct 1, 2013

g0g0l said:
Chrome only css3 rules as I fear

Apparently it's compatible in IE10+, Firefox and Safari... According to the export tool at least

Gogol · Oct 1, 2013

IE10+

Wait 10 more years lol

Treeofl1 said:
Apparently it's compatible in IE10+, Firefox and Safari... According to the export tool at least

AquaticGamer · Oct 1, 2013

I like the look of it. I will try it in the near future to test it out.

lostchiekurs · Oct 1, 2013

I like how it is already in 2nd position for keyword "web designer" google gonna google!

SEOHULK · Oct 1, 2013

Looks pretty basic IMO, noting useful except for pushing people out of "web designer" niche in SERPs ... :\

Gogol · Oct 1, 2013

Checked your code out. Indeed it is gonna support firefox as well as other modern browsers ( they have used -webkit and -moz rules together). Nice initiative by google

Treeofl1 said:
Apparently it's compatible in IE10+, Firefox and Safari... According to the export tool at least

iwillnbd · Oct 1, 2013

SEOHULK said:
Looks pretty basic IMO, noting useful except for pushing people out of "web designer" niche in SERPs ... :\

Yes, its not too fancy but i think it might help some people.

djhickory · Oct 4, 2013

very nice little app, tinkering with it right now, and love it
thanks for the heads up

clpik · Oct 6, 2013

Thanks OP, gonna check it out. Though I wouldn't be surprised if it's actually used to spy on us

Google releases a new Web Designing tool!

Power Member

Elite Member

Regular Member

Power Member

Power Member

Power Member

Elite Member

Administrator

Power Member

Elite Member

Administrator

Elite Member

Administrator

Elite Member

Junior Member

BANNED

Administrator

Power Member

Junior Member

Regular Member

Main Menu

Marketplace

Making Money

BlackHat World