I am pretty new to HTML5. Coming from Flash background, I can call the swipe events easily from Actionscript API. But for HTML5, I believe I have to code this myself by listening to touchstart, touchmove, and touchend. Is there a simpler way to do this? And also I am looking for a website that contains complete HTML5 references
Your best bet for handling touch events is to look at some JavaScript libraries that can handle them: JQuery Mobile, Sencha Touch and jQT (formerly jQTouch) are the big ones.
If you're not already using JQuery, I would highly recommend it.
As far as HTML references, the (highly verbose and technical) specification document might be too much, so I would suggest starting with w3schools. (A tip: Keep in mind that HTML5 is still a work in progress and browser/client support varies.)
If you need help figuring out how to manipulate the DOM (i.e. how to use JavaScript to make things happen), the JQuery documentation is also be a good reference point.
Related
I'm developing a client-side application.
It doesn't need to be cross-browser.
And also I wanna use drag and drop feature.
I'm familiar with JqueryUI Drag and drop, But I wanna know which one is better in performance and easy programming, Html5, or JqueryUI?
thx
I recently made an application which lets users drag and drop hundreds of items (with lots of CSS) between hundreds of lists (drop zones) and I experienced horrible performance with jQuery. I then changed over to HTML5 Drag and Drop API and since the whole thing runs smoothly even on 1st Gen Centrinos. No wonder, as native code is used.
The HTML5 API needs to get used to since it's generally written with non-mouse-controlled devices in mind as well, but the results are not more complicated then jQuery UI code.
So as a conclusion I think sticking with jQuery UI is ok when you have only a small number of items to drag. I also expect jQuery UI to use the HTML5 API internally some time in future so you might get that benefit of native code automatically by upgrading to another jQuery version.
Although Jquery UI gives additional functionality but in many scenarios we dont need them which in turn becomes heavy and on the other hand HTML5 Drag and Drop API is smooth and light.
So its upto user : if you want additional functionalities go for Jquery UI otherwise Opt HTML5 Drag and Drop
-Mohit
I would suggest you to use JqueryUI. Its more flexible. Will be easier in future for you to improve it. I never used HTML5 drag and drop and didn't knew that it exist. So I can't compare them, but I think jQuery will be better.
I'm writing a new web application that needs to support drag and drop operations for elements on the page (not file drag and drop).
This the answer to this question
html5 vs jquery drag and drop
recommends using Modernizr to check whether the browser supports HTML5 drag and drop and either use that support or fall back to an alternative like jQuery UI.
Since they have quite different models, that means that all drag and drop code would have to be implemented and tested separately (very little shared implementation). It only seems logical to do that if there are significant, user-impacting benefits to HTML5 drag and drop and if the fallback to jQuery UI would provide a degraded experience.
Are there significant benefits to implementing both variants?
I would guess that eventually jQuery will take advantage of built-in browser capabilities like html 5 drag and drop.
And if different browsers implement it differently...jQuery will deal with it.
I think the biggest advantage to HTML5 drag and drop over jQuery is the elimination of the sizable jQuery UI library and css files.
That being said, there is the current issue of browser compatibility that makes jQuery very much needed.
Ok, having implemented both, I'd recommend doing it manually with mousedown/mousemove events (basically as jquery UI does it).
I agree that jQuery UI can be a bit heavy, but there are lots of tutorials/code snippets available to code it yourself.
Why do I recommend a manual approach rather then the native implementation in modern browsers? Because html5 DnD sux! It might be new for current browsers, but is modeled after an old implementation back in IE5.
If you are talking about moving things between windows for from the desktop, then maybe I'd consider using html5 DnD as it has browser/OS hooks. Else if you are simply moving DOM nodes on a single webpage, do it manually with js mouse events.
-Paul
I am answering specifically regarding dnd, since that seems to be what you were asking on.
I think some people are confusing jQuery with jQueryUI. Using native HTML5 dnd together with jQuery is great combination, both in performance and development time. Since the dnd features came from the IE world the browser support is pretty good across the board (including IE7 for sure, and maybe even older). Using jQuery gives you all the cross browser addClass(), removeClass(), etc. utils that are crucial.
jQueryUI on the other hand offers a ton of features, that you probably will not need. Since their dnd relies on mouse events and not native dnd the performance wont be as good. jQueryUI should not be confused with jQuery. jQueryUI has not received any major updates in over 2.5 years! (Yes, jQueryUI 1.8rc1 was in JAN 2010) So, its not so simple just to say they will add native support in the future, at the pace they have been updating I wouldn't hold my breath.
I just converted one script to use a HTML5-based drag/drop sortable script instead of the jQueryUI one, because with the size of what I was trying to sort, it took 19 seconds to initialise the jQueryUI version, and .19 seconds to initialise the HTML5 version.
So advantage: speed
I realize that some people think it is crazy to re-implement all the UI functionality of HTML in a canvas-based framework (and there are some stackoverflow questions that suggest this), but is anyone actually working on a library like this?
To clarify, the library would render all UI elements like edit boxes, labels, buttons, combo boxes, list views, etc. on the canvas directly. There would be no HTML or CSS.
I stumbled upon this idea today. Found the library Zebra. Haven't tried it out yet.
https://zebkit.org/
For web apps I think this makes perfect sense. HTML/CSS is just not good enough to create stable apps easily. The DOM and layouts are just too quirky and the performance too low.
What we need is something like Silverlight but without the plugin. Stable components and a great framework.
Canvas apps could be made just as accessible as html web apps. Probably more so even.
Perhaps WebGL is even better, its performance is definitely better than Canvas if done properly.
Thunderhead was a mozilla experiment built along with bespin (now skywriter).
From the project description:
Thunderhead is a Mozilla Labs experiment to explore a JavaScript-based
GUI toolkit that works with DOM elements and canvas to render
components.
The problem is accessibility, canvas just isn't.
I've just reviewed zebkit.com today. Amazing and absolutely not crazy, rather essential. Try running most DOM node trees on a mobile device and you will soon know this is true. Then in contrast run the Zebkit kitchen sink demo and be shocked. You might have to reconsider your projects approach.
Coming from Java to HTML5 I definitely see some nice OOP at play in the Zebkit API, it is needed to provide the simple canvas some powerful structure. Also I really like the JSON support, it acts much like a CSS format for the canvas. Using JSON this way fits well into the Web Component mindset and the practicality of HTML partials. There are a lot of goodies in this API.
In the end all ways of producing graphics for the Web render pixels anyways. Maybe we have just added to many abstractions between the logic we what to produce and the end screen to realize this fact. With Zebkit it feels like your almost working at the native level, plus it adds in all the graces of Javascript and JSON, sweet indeed. Plus your free to mix and match in DOM as desired.
Now there is Flutter's CanvasKit renderer. Google docs is moving to Canvas.
I know that html 5 canvas will allow for paint style image creating and manipulation, but what use does this really have? I just don't really understand all the hype when the practice use seems limited.
Thanks
GAMES! That's what I'm using it for. Diagonal lines, spinning cubes, triangles (all previously very difficult in basic HTML) are now easy. Combine this with Node.js and you've got COMET backed multi-player GAMES!!! All without the user needing to download Flash or Silverlight or whatever...
Here's some sources on the subject:
http://www.canvasdemos.com/type/games/
Creating a live checkers-like web app with PHP, JS, CSS and HTML?
Other than this, I guess you could use it to "Paint" your website. Instead of using images for gradients, buttons, whatever you could use the canvas instead. Could be more performant since it would reduce the amount of files the client needs to download, but do you really want to programmatically draw all your images??? Not sure about that, but for some images, like gradients, I could see it being useful.
Oh! I would daresay that you haven't seen good HTML5 + CSS3 implementations.
Check these wonders on Canvas.
CSS3-Man
Ball Droppings ( Bonus: View Source to see the wonderfully commented source code)
And if that didn't leave you dumbstruck, check out the wonderful website http://www.chromeexperiments.com for pretty nifty canvas works.
Plus, do you know that there is a new library called processing.js for these kind of stuff.
You just don't see it production much because, browsers haven't fully adopted HTML5 yet. But they soon will. That being said, please open all these examples on a Web-Kit Browser (Google Chrome or Apple Safari) for better results.
A long time ago (Netscape 4-era), I wrote Javascript-based games: Pong, Minesweeper, and John Conway's Life among them. I'm getting back into it, and want to get my hands even dirtier.
I have a few games in mind:
Axis & Allies clone, with rugged maps and complex rules.
Tetris clone, possibly with real-time player-vs-player or player-vs-computer mode
Breakout clone, with a couple weapons and particle velocities
In all of these, I have only a few objectives:
Use JavaScript and HTML 5 - it should run on Chrome, Safari, or maybe an iPad.
Start small and simple, then build-up features.
Learn something new about game design and implementation.
So my questions are:
How would you implement these games?
Do you have any technology recommendations?
If you've written these games, what was the hardest part?
N.B.
I also want to start from first-principles - if you recommend a framework/library, I would appreciate some theory or implementation details behind it. These games are different enough that I should learn something new from each one.
Depends how much you want to start from scratch. To answer your direct questions:
1) How would you implement these games?
A: JavaScript + Canvas. Canvas is the 2D drawing surface from HTML5. Performance is pretty good on desktop machines, not so great on iOS and Android devices (as of the date of this post). If mobile is your utmost concern, you need to use the DOM and CSS3 3D transforms which trigger the GPU on those devices.
2) Do you have any technology recommendations?
A: This is sort of answered by the first question. JavaScript is a must, but I would ignore jQuery. You are targeting HTML5 devices, so no need to compensate for legacy browsers. As you are probably using Canvas, no need to smooth over the DOM interaction, either. There are some higher level libraries which make interacting with Canvas easier, such as Easel.js. WebSockets are useful for bi-directional streaming communication. And Box2D is useful for a physics engine. Local Storage is simple key/value string data for things like level progress, but for anything complex, you'll want WebSQL DB. For large binary assets you'll want to look at the File System API. Finally, don't be afraid of WebGL, as it is extremely fast and useful for 2D games.
3) What is the hardest part?
A: Almost certainly the hardest part is the debugging. WebKit's Developer Tools can make this easier, so don't leave home without them.
Put simply use Canvas for moving lots of stuff around the screen and SVG for prettier, slower, vector graphics.
One of the first things you should do is write a speed test program to see what can be done with Canvas and then play with it.
I wrote a blog post about Canvas & writing HTML5 games
edit 2019-02: processing.js is old and not well supported. Instead, try p5.js, which is equivalent and up to date.
Don't forget processing.js, which is a pretty well tested full-stack graphics and interactivity javascript framework, which has substantial (if not comprehensive) support for most I/O, sounds, graphics, and even WebGL. If you write vanilla Processing code, which is basically Java syntax compiled to JavaScript, you can use many open-source debuggers out there, including the native Processing environment. Other than that, you can integrate any other JavaScript code you have a mind to include.
Here is a guide for the JavaScript developer, explaining much of what you might want to know.
Check it out. Good stuff.
The hardest part, for me, was that there were no tools to help make the graphics, as there is no Maya export to canvas, for example, so, everything is done manually, with primitives, unless you want to take bitmaps that you will modify as though they are sprites.
At the time there was no real support for text in canvas, so my solution didn't work using excanvas, but worked fine on Safari and Firefox.
So, you may want to look at what HTML5 features you want to support, such as a built-in database, and then decide which browsers you are willing to work on.
How to implement these will largely depend on how you want to create the graphics, and if you want to do 3D graphics, as then the bitmapped sprites would not work.
Tom here from Scirra (Construct 2 game maker). We make an HTML5 games engine called Construct 2, it exports purely to HTML5 no Flash in sight!
Construct 2 uses an event based system to add logic to your games and does tons of the repetitive/difficult legwork for you. For example adding polygon collision to objects without some visual editor is a difficult task to undertake sometimes.
Anyway we think it's worth a look and you can get results very quickly from it as well. It's an alternative to coding the entire game you might want to take into consideration when developing HTML5 games.
Take a look at ChromeExperiments The examples are from around the world using the latest open standards, including HTML5, Canvas, SVG, and javascript.
Maybe this is not what you wanted to hear, but have you thought of starting with a good book?
http://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=html5%20game
A good book will save you a lot of time, and start you off right at the basics.
A good question when I also started to learn HTML5 I also came across this question, finally after lot of research I found best way to do is by using some engine or framework. I learned canvas and made my own game but that took hours of logic and 100+ lines of code.
Better go with scirra, it might reduce your work.
I'm currently working on a series of blog posts explaining how to build a Javascript game using EaselJS and Box2D for physics. Here's Part 1.