We Keep Coding

Prezi HTML5 Editor via impress.js [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I recently known that impress.js has been created as a HTML5 version of Prezi. This helps us to move away from the proprietary Flash technology, and instead use an open web standard that will become universal to all platforms.
However, it is annoying to type up the code on a HTML text editor (like writing the translation, rotation, and the scale values for the slide). It becomes difficult to visualize the presentation especially when the code is extended to an unbearable length.
So here is an example I just created. When reading the HTML code below, it is hard to know exactly where the slides are, and how they will be displayed.
<div id="impress">
<div class="step" data-x="0" data-y="0">
Slide 1 at origin.
</div>
<div class="step" data-x="100" data-y="100" data-scale="0.5">
Slide 2 has been moved south-eastern side and shrunk by half compared to slide 1.
</div>
<div class="step" data-x="-500" data-y="-405" data-rotate-x="50" data-rotate-y="-34" data-rotate-z="50" data-scale="2.5">
Slide 3 has been rotated in 3D and is 2.5x larger than slide 1.
</div>
</div>
<script type="text/javascript" src="impress.js"></script>
A JS Fiddle Example.
So is there a WYSIWYG HTML5 Prezi editor that I could use? I would want one as it will make it much easier to create presentations based on HTML5, CSS3, and JavaScript.

Hey I recently made Strut. Its a presentation editor just for ImpressJS and is currently in alpha but there is a live demo up here:
http://strut.io
Github repository: https://github.com/tantaman/Strut
and here is a youtube vid about it:
http://www.youtube.com/watch?v=zA5s8wwme44&feature=share
You can add/remove slides, insert images and text boxes, change fonts, save presentations, and modify transitions between slides by moving slides around in the x,y & z directions.

There are several WYSIWYG editors for Impress.js, discussed on its GitHub issue tracker.
Strut and Impressionist seem to be the most praised. Strut is very actively developed (last commit: yesterday)
Not discussed there is http://www.impressi.me/, which seems abandoned since April 2012. It's also very basic: you can only add text and transitions. No images, can't enter a custom font size.

There is another way to create impress.js presentations and it's completely free - available on www.jspres.com. The module for creating presentations is JavaScript based, but the project contains server side which stores the users presentations and they can access them from every computer.
There are two presentations made with JSpres for an example. The first one is just promo of the project, and the second is the presentation which imagined the project on the National IT olimpics in my country (this is the reason that is not in english, but you have to see the transitions :P)
http://jspres.com/presentation/present/p:3
http://jspres.com/presentation/present/p:31
So if anyone want to see and try it but have some troubles I wrote a simple guide that will help you to understand the basics and can be found here: http://blog.jspres.com/2013/03/getting-started/
So I will put some screens to provoke a little curiosity in you to see the project. I wish you will like it.

For editing the slides content inline there's a first prototype made with Aloha Editor* available at http://lab.evo42.net/editable-impress.js/ -- adding or arranging slides is not possible yet...
*) http://aloha-editor.org

