Today Adobe has released a preview of the newly branded Adobe BrowserLab:
BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences. Since BrowserLab is an online service, it can be accessed from virtually any computer connected to the web. Also, Adobe Dreamweaver® CS4 software users have access to additional functionality such as testing local and active content.
Once into the browser lab you put in the URL for the site that you want to check, and then you can see it loaded up on the server on various browsers:
This is a great tool. Being able to point my application and view how it looks in various browser in a nice UI is great. Doing onion peal analysis is great. A lot faster than other browser shot sites up there.
The team will be adding to the list of current browsers supported (OS: XP or OS X, Firefox 2/3, IE 6/7), for example adding IE 8, Chrome, etc. There is also a lot of room for other great features.
Here is my wish list:
I would love to setup alerts and have the browser lab be watching over my site. Tell me when something goes wrong (e.g. difference in browsers in the onion peal of more than X pixels?)
Open API: I would love to have Bespin able to send up its projects to BrowserLab. Opening a new window would work, and inline would be even cooler. They have integrated Dreamweaver so that it can do more than you can on the website. For example, you can interact with the pages and see the differences due to the live WebKit magic they have. I would love to see this on the website itself.
Dreamweaver features online. Dreamweaver has a bunch of cool analytics that it runs on the codebase. I would love to see those available in BrowserLab, so it could tell me “hey, the CSS that you are using with this HTML structure causes a problem in IE 6″. Gold!
Really glad to see BrowserLab out there, and can’t wait to see progress. What would you like to see?
As we’ve been exploring ways to take Bespin to the desktop, we’ve looked closely at some of the single-sitebrowsertechnologies and their individual APIs to work out which platform we favor. As we went through this exercise, Adobe AIR really impressed us with the richness of its JavaScript APIs which wrap native APIs (as well as the accompanying documentation).
There’s no other competing JavaScript API that we’ve seen that comes close to this level of comprehensiveness (please correct us in the comments in we’re wrong).
We weren’t able to use AIR as its implementation of <canvas> is a bit old, but we’re excited to play with it as soon as we can.
Ext JS and Pixel Bender Explorer
We’re not the only ones who have been playing with AIR. Aaron Conran from the Ext JS crew blogged about Pixel Bender Explorer, an AIR app they wrote to demonstrate how to integrate Ext JS with AIR’s Pixel Bender technology that lets you apply pretty amazing effects to interfaces.
Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application. For a good example of how effective these filters and animations can be to provide proper user feedback you should check Adobe’s signature sample BlackBookSafe. Each time an animation occurs it is clear why it happened, not a surprise to the user and adds character to the application. When using these animations you should strive for the same goal, not to surprise your user, but to impress them.
Check out the AIR application to see some pretty amazing fx.
Adobe has been bashed pretty hard in the past for their lack of Linux support in both Flash and AIR (deservedly so). It was a segment of the development and user market that really wanted to leverage Adobe technology but pretty much had their hands tied. It’s evident that Adobe is listening as they announced yesterday that AIR v1.5 now supports Linux. This means that Linux users can now use popular applications such as TWhirl & Kuler while developers can begin taking advantage of the robustness and stability of the Linux desktop environment for AIR development & deployment.
We announced back in September that Adobe was pushing hard on the Linux front with a beta of AIR for Linux and they’ve come through producing a platform that now allows cross-platform desktop development for Windows, OS X & Linux.
The only downside to this announcement is that 64-bit support isn’t immediately available in the new release but it doesn’t mean that it can’t work. Adobe has published a knowledgebase article that runs you through the steps of making AIR v1.5 work with 64-bit Linux distros.
To get started building desktop apps for Linux using AIR, just grab:
Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.
The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.
Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.
Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard');
var data = Ext.air.Clipboard.getData('air:text');
Ext.air.VideoPanel
xt.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
The most exciting part of Adobe MAX last week was a service that was announced by Paul Gubbay at the "Sneaks" session that shows cool tech that Adobe folk are working on. His (very early stage) service is called Meer Meer and it is genuinely useful.
You can plugin a URL and the system will render that page on a server farm (many browsers, cross OS) and show you the results. It can visually layer these results so you can see the differences. It was awesome.
I pinged Paul and had a nice conversation with him about the project:
Can you explain what Meer Meer is, and where you got the inspiration?
Meer Meer is the code name for a new hosted service that allows Web Pros to view their content on a variety of different browsers and operating systems without requiring them to install anything other than the standard Flash Player. The inspiration is easy. We spend a lot of time with our customers and cross-browser compatibility consistently comes up as the #1 issue unprompted. It’s a real pain and we wanted to help solve it.
What browsers and OSes are supported? This means I don't have to kick up VMWare to test in IE 6 now right? ;)
IE6 is covered :) We haven’t finalized the complete set yet but we’re committed to supporting the top browsers for Windows and Mac. We expect that mix to change over time as new browsers/versions gain market share.
What are the various views and features?
We’ve really focused on how users tweak/debug their CSS today and engineered the service to fit into that workflow. One of the unique features for Meer Meer is that it can work directly with your local content if you are using Dreamweaver. This is a big benefit as users can tweak CSS and hit the refresh button to get an immediate representation of the page on their target browsers. No need to save, publish to a public location and then view. In addition, we’ve focused on several views (1-up, side by side and onion skin).
Onion skin is the most interesting as it overlays two browser shots over each other and provides the user with complete control over the transparency. This view typically gets the big oohs and aahs :)
Can you talk about the high level implementation? I assume you have a server farm on the back end and you are rendering and sending back images of the rendered image?
That’s correct. In addition we’re using a Flex application as the client. This makes the application feel very snappy and respond like a desktop application without the need to install anything. The team has also done some great work to establish a local connection with Dreamweaver to work with local content. When you make a change to your code and switch back to Meer Meer it knows you’ve made a change and prompts you to refresh. You can choose to refresh from within Dreamweaver and a panel will update and show you the status of the screenshot retrieval in real time.
In Dreamweaver CS4 you showed taking an Ajax app, clicking around to change state, freezing the page and then sending it to Meer Meer. Can you talk more about the freezing feature and other things that you can do?
I’m really proud to be associated with this release of DW CS4. We’ve definitely pushed the envelope. Our new Live View leverages the WebKit rendering engine to provide users with a true browser experience directly within the product. This means that you can see and interact with dynamic content such as Ajax UI widgets. Furthermore, we’ve included the ability to see the Live Code that the browser generates as you interact with the page. Users can freeze JavaScript to get the page into different states and then use the new Code Navigator to jump directly to the CSS that effects the element they select. This is an added bonus for Meer Meer because we can place the page into different states, such as selecting the second pane of an Accordion widget, and then view the page in that state within Meer Meer. Other browser compatibility services simply can’t do this.
Any final thoughts on Meer Meer or other Web Pro services coming from Adobe?
We’re really excited about the future of desktop + services at Adobe. Meer Meer is a great example of what we can accomplish when we take a holistic view to solving a user challenge. We’re also very interested in extending the capabilities of our users by providing them with turn-key hosted solutions that allow them to grow their business. Content maintenance follows very closely on the heels of browser compatibility as a top challenge that our users face today. Our new InContext Editing service that is now in free preview on Adobe labs allows Web Pros to provide content editing capabilities directly within the browser to their end user. No programming required.
We look forward to hearing feedback from the community on these services to help guide our future direction.
This is an exciting server from Adobe, and shows that focusing on the Flash issue isn't the entire story. They have a lot to offer the Open Web if we look to the right places and we can continue to fight for more too :) If we support projects like Meer Meer we can make our voice heard.
Of course, this is just the beginning. I would love to see an API to the service which would allow any developer tools to mashup nicely with the service. You can also imagine actively analyzing the code to not only point out the diff in the image, but the issue in the code. When we get there, we will be in a very good place indeed :)
There were some other cool things from MAX that showed up in Labs:
Alchemy: A research project that allows users to compile C and C++ code into ActionScript libraries (AVM2).
For the folks that like to write AIR apps that at least have some JavaScript, you will be happy to see that WebKit has been updated:
The version of WebKit included in AIR has been updated to a newer version. The updated version includes Squirrelfish, a new bytecode interpreter that improves the execution speed of JavaScript for common actions. Our internal tests show that HTML-based AIR applications run as much as 35% faster for many types of operations. We have also added support for interactive debuggin fo Ajax-based AIR applications.
Today's release of the Adobe AIR Development Plug-in for Aptana Studio (beta) features, you guessed it — JavaScript debugging for Adobe AIR apps along with support for Adobe AIR 1.5 which Adobe announced earlier this week.
SitePen has built an interesting set of APIs to enable you to create better JavaScript applications that run in the AIR platform:
This new effort creates a new namespace, dair, making it even easier to
create rich desktop apps using the Dojo Toolkit and Adobe AIR like the
Dojo Toolbox.
The extensions offer convenience methods for your application, wrapping
many common AIR Patterns in Dojo-like constructors and providing an
entire framework from which to grow. Built-in persistent storage,
granular window control from creation to destruction, Window FX,
Audio/Video helpers, and extra console debugging facilities are just the
beginning.
This work was greatly inspired by our efforts working on the Dojo
Toolbox, and greatly improves and simplifies Ajax development on the AIR
platform for not only Dojo users, but anyone creating an Ajax
application inside AIR. And thanks again to Adobe for helping make this
possible.
This is the week of the plugin. First we had the launch of Silverlight 2, and then, quickly on the back of that we get Adobe Flash 10 at the same time as the entire Creative Suite 4 (which has great Flash authoring tools of course).
One of the security features in Flash 10 is the requirement for the user to act on a Flash movie to be able to access certain APIs. This has caused some Flash upload components to break (ones that use a hidden Flash movie, such as SWFUploadFlickrsFancyUpoad). The solution is quite simple, you need to make the button that launches the upload a Flash control itself (versus an HTML button for example).
You can check out the showcase and do a view source to see that the link is not a link :)
What else is in Flash 10? Here are the top features that Adobe mentions:
3D effects
Create more intuitive, engaging interfaces using built-in support for 3D effects. Get started quickly without being a 3D master by designing in 2D and easily transforming and animating in 3D. Fast, extremely lightweight, and simple-to-use APIs, along with 3D tools in Adobe® Flash® CS4 Professional software, make motion that was previously accessible only to expert users via ActionScript® language or custom third-party libraries available to everyone.
Custom filters and effects
Create high-performance, real-time effects for cinematic experiences that quickly engage users. With new Adobe Pixel Bender™, the same technology behind many filters and effects in Adobe After Effects® software, these dynamic and interactive effects can be used both in production with After Effects CS4 and live with Flash Player 10. The Pixel Bender just-in- time (JIT) compiler can also be used to process other types of data, such as sound or mathematical functions, asynchronously in a separate thread.
Advanced text support
Take advantage of a new, flexible text layout engine that brings print-quality publishing to the web, building on more than 25 years of Adobe expertise in typography. Gain more control over text layout using an extensible library of ActionScript 3.0 text components to flow text and sophisticated typographic elements such as ligatures across multiple columns, around inline images, bidirectionally, vertically, or chained together. Create multilingual rich Internet applications (RIAs) using device fonts that can now be anti-aliased, rotated, and styled, or build your own unique text components.
Dynamic sound generation
Use enhanced sound APIs to dynamically generate audio and create new types of audio applications such as music mixers and sequencers, real-time audio for games, and even audio visualizers. Work with loaded MP3 audio at a lower level by extracting audio data and supplying it to the sound buffer. Process, filter, and mix audio in real time through the Pixel Bender JIT compiler to extend creative freedom beyond the visual experience.
Drawing API
Perform runtime drawing more easily with restyleable properties, 3D APIs, and a new way of drawing sophisticated shapes without having to code them line by line. Developers can tweak parts of curves, change styling, replace parts, and use custom filters and effects, delivering improved throughput, creative control, and greater productivity. Enhancements to the Drawing API add the z dimension, real perspective, textured meshes in 3D space, a retained graphics model, read/write rendering, and triangle drawing with UV coordinates, while adding memory and improving performance.
Hardware acceleration
Use the hardware processing power of the graphics card to paint SWF files into the browser and accelerate compositing calculations of bitmaps, filters, blend modes, and video overlays faster than would be performed in software.
Vector data type
Use the new typed array class for better performance, efficiency, and error checking of data.
Dynamic Streaming
Show exceptional video with streams that automatically adjust to changing network conditions. Leverage new quality-of-service metrics to provide a better streaming experience.
Speex audio codec
Take advantage of the new, high-fidelity and open source Speex voice codec, which offers a low-latency alternative for voice encoding. Flash Player also supports ADPCM, HE-AAC, MP3, and Nellymoser audio.
File upload and download APIs
Bring users into the experience by letting them load and save files from your web application. New file reference runtime access allows local processing of data without roundtripping to the server.
Ryan Stewart of Adobe joined us for episode 5 of the Open Web Podcast. We really want to be pragmatic Open Web citizens, so thought it would be good to hear from Ryan and get his point of view on what Adobe, and he, are thinking with respect to the Web as a-whole.
AIR: Ryan talked about how he sees AIR fitting into the landscape, and how he personally would love to see Geolocation APIs added
Open Source: Ryan shares his insight on the experience Adobe has gotten from their Open Source projects (Tamarin, Flex, ...)
It was a real pleasure to have Ryan come into the lions den. He is very honest with what he does and doesn't know from within, and doesn't hold back on his own thoughts.
Right now you can use Flash to work around a lot of JavaScript limitations and many products use an invisible Flash movie to for example batch upload files (Flickr, Wordpress), play movies in a screenreader accessible manner (with DHTML controls outside the main movie - Yahoo Video, for example) or automatically add content to the browser clipboard (snipurl.com).
All of these will cease to work without user interaction in flash as reported on the adobe devnet. There are very good reasons for it as explained by Lee Brimelow but it is a real problem that will cease to make Flash a useful tool to patch inaccessible solutions.
As long as you cannot access a Flash movie in non-Internet Explorer browsers via keyboard, there will be no such thing as an accessible flash page. Research findings presented at Scripting Enabled last week showed that for example many screen reader users skip Flash as soon as they hear that there is a movie on the page, regardless of how much effort you put in to make the movie itself keyboard enabled. DHTML controls worked around that issue - a button that cannot be accessed is very secure, but also pointless.
There must be some middle ground there somewhere...
Adobe continues to update the AIR runtime and SDK to make it a strong cross-platform candidate for building desktop apps. Support for the Linux operating system has been a bit of a sore spot for the AIR team but they're working hard to address that as evidenced with their release yesterday of Adobe AIR for Linux Beta.
The AIR for Linux FAQ goes into a lot of detail to explain what is being provided in this beta and it does state that this version is feature compatible with both the Windows and OS X versions of the runtime & SDK.
AIR on Linux officially supports the following distributions:
Fedora Core 8
Ubuntu 7.10
Open Suse 10.3
If you're interested in providing feedback about this release, Adobe has the AIR Support Center available to discuss any quirks or comments.
Building the Dojo Toolbox allowed us to dive into Adobe® AIR™, and to create a blended toolchain of JavaScript, PHP, Python and Rhino (JavaScript on the Java Virtual Machine) for developing an amazing desktop application using open web technologies. Read about how we built the Toolbox and what we really think of AIR.
His explanation provides a nice high-level view of some of the challenges but blends in some granular details to such topics as SQLlite querying and file management.
The second challenge was moving to AIR’s security model. AIR provides two different kinds of sandboxes that code can execute in: the “application” sandbox and the “non-application” sandbox. The windows that you see in the Dojo Toolbox all execute their code in the application sandbox. By AIR’s rules, that means that they’re allowed to access any site on the internet and any files on disk. What that code isn’t allowed to do is dynamically evaluate more JavaScript code.
This is a good read for anyone looking to explore Adobe AIR further and leverage the platform in the future.
Alx Dark has created The Tombs of Asciiroth a fully functional roguelike-meets-puzzle-arcade game.
Asciiroth is a a complete, functional, open source game, written using GWT, and distributed either as an Adobe AIR application, or as a game you can play over the web. In the latter case, it uses Gears to provide saved game support. (So bottom line is you can play it using AIR or Firefox... IE is too slow, Opera/Safari aren't supported by Gears.) It also has a map editor that is distributed as an Adobe AIR application.
It is very cool to see applications written using Ajax, and then using both Gears for in-browser functionality, and AIR for desktop deployment.
I was wary about posting on this one, as it does involve scantily clad women. If that offends you, skip now, and please accept my apologies, and I know that this probably fits better for a Friday Fun posting, but let's get to it:
Ok, so when I was on the Adobe AIR tour, some folks showed me an AIR app that The Sun, a gossip rag / newspaper in the UK was working on. Sure you can get the news from the website, and through RSS feeds, but how about a branded experience? (as Ryan Stewart would say!)
This newspaper puts aside the third page to introduce you to a "lovely lass" each day. This is part of their brand, and probably is a reason why it is the most read newspaper in the world (a little sad but true?).
Thus, they decided to try writing an article alert application with a twist... that being one of the lasses would walk onto your screen when there is news and show it to you. I had to admit, that I didn't think that Ajax would be able to do that.
The question is, do these brand experiences take off? Is this a gimmick? Do people really just liking their RSS feeds with as little disruption as possible.... or do they cling to certain brands and enjoy that extra touch. I somehow doubt that anyone would want a "Desktop Ajaxian" where Ben and I come out to give you the news ;)
One little annoyance that I saw after running it, is the dock icon coming and going as they poll the AIR app. I hope that is fixed in the next version of AIR (Mike Chambers just put out a call for requests).
This ZF component will allow for client-side applications built with Flex and Adobe AIR to communicate easily and efficiently with PHP on the server-side.
We are excited about this proposal as it is consistent with our emphasis to be a heterogeneous “use-at-will” framework and as it substantially strengthens Zend Framework’s RIA story. It is also another industry heavyweight joining as an official ZF contributor and joining the likes of IBM, Google and Microsoft in doing so.
Now that we have the Dojo integration ready for ZF 1.6 as a great Ajax story, AMF will complement that with more of an Enterprise oriented solution. We are currently planning to have AMF support aligned with the ZF 1.7 release but we will know better once the proposal has made it through the proposal process.
Zend_Amf_Server provides Action Message Format (AMF3) support for the Zend Framework that is compatible with the Flash Player 9 and above. The Adobe Integrated Runtime (AIR) and Flash Player uses AMF to communicate between an application and a remote server. AMF encodes remote procedure calls (RPC) into a compact binary representation that can be transferred over HTTP/HTTPS protocol. Objects and data values are serialized into this binary format, which increases performance as the AMF serialization is a highly optimized procedure in the Flash Player. Zend_Amf_Server will act as an AMF gateway to the Zend Framework by exposing through introspection custom class objects and functions that will respond as callbacks through the Zend_Amf_Server gateway.
, Browsers
