iBooks JavaScript resources - javascript

iBooks recently started supporting JavaScript inside epub. Where is this documented?
Are there any code examples to get started?

** Update, one year later : This has been now documented for several months in the official Apple Docs available on iTunes Connect
From what i've seen, you already have quoted the best known sources.
I think that it is not documented anywhere in the official docs from Apple. Here are some elements from what I've experienced.
Features supported by iBooks
A lot of things that work on Safari work on iBooks too. You already have access to HTML5 features like internal DB, canvas, etc. The biggest problems I saw were related to slowness and vertical positionning. There are problems with pagination too : if you add content, pages are not added to the end and the content can overflow.
Validation for the iBookStore
Before being published on the iBookStore, it relates entirely on Apple's arbitrary validation when it comes to Javascript. I know at least one ePub with interactive forms and DB, that they have validated.

For lack of better resources, I created a open-source example of using JQuery to show an alert. Might be helpful as a starting point.

The examples you give refer to the interactivity in the body of the books. Javascript scripting can also be used within the HTML widgets:
HTML widget boiler plate on github -- https://github.com/TrevorBurnham/iBooks-HTML-Widget-Boilerplate.
iBook Widgets with D3.js --
http://vallandingham.me/ibooks_and_d3.html
(to check the widget, click on 'download a copy of my iBook file', change the iba extension to 'zip', uncompress, navigate to vis-1.wdgt)

Related

Real-time collaborative rich text editing

I would like to have a real-time collaborative rich text editor for my webapp. So far i've done a LOT of research and i'm really a bit frustrated that there is nothing fitting out there.
The thing is, that every solution out there is tightly coupled to an editor (Firepad for example uses CodeMirror/ Etherpad uses Etherpad).
There are only two other solutions i found interesting:
ShareJs -> works only for plain text
Webstrate -> This was the MOST promising to me. It can handle DOM synchronization and therefore it can handle every contenteditable - great!
But the problem with Webstrate is, that it is in an alpha Version. So for me it was too buggy - didn't work out. Tried to get it working for about 2 days. The text synchronization was easy. But it didn't work with iframes or other stuff.
My claims are pretty high for a collaborative RTE - it should support:
Images
Iframes
Video
Text (of course)
While i'm searching for about 3-4 days now for a solution - maybe someone of you has a hint? Would be very gentle ;)
You can try http://swellrt.org, is a complete framework to develop real-time collaborative apps including rich-text support and an editor for Web.
It provides a JS API, analogue to GD Real-time API, plus rich-text editting.
The editor can be extended to support any attachment.
It's a fork of Apache Wave that generalizes the original code.
The closest thing I found is http://quilljs.com/ - it has an API for getting and updating text deltas and also for getting and setting multiple labeled cursors. It doesn't manage the real-time editing for you, but it gives you enough to work with (more than any other project I found). However it is not as comprehensive as other editors in formatting (for example, it doesn't support tables and nested lists). It is somewhat extensible, so you may be able to add support for additional HTML elements.
Robust collaborative rich text editors are still somewhat bleeding edge. Most web based text editors fall into of two categories.
Those that are compatible with real time collaboration but have fairly limited functionality (e.g. no tables, no nested elements, etc.).
Those that are very robust web based rich text editors, but lack that API to integrate with real time technologies.
Then there are the collaboration engines like ShareDB, Google Drive Realtime API, SwellRT, and Convergence (full disclosure I am a founder at Convergence Labs). These types of systems each have their own opinion on data models and how to mediate collaboration. It may be the case that the way your favorite rich text editor works internally is incompatible with the API of the collaboration engine.
The technologies out there that simply sync the DOM are interesting because they are often portable across editors and are less dependent on the editor API, but they tend to lack a lot of the required real time editing capabilities that are required for good collaboration (shared cursors, shared selections, etc.). This can be very hard to implement on top of a DOM syncing approach from outside of the engine itself. Unfortunately, without these features, the collaborative editing experience is not that great.
There are several projects out there that are attempting to remedy this situation. The folks at CKEditor are working on CKEditor 5 which has collaboration in mind. Also, over at Convergence we are trying to work with the authors of many of the popular editors to enable real time collaboration.
The reality is that it is still a pretty new space and evolving quickly. There is no tested, scalable, slam dunk solution that provides and out of the box fully capable, collaborative, free and open source editor. The situation looks to be improving over 2018. Hopefully in the next 12-24 months this becomes a much easier problem.

