Aerogear News

better presentations on the web

After giving my talk at braziljs last year (and having lots of trouble to finish my presentation on time), I promised myself I would try to find easier ways to get my presentations done.

Mostly, my presentations consist of minimum text, lots of images, and a multitude of slides, so I thought on evaluating other tools instead of sticking to keynote.

My next talk would be at devinsampa, a brazilian geeky conference, a perfect place to try something new just for the sake of trying.

investigation

Since I was working a lot on Ruby/Rails systems, my first idea was to find something that leveraged my day-to-day tools. Then I remembered an amazing presentation named pure RSpec John @l4rk gave at Scottish Ruby Conference 2010, which used a different tool for generating HTML slides.

Then I found showoff - a very simple presentation tool with lots of nifty features, like slide transitions, a cool JSON-based presentation descriptor, and much more. Unfortunately, as uncle ben says, with great power comes great responsibility, showoff had ruby as its dependency, ruling out my idea of having a 100% standalone presentation.

Reading showoff documentation, I’ve found it was written inspired on other tools, like S5, Slidy and Slidedown, which didn’t look that attractive to me at that time.

discovery

In late May, 2011, I’ve found deck.js, a very beautiful HTML+javascript presentation system, with a modular architecture comprised of several plugins. It was the perfect fit for what I wanted to do.

What impressed me more about deck.js was that its documentation were built on itself! Why not have a presentation on how to create presentations?

construction

I started making my presentation using it, and started to feel awkward of using pure HTML to do it. I used vim export to HTML function to get syntax highlighting, and pasted the code inside my HTML presentation. I’ve done less than 30% of my presentation and was thinking already on how could I improve this clumsy and tedious workflow.

markdown based

The first thing I did to improve it was combining deck.js with showdown.js, for having my slides generated from a simple markdown-based format.

Borrowing from showoff, I’ve used the same !SLIDE separator, but having homogeneous transitions on all slides and dismissing the JSON presentation descriptor.

highlighting

Next step was to remove the dependency on an external tool for syntax highlighting. Markdown has a nice syntax for code blocks, so it was just a matter of putting highlight.js to filter all pre > code elements through it.

final results

Here you can see the first presentation using this set of tools. Unfortunately, due to my laziness, I’ve forgot to include the deck.navigation plugin, which helps mobile users a lot.

future?

Recently, I’ve found a new tool, inspired by the labyrinthitis-triggering prezi - but without using adobe flash, just plain old HTML5*.

impress.js has a lot of potential on making a breakthrough on how presentations are made today, and on helping push the web forward, as it uses all the new fancy CSS3 transforms and transitions. The downside is that, like it’s oldest cousin prezi, you have an infinite canvas, which roughly speaking, needs to work with absolute coordinates the majority of time.

The final result is awesome, but it really takes a considerable time fiddling with x, y, z and rotation html5 data-attributes.

The sad part is that, currently, impress.js doesn’t support mobile clients at all - yet.

crazy closing thoughts

What if we used some of the maze-generation algorithms to automate the impress.js presentation creation? Versions like the recursive backtracker, combined with a seedable PRNG like the traditional Mersenne Twister algorithm could yield interesting results, having a random-like appearance that can easily yield the same results, given you provide the same seed.

$(function(){
	var m = new MersenneTwister(2);
    var maxOffset = 1000;
    var root = $("<div></div>").attr("id", "impress");
    for(var i = 0; i < 10; i++){
        var slide = $("<div></div>")
            .attr("data-x", m.nextInt(maxOffset))
            .attr("data-y", m.nextInt(maxOffset))
            .attr("data-z", m.nextInt(maxOffset))
            .attr("data-rotate-x", m.nextInt(maxOffset/10))
            .attr("data-rotate-y", m.nextInt(maxOffset/10))
            .attr("data-scale", m.nextInt(10))
            .append($("<h1>slide" + i + "</h1>"))
            .addClass("step");
        root.append(slide)
    }
    $("body").append(root);
    impress();
});

Take a look on the result of this crazy experiment - beware - might trigger dizziness, not fully tested yet :P

You can download the sources and give it a try!

It even has a pleasant effect on generating talk visualizations (click on the image to navigate on an experimental talk visualization)

What do you think about it?

---

Recently, I’ve joined JBoss to work on the AeroGear team!

