#flowtime.js

News from the Pond: Upcoming Features in Flowt 1.03

Flowt 1.03 Feature Preview

More features are on the way to Flowt as it moves forward towards 1.03. The next update is aimed at adding some flexibility for advanced theme and template developers. Let’s take a look at what’s on the horizon.

Flowtime.js Event Listener Callback and FlowtListener

The presentation settings will now have a new field at the very bottom called Flowtime.js Event Listener…

Met onze presentatie in zicht overlopen we enkele online presentatiemogelijkheden. Een opsomming van enkele frameworks die werken met het importeren markdown:

Reveal.js

Bespoke.js

Flowtime.js

Impress.js

Naar aanleiding van de presentaties omtrent de analyse van EMS zal dit hoofdstuk handelen over presentaties. Specifieker over alternatieve software dan powerpoint om presentaties te geven.

Powerpoint heeft zijn beste tijd gekend (ook al is het nog steeds marktleider!) en daarom staan we stil bij wat er al allemaal op de markt te vinden is.

Bij deze specifieke 'software' spreken we van Frameworks.Zoals eerder vermeld is er de alomgekende Powerpoint of Keynote. Maar er zijn ook andere frameworks zoals reveal.js, Flowtime.js, Impress.js, Slid.es en Bespoke.js. Enkele van deze frameworks gaan we hieronder kort toelichten met hun functies, voordelen en eventuele beperkingen.

Powerpoint

Maar voordat we spreken over deze frameworks, gaan we even terug in de tijd. Want het presenteren met programma's zoals powerpoint is pas ontstaan vanaf de jaren negentig.

Overheadsheets, flipovers of schoolborden zijn ook altijd veel gebruikte technieken/materialen geweest voor presentaties. Nu in mindere maten, maar het komt nog steeds voor. Denk maar aan de schoolborden tijdens lessen.

Het eerste echte presentatieprogramma was dus powerpoint en jarenlang heeft dit programma ook de markt gedomineerd. Het had zelfs enkele jaren een monopoly in de sector van presentatiesoftware. Powerpoint is een WYSYWIG-editor (What you see is what you get).Naarmate de evolutie vorderde kon je alles toevoegen in powerpoint: tekst, foto's, muziek, video's, animaties, ...

Probleem

Doordat elke computer bijna standaard is uitgerust met het programma powerpoint is het dus mogelijk om jouw presentatie op vrijwel elke computer te downloaden. Maar als het programma niet was geïnstalleerd op de computer dan kon je de presentatie ook niet openen, wat voor problemen zorgt. Hiervoor bestaan er nu wel Powerpoint-viewers. Dankzij deze programma's kan je de powerpoint wel openen, maar niet bewerken.

Een ander probleem met powerpoint is dat dit enkel draait/werkt op windows computers. Grote tegenhanger Apple ondersteunt deze programma's niet en dus ook hier is het niet mogelijk om presentaties, gemaakt in powerpoint, te openen.

In de plaats wordt er bij Apple gewerkt met het programma Pager of Keynote. Deze programma's zijn te vergelijken met Powerpoint. Maar ook hier is er weer het probleem dat de presentatie niet op elke computer kan worden afgespeeld omdat de computer die bepaalde extensie niet ondersteunt.

Oplossing

Als oplossing hiervan zijn er de frameworks zoals reveal.js, Bespoke.js, Flowtime.js, Impress.js en Slid.es.Dankzij de snelgroeiende/evoluerende web technologie is men erin geslaagd om applicaties te ontwikkelen die presentaties in een browser (zoals mozilla firefox, google chrome of safari) kunnen laten afspelen. Pagina-overgangen video's, foto's, tekst,... zijn allemaal functies die nu ook in deze applicaties mogelijk zijn.

Het grote voordeel bij deze applicaties is dat men enerzijds deze presentaties overal, op eender welke computer kan laten afspelen. Anderzijds kan men, indien de presentatie een meerwaarde biedt, de presentatie direct online maken, zodat deze voor iedereen toegankelijk is.

Doordat de mooi ogende presentatie vrij toegankelijk is kan iedereen gebruik maken van de opmaak, functies en codes. Dit krijgt de term open source software.

Frameworks

De vier reeds genoemde frameworks zijn allemaal javascript frameworks. Javascript is een scripttaal van het web.

Bij javascript wordt er echt geprogrammeerd, dus enige kennis is zeker vereist om zulke programma's te kunnen maken. Om deze programma's te gebruiken is het gelukkig wat gebruiksvriendelijker.

1) Reveal.js

De speler met het grote marktaandeel binnen deze frameworks is reveav.js. Het is ontworpen door een 23-jarige Zweedse hacker.

