Thursday, December 19, 2013

Chef LeeZ How to merge a Google Web Designer - GWD - Banner Ad into a GWD HTML page.

Chef LeeZ has been told all along that you can't marry the HTML GWD page and an GWD ad but we've proven you can!

Here's the how we did it.

Use iframe code as follows and place your own ad URL in place of ours. We placed this code as the first set of codes immediately following the first <body> .

It's in two parts the first part is the position of the top left corner and width being the width of the ad.

2nd part is the iframe and its size.  We don't want scroll bars so they are the same size. A smaller size in the iframe than in the position will result in scroll bars.

 <body>
    <div style="position:fixed;top:0px;left:50px;width:700px;background-color:white;" class="gwd-gen-wh8agwdanimation">
      <iframe width="700" height="150" ;="" seamless="" src="http://www.cookingschoolsintl.com/kruzon/KrGwdHdr1/index.html"></iframe>
    </div>

You can see it in action at http://kruzon.com





Sunday, December 8, 2013

Google Web Designer GWD hyperlinks not working - fix



Today we published our 4th Google Web Designer Html 5 WYSYWIG website. http://cookingschoolsintl.com This site presented us with a new bug/problem to figure out.

When saved, copied then pasted into related file on our host server this nav bar text box was editable on the web and did not act as hyperlinks. Notice the red code below as it was the problem.

<div class="gwd-div-okod editable" g_editable="true" role="textbox" contenteditable="true">
<div><span class="gwd-span-lxzu"><a href="http://cookingschoolsintl.com" style="color: rgb(255, 0, 0);">Home</a> / <a href="http://chefleez.com/Reserve.htm" target="_blank">Reserve</a>&nbsp;/ <a href="http://chefleez.com/Reviews.htm" target="_blank">Reviews</a> / <a href="http://chefleez.com/Classes.htm" target="_blank">Classes-Courses</a> / <a href="http://chefleez.com/Recipes.htm" target="_blank">Free Recipes</a> / <a href="http://chefleez.com/Recipes.com" target="_blank">Free Tutorials</a></span>

</div> 

The fix took hours to figure out as it was the first time it showed up in the 4 sites we have now published using GWD. 
The fix is to be sure all containment boxes are outlined with a broken line before saving and copying and you will save yourself much frustration figuring out the reason the hyperlinks did not working was the containment box was still highlighted with a wide blue (editing mode) outline when saved and copied. 

Tuesday, December 3, 2013

Google Web Designer GWD - SEO add tittle, description, keywords

When editng your HTML Google Web Designer GWD code you will need to add some SEO being a <Tittle> <description> <Keywords> to your pages. Chef LeeZ  index page has the following code inserted in the code view.

<meta name="REVISIT-AFTER" content="http://chefleez.com/index.htm">
<meta name="ROBOT" content="All">
<meta name="RATING" content="general">
<meta name="DISTRIBUTION" content="global">
<meta name="LANGUAGE" content="EN">
<meta name="ABSTRACT" content="Chef LeeZ Thailand culinary arts Thai cooking school Bangkok vegetarian,
vegan and omnivore cooking courses, classes and lessons including fruit sculpture and vegetable carving">
<meta name="description" content="Chef LeeZ Thai Cooking School, Cooking Class in Bangkok is Trip Advisor #1 school, class or course since 2011. ">
<meta name="keywords" content="cooking class Bangkok, cooking class Thailand, cooking school Bangkok, cooking school Thailand, thai cooking Bangkok, thai cooking class, thai cooking school, class, cooking, school, bangkok, thai, thailand">
<title>Chef LeeZ Thai Cooking School Bangkok, Thai Cooking Class in Bangkok, Thailand Culinary Arts, Fruit Sculpture Classes</title>

Perhaps we ave more than is necessary.

Google Web Designer GWD - Interstitial not functioning on opening saved file

This is something unexpected .. today we opened a save interstitial site to rename the pages but we found the site content on the only page with content was all  visible in design view but  Preview showed a blank page.   Changing the pages names may have had something to do with this as the new name of the page did not transfer to the code view. Without a search and replace function finding all the related  pages of SameName may simply fail. Checking the saved images folder we found it empty as in no images. Where did they go?

