Articles Tagged 'Ajax'


Accessibility and Usability: unobtrusive Javascript

Allowing users to interact with a Web page in recent years has produced a significant increase in the use of client-side scripting: Javascript code can respond in real time and manipulate a variety of information. The Web2.0 is the ultimate expression of this capacity for interaction, in which the end user - the user-actively participates in the construction and to 'evolution of the Web site, interacting with it and helping yourself. Is referred to as User-Generated Content (UGC or - user-generated content) that sees the "navigator" definitely not passive!

To achieve this interaction, thus allowing the end user to add his contribution, we developed a series of techniques that have changed the appearance and behavior of Web pages (static so far, but now similar to the traditional applications of Desktop) in recent years. Change the content of a page, send files, giving their vote to a video or a document, register or change their personal data, are just some of the richest operations in many services (2.0 beta) on the Web

Continued ...

Adobe Apollo Alpha Release

Adobe has finally released the alpha version of Apollo . We are still far from the final version, but you can check out some of its features with the demo applications (. air) proposals online. The installation ( Apollo runtime ) of this Alpha weighs about 6Mb - for Windows. The Demo (Apollo sample applications) do not weigh even 600Kb. After installing the Apollo runtime will seem nothing changed on your PC (not added any links on the desktop or taskbar), even though you have installed - in fact - the new browser from Adobe! See Web2.0: Adobe is trying to Apollo?

Continued ...

Where JavaScript wins

Choose the technology to be used in the development of a Web Application is of vital importance, not to find himself in trouble soon after. The type of web application, its operational characteristics, are the first point to be taken into account to choose the Framework and related technologies.
I have often discussed the effectiveness of JavaScript script against different technologies such as Adobe Flash or Java. However, it is worth pointing out an important aspect often overlooked: access to the DOM. JavaScript, in this case, the candidate (if not the only one) a favorite for this type of operation.

Tools with Snap , for example, work on a simple mechanism: when the HTML page is loaded (and after introduction of the loading of JavaScript scripts) is to scan the page and added a new HTML code at special points. In the specific case of Snap identifies all links to external pages (or internal configuration of the last issue), the TAG <A> for Indentation. These are modified so that on mouse to open a dialog anterpima of links (see this very blog for an example).

Not only snap but many other JavaScript scripts basically do the same thing. Lately, this technique is widely used due to the library Prototype , which provides a variety of methods (such as the famous double-dollar, or $ $ $ - see Prototype: The use of the double dollar sign ($ $) ) is to track that change - the fly - the elements of an HTML page.

Navigating through the HTML DOM is therefore specific task of Javascript. Historically, among other things, Javascript was introduced just to read and write the contents of an HTML page.
For example, if we wanted to make some changes to an HTML page using Adobe Flash, we aggorgeremmo - sooner or later - to be forced to invoke a JavaScript function. The new ActionScript 3.0, for example, offers a class ( ExternalInterface ) suitable for this purpose. – o fscommad() per chiamare una funzione Javascript: Once (in previous versions of ActionScript) we used the command getURL() - now replaced by better flash.net.navigateToURL() - or fscommad() to call a JavaScript function:

1
) ; getURL ("javascript: myFunction ()");

In addition:

The ExternalInterface class is the External API, an application programming interface That Enables straightforward communication Between ActionScript and the Flash Player container, for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded.

Note that the "desktop application" that so reminds Apollo!

Today, thanks to ExternalInterface , you can invoke a JavaScript function to at least cleaner (this class allows management much more effective than getURL() , such as parameter passing):

1
2
3
4
5
6
/ * Calls the external function "addNumbers"
passing two parameters, and Assigning That function's result
to the variable "result" * /
uint = 3 ; var param1: uint = 3;
uint = 7 ; var param2: uint = 7;
uint = ExternalInterface . call ( "addNumbers" , param1 , param2 ) ; var result: uint = ExternalInterface . call ("addNumbers", param1, param2);
1
2
3
4
5
6
<Script ><!--
/ / Adds two numbers, and sends the result back to ActionScript
num1 , num2 ) { addNumbers function (num1, num2) {
num1 + num2 ) ; return (num1 + num2);
}
/ / --></ Script>