Alternatively, you could use Presenteer.js (http://willemmulder.github.com/Presenteer.js/) which simply moves from one HTML element to the next and centers/zooms it in the viewport. You will not need the data elements, but can work simply with CSS.

I have recently published a working impress.js editor prototype where I focused on WYSIWYG positioning of slides in presentation.
You can track progress or report issues on github: https://github.com/naugtur/builder4impress

Jquery Timeline plugins [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am in search for jquery timeline plugin with years on the horizontal axis.
I have seen one in the past. I am not able to find it. Did search for jquery timeline plugins.

Here are 2 that I had stored in my bookmarks. They aren't jquery plugins, but they could be adapted to be jquery plugins. Eric Meyer's structured timeline and timeplot. I also found this service called Tiki-Toki which offers timelines as a web service.
Or you could just use something like HighCharts if that will work for your situation.

Have a look at this http://timeline.verite.co/. Its real good. Plus you could have JSON or Google Spreadsheets as data sources.

There’s jQuery Timelinr, if you need only years.
For more data, esp. scientific use, have a look at Timeglider or SIMILE Timeline (without jQuery).

TimeGlider may be useful, and free for non-commercial use.

Two more:
Advanced Event Timeline With PHP, CSS & jQuery at Tutorialzine
Dipity, to create your timeline online

I developed a simple jQuery plugin for this purpose, although it displays the years (or century or decade--anything of your choosing) on the vertical axis. See http://www.technotarek.com/timeliner/ and http://www.technotarek.com/timeliner/timeliner.html

A great timeline control that I have been using recently is the CHAP Almende Timeline. It is simple on the surface and to use, but offers plenty of customisability. Seems fairly lightweight, and is able to handle large amounts of events on most browsers (for some reason some browsers choke a bit on large data sets when you zoom out too far). This works quite nicely on tablet touch screens too, if that is useful to you.
CHAP Almende timeline is also regularly updated by Jos de Jong at https://github.com/almende/chap-links-library and he is pretty quick to address any issues.

For anyone that will end up on this post, like me, on its search to jquery timeline plugins, (although it is an old question):
http://timeline.verite.co/
http://timeglider.com/jquery/
http://www.csslab.cl/ejemplos/timelinr/latest/horizontal.html
Cheers!

I made this one, but this is just for navigation, I'm not sure what's the use case of the timeline you're looking for:
jQuery-Timeline Plugin

http://timeline.verite.co/ is good time Line JS

You can try this enhanced jquery timelinr, it integrated jquery timelinr, cufon and animate.css. Good for simple timeline show.

Check this out for various Timeline JavaScript libraries: http://functionn.blogspot.com/search/label/timelines#.ULj4aU_Mjs4
Alternatively, I would recommend you using:
http://functionn.blogspot.com/2012/03/timeline-javascript-library-for.html

javascript - google map like image scrolling [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I want to build an image scroller that works like google map. When the website first loads, there will be a viewing box in the middle of the page that contains part of an image. A user can click and drag the image, that is scrolling, to inspect other areas of the image. If the user happens to scroll beyond the perimeter of the image, the box will load an adjacent image. I also want to overlay these images with markers that the user can click on to zoom in for more details.
Is there a library that does what I want already? Or something close to what I want so that I can start to customize it? Or if I have to build from scratch, any suggestions on the general approach to take?
I like using jquery library, so anything built with jquery would be awesome.

I don't think this does everything you're looking for, but might be a good place to start: SpryMap

Take a look at the Overscroll jQuery plugin.

I've used OpenLayers for projects similar to this and it works great!
Not based on jQuery though.
It provides free maps but you can have your own images as well.

Just for some design ideas to take into account when writing/finding your solution:
There are two ways of doing this, one with multiple chopped up images that preload when the user scrolls near them, and the other which is simpler and loads one big image.
If your image(s) are very big, you should opt for a solution that preloads segments as this will be a lot more user friendly if you can do it seamlessly.
The big image will slow down some computers/mobile devices significantly!

If you built something yourself, it probably couldn't be pure jQuery. You'd want to write a server script that either processes your big images into segments that you cache, or serves segments on the fly. That's the point at which you could start using jQuery to control what gets loaded ans when.

I think CraftMap seems to provide what you are asking for. But I'm unsure if it supports zooming.

Web charting libraries for mobile, our own research [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
We are looking for a nice javascript-based library for a web charting application we have been asked to do. The charts will be accessible and should actually be nice to interact with via mobile devices (iOS, Android, and the like). The user will be able to drill-down into some datasets, so the snappier (both processing graphics and loading data) and the more interactive, the better.
Nowadays, there are countless options out there, and many aspects to look at. Based on my research, I have put together the following list. Apologies beforehand for any mistake, it is not intended to be 100% complete or accurate.. but I think that still useful:
https://spreadsheets.google.com/pub?key=0As7T_22rXSbtdF9YeklwcUVXSEdwQnN0a0FvcWpoU2c&output=html
What is your opinion? Do you have any experiences in such kind of application? Maybe some candidate I am missing?
We are narrowing down the choice, but I am still not sure as for what choice is the best bet. Some questions that pop-up in my mind:
Different ways of rendering the chart (SVG/VML versus HTML 5 canvas). Which one is more suited to browsers in mobile devices? Which one is more suited to user interaction?
Making it look good. Which libraries allow to easily tweak appearance? Is CSS really powerful for this?

You missed out Sencha Touch

first of all, if mobile support is a must-have for you, discard SVG as a solution. It's not widespread supported. Canvas in the other hand, is not supported by old versions of IE, but can be simulated via VML with the exCanvas.js library.
About making it looking good, CSS has nothing to do with these libraries. CSS affects DOM elements, and canvas content is binary data. Canvas is, as the word says, a blank canvas for you to draw in via a Javascript API. Once you draw a line in a canvas element, that information is just pixels in the canvas.
BTW, is a good list the one you collected, and I'm pretty sure it's quite complete. The only intruder in it is Dundas. First of all, is a .Net library, and generates the charts in the server. Second, is deprecated. Dundas is no longer selling components, they're totally engaged with their dashboards solution.
Hope I'd help.

I've chosen Flot for several projects now and it has worked well. It's well documented with lots of examples, configurable, looks great, and is extensible. It is dependent on jQuery.

You might also want to add dhtmlxChart to your list.
It's a Canvas based JavaScript charting library that supports different chart types: line, pie, area, bar, radar, etc. dhtmlxChart is distributed under GPL v2 (commercial license is needed to use it in a proprietary project).
(Disclaimer: I work for DHTMLX)

I know this is an old question, but we had to do a similar research recently.
We focused our study on mobile charting libraries (Android and iOS, native or hybrid -with Cordova-) supporting line / area charts. All the information has been gathered from the websites of the respective chart libraries and no personal test has been made (yet).
Here's the result:
https://goo.gl/0tVC6a
I hope it helps.

What framework would you recommend for making desktop-like apps for the web? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Several frameworks for writing web-based desktop-like applications have recently appeared. E.g. SproutCore and Cappuccino. Do you have any experience using them? What's your impression? Did I miss some other framework?
I've seen related questions on StackOverflow, but they generate mostly standard answers like "use jQuery or MochiKit or MooTools or Dojo or YUI". While some people give non-standard answers, they seem to have little experience using this frameworks.
Can anyone share real experience developing destop-like apps for the browser?

To my point of view, Cappuccino is an example of what NOT to do. They implemented another language on top of JavaScript, which already bring slowliness while browser developer are already fighting hard against, and, what is worst, they don't rely at all on the browser widget, breaking all the user navigation experience. For example, they implemented their own scrollbar, with the main drawback that using mouse wheel won't work anymore!
I really prefer ExtJS's approach which give you rich widgets while keeping the UI as close as possible from the browser.

Due to the speed issues these high-level frameworks cause for many larger (as in: non-trivial) applications, we only use plain jQuery. In our tests, all high-level frameworks broke down in situations where there are many draggable objects or many drop targets, and in situation where long lists (with >1000 entries) were shown on screen.
Part of this is due to issues with IE6 and IE7 (where performance suddenly starts to deteriorate dramatically after DOM trees reach a certain complexity), but part is due to the overhead these frameworks generate.
So I would not recommend any of the high-level frameworks. My recommendation would be to use jQuery and work with the DOM directly.
Some tips to improve performance:
Where possibly, render HTML on the
server.
Keep the HTML as simple as
possible.
Avoid having many elements
in the DOM tree.
Avoid recursive
table structure (IE suddenly stops
showing them after relatively few
levels of nesting).
Remove invisible
elements from the DOM tree.
Remove
things from the DOM tree before
changing them and then re-insert
them, rather than changing them
while they're in the tree.

I also, as gizmo, recommend EXT JS. Their license has changed and it may not work for all, but it's still a good choice if you want to do stuff like a desktop.
Here's their example page for a desktop environment: http://extjs.com/deploy/dev/examples/desktop/desktop.html

Apple is demonstrating that sproutcore does work, although it's hard to estimate how well it works. Currently I build web apps with a home-grown set of libraries, duplicating a set of functionality from our windows software suite (but adapted to a web interface). Up to now I've avoided frameworks particularly for the reason that I didn't want the bloat. The problem with this approach is that I waste an inordinate amount of time duplicating functionality that's already in the frameworks, and I feel that over time I'm going to approximate towards something that resembles these frameworks.
Because of this I've been experimenting with implementing a web app in extjs, and it was a surprisingly nice experience. The performance is excellent, and ease of development is quite high because their component set is good for actually building apps, not just for fancy demos (a common problem in web toolkits). I would definitely recommend it if you are interested in building desktop-like web apps.
The problem of scaling it up obviously still applies, but honestly, I feel that it's better to use a toolkit in situations where scale is not that important, and to fallback to basic javascript only where you need to (premature optimization being the root of all evil). Extjs can layer on top of prototype or jquery, so this approach is definitely workable. Avoiding too much content in the DOM is usually an approach of loading and unloading on-demand. For example, there's a third party extension to the extjs grid class that allows scrolling through a million row dataset by being clever about loading and unloading data.

You might consider using GWT-Ext (uses Ext underneath) might be a very clean solution if you're going to use Java.

I like qooxdoo, although it takes the OOP approach of JS rather than the prototypal it is a solid framework and has a lot of features.

I don't have any experience with SproutCore or Capuccino. But have made attempts to use Dojo on top of Django for this kind of work. Can only tell you it's slow and buggy.

extjs might be of help. http://dev.extjs.com/deploy/dev/examples/