Het is een vrij uitgebreid programma met een heel aantal functies. Een voordeel is dat je de markdown automatisch kan converteren naar slides. Je kan dus op een snelle en makkelijke manier mooi ogende HTML slideshows maken.

2) Bespoke.js

Een variant op reveal.js. Het is bij wijze van spreke de kleinere broer van reveal.js. De software is kleiner, lichter en eleganter. Door de het lichte gebruik en doordat het snel laadt kunnen we spreken van een micro framwork. Bij bespoke.js zijn er veel overgangsmogelijkheden tussen de slides.

3) Flowtime.js

Een zeer recente software is Flowtime.js. Ondanks dat het nog maar recent is opgericht bezit het programma al vrij veel features.

Enkele nadelen zijn dat het een vrij complexe manier van werken heeft en dat het, in tegenstelling tot bespoke.js veel zwaarder is.

4) Impress.js

Het is het buitenbeentje tussen de presentatiesoftware. Het heeft dezelfde werking als het concept van de prezi (op uitzondering van het gebruik van Flash.) en als de kracht van CSS3.

5) Slid.es

Last but not least is er ook nog Slid.es. Deze webservice draait op een revael.js server, maar heeft een eigen grafisch framework gebouwd. Doordat het een webservice is moet er geen software gedownload worden en kan je meteen aan de slag.

Alles wat je dan maakt op dit programma wordt ook online opgeslagen en kan je dus overal raadplegen/bewerken/presenteren als er een internetverbinding is.

Een nadeel is de beperkte mogelijkheden en controle bij het programma. Je kan minder je eigen zin doen.

Prezi

Ten slotte is er ook nog prezi. Dit is het 'originele buitenbeentje' (zie impress.js). Dit komt omdat je niet werkt met de traditionele pagina's maar met één grote pagina waarbij je kan/moet spelen met het in-en uitzoomen.

Building a Flowtime.js Theme for WordPress, Part Six

Part One: The Scripts

Part Two: The Custom Post Types

Part Three: The Shortcodes

Part Four: The…

Building a Flowtime.js Theme for WordPress, Part Five

Part One: The Scripts

Part Two: The Post Types

Part Three: The Meta Boxes

Part Four: The Shortcodes

Part Three: The Shortcodes

Part One: Introduction

Part Two: The Structure of Flowtime.js

We continue now with our construction of FloWPress, a custom theme for combining WordPress and Flowtime.js. At this point, we have integrated the necessary files and…

Once released the Unlimited Grid Layout Boilerplate (UGLB from now on) I've received a little amount of feedbacks. One of this feedbacks comes from Zoran Jambor, the editor of CSS Weekly. He substantially said that people need some built in methods to navigate through the pages. So I started build some Javascript APIs to give a more structured package to developers.

Expanding

Writing the navigation API took very little time but just after that was complete I've understood that this boilerplate had to be something bigger. It had to be a full-featured presentation tool and, why not, a framewok for build some type of websites.

I started adding features to manage not only the navigation from page to page but also fragments management and expanding the APIs to configure the framework with a few commands.

I didn't want to include dependencies, because I want to let every developer to build on top of the framework using his preferred set of libraries. So I've decided to implement all the animations, slides and fades with native CSS3 transitions; easy to remove in case they need to be substituted by animation libraries like GreenSock or others (but I strongly reccommends GreenSock).

This driven me to the decision to not support too old browsers who degrades to a simple version with less features (i.e. without animation in IE9) or directly to the the UGLB without problems.

Packaging

After some weeks of writing, testing, refactoring and testing I was ready to release a basic version of the framework with all the logics and APIs documented on Github, but at that moment, looking at others presentation frameworks, I've decided that I needed a basic presentation that drives users to the learn about the framework direct from it.

This was the most difficult task for me because I've restarted the work at least three times before finding the right way that was, ironically, the simplest one.

But soon I realised that that was too much complicated and too less useful for visitors who need to understand whether the framework can be useful for their own purposes in a short time. Then I've simplified, simplified and simplified until I've built the current sample presentation.

And I had to style this presentation so I've included a basic theme with some simple media queries so it is not only fluid but also responsive.

Naming

And after I finished this presentation I still need a name for the framework.

I choose Flowtime, because I've built this framework to navigate through slides with just one key, optimizing the time to go from the the start to the end and reducing the complexity of the control system.

I like to think that, with Flowtime.js, speakers can build great and detailed presentations focusing on the speak and not on "what's-the-key-I-need-to-press-to-go-to-the-right-slide".

Maybe I'm right, or maybe I'm wrong, but here we are!

Ok, let's see Flowtime in action!

You can take a look to the sample presentation to quick learn about the basic features.

And you can dive into the documentation and the configuration features looking at the source code on Github.