What can we conclude then? Of all the various frameworks and libraries available the initial analysis of the project you want to achieve is of paramount importance. Failing this stage can seriously affect the subsequent stages of any project Web2.0. JavaScript, then, when you have to win all interact with the DOM.

Continued ...

Prototype: The use of double dollar ($ $)

With the latest release of Prototype, Andrew , and Christophe have speeded up and improved the function 'double dollar' ( $ $ utility ), which allows you to select an item by specifying the selector (almost all CSS3 selectors supported by the specifications).

The usefulness of this feature goes beyond the popular $, which can be helpful but, ultimately, does not perform any operation worthy of note. The utilities 'double dollar' ($ $) instead of actually allow you to select any type of item, giving you great tools to filter elements in the DOM.

Here are some examples taken from the official site:

1
2
3
4
5
) ; // -> Tutti i DIV del documento. $ $ ('Div') / / -> All Document DIV. Same as document.getElementsByTagName ('div')!
) ; // -> Uguale a $('contents'), ma ritorna sempre un array. $ $ ('# Contents') / / -> Same as $ ('contents'), but it always returns an array.
) ; // -> Tutti fli elementi LI con class 'faux' $ $ ('Li.faux') / / -> All fli LI elements with class 'faux'
) ; // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel $ $ ('# Contents a [rel]') / / -> All the tags (links) below for an element with ID "contents" and with a rel attribute
) ; // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!) $ $ ('A [href ="#"]') / / -> All the tags (links) with an attribute href value "#" (eyeew!)

The strength, however, lies in the possibility to exclude certain elements in favor of other, for example:

1
) ; // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow" $ $ ('A: not ([rel ~ = nofollow])') / / -> All the tags (links), excluding those containing a rel attribute set to "nofollow"

Even more interesting is:

1
) $ $ ('A [href ^=#]: not ([href =#])')

This, in practice, finds all the tags with the href attribute that begins with '#' but does not take into account those that are equal to '#' only. In other words, ignores the links that pointed to a valid ID!
This unique feature of ($ $) has inspired Tobie Langel for creating a simple script (disarming) can add a nice effect when scrolling within a single HTML page you move to Anchors, with the technique - in fact - href ="#".
For a demo click here .

Continued ...

Reverse Engineering: the compressors code

A neglected issue in the context of Web2.0 is the protection of the source code. With a view Open Source, Web 2.0 is where its greatest expression in the beta, share and participate in the community surely leaves in the background issues related to the protection of the source code. Let us recall that the scripts are downloaded JavaScript into the browser from the Web Server, such as text files so that they are visible to the end user.
While the code server is protected by definition (it is impossible to access the code of a PHP page using the HTTP browser, except in rare cases malfuzionamento Web Server), client code may be subject to a Reverse Engineering.

However, there is a simple protection designed, from its beginnings to the size dimuire JavaScript scripts; now become real framework in some cases.
There are in fact applications and Web sites that allow you to compress (crunch) the Javascript code, but not only. This feature, in different ways, can also be applied to HTML and CSS. The JavaScript code, in particular, in addition to being compressed may be hidden, thus obtaining a security code (on demand) that makes the procedure more complex reverse engineering.

Differences between HTML, CSS and Javascript are important and substantial. While the compression of HTML pages and style sheets can only act on the Elimination of unnecessary or superfluous characters, such as 'head', 'double spaces', etc. ..., Javascript is a programming language that can then run a special code unzip himself.

JavascriptCompressor.com is a free service, available online, allowing you to compress JavaScript source code. The options make it extremely versatile, while ensuring the darkening of the code.

Example code of departure:

1
2
3
function MyFunction () {
"Hello World" ) ; alert ("Hello World");
}

Compression code:

1
alert ( "Hello World" ) } function MyFunction () {alert ("Hello World")}

Encoding normal