Web browser Text annotator to annotate documents

I thought to bounce this idea from people here:
I have to build a light-weight text annotator which will be later embedded in one of website.
The text annotator will be used to collect manual annotation for various documents from various users (i.e. human users which are logged in to that website). User will be rewarded based on their labor.
Wondering if anyone has already done similar thing or if someone has any thought on this task.
As per my research so far, somehow using CKeditor for this seems good idea.
This is totally new to me and I am also new to JavaScript (but hardcore with Java core :) ). Any assistance will be greatly appreciated.
The Firefox addon Semantic Checker retrieves semantic data such as this from websites. There are also several JavaScript libraries which facilitate creation of such metadata:
RDFaCE
createjs
annotate.js
alohaeditor with WAI plugin
vie.js with backbone.js
References
Commercial Benefits of Accessibility | CKEditor.com

Is it recommended to use javascript to build layouts?

I'm creating a blog, but I need box-shadows for my boxes, so I'm asking the following.
Is it good to add shadows via a)images/css or b)javascript?
I've heard that lot of people don't have javascript enabled while browsing, so is there this a problem? It would be easier and simpler to create these shadows with javascript than adding a million divs and positioning them.
EDIT: I found this page: http://www.w3schools.com/browsers/browsers_stats.asp and it says that almoset every user has js enabled.
You could use JavaScript for your layout, but the general principal that you should keep in mind is that your HTML should be semantic: the elements on the page should have a meaning; it should project a structure that goes beyond the design of the page (although that structure can certainly be used as an indcator for the design aspects as well).
When this principal is applied, using JavaScript can help with providing the style you wish to project given the semantic meaning of the page.
Also, you should check your server logs (your hosting provider should have some sort of analytics tool/report available) which should tell you what browsers and versions are being used to visit your site. With that information, you can get a good feel for the people that you are currently reaching.
If you are using some sort of analytics package (e.g. Google Analytics) then you can possibly see the delta between two periods of time for the new visitors to your site as well, and try to gauge the capability of the browsers that new users will be using when they visit your site.
A few things to consider when using JavaScript to manipulate the DOM on the front end:
If you are using JavaScript to manipulate a good deal of the content, it's going to be a client-side process, and that can slow down the rendering of your page. You might want to consider a theme/template for your blog/cms which gives you the styling that you want and is rendered through CSS on the server-side.
Search engines do not execute your JavaScript. Because of this, you want to avoid manipulating the indexable content at all costs. You want your content to be embedded in the HTML as it is sent from the server. Using AJAX or other JavaScript to manipulate certain things is fine, but when it comes to your content, unless you are stylizing it, do not use JavaScript to manipulate it
Use CSS box-shadow for nice, up-to-date browsers: http://css-tricks.com/snippets/css/css-box-shadow/ (requires no extra markup)
And for most everyone else, serve up your js solution.
You should do it the easiest way for you and allow the page to degrade gracefully for those without JS (If you think you need to consider them, as today, I don't see any point in building none JS sites or building sites for no-js users).

is using TinyMCE a top choice for WYSIWYG editor on a webpage? What are good alternatives?

is using TinyMCE a top choice for WYSIWYG editor on a webpage? What are good alternatives?
some comparison seems to show that TinyMCE is one of the most compatible across browsers:
http://geniisoft.com/showcase.nsf/WebEditors
TinyMCE is a great choice. I've used it in commercial offerings with good results. I'm also looking at FCKEditor for a new project specifically because of the integrated file upload and rumors that it has better XSS protection. Frankly, I'm not sure either one is sufficient to protect against XSS (you may have to supplement with something like http://htmlpurifier.org/ if that is a concern).
I've been using FCKEditor with ASP.NET for years and have found it very easy to customize and configure. It's very stable and the intergrated upload feature is a plus. http://www.fckeditor.net/
This is one of the best in my opinion:
http://www.openwebware.com/
YUI Editor
If you are using PHP or ASP.NET on the back end, take a look at SPAW Editor.
Nicedit is useful for some simple text areas and it has a somewhat clean javascript api.
There is a list of other possible richtext boxes here.
TinyMCE and FCKeditor are the top two WYSIWYG editors in terms of popularity. They are both feature-rich and highly customizable. In my opinion TinyMCE is the easiest to use and maintain of the myriad different options, and still gets my vote after 4 years of usage. YUI is another nice choice worth evaluating, as are the others listed above. I've listed the demo pages for each below:
Tiny
FCK (current site demo is broken, here's a cached site)
YUI
OpenWYSIWYG
I'm liking this Stack Overflow one as well though, +1 to the crew.
-EDIT- but then -1 because you treated me like a spammer with only 1 allowed hyperlink...
HTH
Jeff M.
TinyMCE was the editor that we chose when we were making an internal staff website. The nice part about it was all the keyboard shortcuts (probably found in other editors) and that it was the same editor used inside of WordPress.
We were very happy with how the site turned out, and kept the editor. I would recommend TinyMCE for your project.
Why not try the Stackoverflow site's solution?
you can find details in Stackoverflow's blog post here : Potential Markup and Editing Choices
As many have said here, FCKEditor is a good alternative. However, pay attention to the licensing models of the editors especially if you're planning on using them for a commercial, closed-source application.
http://tinymce.moxiecode.com/license.php
TinyMCE is just LGPL.
http://ckeditor.com/license
CKEditor (the most recent manifestation of FCK Editor) has a separate Closed Distribution License which may cost you some moulah...
I like the feature set and theme of FCKEditor/CKEditor better than TinyMCE but I often end up using TinyMCE due to it being a little simpler to handle in terms of licensing.
No one has mentioned the CuteEditor yet. It's got a silly name, but it's actually quite nice to work with. It's not free, but an enterprise license (which allows you to use it on any number of servers, dev workstations etc) is only 900 bucks or something ridiculously cheap. I believe it's only availble for ASP.Net and classic ASP, though I could be wrong.
TinyMCE and similar editors are not suitable for non-technical people who are likely to mess up the markup. Specially when said non-techy people copy formatted text from word into the RTE on the web page, thinking it's the most natural thing to do.
If you're audience is technical, something like markdown (as used here on SO) is more suitable.
If they're non-technical, let them use WYMeditor (WYM = what you mean), and provide some sort of a tutorial/explanation so they can use it.

Adobe ExtendScript development - How different than regular JavaScript?

Question
I'm wondering how different ExtendScript is from JavaScript? Could I theoretically hire a web developer who has JavaScript savvy to develop it without demanding an excessive amount of learning on their part?
Overview
I'm working on a media database (or a so-called "multimedia library") project and it is based on XMP (the eXtensible Metadata Platform). The logical tool for administering the metadata and keywording seems to be Adobe Bridge, however I need to contract out the development of a couple of scripts to add a few key functions to Bridge, mainly for interfacing with a server-stored controlled keyword vocabulary.
Upper management, in their infinite wisdom, has decided that putting a software alpha/beta tester and Adobe heavy-lifter [me] in charge of developing the project discovery is the best way to go about this. Whilst I know what I need done, I'm unsure who can actually do it.
Regrettably, my programming knowledge is limited to C++, XML, Apple Script and web languages (unfortunately not including JavaScript), so I'm way out in the weeds when it comes to questions about JavaScript.
Bridge Developer Center
Adobe has a handy SDK out there on the subject, but I can't really make much sense of the overall picture. Much of the Adobe user-to-user forum content is old or unrelated.
Project description
I need a menu added to the menu bar with three options. The three options would all use "Clear and Import" function possible in Bridge's Keywords panel to import 1 of 3 different tab-delimited text files from the database server using either the FTP or HTTP object.
The reading I've done in the Bridge SDK and JavaScript guide suggests that menu items can be added as I've shown in the image below for clarity. Additionally, I've managed to get a very rough version of the "Clear and Import" method to work as a startup script, however I'd like to be able to call them on the fly by clicking on the appropriate menu entry.
For a larger view of the image, click here
ExtendScript is very close to regular JavaScript. They've made a few extensions (e.g., operator overloading) but overall the two are very similar. Adobe products include an IDE called the "ExtendScript Toolkit" (ESTK) that provides a nice environment for writing scripts with an interactive debugger.
You can create new menu items in Bridge by creating instances of MenuElement. Set the onSelect property of the MenuElement object you create to be the function you want the menu item to perform when you select it. The Bridge CS4 JavaScript Reference guide has all the details.
If it's anything like the scripting used for the old Flash IDE, then I think it's just straight javascript/ECMAScript. The only real difference is the APIs you have avaialble. I expect anyone who's good with javascript would be able to pick it up fairly quickly.

Categories