HTML 5 Rotating Banner? - javascript

I was wondering if anyone could offer any advice. I'm an expert HTML / CSS coder...but I have little experience with HTML 5. I have read about the great things it can do and I want to learn it, but im not 100% sure of what I can do with it. I have read a lot of articles regarding HTML 5 but none of them go into enough detail about it to answer my questions.
Aside from making layout easier, can it do things like create a rotating banner? I need to take the banner on the main page of this site
www.newmarklearning.com
and make it ipad / iphone compatible. I know I could use Javascript and a host of other coding options, but i fugued this is a great place I could start messing with HTML 5.
Problem is in not really sure if thats the right technology to use. Can HTML 5 / CSS 3 handle such things or am i limited to Javascript / Ajax etc???
Any help pointing me in the right direction would be great.
Thanks
Craig

Regarding animations, CSS3 offers you a lot of options. See e.g. here for more information on 2D Transforms. There exist 3D Transformations, too. However, only Webkit-based browsers support it right now. This site also offers a list of CSS3's new features.
In your case, to have the banner animated, you would have to combine a transform with a transition property (the transition let's it animate, the transform only describes the targeted rotation/scale/skew). If you want a constant animation (not just once), there might be some Javascript necessary.
Well, apart from that, HTML5 offers you a lot more new features, like offline storage or other things. The only problem is that the user has to have a relatively new browser in order to support everything, which sadly isn't the case right now (I know several companies that still run Windows XP with some IE6 or 7 or something like that - any updates disabled :-/)
Edit: Oh, OK, I just took a look at your site. For such a "slideshow", at least a little bit of Javascript will be necessary, to store the current slide etc.. But every smartphone browser should support it without a problem

do you mean the banner on the right? That changes on a timer, or when a number or arrow is clicked?
It would be easiest to recreate that with JavaScript.
Check out:
http://www.dhteumeuleu.com/
If you want some cool ideas

Related

HTML Image map with selectable regions triggering popup content

It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.
The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?
There are a couple of factors in regards to the decision:
The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
The Map has quite custom styles (strokes around the areas with a margin gap too)
Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
It's not essential, but I would to make the map somewhat responsive to the viewport.
Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?
Any feedback welcome,
Thanks,
Craig
For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.
Also now every one needs every thing on mobile and it works on mobile with just no efforts.
Try to convince client to upgrade IE, that will be best for you. All the best.

jbgallery vs supersized js vs flash

I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.

Is javascript / HTML5 capable of supporting "flash like" animation and drag and drop

With apple browsers not supporting flash or silverlight, there is a real incentive to avoid flash / silverlight to avoid losing that audience when building a web site. That being said there is certain functionality that it seems like you can only really do in flash / silverlight
for example alot of simple games where you can move things on the screen like this site all seem to be built in flash. also, a lot of drag and drop functionality where you can drag one object onto another like these game sites.
After lots of searching I can't find any that are not either flash or silverlight based.
In particular i am looking for drag and drop support of one element onto another
my question is if you need this type of functionality is javascript / html 5 able to do this type of stuff (so you can support iphone / ipad) or are you out of luck.
is there any resource that highlight examples or suggestions of trying to do this type of interactive functionality and how / if you can do this type of stuff without silverlight / flash. also, if anyone has any good examples of existing site who are doing that today that would be great as well.
This is going to be a long discussion about the ability of html5 to compete with flash.
In my opinion jquery is not any close to performance flash or silverlight animation give.
if the comparison is in terms of drag-and-drop, menu dropdowns, fadeIn.fadeOut - jQuery is competitive.
If i will see the jQuery cartoons with lot of layers and objects moving simultaneously - i will probably agree that jQuery has competitive performance.
the things are compare to see the difference:
magnifying glass over the raster picture
smoke/water/fire emulation
compound 3D objects like fractals with deep branches
when HTML5 will have it - then i will agree that it has competitive performance. All that i see today is picture slideshows and couple of games that work on html5.
You can check Easel.js by Grant Skinner, used in Pirates Love Daisies.
Also, other frameworks are:
enchant
limeJS
akihabara
JQuery UI has that for long time, works in all modern browsers, not just HTML5
JQuery UI Demos
You should checkout canvasdemos.com. It has a lot of good examples of what can be done. You can take a look at the source code behind these - some even help you in that regard. e.g. the pool game
Other good examples include the doom like "game" (you can walk around in 3D dungeons).
The Frog Log game was the winner in the 10KB coding challange
Also this was the first result for a search of html5 animation demo in google. It has links to 48 demos. Some of them are really cool. Unfortunately the code for a lot of these have been minified, but they still might give you a few ideas about what you can achieve.
So it's fine for making simple dressup type games. However, if you are looking to make anything that's CPU intensive, you should look into some performance benchmarks like this. HTML5/Canvas based animation is still quite far behind flash in terms of performance. Getting consistent behaviour across the various browsers will also be an issue.
HTML5 and related technologies (WebSockets, WebGL, web storage, File API, media capture, etc) are quickly moving towards parity with (and in some cases exceeding) what can be done in Flash/Silverlight.
The HTML5 Rocks slides are a reasonable starting point to see what is possible (you need an HTML5 capable browser). In particular, the Canvas example demonstrates image manipulation (drag, rotate, resize) which is the core functionality needed to implement dress-up games.
Flash was designed for animation. The tweens were meant to be used for animating drawings. Because it was marketed to every Tom, Dick and Harry, people started using it to animate hideous menus and flying content text. And Adobe complied to this new use, building an abode of total chaos.
Flash is still the best animation engine for the web, it should never have catered to full flash websites.
Many HTML5 fans out there, but it needs to be said: Canvas is a decade behind Flash. But for everything other than animation, Flash is an abomination.
In old browsers, you can emulate drag'n'drop of elemnts from the DOM but in new browsers, you can also drag'n'drop files (like images) and there are events for it: https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
For flash-like animations, it's been possible with JavaScript for a long time but doing some bug ones was really hard and often slowing down the page.
Now, there is canvas and WebGL that allow you to do it in a more convinient way (for the complex ones).
And with canvas, WebGL, CSS animations (if you use the tric to make the browser think it's 3D), you get CPU accelerated so it's way faster.
There is also requestAnimationFrame that allows to optimise the reflows and therefore the script.
The best example I know on what can be done is the Quake II port to the Web :
Video: http://www.youtube.com/watch?v=XhMN0wlITLk&feature=player_embedded
Project's site: http://code.google.com/p/quake2-gwt-port/
as said in soe of the answers above, I'm pretty sure jquery's draggable/droppable plugin will do the job for you if you just need a basic drag and drop dress me up type of game. Basic premise is this:
in the default example, your avatar to wear the clothes would be a div with a png/gif.jpg background image of a girl/boy whatever(instead of an orange drop here background)
the clothes will be the "drag me to my target" objects in the example. you can create them as divs or even image tags that have the draggable class in them so you can drag them around and drop them in the orange boxes/avatars.
you can save the data using ajax, which is also covered in the examples there(or other tutorials in the net, it's easy)
???
PROFIT
Just try it out and see for yourself. If you need any help you can just ask here again, but I do think that the jquery UI answers are valid answers to your problem.
I don't have an example site to show you, but I'm pretty sure given some images and stuff I can whip out something...if I had the time lol.
You can definitely do these "flash-like" things now in HTML5 web browsers. Check out the examples at http://www.chromeexperiments.com/
In fact HTML5/CSS3/JS can do anything flash can do. But there are some drawback :
It is not yet mature. Lot of bugs, lot of difference in implementation depending of browsers and many people simply don't have yet browsers that support it.
Adobe has a really nice set of tools that help making complex flash applications. This doesn't exist (yet ?) at the same level for HTML5.
On a side note, neither flash, neither HTML5 will really shine on mobiles phone. People prefer native applications anyway. You might need to provide a web version, but you'll need too a app version (one per big phone player).
We can speculate how HTML5 will rule the word in the next few years, but as of now, impact are limited outside of nice looking demo that consume 100% of CPU (really, really bad for mobile device).
For drag and drop support, anybody can do that - in HTML4 and in any browser with a few lines of javascript - inside one page, or can think to do it on between 2 browser windows of the same website. Doing drag & drop between browser and any native desktop application is another thing.
For a great example of what you can do with HTML5 in terms of drag and drop, I suggest you take a look at this article and in particular the short demo at the beginning. The article also highlights a few other goodies that come with HTML5, such as localStorage and the HTML5 Canvas.
For a more detailed tutorial on the HTML5 drag-n-drop API specifically (really it is a Javascript API), take a look at this other article. It is dated from December 2009 but still valid.
Lastly, this video gives you a good insight on some of the cool visual effects that you'll be able to do with HTML5 (SVG, Canvas, CSS3, WebGL, ...). More of a marketing video I'll admit but a good illustration of some of the more powerful HTML5 features (at least from a visual stand point) and of what we'll start seeing in our browsers in a not so distant future...
Disclaimer: I don't work for Mozilla. I just happen to have researched this topic in the past and found that the material produced by Mozilla, and in particular the demos from Paul Rouget, to be the most instructive.
jQuery UI is an amazing library...
Drag: http://jqueryui.com/demos/draggable/#default
Drop: http://jqueryui.com/demos/droppable/
I belive that the droppable examples will answer your question of "In particular i am looking for drag and drop support of one element onto another"

How to create a flip book/page?

I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code

Javascript Game: What should i know?

I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?
Some things i would need
Framecontrol. A way to get the current time (or delta).
Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
Input A way to lock it in a box (like flash does) is cool.
Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
Bottlenecks. What are things that will kill the CPU?
Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.
I'm going to answer this looking at things from a mootools javascript perspective:
Framecontrol. A way to get the current time (or delta).
periodical()
Image, displaying it and moving it. How do i display full image.
setStyles()
Input A way to lock it in a box (like
flash does) is cool.
Plain old CSS
Sound play simple sounds on demand
(like when i get a hit).
Swiff, remote();
Bottlenecks. What are things that will
kill the CPU?
Internet Explorer.
Restrictions.
3D ... ?
What are good things i can do ... to
lower glitch or compatibility
problems.
Use a framework.
As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.
For some examples of games in javascript:
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
http://my.opera.com/WebApplications/blog/show.dml/200788
This one is interesting, it is demos of games using the canvas element.
http://www.canvasdemos.com/tag/games/
The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.
Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.
The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)
This may help a lot:
http://benfirshman.com/projects/jsnes/
its an online NES emulator that renders everything on screen - the source is also available
Hope that helps =)

Categories