1
5 , 5 , 'World|Hello|alert|MyFunction|function' . split ( '|' ) ) ) 3 () {2 ("1 0")} ', 5, 5,' World | Hello | alerts | MyFunction | function. 'Split (' | ')))

Obviously this is an example, with small compressed code does not really make much sense, you risk making things worse and that's it (unless you're only interested in code obscuring the view).

Compressor MemTronic Cruncher is also an online service (like the previous work in offline mode), partially free in the sense that some functions are only available in paid version (as the function Obfuscade). Compared to the preceding service should offer better performance and security of the encryption code. I use them indiscriminately, as appropriate.

Peterbe.com does not allow Javascript to compress (unless that eliminates spaces and 'head'), but proposes a compressor for HTML, CSS and XHTML. I, for example, I use it to compress the style sheets.

Unless you use special algorithms crunching, however, that weigh down the processing of data, you can always perform a reverse engineering the code, including the compressed. Or soon or late, in fact, the original code must be sent to the interpreter of the browser, which recognizes him (for now) only in the clear. In the future, with new versions of browsers, this obstacle could be overcome. It would be beneficial if it were implemented, within the browser, some technology capable of accepting pre-compiled JavaScript code, so to speak in binary (if anything encrypted ). This will cut the time needed to download the script, allowing a natural protection from reverse engineering and, last but not least, better performance in terms of script execution.

Continued ...

Xopus: WYSIWYG XML editor

Xopus is an XML editor (HTML) in WYSIWYG mode operating within the browser. I had already noticed some time ago, thanks to an article released on Ajaxian . I mention this now because it remains an interesting proposal in the landscape web2.0/editor. It is an interesting experience! Xopus has developed really well (with Italian support), with an excellent implementation of the context menu, although still not fully cross-browser, the current release 3.1 is supported only Microsoft Internet Explorer (version 6 and 7 ), however the developers have promised as soon as at least a compatible version with Firefox (February 1 has been released in alpha version 3.1.1 is compatible with Firefox 2.0 +).

As discussed elsewhere, the question of compatibility (cross browser) via the browser, and penalizes slows the development of tools, not even using special technologies such as Java applets or Adobe Flash, could bring a significant contribution to the Community! Conttibuto impeded - eventually - from unnecessary internal battles of the current producers of browsers: IE, Firefox, Opera, Mozilla, Safari, ...!

Viewing the demo will also see something more than simple HTML editor, to put it bluntly. Xopus proposes is the classic structure of the editor, the style and advanced features of Microsoft Word. You can, in fact, enter the page real smart objects that meet certain characteristics, making Xopus a particular case.

As indicated on the website:

Xopus is a good solution for Any Business That Has a back-end content management system and in-front-end publishing systems and two systems Which Therefore use the examination information. That structure to information, to Make Both Ends Meet, Therefore is a must.

You can watch a video demonstration that introduces the advanced editing features. Also you can try a demo directly.

Continued ...

Web 2.0: Firefox 3.0 Gran Paradiso and Apollo-

It is available online version of Firefox 3.0 Alpha 2 , code-named Gran Paradiso. Among the features announced (the final version is expected in late 2007) we can use the browser off-line mode. All this reminds Adobe Apollo, which, although not present it as your browser, it evokes the essential features.

Continued ...

Weebly: Create your website Online

We often talked about the use of the Web Application (Web2.0) and how the software market is moving to online applications typically installed on our machine. Last important signal by Adobe (see Net Software ) that wants to release - or is starting to drop - a set of software online.

Today I propose to you a really great tool, Weebly , which aims to create a website online, complete with domain (tuoweb. weebly.com) and tools for editing really interesting. See the video demo below.


If you do not see the video click here

The idea, of course, is not new, but the approach Weebly clearly shows why short-must have Adobe Photoshop online will really be a step forward. In addition to ease of use this service offers interesting editing tools such as RSS readers, inclusion of Google Maps, Video input (from various sources) and more. The use of Ajax and DHTML (Dynamic HTML) is really used for, which makes the job of editing really easy and affordable for everyone.
The interesting point, in my opinion, is that when you insert an image you can turn a small editor for daily operations as diverse as Crop - crop - and Resize - resize.

