Tag Archives: Application Services

The Future Of Video In Web Design

Federico was the only other kid on the block with a dedicated ISDN line, so I gave him a call. It had taken six hours of interminable waiting (peppered with frantic bouts of cursing), but I had just watched 60 choppy seconds of the original Macintosh TV commercial in Firefox, and I had to tell someone. It blew my mind.

Video on the Web has improved quite a bit since that first jittery low-res commercial I watched on my Quadra 605 back in 7th grade. But for the most part, videos are still separate from the Web, cordoned off by iframes and Flash and bottled up in little windows in the center of the page. They’re a missed opportunity for Web designers everywhere.

But how do you integrate video into an app or a marketing page? What would it look like, and how do you implement it? In this article, you will find inspiration, how-tos and a few technical goodies to get you started with modern video on the Web.

When Video Leaves Its Cage

Video combined with animation is a powerful tool for innovative and compelling user experiences. Imagine interactive screencasts and tutorials in which DOM elements flow and move around the page in sync with the instructor. Why not combine video with animation to walk new users through your app? Or what about including videos of your product on your marketing page, instead of static JPEGs? Getting carried away is easy — video can become little more than sophisticated blink tags if you’re not careful. But there are plenty of beautiful, inspiring examples of video tightly integrated in a design.

Apple’s new marketing page for the Mac Pro is a stunning example of video reaching out from its cage into the surrounding content. The new Mac Pro is featured in the center of the page, and as you scroll, it swoops and spins and disassembles itself. Supporting copy fades in to describe what you are seeing.


A static screenshot of the new landing page doesn’t do the new Mac Pro justice. (larger view)

Another great example of interactive video is Adrian Holovaty’s Soundslice. Soundslice is filled with YouTube videos of music sliced and diced into tablature (or tabs), which is notation that guitar players use to learn music.


The musical bars at the bottom stay in sync with the video. (larger view)

When you watch a music video, the tabs are animated at the bottom in time with the music, so that you can play along with your guitar. You can even slow down the video or loop selections to practice difficult sections, and the tab animation will stay in sync.

How Do You Add Video To A Design?

If you venture into video and animation in your next project, you won’t have many resources to lean on for implementation. No canonical, easy-to-use, open-source library for syncing video with animation exists, so every implementation is a bit different. Should you use a JavaScript animation library or pure CSS keyframes and transitions? Should you host the videos yourself and take advantage of HTML5’s video tag events or use YouTube or Vimeo? And then how exactly do you tie animations to a video?

Together, we will explore answers to the above-mentioned questions and more as we build our own micro JavaScript framework. Charlie.js provides an easy-to-use API for building pages with synchronized video and CSS3 animation.


Charlie.js, named in honor of Charlie Chaplin. (Image source)

The best way to learn is by doing, so let’s dive in.

What Does Charlie.js Do?

We need a way to create animations and then trigger them at certain moments in a video. We also need to pause the animations if the video stops, and we’ll need a way to handle the user jumping around to different times in the video.

To limit the scope of this article, we’ll have Charlie.js use only CSS animations. JavaScript animation libraries are more flexible and powerful than CSS animations, but wrapping one’s head around the straightforward, declarative syntax of keyframes is pretty easy, and the effects are hardware-accelerated. Sticking with only CSS animations is a pretty good choice for small projects.

To keep it simple, Charlie.js will support only one video per page.

As we go through the exercise of building this library, remember that we’re using the framework just to learn about CSS animation and video on the Web. The goal is to learn, not to create production-quality code.

Define The API

For our little framework, defining the API first makes sense. In other words, we need to figure out how someone would use the library and then write the JavaScript to implement the API.

A video and animation library could work in many ways, but the main interface puzzle is to figure out how to couple the animation to the video. How should a developer specify which animations should appear on which elements and at which times they should start in the video?

One option is to suck down the data in JSON or XML. The opposite solution is to have no separate data files and to put all of the configuration into pure JavaScript function calls. Both are fine, but there is a middle road.

Normally, CSS animation is defined in a style sheet. Ideally, that’s where it should be defined for Charlie.js, not in a JSON file. It just makes sense, and doing it this way has advantages. When the animation is in a style sheet, rather than a JavaScript or JSON file, you can test it without loading the entire video and animation library.

The animations are coupled to an element with data attributes. The data attributes define the animation names and also specify the start times.

Let’s say you have a CSS animation named fade for dialing down the opacity, and another named fling for moving elements off the page. And you want a div on the page to use both animations three seconds into the video. Your markup would look like this:

<div data-animations="fade, fling" data-times="3, 3">
...
</div>

Charlie.js will see this and know to run the fade and fling animations once the video hits three seconds.

The fade and fling animations are defined in a style sheet that is linked to the document.

Here is what the fade animation might look like (browser prefixes are excluded here but are required for Chrome and Safari):