Moving the content around on the page did not make it show on the preview nor did newly added content show in the preview.

The new set of test pages will be renamed as they are created before we add any content. Then the content will be added and saved and checked for whats there when reopened same day and the next day.


Sunday, December 1, 2013

Google web Designer - GWD - inserting an GWD created add

Our parent company Kruzon has created a two page website using Google Web Designer GWD and we created an GWD Add with hopes of using it as a page header ad both work 100% independently of each other. However merging the two using the insert code

<object data="http://www.cookingschoolsintl.com/kruzon/KrGwdHdr1/index.html" width="700" height="150" class="gwd-gen-tdxlgwdanimation gwd-object-bgqv"></object>

 which supposedly inserts a whole web page which the Add is (as it creates an Index.html page that can't be renamed and still function) into an existing pages html code.  Our test results in the original text set at 150 left and 150 from top to animate this text to move up to 150 left and 0 top then the add comes in from underneath making the whole page not readable.  Attempts to set the location of the Add fails to save and it always comes in at 0 left and 0 top.

I believe I heard one of the videos (East Indian English making it extremely hard to understand) say you can't insert an add into a GWD HTML document. Why?

What it does tell us though is if you create your web site using the interstitial setting adding a named page for each page of your site the created add should be operable as a regular site. This is our next GWD project.
 

Google Web Designer - inserting a form

Chef LeeZ found no way to insert html code fragments except to go into the code view and look for the text ( no search option as yet) what you want to appear above your form and paste the forms code (provided by the form designer as in Pay Pal) into the code view.

When you return to the design view you will see the new container box which you can highlight and adjust the location by drag and position but better if you use the right had location settings.

We found Chef LeeZ Contact Us  form insertion created a div box far off to the left of where the form appears on the page.  It is so far off to the left that we had to assign it a -300 position get the form to sit where we wanted it to sit on the page.

Wednesday, November 27, 2013

Google Web Designer - Editing Text

Editing Text is the most problematic of the feature tested thus far.

Read the preceding two blogs as this blog will make more sense after you have read them.

When first creating text all tested functions of text work fine but upon editing there are a number of bugs and the following are the work a-rounds we used to polish and finish adjusting http://chefleez.com to a central position and 700 px wide using Google Web Designer.

Positioning and Size of containment boxes - see related blog

Adjusting sizes of text.

Centering left aligned text.

Changing color of specific items

Chef LeeZ - work a-round for editing the above is follow the steps below in the specific order and you will have less frustration and accomplish what you are after. First step is to create a copy of the page that you are about to edit so you can always go back to it to if necessary.

1) select the individual text box
2) select the text tool (the T in a box on the left hand tool bar drop down) and click inside the selected box) click again at the start of the text.
3) ctrl A to select all
4) ctrl C to copy all
5) click on the outside edge of the box so as to create a light blue line defining the selected box
6) click your delete (del) button to remove the box and contents (don't worry you can undo many steps backwards)
7) starting from the top most left corner of where you want the new box is to begin, with the text tool still selected , you will see a + sign align with other boxes. To begin the new box right click, hold and drag the outline to the desired size and end location. Let go when positioned and sized (you can always edit this later see position and size blog to edit).
8)  Click inside the new box, select your text position now (from text tool bar options top of screen), left, center, right).
9) Ctrl V to paste the last saved text into the new box.
Save Project 
10) immediately go about highlighting individual text for sizing and or changing colors
11) After sizing the highlighted text click anywhere inside the box (not outside the box) and your adjustment should be visible. If not try your return or enter key.
Save project

Correcting or changing hyperlinks on text requires locating the link info in the code and changing it on the code and you will have the change on the preview.

Editing text in Google Web Designer beta 1.0.1 is still extremely BUGGY! but the above work a-round, once we discovered, it has greatly reduced the time required to build and especially to edit Chef LeeZ Google Web designer built, cross platform, HTML5 website. http://chefleez.com

Note: when editing long pieces of text we found it necessary to save the project after every color change and close the page and reopen it.  We also found that following many of the change saves the screen view is corrupted showing text as having been deleted. Reopening the saved file will prove if the changes were saved or if you have to repeat the last edit over again.







Google Web Designer; Editing Position and Size

