Turtlebite's Blog » htaccess http://blog.turtlebite.com Flash CMS Framework, Fleb Framework, Global Navigation and other ActionScript Stuff Thu, 17 Nov 2011 06:01:29 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Introducing the Fleb Framework! http://blog.turtlebite.com/introducing-the-fleb-framework/ http://blog.turtlebite.com/introducing-the-fleb-framework/#comments Sat, 01 Aug 2009 12:53:05 +0000 Christian http://blog.flashcmsframework.com/?p=543 fleb-overview_smallHi everyone! I have created my own framework to build pure flash websites, or short: flebsites :-) . Let me introduce the Fleb Framework. But why another framework when there is the wonderful Gaia Framework around? Let me explain: I really like the Gaia Framework, I have used it for my last websites. As I wrote in my very first post in the Gaia forum, I had my own framework coded in AS2 and I was thinking of porting it to AS3. The point was that this AS2 framework was kind of a mess,  so porting it to AS3 would have been like coding it from scratch. Then I discovered Gaia and all of a sudden I could jump into an AS3 framework and did not have to code my own. But there were two things I missed in Gaia: a global navigation and a more advanced SEO technique. As time went by I solved both problems: creating a global navigation system and a SEO solution for Gaia. But there was still something else I had to do same hacking: multi language support. The fact that I have never really used the Gaia panel, which is one of the core features, was yet another reason. Whenever I start with a new website, I like to reuse code from the previous one, that is why I didn’t use the Gaia panel which always scaffolds a new and empty setup I have to edit. Please don’t get me wrong: Gaia is a wonderful framework which is available for AS3 and AS2 (Fleb Framework is AS3 only),  I still highly recommend it for everyone (for example, there is no context menu “out of the box” in Fleb), but it simply did not match my way of working anymore. (And I just could never get used to the “/#/home” in the address bar…)

What is the Fleb Framework?

A front end flash framework. It focusses heavily on SEO, based on the example found at asual.com. Because SEO was (and still is) always a discussion point wether to create a website in flash or html. I always try to do everything in flash, so I had to find a way to wipe out the arguments against flash. ;-) Check out the movie below to get an idea and play with the demosite online.

www.youtube.com/watch?v=WQRa8G_7gqI

Overview of the Fleb Framework

In order to use the framework you need to enable mod_rewrite in .htaccess file. It uses PHP and XML. Just read on for more details.

Fleb Framework Overview

Fleb Framework Overview

1. index.php

The index.php embeds base.swf. It uses SWFObject to detect the flash plugin and SWFAddress for URL rewriting (by using mod_rewrite in .htaccess). Every request is rerouted to index.php.

2. base.swf

This is the base of your website. Its whole purpose is to load the main website (main.swf, see 3). It contains only the neccessary setup and a preloader. This SWF should be kept as small as possible in order to display the preloader very soon.

3. main.swf

This is where the “brain” of the website resides. In main.swf the global navigation is initialized, the content (pages) is handled (preloading, fading in/out, crossfading, unloading etc.) and event handlers are added (SWFAddress, navigation, language etc.). All is open for you to finetune, extend and so on.

4. [content].swf

Your actual content. I’ve put the name in square brackets because it could be any name, like “about_us.swf” or “products.swf”. It’s completely up to you how you create these content SWFs.

5. structure.xml

This is the “plan” of your website: It contains the title, description, keywords of your website as well as the navigation structure and the source XML files with the content. Here is an example:

<structure>
<site>
<title>Flebsite Demo</title>
<description>This website is a pure flash website, or short: a flebsite!{Dies ist eine reine flash website, oder einfacher: eine flebsite </description>
<keywords>flash,website framework,cms</keywords>
</site>
<navigation>
<button id="home" btnSWF="mainBtn.swf" btnPosX="0" btnPosY="0" btnSpacingX="5" btnAddLabelSpace="10" btnLabel="Home{Startseite" btnStayActive="false">
<data swf="" source="home" seosource="_page.php" title="Welcome to %site%{Willkommen! - %site%" address="/en/{/de/" keywords="%site%" description="%site%"/>
<yournode test="any data"/>
</button>
<button id="about_us" btnSWF="mainBtn.swf" btnAddLabelSpace="10" btnLabel="About us{Über uns">
<data swf="_page.swf" source="_about_us.xml{_ueber_uns.xml" seosource="_page.php" title="About us - %site%{Über uns - %site%" address="/en/about-us/{/de/ueber-uns/" keywords="about us,%site%{über uns,%site%" description="about us - %site%{über uns - %site%"/>
<yournode test="hello world 1">This is text of yournode 1</yournode>
<yournode test="hello world 2">This is text of yournode 2</yournode>
</button>
</navigation>
</structure>

6. [contentData].xml

Holds the data of your content pages. This XML file is loaded in the SWF and also in PHP for SEO. I prefer to use XML whenever possible instead of JSON/PHP to store content because XML can be loaded directly into an SWF while testing in the Flash IDE. Here is an example:


<page>
<title>About us</title>
<body bgColor="699306"><![CDATA[ABOUT US: But I must explain to you how all this mistaken.......]]></body>
<pic url="images/b6nature_animals_sea000.jpg">This is a nice description of the image for SEO!</pic>
</page>

7. seonavig.php

This file is included in index.php. It parses structure.xml and creates the navigation for SEO. With correct indentation etc.

8. datasource.php

datasource.php is also included in index.php. It parses structure.xml and stores the navigation data in an object. It than compares the SWFAddress value to the parsed address values of structure.xml and loads the corresponding content source file (page.php, see next point) for SEO.

Update 08/06/2009: Please have a look at this post. I have merged “seonavig.php” and “datasource.php” into “structure.php” to make it all clearer.

9. [page].php

As in point 6 I have used square brackets because these PHP files can have any name. Usually there is always a pair of a PHP and an XML file. I use this to parse the content XML file for SEO. page.php is only used to load data for SEO, either by parsing the XML file, by a MySQL query or JSON etc.

Conclusion

The Fleb Framework will be available open source very soon. As with my other code, I will create a documentation for this. The FLAs are already well commented, so there will be a lot of information in the code.

Stay tuned!

Christian

]]> http://blog.turtlebite.com/introducing-the-fleb-framework/feed/ 21 SWFAddress SEO solution for Gaia Flash Framework http://blog.turtlebite.com/swfaddress-seo-solution-for-gaia-flash-framework/ http://blog.turtlebite.com/swfaddress-seo-solution-for-gaia-flash-framework/#comments Thu, 26 Mar 2009 12:51:29 +0000 Christian http://www.flashcmsframework.com/?p=254 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:
SWFAddress SEO Sample Flash vs no Javascript

…and here is what it looks like when implemented in Gaia:
Gaia Flash versus no Javascript

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

Gaia SWFAddress alternative SEO solution

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


.

]]> http://blog.turtlebite.com/swfaddress-seo-solution-for-gaia-flash-framework/feed/ 39