I'm going to build a website which will be completely in flash (there will be a html version for SEO), but I still don't know what's the best approach for this.
The flash website will receive custom xml files to display content. What would be the best way to render the xml files in Umbraco 4.5? I can use XSLT to render the xml, but I can also use Linq to Umbraco for this. In some situation there needs to be quite some business locig to render the xml.
I'd like to hear some opinions from the most friendly community out there :).
Yea, the 2 approaches I'd probably look at are /base or templates that return XML.
Alternate templates are quite good though as you can easily build your HTML website, then just have alt templates that return XML versions to feed to flash.
Thanks for the replies. My idea so far was an alternate template wh
ich could return the xml, but I didn't know if I should do it with XSTL or Linq to Umbraco. Now /base seems like a nice alternative :). Is there some good documentation on /base? So far I've only seen a few wiki pages, but nothing really well documented. I saw a tweet that Sebastian is going to write a blog about it :). Seems interesting.
This WIKI helped me implement /Base for my customer. Base is great when you need to post values from flash also. XSLT and Alternative templates could be faster if you only need to display xml. I would spend some time(hours not days ;-)) using both methods and see what works best in your situation.
@Richard Thank you for the information. There is 1 form in the website (subscribe to a newsletter) and for the rest we only need to display data. I'll look into both to see what's the best solution :).
At the start of this year we launched Warner Bros Australia which is a full flash website: http://www.warnerbros.com.au/
It runs a custom API to do all the requests, a lot of which end up going via Examine. The biggest hurdle with doing full-flash sites is that flash isn't really designed do do pages, it's not dynamic like a 'html' site is. You'll probably have to use a combination of different data access methods, saying t hat /base will do it all, or altTemplates or anything will restrict what you end up doing.
I really hate using xml between flash and server. That is an old fashion that I abandoned once flash remoting was available. I love Weborb.net remoting and I´ve implemented it in several projects. But it´s not open source, and my current project had no budget for anything else. There is a community edition for free, but the licence just let you use one weborb instance per server. And my server has already one... FluorineFx? I think it´s kind a death project.
I gave /base a look, and I didn´t like to add a line to an XML for each method or service, I didn´t figure out how to serve JSON and I wanted to have complete control about how the data was served, so I decided to use JSON webservices, made by my own, and everything was pretty easy and fast.
Flash and Json is the perfect combination. If you use XML, you will have to parse every response data from server. With Json the basic objects like Number, Array, String... comes already typed and thats a big advantage, and object mapping between .NET and Flash was correct in all cases. You just serve a generic collection with .NET and it will be an ActionScript Array. You serve a typed object and Flash will get a simple ActionScript "Object". My comoding here was HashTable. For example, my home page needs 2 collections of data. This is the easy way:
[WebMethod(Description = "Devuelve datos para Home")]
I created a webService in the site root (EnigmaDataService.asmx). In the code behind I added methods to communicate with flash directly. Here you can see 2 public methods:
[ScriptService]
[WebService(Description="Servicio de datos para cliente Flash", Namespace="www.enigmasp.com")]
The first one retrieves an array of "NewsItem". The second retrieves the item detail. I made several utilities within a class "UmbracoToFlash" to identify nodes or section nodes (UmbracoToFlash.GetSection("News")), get children and parse some data (like checking a media node id to convert it to the file url).
Once your web services are ready, you just need to know how to call them from Flash, even with parameters. I had some trouble at first because I wasn´t sending correct Json serializated paramaters, you have to take care about that.
Here is an example of a request to call the methods above with ActionScript:
var request:URLRequest = new URLRequest(serverRoot + "/flashBridge/EnigmaDataService.asmx/News"); request.requestHeaders = [new URLRequestHeader("content-type", "application/json; charset=utf-8")]; request.method = "POST"; request.data = JSON.encode({allProperties:false}); // IMPORTANT: always serialize the parameters or you´ll get an error
var request:URLRequest = new URLRequest(serverRoot + "/flashBridge/EnigmaDataService.asmx/NewsDetail"); request.requestHeaders = [new URLRequestHeader("content-type", "application/json; charset=utf-8")]; request.method = "POST"; request.data = JSON.encode({id:1568}); // IMPORTANT: always serialize the parameters or you´ll get an error
And that´s all. Every other webservice I made is pretty similar. Of course, there are some other considerations to make the hold thing work. If you want more details, let me know, and I´ll give my best.
Thanks for posting your experience with Umbraco and Flash. I'm currently building a flash website which uses /base to output the xml which flash reads. This might be old fashion, but it works perfectly for us and the xml we output is also being used for the HTML version we build. The HTML version is going to be an exact copy of the flash website without all the nice flash effects. We've done this so the website can also be visited on iPhone's and iPad's and because we want it to be SEO-friendly. How did you take care of SEO with your flash website?
Your solution is exactly what I wanted to do. And I could integrate a SEO friendly verion in my project structure easily. I didn´t for some reasons (buget mostly) and I proposed it for the next release. But I think the SEO stuff has nothing to do with using Json or XML. I can make template and XSLT for each document type without modifying the current tree structure. Add a few JS plugins and the "html" site would be done. That´s exaclty why I chose Umbraco.
Btw, I´d like to know how do you deal with iPad-mobile design. I mean, do you have a different version for each one? iPad resolution is really big compared to iPhone. Maybe you use a liquid css design?
And other question. Do you show those versions in the same page or you redirect to another url? I´m going to deal with all this soon, in my own website. I´d like to hear your opinion.
I was also thinking about using XSLT in combination with templates to generate the HTML version, but I use a lot of business logic to generate the XML which is sent to flash and I can't do that in XSLT. That's why my XSLT files will read the same XML which is sent to the flash (using umbraco.library:GetXmlDocumentByUrl).
There won't be a special iPad of iPhone design of the website. The HTML will look just the same as the flash version, but without the nice flash effects. Our main reason for the HTML version is SEO, but also so the website can be visited on every device like the iPad. The page won't redirect to another url. The HTML version will be on the same page as the flash website, but if flash isn't supported it won't load the flash and displays the normal HTML version. We're even trying to combine flash with ajax to make it crawable (see http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html), but I need to do some more research about that.
thaks guys for the info, very interesting topic - i want to offer my clients umbraco as a backend for their flash sites. i glad to hear that you succesfully implemented this with nice results. i dont know how other CMS's integrate with flash sites, but once again i see the power of umbraco.
It would be nice to have an Umbraco plugin for this task. For example, a macro that let you choose nodes in the tree and specify what properties of each node you want to send to Flash via Json or XML.
Hey Jeroen. Can I see your site? I´m curious about the iphone-ipad+flash stuff
Flash website in Umbraco 4.5
Hello,
I'm going to build a website which will be completely in flash (there will be a html version for SEO), but I still don't know what's the best approach for this.
The flash website will receive custom xml files to display content. What would be the best way to render the xml files in Umbraco 4.5? I can use XSLT to render the xml, but I can also use Linq to Umbraco for this. In some situation there needs to be quite some business locig to render the xml.
I'd like to hear some opinions from the most friendly community out there :).
Jeroen
Take a look on twitter ;-)
There's a whole discussion about /base on there. I guess /base or webservices is the way to go when it comes to deliver data to flash via XML...
Yea, the 2 approaches I'd probably look at are /base or templates that return XML.
Alternate templates are quite good though as you can easily build your HTML website, then just have alt templates that return XML versions to feed to flash.
Matt
Thanks for the replies. My idea so far was an alternate template wh ich could return the xml, but I didn't know if I should do it with XSTL or Linq to Umbraco. Now /base seems like a nice alternative :). Is there some good documentation on /base? So far I've only seen a few wiki pages, but nothing really well documented. I saw a tweet that Sebastian is going to write a blog about it :). Seems interesting.
Jeroen
Umbraco.tv ;-)
@kipusoep Ah yes offcourse :). Thank you I'll start with this video: http://umbraco.tv/documentation/videos/for-developers/base-and-ajax-development/introduction-to-base.
Jeroen
Hi Jeroen,
This WIKI helped me implement /Base for my customer. Base is great when you need to post values from flash also. XSLT and Alternative templates could be faster if you only need to display xml. I would spend some time(hours not days ;-)) using both methods and see what works best in your situation.
Cheers,
Richard
@Richard Thank you for the information. There is 1 form in the website (subscribe to a newsletter) and for the rest we only need to display data. I'll look into both to see what's the best solution :).
Jeroen
At the start of this year we launched Warner Bros Australia which is a full flash website: http://www.warnerbros.com.au/
It runs a custom API to do all the requests, a lot of which end up going via Examine. The biggest hurdle with doing full-flash sites is that flash isn't really designed do do pages, it's not dynamic like a 'html' site is.
You'll probably have to use a combination of different data access methods, saying t hat /base will do it all, or altTemplates or anything will restrict what you end up doing.
TheFARM's website is also a flash Umbraco site that we built: http://www.thefarmdigital.com.au/
Same with Mitsubishi Australia: http://www.mitsubishi-motors.com.au/
@Slace thanks for your advice.
To send xml to flash I've come up with the following options:
1. Send xml with alt templte generated by XSLT (Example: http://umbraco.tv/documentation/videos/for-developers/rich-internet-applications/loading-umbraco-data-into-flash).
2. Send xml with alt templte generated by Linq to Umbraco
3. Use /base to send xml generated by Linq to Umbraco.
4. Create custom handlers to send xml generated by Linq to Umbraco (Example http://vimeo.com/9853289)
Comment author was deleted
@Jeroen, for communicating between flash and umbraco also check out remoting, FluorineFx is great for that ( http://www.fluorinefx.com/ )
@Tim thanks for the tip. Will have a look at it :).
Hi, I recently made a full flash website with Umbraco: http://www.enigmasp.com
I really hate using xml between flash and server. That is an old fashion that I abandoned once flash remoting was available. I love Weborb.net remoting and I´ve implemented it in several projects. But it´s not open source, and my current project had no budget for anything else. There is a community edition for free, but the licence just let you use one weborb instance per server. And my server has already one...
FluorineFx? I think it´s kind a death project.
I gave /base a look, and I didn´t like to add a line to an XML for each method or service, I didn´t figure out how to serve JSON and I wanted to have complete control about how the data was served, so I decided to use JSON webservices, made by my own, and everything was pretty easy and fast.
Flash and Json is the perfect combination. If you use XML, you will have to parse every response data from server. With Json the basic objects like Number, Array, String... comes already typed and thats a big advantage, and object mapping between .NET and Flash was correct in all cases. You just serve a generic collection with .NET and it will be an ActionScript Array. You serve a typed object and Flash will get a simple ActionScript "Object". My comoding here was HashTable. For example, my home page needs 2 collections of data. This is the easy way:
[WebMethod(Description = "Devuelve datos para Home")]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Hashtable Home()
{
Hashtable home = new Hashtable();
home["featuredNews"] = UmbracoToFlash.FeaturedNews();
home["featuredGames"] = UmbracoToFlash.WorkSelection();
return home;
}
I created a webService in the site root (EnigmaDataService.asmx). In the code behind I added methods to communicate with flash directly. Here you can see 2 public methods:
[ScriptService]
[WebService(Description="Servicio de datos para cliente Flash", Namespace="www.enigmasp.com")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class EnigmaDataService : System.Web.Services.WebService
{
public EnigmaDataService()
{
UmbracoToFlash.rootNodeName = "Enigma";
}
[WebMethod(Description = "Devuelve listado de noticias")]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public object News(bool allProperties)
{
List news = new List();
Nodes newsNodes = UmbracoToFlash.GetSection("News").Children;
foreach(Node node in newsNodes)
{
news.Add(new NewsItem(node, allProperties));
}
return news;
}
[WebMethod(Description = "Devuelve detalle de una noticia en concreto")]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public NewsItem NewsDetail(int id)
{
Node newsItem = new Node(id);
return new NewsItem(newsItem, true);
}
}
The first one retrieves an array of "NewsItem". The second retrieves the item detail.
I made several utilities within a class "UmbracoToFlash" to identify nodes or section nodes (UmbracoToFlash.GetSection("News")), get children and parse some data (like checking a media node id to convert it to the file url).
Once your web services are ready, you just need to know how to call them from Flash, even with parameters. I had some trouble at first because I wasn´t sending correct Json serializated paramaters, you have to take care about that.
Here is an example of a request to call the methods above with ActionScript:
var request:URLRequest = new URLRequest(serverRoot + "/flashBridge/EnigmaDataService.asmx/News");
request.requestHeaders = [new URLRequestHeader("content-type", "application/json; charset=utf-8")];
request.method = "POST";
request.data = JSON.encode({allProperties:false}); // IMPORTANT: always serialize the parameters or you´ll get an error
var request:URLRequest = new URLRequest(serverRoot + "/flashBridge/EnigmaDataService.asmx/NewsDetail");
request.requestHeaders = [new URLRequestHeader("content-type", "application/json; charset=utf-8")];
request.method = "POST";
request.data = JSON.encode({id:1568}); // IMPORTANT: always serialize the parameters or you´ll get an error
And that´s all. Every other webservice I made is pretty similar. Of course, there are some other considerations to make the hold thing work. If you want more details, let me know, and I´ll give my best.
Hi Xleon,
Thanks for posting your experience with Umbraco and Flash. I'm currently building a flash website which uses /base to output the xml which flash reads. This might be old fashion, but it works perfectly for us and the xml we output is also being used for the HTML version we build. The HTML version is going to be an exact copy of the flash website without all the nice flash effects. We've done this so the website can also be visited on iPhone's and iPad's and because we want it to be SEO-friendly. How did you take care of SEO with your flash website?
Jeroen
Your solution is exactly what I wanted to do. And I could integrate a SEO friendly verion in my project structure easily. I didn´t for some reasons (buget mostly) and I proposed it for the next release.
But I think the SEO stuff has nothing to do with using Json or XML. I can make template and XSLT for each document type without modifying the current tree structure. Add a few JS plugins and the "html" site would be done. That´s exaclty why I chose Umbraco.
Btw, I´d like to know how do you deal with iPad-mobile design. I mean, do you have a different version for each one?
iPad resolution is really big compared to iPhone. Maybe you use a liquid css design?
And other question. Do you show those versions in the same page or you redirect to another url?
I´m going to deal with all this soon, in my own website. I´d like to hear your opinion.
I was also thinking about using XSLT in combination with templates to generate the HTML version, but I use a lot of business logic to generate the XML which is sent to flash and I can't do that in XSLT. That's why my XSLT files will read the same XML which is sent to the flash (using umbraco.library:GetXmlDocumentByUrl).
There won't be a special iPad of iPhone design of the website. The HTML will look just the same as the flash version, but without the nice flash effects. Our main reason for the HTML version is SEO, but also so the website can be visited on every device like the iPad. The page won't redirect to another url. The HTML version will be on the same page as the flash website, but if flash isn't supported it won't load the flash and displays the normal HTML version. We're even trying to combine flash with ajax to make it crawable (see http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html), but I need to do some more research about that.
Jeroen
thaks guys for the info, very interesting topic - i want to offer my clients umbraco as a backend for their flash sites. i glad to hear that you succesfully implemented this with nice results. i dont know how other CMS's integrate with flash sites, but once again i see the power of umbraco.
It would be nice to have an Umbraco plugin for this task. For example, a macro that let you choose nodes in the tree and specify what properties of each node you want to send to Flash via Json or XML.
Hey Jeroen. Can I see your site?
I´m curious about the iphone-ipad+flash stuff
Hi xleon,
That sounds like a nice idea!
Currently the website is still in development and it won't go live until the end of this year. Once it's live I'll let you know :).
Jeroen
is working on a reply...