.fade {
	animation-name: fade;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

The .fade class is what Charlie.js applies to the animated element, which will trigger the fade animation.

Host The Videos: HTML5 Vs. Flash And Silverlight

With the API out of the way, the next decision is how to host the video. The host will determine what kind of container the video is stuffed into, and the container will determine what is possible with the video.

Video embedded with Flash or Silverlight will limit your design options, so the video-hosting service should ideally support HTML5’s video tag. The video tag is easier to style and move around on the page. You can apply CSS filters and transforms and even use CSS animation on the video itself. Plus, the standard media events are robust and provide plenty of places and ways to hook your code into the video. The big downside of the video tag is compatibility. It doesn’t work in Internet Explorer 8.

What kinds of video-hosting should Charlie.js support? Building a library that supports multiple hosting options is feasible. For example, Popcorn.js (an awesome library for syncing content with video) supports several hosting options and APIs. But to keep it simple, our little library will support only a vanilla video tag. Anything in an iframe or Flash container won’t be supported.

That’s nice for Charlie.js, but what if you are stuck supporting old browsers and have to deal with a video stuffed in an iframe? Most video-hosting companies have decent APIs. At the very least, you should be able to use those APIs to sync up your animation — you’ll just be stuck working with an embedded Flash object. YouTube and Vimeo are the most popular services, and both offer extensive APIs. Wistia is another great option but less well known.

If you want to use a pure video tag but don’t want to host the video yourself, take a look at Vid.ly. Once you upload your video, Vid.ly will encode it in every format you need and give you a universal URL that you can use in your video tag, which will automatically choose the correct video type according to the user agent.

<video id="video" src="http://vid.ly/4m4e2n?content=video" controls="" preload="none">
Your browser does not support the HTML5 video element.
</video>

Heads Up

The JavaScript in most of these snippets uses Underscore; stuff like _.forEach and_.toArray are utility functions from that library. Underscore encourages a functional style of programming that might look strange if you’ve never seen it before, but a little time invested in learning Underscore can save you a lot of time and lines of code. It’s worth checking out. For this article, you’ll find comments in the code to tell you what’s going on, and it should be pretty easy to understand.

One other caveat: The code here will run in most modern browsers, but no attempt has been made to make this completely cross-browser compatible. If your business really needs CSS animation to be synced with video and to run in almost every browser, then this library will not help you out. But for my business, and perhaps for yours, supporting only modern browsers is fine. And even with this restriction, plenty of material here is still worth learning.

Control CSS Animations With JavaScript

JavaScript is the glue between video and CSS animation. There is no way to couple an animation to a video purely with CSS. Animation doesn’t start until a style is applied, and CSS gives you only so many ways to trigger extra styles (such as :hover). In order to sync animation to video, we will need to pause, stop, resume, skip to the middle, and even reverse running animations.

All of this is possible with JavaScript. So, the first step is to get the CSS animation out of the style sheet and into JavaScript. Every CSS animation has two parts. The first part is the keyframe and the properties used to configure how the animation behaves, such as duration, iteration and direction. The second part is what triggers the animation. Charlie.js will need to find both parts in the style sheets.

The first thing we need is a utility function to search through style sheets that are loaded on the page.

findRules = function(matches){

		//document.stylesheets is not an array by default.
		// It's a StyleSheetList. toArray converts it to an actual array.
		var styleSheets = _.toArray(document.styleSheets),
		rules = [];

		// forEach iterates through a list, in this case passing
		//every sheet in styleSheets to the next forEach
		_.forEach(styleSheets, function(sheet){

		//This foreach iterates through each rule in the style sheet
		//and checks if it passes the matches function.
		_.forEach(_.toArray(sheet.cssRules), function(rule){
			if (matches(rule)){
				rules.push(rule);
			}
		});
	});
return rules;
}

The findRules function iterates through every rule of every style sheet and returns a list of rules that match the passed-in matches function. To get all of the keyframe rules, we pass in a function to findRules that checks whether the rule is a keyframe:

// A little code to handle prefixed properties
	var KEYFRAMES_RULE = window.CSSRule.KEYFRAMES_RULE
		|| window.CSSRule.WEBKIT_KEYFRAMES_RULE
		|| window.CSSRule.MOZ_KEYFRAMES_RULE
		|| window.CSSRule.O_KEYFRAMES_RULE
		|| window.CSSRule.MS_KEYFRAMES_RULE,

		...

		var keyframeRules = findRules(function(rule){
			return KEYFRAMES_RULE === rule.type;
		}),

		...

At this point, we have the keyframes in JavaScript, but we still need the rest of the animation styles that define duration, iterations, direction and so on.

To find all of these classes, we again use the findRules function to go through every rule in every style sheet. This time, though, the matches function that we’ll pass in will check to see whether the rule has an animationName property.

	...

	var animationStyleRules = findRules(function(rule){
		return rule.style && rule.style[animationName(rule.style)];
	});

	...

The animationsName function is there to handle the prefixes, because the animationNameproperty still requires prefixes in some browsers. That function looks like this:

...

if (style.animationName) {
	name = "animationName"; }
else if (style.webkitAnimationName) {
	name = "webkitAnimationName"; }
else if (style.mozAnimationName) {
	name = "mozAnimationName"; }
else if (style.oAnimationName) {
	name="oAnimationName"; }
else if (style.msAnimationName) {
	name = "msAnimationName"; }
else {
	name = "";
}
return name;

...

Once the correct prefix has been determined, the name is cached and used for future look-ups.

Once the keyframes and animation styles have been collected, they get stuffed into an instance of a helper class and stored for Charlie.js to use later.

var CSSAnimations = function(keyframes, cssRules){
	this.keyframes = keyframes;
	this.cssRules = cssRules;
};

Get The Timing Information From The Data Attributes

Timing information is attached to the element that will be animated using a data attribute (remember that we decided this when we were defining the API). So, we need to crawl the document and pull out the information. Any element that will be animated is marked with the class of charlie, which makes it pretty easy to find the data attributes we are looking for.

var scrapeAnimationData = function() {

	/* Grab the data from the DOM. */
	var data = {};
	_.forEach(
		//loop through every element that should be animated
		document.getElementsByClassName("charlie"),

		//for each element, pull off the info from the dataset
		function(element) {

			/*
			* Creates an object of animation name: time, e.g.
			*
			* { swoopy: [
			*    { element: domElement,
			*  time: 6522 },
			*    { element: anotherElement,
			*  time: 7834 }]
			* }
			*/

			//     var names = element.dataset.animations.split(/s*,s*/),
			times = element.dataset.times.split(/s*,s*/),

			// creates an array of arrays, each one called a "tuple"
			// basically ties the time to the
			// animation name, so it looks like this:
			//[["zippy", 1], ["fade", 2] ... ]
			tuples = _.zip(names, times);

			/*
			* turn the tuples into an object,
			* which is a little easier to work with.
			* We end up with an object that looks like this:
			* {
			*  fade: [ {element: domElement, time: "1.2s"}, ... ],
			*  fling: [ {element: domelement, time: "2.4s"}, ... ]
			* }
			* So, we can reuse an animation on different elements
			* at different times.
			*/

			_.forEach(tuples, function(tuple){
				var name = tuple[0],
				time = tuple[1];
				data[name] = data[name] || [];
				data[name].push({
					element: element,
					time: time
				})
			});
		});
	return data;
},

This stores all of the timing information in an object with the animation’s name as the key, followed by a list of times and elements. This object is used to create severalAnimation objects, which are then stuffed into various data structures to make it easy and fast to look up which animations should be running in the big loop.

The requestAnimationFrame Loop

The heart of Charlie.js is a loop that runs whenever the video runs. The loop is created with requestAnimationFrame.

tick: function(time){
	if (this.running){
		this.frameID = requestAnimationFrame(this.tick.bind(this));
		this.controller.startAnimations(time, video.currentTime);
	}
}

The requestAnimationFrame function is specifically designed to optimize any kind of animation, such as DOM manipulations, painting to the canvas, and WebGL. It’s a tighter loop than anything you can get with setTimeout, and it’s calibrated to bundle animation steps into a single reflow, thus performing better. It’s also better for battery usage and will completely stop running when the user switches tabs.

The loop starts when the video starts and stops when the video stops. Charlie.js also needs to know whether the video ends or jumps to the middle somewhere. Each of those events requires a slightly different response.

video.addEventListener("play", this.start.bind(this), false);
video.addEventListener("ended", this.ended.bind(this), false);
video.addEventListener("pause", this.stop.bind(this), false);
video.addEventListener("seeked", this.seeked.bind(this), false);

As the video plays, the loop keeps ticking. Each tick runs this code:

// allow precision to one tenth of a second
var seconds = roundTime(videoTime),
me = this;

//resume any paused animations
me.resumeAnimations();

/* start up any animations that should be running at this second.
* Don't start any that are already running
*/

if (me.bySeconds[seconds]){
	var animations = me.bySeconds[seconds],
	notRunning = _.filter(animations, function(animation){
		return !_.contains(me.running, animation);
	});

	/* requestAnimationFrame happens more than
	*  every tenth of a second, so this code will run
	*  multiple times for each animation starting time
	*/

	_.forEach(notRunning, function(animation){
		animation.start();
		me.running.push(animation);
	});
}

Everything we have done up to this point has been to support these few lines of code. The seconds variable is just the video.currentTime value rounded to the nearest tenth of a second. The bySeconds property is created from the time data that is scraped from the HTML — it’s just a quick way to grab a list of animations to start at a given time. Therunning array is a list of animations that are currently running. TherequestAnimationFrame loop is really fast and runs many, many times a second, and Charlie.js only supports a resolution of one tenth of a second.

So, if one animation starts at the 2-second mark, then requestAnimationFrame will try to start it several times until the video has progressed to the next tenth of a second. Toprevent animations from starting over and over again during that tenth of a second, they get put into the running array so that we know what is running and don’t start it again unnecessarily.

To start a CSS animation, just add the animation properties to an element’s style. The easiest way to do this is to just add the animation class to the element’s classList, and that is exactly what the animation’s start method does.

start: function(){
	var me = this;
	//The name of the animation is the same as the class name by convention.
	me.element.classList.add(me.name);
	onAnimationEnd(me.element, function(){
		me.reset();
	});
}

The name of the animation is the same as the class name by convention.

Pause And Resume Animations

When the video stops, the animations should stop with it. There is a pretty straightforward way to do this using CSS animations: We just set the animationPlayStateproperty of the element to paused.

...

//method on the animation object
pause: function(){
	this.element.style.webkitAnimationPlayState = "paused";
	this.element.style.mozAnimationPlayState = "paused";
	this.element.style.oAnimationPlayState = "paused";
	this.element.style.animationPlayState = "paused";
},

resume: function(){
	this.element.style.webkitAnimationPlayState = "running";
	this.element.style.mozAnimationPlayState = "running";
	this.element.style.oAnimationPlayState = "running";
	this.element.style.animationPlayState = "running";
}

...

//called on the video "pause" event
while(animation = me.running.pop()){
	animation.pause();
	//keep track of paused animations so we can resume them later ...
	me.paused.push(animation);
}

The only trick here is to keep track of which animations have been paused, so that they can resume once the video starts again, like so:

while (animation = me.paused.pop()){
	animation.resume();
	me.running.push(animation);
}

How To Start An Animation In The Middle

What if someone skips ahead in the video and jumps right into the middle of an animation? How do you start a CSS animation in the middle? The animationDelayproperty is exactly what we need. Normally, animationDelay is set to a positive number. If you want an animation to start three seconds after the animation style has been applied, then you’d set animationDelay to 3s. But if you set animationDelay to a negative number, then it will jump to the middle of the animation. For example, if an animation lasts three seconds, and you want the animation to start two seconds in, then set the animationDelay property to -2s.

Whenever a user scrubs to the middle of the video, Charlie.js will need to stop all of the animations that are currently running, figure out what should be running, and then set the appropriate animationDelay values. Here is the high-level code:

// 1. go through each to start
// 2. set the animation delay so that it starts at the right spot
// 3. start 'em up.

var me = this,
seconds = roundTime(videoTime),
toStart = animationsToStart(me, seconds);

// go through each animation to start
_.forEach(toStart, function(animation){

	//set the delay to start the animation at the right place
	setDelay(animation, seconds);

	//start it up
	animation.start();

	/* If the move is playing right now, then let the animation
	* keep playing. Otherwise, pause the animation until
	* the video resumes.
	*/

	if (playNow) {
	me.running.push(animation);

	} else {
		me.paused.push(animation);
		animation.pause();
	}
});

The animationsToStart function loops through a sorted list of animations and looks for anything that should be running. If the end time is greater than the current time and the start time is less than the current time, then the animation should be started.

var animationsToStart = function(me, seconds) {

	var toStart = [];

	for(var i = 0; i < me.timeModel.length; i++) {

		var animation = me.timeModel[i];

		//stop looking, nothing else is running
		if (animation.startsAt > seconds) {
			break;
		}

		if (animation.endsAt > seconds) {
			toStart.push(animation);
		}
	}
	return toStart;
};

The timeModel is a list of animations sorted by the times when the animations should end. This code loops through that list and looks for animations that start before the current time and end after the current time. The toStart array represents all of the animations that should be running right now.

Those values get passed up to the higher-level code, which then computes and sets the delay in the setDelay function.

setDelay = function(animation, seconds) {
	var delay = -(seconds - animation.startsAt);
	delay = delay < 0 ? delay : 0,
	milliseconds = Math.floor(delay * 1000) + "ms";
	animation.element.style.webkitAnimationDelay = milliseconds;
	animation.element.style.mozAnimationDelay = milliseconds;
	animation.element.style.oAnimationDelay = milliseconds;
	animation.element.style.msAnimationDelay = milliseconds;
	animation.element.style.animationDelay = milliseconds;
};

The seconds parameter is the current time in the video. Let’s say that the video is at 30 seconds, that the animation starts at 24 seconds and that it lasts for 10 seconds. If we set the delay to -6s, then it will start the animation 6 seconds in and will last another 4 seconds.

Look At The Code For Yourself

We’ve covered here how to use requestAnimationFrame to create a tight, optimized loop for animations, how to scrape keyframes and animation styles from the style sheet, how to start and stop animations with the video, and even how to start CSS animations in the middle. But to get to the point, we’ve skipped over quite a bit of glue code. Charlie.js is only a couple of hundred lines of code, and it is open source and commented thoroughly. You are welcome to grab the code and read it.

You can even use it if you want, with a few caveats:

  • Charlie.js was made for educational purposes. It was made to be read and for you to learn about CSS animations, videos, requestAnimationFrame, etc. Don’t just plug it into your production code unless you really know what you are doing.
  • Cross-browser support for animation is pretty good, and Charlie.js tries to be friendly to all the browsers when it can be. However, it hasn’t been heavily tested.
  • It eats up CPU, even if the video is paused. (This has something to do with CSS animations still rendering.)
  • The user can’t drag the seek bar while the video is unpaused. If they do, then the animations will start and overlap each other.
  • Charlie.js does not respond to changes in frame rate. So, if the video stutters or you want to slow down the rate of the video, then the animations will fall out of sync. Also, you can’t run video backwards.
  • Animations won’t start if the current tab isn’t set to the video, due torequestAnimationFrame not running unless the video tab is active. This could confuse users who switch back and forth between tabs.

Some of these limitations can be fixed pretty easily, but Charlie.js was made for a very limited use case. I’ve put together a demo of Charlie.js in action so that you can see what it can do.

The future of video in Web design is filled with possibilities, and I for one can’t wait to see what happens.

Reinventing The Tech Conference Experience

If you had to name one thing that could have been better at the last conference or meetup you attended, what would it be? I bet you’d say that the content or the interaction could have been better in some way. I created Onslyde to solve this problem. It’s a free service andopen-source project that (hopefully) will make public speaking easier and conferences better.

The motivation for the project came from my own speaking engagements in the tech industry. I wanted to see how many people in the audience actually agreed or disagreed with what I was saying. I also wanted to leverage their experience and knowledge to create a better learning environment.

Presentations today are mostly unidirectional, with a single presenter giving information to the audience. But it doesn’t have to be that way. Now, with the ubiquity of mobile devices, everyone in the room can contribute to the conversation and make it better. Many books have been written on the topic of collective wisdom. In The Wisdom of Crowds, James Surowiecki states:

“… a diverse collection of independently deciding individuals is likely to make certain types of decisions and predictions better than individuals or even experts.”

For the past year, I have been putting this thesis to the test, enabling people to interact with and change the content that I deliver. It’s been a lot of fun and work, and now you get to see the result.

Ratings And Feedback

When we look at current systems of rating and feedback at conferences, most of them are reactive, meaning that participants rate the session after it’s over. This is why mostpeople don’t even rate sessions, unless they are asked or forced to by the doorkeeper. Those who do rate sessions might not care to be accurate (giving all 5s or 4s and then hurrying to the coffee line). Other attendees might have enjoyed the majority of the talk, but then got upset by the last slide or by the way the speaker ended the talk.

If these people decided to rate the presentation, how many stars do you think they would give? Perhaps 3 or 4 stars because of their anger at the end, but who really knows? Without context, a low rating doesn’t tell the speaker which part of the talk an attendee didn’t like.

Real-time feedback gives context to a rating, making traditional feedback unnecessary. Conference organizers and speakers no longer have to rely solely on Twitter hash tags and reactive ratings to see how well things went. We can now visualize exactly how the audience felt at any millisecond of a presentation.

REAL-TIME RATINGS WITH ONSLYDE

Giving a presentation that allows for real-time feedback is like riding a bicycle down a really steep hill for the first time. You have no idea whether you will crash and burn or come out with an adrenaline-filled scream at the other end. And it’s just as much fun for the audience.

With Onslyde, you get an accurate measure from the audience while you’re speaking. If you see that a lot of people are disagreeing with what you’re saying, you can adapt: Ask audience members for their thoughts, or maybe move on to another topic. When you’re presenting, actually seeing how the audience collectively feels in real time and then responding accordingly is a very cool experience.

The worst thing a presenter can do is tell the audience something it already knows or say something totally wrong. The audience wants to be intrigued and entertained by you. But too many speakers seem to think this requires GIFs of cats. Well, I don’t want to spoil anyone’s fun but I’m an adult now, and I don’t go to thousand-dollar conferences to look at funny pictures of cats. I do want to be able to challenge you, engage with the content and tell you when you’re wrong.

So, let’s talk about how the audience indicates whether you’re right or wrong. Onslyde’s remote control gives audience members between two and four ways to interact, depending on the type of session. It works for both normal presentations and panel discussions.

For presentations:

  • Any slide can be agreed or disagreed with.
  • Presenters can poll the audience by asking a question and giving two answers to choose from.
  • Remote devices are updated with content for each slide.

pres-remote-250-opt

For panel discussions:

  • Anyone (either panelist or audience member) can be agreed or disagreed with.
  • Votes are on a rolling average, meaning that they expire after 15 seconds (or a time specified by the moderator).
  • Any audience member can request to speak. This option will add them to a queue on the main screen.

panel-remote-250-opt

All remote devices receive real-time updates based on the slide or current speaker. In individual presentations, the speaker can specify content or images to send to all remotes per slide. For example, if a bulleted list is on the current slide, you could send it to the remotes by adding class="send" to the markup:

<section>
	<ul>
	<li>Onslyde makes you a better presenter.</li>
	</ul>
</section>

We’ll go over the technical details in the next section. For now, note how easy it is to broadcast markup to everyone’s remotes.

Edge Conf, hosted at Google’s New York office in October 2013, was the first time ever when the audience participated in real time (via Onslyde) during an entire conference.

edge1-panel-detail-500-opt

WHAT IF THERE’S NO WI-FI?

At this point, you might be thinking that this is a cool idea, but what about the 99% of conferences that have shaky or no Wi-Fi connectivity?

A presentation will work with or without an Internet connection; however, with no connection, it will just be like a normal presentation, and the audience would not be able to interact.

If you have a smartphone with a tetherable data plan, you can tether your laptop and enable Onslyde to connect from a mobile phone. It might sound crazy, but the lightweight messages that are sent across the wire still allow the presentation to run smoothly.

Even if Wi-Fi at a conference is unstable, the audience can always connect to the presentation with their mobile device’s data plan. I’ve personally given six or seven presentations with Onslyde and haven’t run into any issues so far.

Below you can see the network statistics from a talk I gave earlier this year. Even though the conference had stable Wi-Fi, attendees were connecting through their mobile data plan:

visits-by-provider-opt

Some have suggested bringing SMS into the picture, as a fallback. This would enable attendees to vote by sending text messages to the server. If you have other ideas, please leave them in the comments!

Building An Interactive Presentation

The Onslyde framework plugs into any HTML-based presentation system. For now, it supports presentations written with the following:

Currently, there is no nice WYSIWYG tool for building a slide deck. A tiny bit of HTML knowledge is required to build a presentation, but that’s it — no JavaScript or other programming. This is good because you don’t have to log into the system to edit your deck minutes before going on stage. You can change the markup at any time, and you will be ready to present after refreshing the browser.

The following use cases show how to add interactive elements to a presentation.

AUDIENCE MEMBERS VOTE ON (I.E. AGREE OR DISAGREE WITH) ANY SLIDE

This comes out of box, no set-up required. Onslyde is built around “slide groups.” “Agree” and “Disagree” votes can only be given once in a slide group. This lets you focus on a particular topic with multiple slides and not be bombarded with votes on each screen.

<section>
	<section>
		<p>Onslyde makes you a better presenter.</p>
	</section>
</section>

buttons-opt
The buttons above will become active once the presenter moves to a new slide group.

ASK UNLIMITED QUESTIONS WITH TWO ANSWERS

To create an onscreen poll, use the following markup:

<section>

	<section data-option="master">
		<h3>
		What is your favorite JavaScript framework?
		</h3>
	</section>

	<section data-option="jquery">
		<div>
		Time to talk about jQuery!
		</div>
	</section>

	<section data-option="querySelector">
		<div>
		Let’s go into more detail about core JavaScript!
		</div>
	</section>

</section>

By adding the markup above to your presentation, the bar chart in the following image will be automatically created and populated as votes are submitted:

favorite-javascript-framework-500-opt

The buttons at the top will illuminate on the remote controls, and attendees may start voting:

start-voting-opt

SEND CONTENT TO ALL DEVICES AT ANY TIME

Notice how the remote control’s image shows the title of the poll? As mentioned, this is because we added class="send" to the parent element of the heading.

<section>
	<h3>
	What is your favorite JavaScript framework?
	</h3>
…

start-voting-2-opt
The sent markup will appear below the button options.

You can also send something completely different than what is shown by the projector. Instead of sending the title of the poll, you could send the names of other JavaScript libraries for attendees to research:

<section>
	<h3>
	What is your favorite JavaScript framework?
	</h3>

	<div>
		<ul>
		<li>Zepto</li>
		<li>xui</li>
		<li>…</li>
		</ul>
	</div>

RAFFLE OR GIVEAWAY: RANDOM SELECTION OF AUDIENCE MEMBER

To me, one of the funnest parts of this tool is giving away swag at the end of a talk. You can randomly select anyone who is connected by adding the following link to your slide deck:

<a href="javascript:onslyde.slides.roulette()">Pick a winner</a>

winner-opt

Just place the link on the final slide and click it at the end of your talk. Everyone’s mobile device will flash red; then, the winner’s will turn yellow. Continue clicking to pick more people at random.

Best Practices

The easiest way to get started with each feature is to focus on how you want the audience to interact with you and your content. Here are some good rules of thumb that I have learned using this tool:

  • Start each presentation with a poll on the first or second slide. This allows the audience to get their device ready, get connected and start giving their opinion. It’s fun to pose a controversial question about your presentation topic and watch the votes pour in.
  • Polls can solicit a “Yes” or “No” feeling from the audience or go deeper. If you ask a question like, “Which JavaScript framework do you use?” and then give options for “AngularJS” or “Backbone”, you will be able to fork the slides. This is why preparing the slides beforehand is more rewarding. Onslyde will detect the majority vote, and when you go to the next slide, the losing slides will be removed from the presentation (temporarily) and only the slides from the winning option will be shown.

Getting Started

Presentations can be created at onslyde.com. And the open-source back end that manages a presentation’s feedback is hosted on GitHub. Anyone can run the server and host their own instance of the entire Onslyde stack if they wish.

All of the features mentioned are integrated in each demo to show use cases. To begin your first presentation, go to the “Getting Started” section, where you will have the option to run a demo presentation or sign in and create a private one.

onslyde.getting-started-500-opt
(Large view)

After you’ve signed in, the “Getting Started” page will give you options for setting up a poll. After hitting the “Preview” button, you must save the HTML to your computer in order to edit and present the slides.

setting-up-500-opt
(Large view)

An Onslyde presentation can be run anywhere. Essentially, it’s the same as saving a Keynote or PowerPoint presentation on your computer. Just click on the HTML file and run it from a Web browser — no need to install anything or run it from a server.

REGARDING KEYNOTE AND POWERPOINT

For those of you who use non-HTML slide decks, such as Keynote and PowerPoint, there are plans to create a transparent overlay on top of Windows and Mac OS X. This will allow presenters to use any presentation tool and to collect feedback in real time.

Understanding Audience Feedback

After your talk is over, you can view the analytics for your session. The votes for each slide are recorded so that you can track your performance at a fine-grained level.

chart1-500-opt

For questions that the audience voted on, each option is recorded, along with the “Agree” and “Disagree” votes for each poll.

chart2-500-opt

The other important pieces of data come from Google Analytics, including engagement times and what kinds of devices and mobile networks were used.

analytics-500-opt
Google Analytics showed that real-time feedback was provided not just from the people in the room. (Large view)

From the above image, we can see that 281 iOS devices and approximately 113 Android devices were used at Edge Conf. Because the event was streamed live, over twice as many unique devices appeared as there were people in the room — people were participating and providing real-time feedback as they watched the live stream from their home or office around the world!

One other cool piece to this analytics puzzle is mapping voting times to the video. Edge Conf was streamed live, and the videos were subsequently added to YouTube. After finding a reference point in the video and calculating the starting time, we were able to map the charts to the videos. If you clicked on any data point from a session, the video would skip to that voting period. Try it out for yourself.

voting-period-500-opt
We were able to map the voting times to the conference videos. (Large view)

Conclusion

As we’ve seen, so much more valuable data can be pulled from the conferences we attend. Not only can we get an accurate snapshot of how speakers performed and how audience members felt, but we can change the learning experience for everyone.

This project is a use case for the mobile Web and a playground for the new technologies that are available to modern Web browsers, such as WebSockets and WebRTC. Many other companies and conferences provide similar services using native apps and proprietary hardware, but the convenience of opening a Web browser and being exposed to a new level of education and interaction is immeasurable.

Many thanks to Andrew Betts for helping me with this article and providing great feedback. He is also responsible for most of the features in the Onslyde panel and remote interfaces.

(al, ea)

PHP Mail Function

Send Mail in PHP

PHP provides inbuilt function known as mail() function which allow you to send mail directly from your program. This function returns TRUE on success and FALSE when failed. Mail function accept 5 parameters like to, subject, message, headers and  extra parameters.

Syntax
mail(to,subject,message,headers,parameters)
Name Required Description
to Yes Mail Address of the receiver or receivers
subject Yes Subject of the mail content.
message Yes Mail message. This can either be plain text or HTML formatted mail.
headers No Additional headers can be From, Cc, and Bcc etc.
parameters No Additional parameter to the send mail program.

PHP Simple Mail Function

The following example will send simple text mail.

<?php
$to = "receiver@domain.com";
$subject = "This is a test mail";
$message = "Hi! This is a simple text mail to test";
$from = "sender@a2zwebhelp.com";
$headers = "From:" . $from;
$result = mail($to,$subject,$message,$headers);
if($result==true){
   echo "Mail Sent successfully.";
}
?>

PHP Send Mail With CC and BCC

<?php
$to = "receiver@domain.com";
$cc = "CCto@domain.com";
$bcc = "BCCto@domain.com";
$subject = "This is a test mail with CC and BCC";
$message = "Hi! This is a simple text mail to test with CC and BCC";
$from = "sender@a2zwebhelp.com";
$headers = "From:" . $from . "\r\n";
$headers .= "CC:" . $cc . "\r\n";
$headers .= "BCC:" . $bcc. "\r\n";
$result = mail($to,$subject,$message,$headers);
if($result==true){
   echo "Mail Sent successfully.";
}
?>

PHP Send HTML Mail

<?php
$to = "receiver@domain.com";
$cc = "CCto@domain.com";
$bcc = "BCCto@domain.com";
$subject = "This is a test mail with CC and BCC";
$from = "sender@a2zwebhelp.com";
$message = "<table border="0" width="100%" cellspacing="0" cellpadding="0" 
style="font-family: Verdana; font-size: 8pt">
<tr>
<td colspan="2" align="center" height="40"><b>Simple HTML Mail</b></td>
</tr>
<tr>
<td height="25" width="10%">&nbsp;</td>
<td height="25">Mail content goes here. </td>
</tr>
<tr>
<td height="25" width="10%">&nbsp;</td>
<td height="25">Mail second line goes here.</td>
</tr>
</table>";
// Set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

$headers .= "From:" . $from . "\r\n";
$headers .= "CC:" . $cc . "\r\n";
$headers .= "BCC:" . $bcc. "\r\n";
$result = mail($to,$subject,$message,$headers);
if($result==true){
   echo "Mail Sent successfully.";
}
?>

Send mail with attachment

Click here to know how to send mail with attachment.

PHP Array All Functions

PHP Array Functions

The following list show the different function used in an array.
– array_change_key_case : Changes all keys in an array
– array_chunk : Used to split an array into pieces.
– array_column : Used to return the values from a single column in the input array
– array_combine : Used to creates an array by using one array for keys and another for its values.
– array_count_values : Used to counts all the values of an array.
– array_diff_assoc : Computes the difference of arrays with additional index check
– array_diff_key : Computes the difference of arrays using keys for comparison
– array_diff_uassoc : Computes the difference of arrays with additional index check which is performed by a user supplied callback function
– array_diff_ukey : Computes the difference of arrays using a callback function on the keys for comparison
– array_diff : Computes the difference of arrays
– array_fill_keys : Fill an array with values, specifying keys
– array_fill : Fill an array with values
– array_filter : Filters elements of an array using a callback function
– array_flip : Exchanges all keys with their associated values in an array
– array_intersect_assoc : Computes the intersection of arrays with additional index check
– array_intersect_key : Computes the intersection of arrays using keys for comparison
– array_intersect_uassoc : Computes the intersection of arrays with additional index check, compares indexes by a callback function
– array_intersect_ukey : Computes the intersection of arrays using a callback function on the keysfor comparison
– array_intersect : Computes the intersection of arrays
– array_key_exists : Checks if the given key or index exists in the array
– array_keys : Return all the keys or a subset of the keys of an array
– array_map : Applies the callback to the elements of the given arrays
– array_merge_recursive : Merge two or more arrays recursively
– array_merge : Merge one or more arrays
– array_multisort : Sort multiple or multi-dimensional arrays
– array_pad : Pad array to the specified length with a value
– array_pop : Pop the element off the end of array
– array_product : Calculate the product of values in an array
– array_push : Push one or more elements onto the end of array
– array_rand : Pick one or more random entries out of an array
– array_reduce : Iteratively reduce the array to a single value using a callback function
– array_replace_recursive : Replaces elements from passed arrays into the first array recursively
– array_replace : Replaces elements from passed arrays into the first array
– array_reverse : Return an array with elements in reverse order
– array_search : Searches the array for a given value and returns the corresponding key if successful
– array_shift : Shift an element off the beginning of array
– array_slice : Extract a slice of the array
– array_splice : Remove a portion of the array and replace it with something else
– array_sum : Calculate the sum of values in an array
– array_udiff_assoc : Computes the difference of arrays with additional index check, compares data by a callback function
– array_udiff_uassoc : Computes the difference of arrays with additional index check, compares data and indexes by a callback function
– array_udiff : Computes the difference of arrays by using a callback function for data comparison
– array_uintersect_assoc : Computes the intersection of arrays with additional index check, compares data by a callback function
– array_uintersect_uassoc : Computes the intersection of arrays with additional index check, compares data and indexes by a callback functions
– array_uintersect : Computes the intersection of arrays, compares data by a callback function
– array_unique : Removes duplicate values from an array
– array_unshift : Prepend one or more elements to the beginning of an array
– array_values : Return all the values of an array
– array_walk_recursive : Apply a user function recursively to every member of an array
– array_walk : Apply a user function to every member of an array
– array : Create an array
– arsort : Sort an array in reverse order and maintain index association
– asort : Sort an array and maintain index association
– compact : Create array containing variables and their values
– count : Count all elements in an array, or something in an object
– current : Return the current element in an array
– each : Return the current key and value pair from an array and advance the array cursor
– end : Set the internal pointer of an array to its last element
– extract : Import variables into the current symbol table from an array
– in_array : Checks if a value exists in an array
– key_exists : Alias of array_key_exists
– key : Fetch a key from an array
– krsort : Sort an array by key in reverse order
– ksort : Sort an array by key
– list : Assign variables as if they were an array
– natcasesort : Sort an array using a case insensitive “natural order” algorithm
– natsort : Sort an array using a “natural order” algorithm
– next : Advance the internal array pointer of an array
– pos : Alias of current
– prev : Rewind the internal array pointer
– range : Create an array containing a range of elements
– reset : Set the internal pointer of an array to its first element
– rsort : Sort an array in reverse order
– shuffle : Shuffle an array
– sizeof : Alias of count
– sort : Sort an array
– uasort : Sort an array with a user-defined comparison function and maintain index association
– uksort : Sort an array by keys using a user-defined comparison function
– usort : Sort an array by values using a user-defined comparison function

PHP Array Sort Functions

The elements in an array can be either be sort ascending, descending, alphabetical and numerical order. Lets discuss the different sort function used in PHP.

– sort() – used to sort arrays in ascending order.
– rsort() – used to sort arrays in descending order.
– asort() – used to sort associative arrays in ascending order as per values.
– ksort() – used to sort associative arrays in ascending order as per key.
– arsort() – used to sort associative arrays in descending order as per  values.
– krsort() – used to sort associative arrays in descending order  as per key.
– shuffle() – used to randomizes the order of the elements in an array.

Sort arrays in ascending order sort()

<?php
$players = array("Sambir","Rupal","Aadarsh");
sort($players);
print_r($players);
?>

Output:
Array(
[0] => Aadarsh
[1] => Rupal
[2] => Sambir
)

Sort Array in Descending Order – rsort()

<?php
$players = array("Rupal","Sambit","Aadarsh");
rsort($players);
print_r($players);
?>

Output:
Array(
[0] => Sambir
[1] => Rupal
[2] => Aadarsh
)

asort()

<?php
$players = array("Sambir"=>"9","Rupal"=>"10","Aadarsh"=>"8");
asort($players);
print_r($players);
?>

Output:
Array(
[Aadarsh] => 8
[Sambir] => 9
[Rupal] => 10
)

ksort()

<?php
$players = array("Sambir"=>"9","Rupal"=>"10","Aadarsh"=>"8");
ksort($players);
print_r($players);
?>

Output:
Array(
[Aadarsh] => 8
[Rupal] => 10
[Sambir] => 9
)

ksort()

<?php
$players = array("Sambir"=>"9","Rupal"=>"10","Aadarsh"=>"8");
ksort($players);
print_r($players);
?>

Output:
Array(
[Aadarsh] => 8
[Rupal] => 10
[Sambir] => 9
)

arsort()

<?php
$players = array("Sambir"=>"9","Rupal"=>"10","Aadarsh"=>"8");
arsort($players);
print_r($players);
?>

Output:
Array(
[Rupal] => 10
[Sambir] => 9
[Aadarsh] => 8
)

krsort()

<?php
$players = array("Sambir"=>"9","Rupal"=>"10","Aadarsh"=>"8");
krsort($players);
print_r($players);
?>

Output:
Array(
[Sambir] => 9
[Rupal] => 10
[Aadarsh] => 8
)

shuffle()

<?php
$players = array("Sambir","Rupal","Aadarsh");
shuffle($players);
print_r($players);
?>

Output: /* Every time you refresh the value changes. */
Array(
 [0] => Aadarsh
[1] => Sambir
[2] => Rupal
)