I am looking for someway to do Flash type movies but with AJAX instead? Flash requires plugins, SEO is difficult and my experience is people tend to stay away from Flash websites unless they are really really good.
Can any provide some insight?
Maybe something like this:
http://activeden.net/item/handdrawn-deeplinking-urban-website/full_screen_preview/40657
You could try and play with the HTML5 canvas tag...
http://flash.digitalmedianet.com/articles/viewarticle.jsp?id=876219
You could use dynamic refreshing of SVG using Javascript, but you will have your work cut out for you.
Javascript, and lots of it, is one option.
Also, sliverlight 3's new navigation model supports deeplinking for SEO, and is really quite powerful for animations
try some of these
http://sixrevisions.com/javascript/10-impressive-javascript-animation-frameworks/
http://hacks.mozilla.org/2009/06/rendering-svg-canvas-burst/
http://raphaeljs.com/
I've been thinking of the same thing, going with javascript rather than flash on some stuff. This works great for small components inside a html website. But to do a whole js site, I'd strongly recommend AGAINST that.
From my experience, the same animation in flash vs javascript... JS is more processor intensive. I don't want to comment on as to which magnitude, but it's noticeable.
Bats also have a funny way of dealing with javascript and ajax content, so don't expect the same result in terms of SEO just because you're not using flash. But because people have used javascript to do content injection/replacement crawlers might be better at searching through the info. There are other ways of dealing with Flash SEO issues. (Gaia framework is not a bad starting point)
Another advantage of not using Flash or Silverlight is that most mobile devices ignore this stuff. However if you're planing on creating a site that acts like flash, the usability across these devices will likely not be consistent.
If you do decide to go this route, it's going to be much like going into a jungle and hacking your way through. Whereas with flash you're likely to be going through a well marked and paved landscape. You can get to the end result either way, but consider how much effort it will take. Flash has internal and community libraries that do all kinds of stuff, with js you'll be writing a lot of your own code and will have beta libraries that might not work well across all browsers.
But on the upside, you'll be a pioneer :)
Related
I've played a great many MMORTS games such as Evony, Dragons of Atlantis and Kingdoms of Camelot. They all have some great features and a great many not so great problems. Simply for my own interest I wanted to try my hand at writing something similar. I don't intend to even try to compete with the big boys but I wanted to write it in a professional and scalable manner as if it was intended for eventual commercial release.
So that's the background that leads into the question. I have been looking at various frameworks and libraries that would be suited to this style of game. However there is such a plethora of options that my head is now spinning. I would like to get some input as to what other people think are the best options. I want to try and write this as a cross-platform / cross-browser webapp that can later be converted to a "Native" app using something like MoSync. I want to stick with HTML5, CSS3 and JavaScript technology.
Some of the things I am sure I want are:
It must be scalable (ie able to handle a significant number of simultaneous users)
I prefer to work with some sort of MVC framework (I am used to working with Joomla MVC and have been considering backbone.js for this aspect)
I am no JavaScript guru but will most likely want to work with jQuery (mostly in relation to client side views)
I like templates but am completely lost which template system to go with (ie mustache, handlebars, dust etc). I think my choice in this area will ultimately come down to which framework I end up with.
Chat is an important aspect of MMORTS games and I am thinking of using Node.JS and Socket.io (or NowJS) for this.
I have also been looking at Redis for key-value store.
At this stage I have abandoned the idea of using jQuery Mobile as initial tests have caused more headaches than they have solved.
So my front runners are Node.JS for server side JavaScript (possibly with NowJS to implement chat), Redis for key-value store, backbone.js for the MVC framework, mustache (or maybe LinkedIns fork of dust) for templating and Jquery of course.
I would greatly appreciate any input to help me make my final decision on what frameworks and libraries to use.
This is not a framework, but you may find Mozilla's Browser Quest implementation interesting. The whole thing is open source and they use HTML5 Canvas and Node.js (socket.io is a big player here) and it is entirely cross-platform
I'm working with a team on exactly this. Our research and experience suggests that a Node.js backend is definitely a good idea. What to use with Node.js? We've come up with two good possibilities:
Use websockets for communication and a front-end engine like Phaser for your rendering.
Use Isogenic Game Engine for everything.
(http://html5gameengine.com/ may help you to compare the feature-sets of the top HTML5 game engines including the ones I've just mentioned.)
I have been following the usage of JavaScript for the past few years, and with the release of extremely fast scripting engines (V8, SquirrelFish Extrene, TraceMonkey, etc.) the possibilities of JavaScript have increased dramatically. However, the usage share of Internet Explorer coupled with it's total lack of support for recent standards makes me want to drop a bomb on Microsoft's HQ, as it creates a huge amount of problems for any website.
The game will need to be pretty dynamic client-side, with animations and other eye-candy things, but not a full-blown game like those that run directly in the OS using DirectX or OpenGL. However, this might be a little stretch for JavaScript and will certainly feel extremely slow in Internet Explorer (given that the current IE engine can be hundreds of times slower than SFX; gotta see what IE9 will bring), would it be better to just do the whole thing in Flash? I know this means requiring the plug-in AND I have no experience whatsoever with Flash (other than browsing YouTube :P). It also means I can't just output directly from PHP, I would have to use XML or some other format to pass data to it (JSON is directly integrated in JS and PHP can deal with it easily).
Another idea would be to provide an alternative interface just for IE, though I don't know how (ActiveX maybe? or with Flash, then why not just provide it to all browsers) or totally not supporting it and requiring the use of other browsers, although this is plain stupid from a business perspective.
So here am I, wondering what approach to take and thus asking for your advice. How should I build the client-side? AJAX in all browsers, Flash in all browsers or a mix (AJAX for "modern" browsers and something else for the "grandpa": IE).
I recommend a plug-in platform (Flash, Silverlight, or Java) over AJAX. Having a clean layer of abstraction between your game and the client's browser is a big advantage. In any non-trivial AJAX game look forward to endless corner-cases where browsers differ in performance or implementation.
Personally, I think Flash is easy to learn if you are coming from AJAX experience. Flash is currently the most widely installed and proven plug-in for browser games. However, Silverlight and Java are both building momentum. Also, the Unity engine has become a popular choice for commercial browser games.
I think you shouldn't leave Java out of the equation. It's a powerful, fast language, and with Java applets, you can do almost anything. If you want hardware-accelerated graphics via OpenGL, JOGL can do it, even in an applet.
On the other hand, it might not be right for you. But at this early stage, I think you should evaluate all of your options, and since you have no experience with Flash but sound like you've got a bit of programming experience, you might feel more at-home with Java.
I believe the current answer is Flash game.
Alternatives:
Java Applet: getting less and less common those days and it is not commonly installed as a plugin on many computers.
SilverLight: too new and might vary and change in time. not commonly installed on many computers and it's Microsoft (whom tends to change technology every 2 years ...)
JavaScript / AJAX: Still a new kid on the block, it's on the rise it is true with many nice features, but still lack of good cross browser for IE even IE8, can not play sounds internally, still slower than the others, and you don't know where will it evolves.
Eventually probably the best solution for now is Flash development:
Cross platform. Works fast. Long time already alive and have a lot of support.
I hope this answer will change in the next year. Happy Peasach.
Check out Jmonkey. The "plugin" loads if you have Java on your machine. Once it's cached, the next time the visitor goes to the page, it your game loads very quick. Check out their website for demos and see what I mean: http://www.jmonkeyengine.com/
Oh, I forgot to say, it's a 3D scenegraph Java engine. I just tried it again, and it loaded in linux. Looks they've put in some good work.
Don't do it with javascript in the browser. And Flash really can be a pain just because it's closed source and you don't know if you've made a mistake or found a bug - speaking from experience. I'd never want to make another Flash game again.
How about using RaphaelJs , it is a Javascript library that make dinamyc images using SVG, and for IE, it try to make those images using the IE alternative: VML. Im using it on my own WebGame, but i dont really make complex graphics in it. The most complex thing done on RapahelJs was a heath map (20 * 20 tiles ) with a dinamyc opacity slider. An it work with jquery without any problem or configuration!
I've been trying to do more Web development work recently (I currently do other tech stuff, but have some experience with Java, C++, VB, Python, and PHP) and I was asked to create a basic Web site with an image viewer. The site is for an artist and she wants the viewer so users can see thumbnails of her paintings and click them to see a large version.
There are a bunch of existing programs out there (for example, simpleviewer)--most seem to be Flash-based. I want to create my own for various reasons, not least of which is to learn about how to do it. Can anyone give me suggestions/opinions as to what technology to use and how to proceed? Not detailed steps, just pointers in the right direction. (For example, are there existing scripts I could find on the net and then tinker with/modify?) I'm already doing research to figure this out, but advice from savvy programmers will save me some time.
I don't know much about Flash or Ajax, but am willing to learn either (and would eventually like to learn both). I won't be shelling out $700 for Flash Pro right now, so I would need to use something like FlashDevelop if I go that route. Thanks in advance!
You'll want jQuery. jQuery.com
Jquery has tons of useful plugins: jquery plugins page
Start searching! Here's a good one i found searching for "image galley"
Enjoy. Jquery is your friend. Of course this post is biased. So, to give credits to others, you can also look into mootools, YUI, prototype, scriptaculous, etc.
If you are going to go down the flash root definitely look at http://slideshowpro.net/ (you don't need the Flash IDE to customise it - all done via XML settings)
An alternative is via JavaScript. A couple of cool scripts to look at are:
http://jquery.com/demo/thickbox/
http://fancy.klade.lv/
You can scan the images, base64 encode them into a database, then use an < img > tag on your site to point to a PHP page that base64 decodes the images. No real way to watermark them though you could do that before the you load them using GIMP or some similar tool.
We provide a web application with a frontend completely developed in Adobe Flash. When we chose Flash 6 years ago, we did so for its large number of features for user interaction, like dragging stuff, opening and closing menus, tree navigation elements, popup dialogs etc.
Today it's obvious that AJAX/JS offers roughly the same possibilities and because of the number of frameworks that are readily available, it's very feasible to implement them.
Is there a technical reason one should choose either technology over the other? By "technical", I mean performance, security, portability/compatibility and the like. I don't mean aspects such as the very non-programmer way development is done in Flash or whether it makes sense to switch an app from one to the other.
As I just explained in another question, it seems to me that JS is way ahead in terms of market share and I'm wondering whether we are missing some important point if we stick to Flash.
In addition to what others have said, Flash is constrained in the "rectangle" and cannot be added to a normal html page in an un-obtrusive manner.
#Gulzar I think when more browsers will support the video tag like mozilla 3.1 does we'll see even more adoption of ajax/js over flash.
Adobe Actionscript is a statically typed language, Javascript is dynamically typed. Depending on your point of view, this may be a good thing or a bad thing.
With Javascript/HTML/CSS you're going to be heading into cross-browser compatibility hell, especially if you want to support older browsers. This can be mitigated by the libraries that are available, but it's still a big headache. With Flash, you write the code once and it just works in all browsers.
Even with the libraries available, Flash user controls are simply more advanced than anything you can find in the world of Javascript/HTML. In Javascript, you are not going to find anything that comes close to the simplicity and power of a databound user control that Flash provides.
I don't see how Javascript has more of a "market share" than Flash. Pretty much anyone with a web browser has a Flash plugin installed. I'd be curious to know how many people disable Javascript but have a Flash plugin.
Also keep in mind that you're going to be in for a huge learning curve and lots of development time if you decide to switch your technology base so you'd really better have a good business reason to do it.
This decision also has a lot to do with what your application does and who your install base is.
Edit: I see people have mentioned that the iPhone doesn't have Flash support. I would expect this to change with the install base of the iPhone - Adobe would be crazy not to support it.
Correctly designed AJAX apps are more googleable than Flash
Correctly designed AJAX apps are more easily deep linkable than Flash
AJAX doesn't require a plugin (Flash is pretty ubiquitous, so it's not really a big deal)*
AJAX isn't controlled by a single company the way Flash is
Edited to add:
* Except for the iPhone, as Abdu points out.
JS and Flash both have great presence on the web with overlapping capabilities. One area JS is still lacking is in rendering video.
Flash, used well, allows easy localization and internationalization.
Furthermore, it is much easier to use Flash in an accessible manner; you can feed screen readers the right text, instead of having them iterate over all of the possible form elements.
I think Flash should be limited to online games, videos and animation. Otherwise use html and Ajax. It's a web standard and supported by almost all devices.
AFAIK, the iPhone doesn't support Flash. That's a fast growing segment you're blocking out already. Keep it simple and efficient.
Although flash is pretty ubiquitous on desktop browsers, mobile support is very limited (flash lite? yeah, right). I get really frustrated looking up a restaurant on my phone only to find the entire site is flash based and I can't even get a phone number or address!
One benefit of Flash is that it has a few facilities to help do cross domain type operations safely, which can be helpful. Flash also has (limited) support for some hardware, which is not possible with Javascript.
Personally, I'd try to use as much Ajax as possible before turning to something like Flash. From the UI perspective, it is better in that the controls and basic authoring is a little more developed. The Sound Manager project is a good example of effectively using a small amount of Flash while keeping the remainder in Javascript.
I suspect one of the reasons javascript is becoming more popular is that it's more easy to retrofit into an existing application.
As I can't accept two answers, I'm going to merge Christ Upchurch's and 17 of 26's answers in my own post. I think, these two together pretty much sum up what I wanted to know. Thanks guys!
If you're dealing a lot with polygons, then Flash is still easier to program and debug. With AJAX there are a lot of libraries to handle polygons, but the more libraries your app uses, the slower it gets.
Jeff mentioned the concept of 'Progressive Enhancement' when talking about using JQuery to write stackoverflow.
After a quick Google, I found a couple of high-level discussions about it.
Can anyone recommend a good place to start as a programmer.
Specifically, I have been writing web apps in PHP and would like to use YUI to improve the pages I am writing, but a lot of them seem very JavaScript based, with most of the donkey work being done using JavaScript. To me, that seems a bit overkill, since viewing the site without Javascript will probably break most of it.
Anyone have some good places to start using this idea, I don't really care about the language.
Ideally, I would like to see how you start creating the static HTML first, and then adding the YUI (or whatever Ajax framework) to it so that you get the benefits of a richer client?
As you've said
To me, that seems a bit overkill, since viewing the site without Javascript will probably break most of it.
This isn't progressive enhancement. Progressive enhancement is when the site works perfectly without JavaScript or CSS, and then adding (layering) these extra technologies/code to increase the usability and functionality of the website.
The best example I can give is the tag input box on this website. With JavaScript turned off, it would still work allowing you to enter tags separated with a space. With JavaScript turned on, you get a drop down with suggestions of previous entries.
This is progressive enhancement.
See also Unobtrusive JavaScript which is the bedrock progressive enhancement is built.
Going at it from the other direction is sometimes referred to as graceful degradation. This is usually needed when the site is built first with the enhanced functionality afforded by the various technologies then modified to degrade gracefully for browsers with those technologies are not available.
It is also graceful degradation when designing to work with older browsers (ancient in the Internets terminology) such as IE 5.5, Netscape, etc...
In my opinion it is much more work to gracefully degrade the application. Progressively enhancing it tends to be much more efficient; however, sometimes the need to take an existing app and make it accessible in these lacking environments arise.
Basically, if your site still works with JavaScript turned off, then anything you add with JavaScript can be considered progressive enhancement.
Some people may think that this is unnecessary, but plenty of people browse with addons like NoScript (or, with JavaScript simply turned off in their browser settings). In addition, many Mobile web browsers may or may not support JavaScript. So, it's always a good idea to test your site completely with and without JavaScript.
Progressive Enhancement is a development technique that stresses the primacy of the semantic HTML, then testing for browser-capability and conditionally "layering" on JavaScript and/or CSS enhancements for the browsers that can utilize those enhancements.
One of the keys is understanding that we're testing for what the browser can do, as opposed to browser-sniffing. Modernizr is a very popular browser-capability test suite.
Progressive-Enhancement is inherently (section 508) accessible; it provides for meeting the letter of the law and the spirit of the rule.
The Filament Group wrote the excellent "Designing With Progressive Enhancement" book on the subject. (I am not affiliated with Filament Group, though they are so freaking smart I wish I were.)
This is such an important concept and it saddens me that so few web developers understand it.
Basically, start by building a site/framework in Plain Old HTML -- structural elements, links and forms. Then add on some style and then shiny stuff (Ajax or what have you).
It's not very difficult. Like palehorse says, graceful degradation is more work.
Websites should work in any user agent, not look the same (not even look but sound if your vision impaired), just work.
Progressive Enhancement:
The plain HTML/CSS site is awesome (fully working and user-friendly).
Adding JavaScript defines a new level of awesome.