If you read basic design and set up before reading this blog, this blog will make more sense.

Let's talk of placement of your containment box as the first edit and you will find on the right hand side of your work area a drop down set of controls and therein is a POSITION AND SIZE tab and visible when this tab is open is where you can set the size and the position of the selected object containment box (frame). Do pay attention to your rulers for guidance as to where to set the Left, Top, Width and Height of the containment box.

Left:       a setting of zero is farthest left edge of page

Top:       a setting of zero is the top edge of the page

Width:    this sets the farthest left the box and contents can stretch across

Height:   sets the distance down from the top of containment box

Using the Position and Size controls to adjust your contents location on a page is much more accurate, easier and quicker than the drag and drop alternative.

When moving all the contents together as one you must first select the select/move arrow (top left drop down control option) then you can "ctrl A", to select all, then adjust the POSITION and SIZE controls all contents basic left, Top, Right and Bottom locations. If you want all except one two containment boxes you can select all then Ctrl Click to deselect specific boxes within the select all grid shown.

When moving more than one but not all objects with the selection move arrow selected drag the dotted line created by shift drag through the boxes you wish to select and let go of the drag selection then adjust the POSITION and SIZE numbers for the selected containment boxes.

Tuesday, November 26, 2013

Google Web Designer; Tips for Initial Design

Chef LeeZ, learned of the existence of Google Web Designer "GWD" from one of the near 300 social networks Chef LeeZ is a member of. Yup, you can Chef LeeZ on near 300 social networks. Check your favorite and follow or friend us and let us know the URL of your favorite site you don't find  ChefLeeZ.

Prior to GWD our websites were built using (MS Publisher) but they discontinued its related WYSYWYG (what you see is what you get) website part of the product and over the past 2 years Chef LeeZ has looked at and tested more than a dozen free WYSYWYGS rejecting all of them for one or more reasons. We were immediately pulled into building a test site using  GWD as GWD was promoted as a FREE CROSS PLATFORM HTML5 WYSYWYG.

It is important to understand GWD is a beta project which means its not for everyone as it is expected its users will find the bugs and report them so they can be added to a priority list of necessary fixes.  This blog is about what we discovered as work a-rounds for the bugs we found, and there are lots of bugs right now, which resulted in what you see as a GWD website for http://ChefLeeZ.com. and http://KruzOn.com.

The mobile device functionality of the new GWD sites were reviewed in Portland U.S.A on a Motorolla phone, from inside Canada on a I-Phone, and from inside Thailand on a Samsung Galaxy all having 5 inch or less screens so as to check the cross platform functionality.  GWD is not, out of the box, cross platform! It takes some muckin around to make it cross platform. We'll save you some time if you follow what Chef LeeZ did below to make GWD work cross platform.

Three other sites we have scheduled to rebuild with GWD were built with MS publisher are http://CookingSchoolsIntl.com, http://ThaiCookingSchoolBKK.com, http://xoproperty.com.

General Page layout:

First step will be to select the HTML option mid way down on the GWD menu options.

So lets start with a General or Template page design statement. We followed the basic design of Facebook, Twitter, and many many others being put the content in the middle and leave the sides blank for later design input. After many hours of muckin around we found that a left border of 150 px with a right border of 850 px worked on all platforms: internet explorer, Google chrome, smart phones and androids o/s above 4.0.

We recommend setting up with the default text size of 16 px and enlarge only where the text will have a minimum of 7 px to spare on the right margin so as to avoid overlapping texts on smart phone screens.

We adopted a basic two column site the first column starting at zero top and 150 left, the second column start left at 300 px but remember this is a WYSYWYG and you are not restricted by a static two columns so you will see text boxes on our sites that are a full 700 px wide while the text boxes following a two column concept will start at 300 px or 302 px (if beside a heavy picture like a logo) and be 550 px or 548 px wide depending on what they are up beside having a left margin 300 px.

Once you have your basic info input you will come up against the next biggest bug filled challenge and that is editing the content and EDITING GWD WEBSITES is the subject of our next post.

All this thinking makes me hungry for gourmet Thai cuisine. Chef LeeZ offers over 60 free vegan or meat gourmet Thai cuisine recipes and how to tutorial videos. Visit us and taste the difference.