Friday, July 10, 2015

Google Sites: New Features and Front End Techniques

Google Sites is a (static) website generator platform by Google.

There are themes and gadgets (the provided ones or custom) we can add to our Google Sites.

New Features #

These are some of features I noticed just now:

  • Canonical URI setting. I think that's pretty much new.

    To access that, go to your Setting > General > scroll down to "Canonical URI".

  • There's the Mobile setting.

    The same page as above, just scroll down to "Mobile".

  • Security (embedding related) setting.

    It's on the same page as two settings above.

Common restrictions #

  1. Unlike Blogger, we cannot edit the HTML part of the Google Sites directly. The separated settings can be found on your Google Sites setting page.
  2. On the page, all separated style and script tags will be stripped. Inline script will also be stripped. Only inline styling will work.
  3. The gadget script will work only for the gadget. It can't be used to control the whole page because it's an iframe. Sort of sandbox-ed application.
  4. The footer of Google Sites cannot be removed.
  5. The sidebar or footer cannot contain any of the (custom or predefined) gadgets.
  6. Google Sites doesn't allow us to put new AdSense to be shown on it now. But your previous AdSense will continue to work. This is the announcement

  1. Creating a custom gadget #

    This only works on the main (center) page, not for sidebar nor footer.
    It's like creating an iframe for your page but wrapped in XML.
    This can contain any of HTML tags and it can pull resources from external sites. Front end only.

    The steps:

    • Your application must be wrapped with this:
    • After you've done tinkering the HTML, save the file as xml. Then upload that to your Google Sites Attachments.

      How to access the attachments:

      If you're logged in, click the site you wanna manage > click the gear icon (more actions) > Manage site, then scroll to Attachments.
    • On your attachment, right click the "Download" link of that recently uploaded xml, to get the url of the file.
    • Go to the page where you want the application to appear. Edit the page (click the pencil icon).
    • Then hit Insert > ... More gadgets... > Add gadget by URL
    • Paste the xml url you copied earlier. Remove the additional parameter at the end of the url, which is started by a question mark.
      For instance: ?attredirects=0&d=1
    • Click "add", and set the height and width and extra settings for the gadget.
    • Preview the gadget. If it's good enough, then save it.

    One custom gadget tutorial here is about embedding Twitter Timeline, you can read about it right there

  2. Inline CSS #

    On your page, click the pencil icon to show the editor > hit the <HTML> button. You can see bunch of HTML elements of that particular page.

    Inline CSS can be declared by adding style attribute on the element.
    For instance, you wanna put styling on a div element.

    Let's assume previously it looks like this

    Then to add inline CSS, put it like so:

    It means, the div element now has custom background color, padding, border-radius, text-align, and margin CSS properties.
    If you close the HTML editor, you'll see it (the div element) has the declared styling.

  3. Embedding #

    We can embed external things (webpage, Google gadgets, forum, etc) on Google Sites.

    More info at this support page

No comments:

Post a Comment

Tell me what you think...