* this POH5 acronym (which I find amazing, btw) was coined by the fine folks of my team.

AeroGear - Mobile, HTML5, and Auwesome

The AeroGear project had it's official launch last week and I want to review what we're doing and where we're headed. For starters, AeroGear is focused on... [read post]

The AeroGear Mobile & HTML5 Project Is Alive!!

I’m very happy to announce the creation of AeroGear, the newest project at JBoss! The AeroGear project is all about making mobile development of all kinds as easy as possible with JBoss! This project is focused on three things; education, innovation, and community!

Education

We’ll be covering all aspects of mobile application development! This includes the latest HTML5 technologies used in the mobile web, and in hybrid application frameworks like the Apache Cordova. All the way to JBoss AS based services, mobile RichFaces/JSF2, tooling, and native application support, and prototyping.

To wet your whistle we’ve put together a 5 minute video to show you how easy it is to get from zero to a mobile web application with cloud hosted services on JBoss.

Just in case you missed it at the end, the link to the live hosted demo on Openshift is at http://poh5-aerogear.rhcloud.com .

Assuming that got your interests up, we go a lot deeper. Our step by step guide on building this HTML5 mobile application yourself, including where to fork it on github is available right on our wiki page. There are also guides detailing the specifics on single page applications, HTML5 updates, CSS3, jQuery Mobile, RESTful endpoints, and more here.

Innovation

Our initial focus is on providing excellent examples, tutorials, and techniques for enterprise mobile developers. These will cover mobile web, hybrid, and native applications approaches for working with JBoss and other 3rd party projects. For all you polyglot lovers out there, we’re not limiting ourselves just to Java either, we’ll have pure HTML, and JavaScript demos, TorqueBox and Ruby will make an appearance, and we’ll be looking at other approaches as well.

However, at the same time we'll be developing new mobile[native, hybrid, and web] based frameworks for solving real concerns of enterprise developers. The most immediate of these include offline data synchronization, security, container integration, and support across a broad range of devices.

We’re currently designing and discussing some of these solutions, and want your input! Head over to the AeroGear Developer space for more. We plan on moving pretty fast here and hope to have some real world prototypes up and running soon.

Community

Whether you are a long time Java EE developer looking to migrate existing applications to mobile clients, or client developers looking for a powerful back-end for your applications this is where you can learn more about both, and become part of the community building it!!

We’ve got team meetings on IRC at #aerogear @ irc.freenode.net, user, and developer forums, all of our code is up on github for sharing, and we’re always looking for motivated developers to step up and join the team! We’ll be speaking at up coming conferences and JUGs around the world, as well as having regular blogs, webinars, and screencasts! Watch this space and our forums for the latest.

Success comes with a strong community, and everyone getting involved however they can! Bring your questions, and opinions, and let's hear from you!!

[AeroGear Project] [GitHub] [Twitter] [User Forums] [Dev Forums]

The Real-Time Web with AS7, CDI, WebSockets and Jetty?

Here's the hotness. As you can see on the right, I have 2 chat windows open and on the left we have a member registration. Users are chatting across a raw WebSocket connection and when another user registers, the CDI event is fired all the way through to the browser as a JavaScript alert via the connected WebSocket clients. And did I mention this is all on AS7? ohh yeah, that's right...

With WebSockets, we have a new development model for server side applications; event based programming. There are 3 out-of-box events associated with WebSockets: onopen, onmessage, and onclose. For starters, we must wire up these three ... continue reading on my kick ass awestruct blog...

Atlanta JBUG's First Meetup

The Atlanta JBoss User Group kicked off with a much greater than expected turnout. Developers from the Atlanta area poured in to learn the latest in JBoss technologies.

 

Thanks to Shadow Soft for providing a place to meet and refreshments (not to mention volunteering to lead the group)! Overall we had a good time and I'm looking forward to next month. Want to speak? ping us on twitter @wesleyhales or @shadowsoftnews

 

 

 

Check out the talk here:

 

In this, the very first, meetup of the Atlanta JBoss User Group, Wesley Hales reviews the current landscape of HTML5 and the mobile web.

He shows attendees how to setup a POH5 (HTML5+RESTful) mobile web app and how to deploy apps to openshift using the newly available (M5) features in JBoss Tools.

 

 

Apologies for the chopped up video.. the camera would automatically turn off after a certain amount of time.

View more aerogear news