We just rolled out a couple of new features: You can now Edit, Crop, Resize, Adjust and Enhance your pictures in the new integrated image editor Snipshot, we'll present a warning (but allow you to continue) if you are using an unsupported browser, we released some small updates to the themes, and a couple other small changes & fixes.

The fundamental issue lies here. A short tools like Weebly can use image editor like Adobe Photoshop, which will make the business of Web Design Online editing of the traditional.
Obviously this is only part of what might happen; editor Video, Audio and Text are the next to enter advanced forcefully online!

Continued ...

Net Software

It happened to turn the TV Net TV, as had happened to become a Radio Net Radio, not to mention the music! Now, as mentioned in other posts, it's official for the Software to transform short-term Net Software!

Adobe , which we know has recently acquired Macromedia, formalizes the Web Application - Web 2.0 - in real RIA (Rich Internet Applications) with the announcement of wanting to take on the popular Web editing software Photoshop. It is the latest ' agreement between Adobe   and Photobucket   to make available online a technology for editing and video remix. Thanks to new technology developed for Flash 9 with ActionScript 3.0 , Adobe aims high, anticipating that within six months will be available online version of Photoshop based precisely on Flash technology.

Indeed, the new possibilities of ActionScript 3.0 (involving projects such as Flex and Apollo - see also Web2.0: Adobe is trying to Apollo and Ajax Rich Internet Application ) makes it the perfect candidate for the implementation of true on the Web Ajax RIA , on the other hand, we see ousted from his throne in this new scenario. Despite the countless Ajax Framework, some excellent, produced during the last few years, Flash provides an environment most advanced and easy to manipulate. Also we talk about one of the world's most popular plugins: Flash has it behind a few years older than Ajax and derivatives.

Furthermore, it is obvious that the Adobe Flash chooses, he being the producer now. However there are technical issues that may be considered - to date - only to be resolved in a harmonious application of technologies such as Flash. Taking a look at the new ActionScript 3.0 we immediately realize the tremendous possibilities of development offered by this new platform. The ECMA standard language and new items made ​​available by the framework allow you to reach a level of detail possible with previous versions of Flash: one of all, for example, the ability to access data from an uploaded image Bitmap hard!

The attack by Adobe seems to take place on two fronts so distinct that they have in common the Flash technology (which remember has always been the ability to actively interact with the browser and then with Javascript Client side and server-side scripting).

The first attack takes place outside, on the browser side, where the technology Apollo is really proposed as an alternative to the usual kernel of the different platforms, available today (Windows, Mac OS, Linux, etc. ...); use Adobe Apollo , then, instead browser for best performance and applications (RIAs real) unthinkable, thus bypassing the incompatibility between Internet Explorer, FireFox and companionship. In addition, Apollo provides a single development platform, JavaScript-like Ajax, but without compatibility issues. This last point is a significant setback to technologies like Ajax, which still suffer greatly with issues of browser compatibility, do not forget, moreover, made the whole issue (rendering) graphical CSS!

The other attack is from inside, hitting Ajax Framework with Flash card. The winning element in this strategy lies in the use of Flash, the Flash technology, which is applicable both in Flex , both in Apollo , both as a standalone version already are accustomed to seeing (simple SWF file for instance)! There is no doubt that this scenario is extremely attractive to developers, and Web. What becomes immediately realizable Flash reusable in various ways, without forcing me to change a single line of code and, moreover, without worrying about compatibility!

This, in my opinion, is an important step forward, a change of considerable proportions, which also involves the world of games and Marketing. We'll talk again soon, make no mistake!

Continued ...

Web2.0: Adobe is trying to Apollo?

Apollo is the code name (for now) of an ambitious project in the world for Adobe RIAs (Rich Internet Applications) and Web 2.0, including Ajax. Someone remembers Macromedia Contribute, Macromedia Central to someone else. There is, also, who sees in Apollo simple union - or opportunity - to bring together elements of Flash and PDF (something which has already been feasible with Flash Paper)!

Continued ...