Turtlebite's Blog » gaia framework

Site XML Manager for Gaia

Christian — Fri, 12 Nov 2010 14:22:00 +0000

A few days ago I launched my new online xml editor. Now I like to show you how you can use this editor to manage your site xml files for your Gaia websites. As mentioned in the introduction post, this xml editor can be formed to suit your needs by using a so-called configuration file. In this file, which also is a simple xml file, you describe how your final xml file should behave.

Have a look at this screenshot:

As you can see, there is a loaded Gaia site.xml file. It’s not really convenient to only read “page, asset, page, page, asset, page…” and so on. In the case of a site.xml file of Gaia it would make more sense to show the content of the attribute “id” instead of the plain node name itself.

Let’s look at the next screenshot:

It is the same site.xml file, but with a few significant differences: Now the configuration file is loaded (notice the green bottom bar), the nodes are better labeled and you can distinguish “page” and “asset” nodes by there color. In the node attributes window, you can see that there are much more attributes available. The first three are actually used (“id” and “src” are required ones), the others (light grey) are just one click away if needed.

Check it out:
I have set up an extra url: http://www.online-xml-editor.com

If you want to check out the configuration files, click “login“, then enter user=”demo“, password=”advanced”
In case you are lazy like me and want to automatically load the Gaia configuration file, enter user=”gaia“, password=”gaia”
I’ve added 3 site.xml examples. Be sure to import your site.xml files too!

For in-depth information, be sure to visit the documentaion of the Online XML Editor.

You will also find a configuration file for the global navigation and some example files under “File -> Load XML”.

Happy coding!
Christian

SWFAddress SEO solution for Gaia Flash Framework

Christian — Thu, 26 Mar 2009 12:51:29 +0000

UPDATE April 15, 2010: If you are already using Gaia and are happy with it, read on. At the time I wrote this post I was also using Gaia. But I was not so happy with the SEO features of Gaia and I created my own open source framework called FLEB. It is a complete Flash + SEO solution without compromises and has improved express install. Be sure to give it a try!

—————————————————————————————————-

March 26, 2009

I’ve been using the SEO solution of SWFAddress for more then 2 years and I’m completely happy with it.

You can find the demo here. It uses Javascript and mod_rewrite to provide clean urls. In Gaia, you can SEO-scaffold your project. It will create html pages for each flash page, which in fact is very nice if you have a small website with no more than 10 to 15 pages. There is nothing to say about that. But if you have a large project, a website that dynamically generates content, it would not be wise to create thousands of physical html pages on your server. So here we need another solution. Check out this flash site, it has over 16’000 pages in the Google index…

The other drawback is that it does not generate “nice” urls. It looks something like this http://www.mydomain.com/news.html#/about-us/
when I actually want this:
http://www.mydomain.com/#/about-us/

The original SWFAddress SEO solution:

…and here is what it looks like when implemented in Gaia:

Use the context menu (right-click) to navigate. Now deactivate Javascript, navigate, activate it again, navigate… and always watch the browser address bar.
Another nice thing about this implementation is that the navigation menu is dynamically created by parsing the site.xml. This is done using SimpleXML, so be sure you have PHP 5 installed!

Overview

Download all the source files here.

Before you upload the files to your server, open the file .htaccess and change this line…
RewriteBase /wp-content/data/gaia_swfaddress_seo_demo
…to the folder where your uploaded files will be.

Please note that for this SEO solution the Gaia site attribute “landing” is required! This attribute is used to determine if a menu item is active (clickable) or not. Check seonavig.php for more info.
The content of the site is defined in datasource.php. This file is accessed by index.php and dynamicContainer.swf.

Questions? Suggestions? Let me know!

Happy coding!
Christian

Global navigation for Flash and Gaia Flash Framework

Christian — Wed, 25 Feb 2009 19:10:41 +0000

Introduction
My own AS2 website framework was almost finished when AS3 came out. I knew some day I would have to port it from AS2 to AS3. At the same time I planned to do it a lot better, because on the long way of programming my AS2 framework I had been learning a lot about OOP and I wanted to do it much better in the next version. But I came to realize that it would take a very long time to do it the way I wanted it, so instead of reinventing the wheel I started to search for a solution. After some time I came across the Gaia Flash Framework of Steven Sacks and after a while studying it, it hit me like a thunderstroke. I realized it was all there: the handling of loading/unloading content pages, the implementation of swfobject and swfaddress, a xml setup file for the site structure. And, most important: It it a framework others are using as well, so all of a sudden the times of having an individual framework for almost each website was gone. From now on it was easy to work together with other flash designers/coders on the same project. It was just perfect. There was only something missing I had in my AS2 framework: A global navigation system! But, as I had much time left because I didn’t have to port my framework to AS3, I put some extra time into developing a global navigation that can be used either stand alone or seemlessly integrated into Gaia.

See life demo

How does it work?
The global navigation consists of 3 parts: a SWF of a single button with rollover, rollout, press etc. states and a text label, an XML file containing the structure and a class (in fact there are 3 main classes, but you don’t need to worry about them), which mixes everything together and spits out a neat navigation.

See samples and download source code here.