Rajnikant official website

rajnikant website

rajnikant website

It may sound like another Rajinikanthjoke, but a new website dedicated to the superstar runs ‘without an internet connection’!

Visitors to http://www.allaboutrajni.com are greeted with a warning that “He is no ordinary man, this is no ordinary website. It runs on Rajini Power” and are advised to switch off their internet connection to enter the website.

Only when the web is disconnected, one is allowed to explore the site.

Netizens can trace the story of the legend from the beginning, read inside scoops from his films and get a glimpse of behind-the-scenes action, while browsing through famous Rajini jokes about impossible feats only he can achieve.

“The unbelievable spectacle of running a website without the internet is a tribute to Rajinikant’s larger than life image,” claimed Webchutney’s creative director Gurbaksh Singh, who developed the site forDesimartini.com.

With a heady mix of foot-tapping music, vibrant splash of colours, quirky quotes and illustrations, and icons in true Rajni style and lingo, the unique website reflects Rajini’s signature style.

Singh told PTI that the website is based on a complex algorithm running in the back-end that keeps an eye on the propagation of data packets between two terminals.

Magic kicks in soon as the internet speed is down to zero, which is the basic premise on which the site and the concept has been constructed.

The humour element on the website is accentuated by the error message in typical Rajini style that appears if a visitor attempts to re-connect the internet.

“Aiyyo! That was unexpected. To keep browsing, switch off your internet,” reads the message.

“The website has received a phenomenal response and has gone viral with several thousand hits and counting, along with innumerable shares and mentions across the web, especially on popular social networking sites like Facebook and Twitter,” Singh said.

“After a few iterations and testing, we cracked the code required to build the world’s first website that runs without the internet – a website that runs offline – which is as awesome and unbelievable as miracles and stunts associated or performed by Rajni himself,” he said.

Advertisements

Death sentence for developing software

Saeed Malekpour’s Facebook page photo.

The execution of Iranian Web programmer Saeed Malekpour may be imminent.

The death sentence of Malekpour, who was convicted of “insulting and desecrating Islam” for developing software used by porn sites, was confirmed this week by Iran’s Supreme Court. The software that Malekpour developed enables photos to be uploaded online and, according to Amnesty International, was used by a porn site without his knowledge.

Malekpour, 35, was a permanent resident of Canada when he was arrested during a visit to Iran in October 2008. According to The Guardian, after spending more than a year in solitary confinement in Tehran’s Evin Prison without access to a lawyer, Malekpour confessed on state television that he was connected to a porn site.

Based on these TV confessions, an Iranian court sentenced Malekpour to death in October 2010 for “designing and moderating adult materials online.” After the Iranian Supreme Court later reviewed the case, Malekpour’s death sentence was upheld in November 2011, according to Amnesty International.

During this time, Malekpour rescinded his confessions in a letter he sent from prison that said that he was physically and psychologically tortured and was promised an immediate release if he gave a false confession.

“They asked me to falsely confess to purchasing software from the UK and then posting it on my website for sale,” Malekpour wrote in his March 2010 letter. “I was forced to add that when somebody visited my website, the software would be, without his/her knowledge, installed on their computer and would take control of their webcam, even when their webcam is turned off. Although I told them that what they were suggesting was impossible from a technological point of view, they responded that I should not concern myself with such things.”

Malekpour’s death sentence comes at a time when Internet limitations in Iran are ever increasing. Human rights groups have criticized the country’s government for monitoring its Web users, blocking Web sites, suppressing bloggers, and most recently making Web surfing at Internet cafes illegal.

“The authorities must also not unlawfully limit the right to freedom of expression with vaguely worded charges,” Amnesty International’s Ann Harrison said in a statement today.

Several human rights organizations, Canadian parliamentary officials, and the cyber community have spoken out against Iran’s decision to execute Malekpour. A “Free Saeed Malekpour” Facebook page has been created that people can “like,” along with two WordPress blogs, and a petition that people can sign to demand Malekpour’s release.

Windows 8 hardware requirements

Microsoft, as it does for all platforms, has issued a set of requirements for Windows 8 tablets.

windows 8 hardware requirements

 

While there aren’t a lot of surprises (see charts below), Microsoft does specifically address a “convertible” design, which is expected to become popular on both Intel- and ARM-based devices.

Convertible: “A convertible form factor is defined as a standalone device that combines the PC, display and rechargeable power source with a mechanically attached keyboard and pointing device in a single chassis. A convertible can be transformed into a tablet where the attached input devices are hidden or removed leaving the display as the only input mechanism,” according to the Microsoft documentation on pg. 87.

Hardware buttons: Must have five hardware buttons. They are–power, rotation lock, Windows Key, volume up, volume down.

Broadband: And many of those designs will have built-in broadband. “If a mobile broadband device is integrated into a tablet or convertible system, then an assisted GPS radio is required,” Microsoft stipulates.

A Windows 8 tablet needs to have five buttons.A Windows 8 tablet needs to have five buttons.

(Credit: Microsoft)

Display: will have to be at least 1366×768 resolution. “The minimum native resolution/color depth is 1366×768 at a depth of 32bits. The physical dimensions of the display panel must match the aspect ratio the native resolution. The native resolution of the panel can be greater than 1366 (horizontally) and 768 (vertically).”

NFC: A visual mark is required for near field communications. “To help users locate and use the proximity technology, the use of a visual mark is required,” according to Microsoft.

Other Windows 8 tablet/convertible minimum hardware requirements include:

  • Storage: At least 10gb free space “after the out-of-box experience completes”
  • Graphics: Direct3D 10 device w/ WDDM 1.2 driver
  • Display resolution: 1366×768
  • Camera: 720p
  • Accelerometer et al: plus magnetometer and gyroscope
  • USB: USB 2.0
  • Networking: WLAN and Bluetooth 4.0 + LE (low energy)
  • System firmware: UEFI (see related story)

Angry birds copy in linux

Kris Occhipinti is currently in the middle of creating a 2D game created using the Blender 3D game engine. The game, called Pissed Off Penguins, looks similar to the popular “Angry Birds” game most of you have likely heard about. I wanted to outline this open-source project and expose some of the unique techniques Kris is using to both fund this project and create the game itself.

The first thing I found interesting was that Kris is using the project funding platform Kickstarter.com to raise the funds for developing the game. The way I understand Kickstarter to work is a project idea is proposed, a donation goal is set, and if the goal is met within the time threshold, the project is successfully Kickstarted. People that donate to the project, known as “backers”, are given all types of incentives depending on the amount they donate. Check out the incentives for this project. Donations start at $1.

The second unique thing about the POP project is the entire process is being documented on Kris’ Youtube channel.  Each video he puts out shows a different step or an update on the games’ progress. You can see how the game looks as it’s being created, each step that’s taken and each mistake that’s made. This type of documentation really provides a valuable training resource for users interested in a similar game startup and it’s a great incentive for people to donate and be apart of the project.

HTML5 animation tutorial

We are going to animate a moving car with two different HTML5 techniques.

Introduction

HTML5 is becoming more and more popular. With the increasing popularity of mobile devices such as tables and smartphones, the need for alternatives to the popular Flash plugin from Adobe has also been grown. Just recently, Adobe announced that Flash will no longer be supported for mobile devices. This means that Adobe itself will focus on HTML5 as a key technology for those devices – and desktop systems sooner or later.

One disadvantage of HTML was the lack of multimedia techniques. In HTML, you could not display a video or draw on the screen. With HTML5, new elements such as <video> and <canvas> have been introduced. Those elements give developers the possibility to use multimedia technology in “native” HTML, just by writing some JavaScript in combination with HTML. A basic action that should be provided by multimedia technologies is animation. In HTML5, there are some ways to create such actions.

In this article, I will only compare the new <canvas> element with the upcoming CSS3 animation technique. Other possibilities would include the creation and animation of DOM elements or SVG elements. Those possibilities will not be included in this discussion. It should be noted from the beginning that the canvas-technology is supported in the current releases of all major browsers, while CSS3 animations are only possible in the latest editions of Firefox and Chrome. The next IE will also provide CSS3 animations.

Background

I am currently giving a lecture on creating WebApplications using HTML5, CSS3 and JavaScript. This is a lecture with tutorials. For one of the tutorials, I picked a sample canvas animation – just showing in which direction we are heading to with a technology like this. Then I introduced the CSS3 animation in the lecture (everyone was very excited about it) and wanted to create a simple homework task using the CSS3 animations. What came to my mind was: how easy or hard would it be to actually transform the canvas animation into a complete CSS3 animation?

This involved several parts:

  • Creating all the different <div>-elements in order to “box” everything
  • Draw everything using styles on those elements with style rules like borders, background-gradients and rounded corners
  • Actually animating the elements

The reason for using CSS3 animation over the <canvas>-element is quite important: While browsers can optimize their elements performance (regarding their style, i.e., CSS), they cannot optimize our custom drawing routines used in a canvas. The reason for this lies in the browser’s ability to use hardware mainly the graphics card. Currently the browser does not give us direct access to the graphics card, i.e., every drawing operation has to go over some function in the browser first.

This problem could be prevented with techniques such as webgl, where the browser does give the developer direct access to the graphics card. However, this is treated as a security problem and will not become standardized. One important rule for developing WebApplications is standardization – since this is our portal to a huge customer base. If we excluded some of the most popular browsers, we would certainly lose a lot of potential visitors.

Starting with Canvas

Our basic HTML document looks like the following:

 Collapse | Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Animations in HTML5 using the canvas element</title>
<script></script>
</head>
<body>
<canvas id="canvas" width="1000" height="600">Your browser does not support the 
<code>&lt;canvas&gt;</code>-element. Please think about updating your browser!</canvas>
<div id="controls">
<button type="button" onclick="speed(-0.1);">Slower</button>
<button type="button" onclick="play(this);">Play</button>
<button type="button" onclick="speed(+0.1);">Faster</button>
</div>
</body>
</html>

Here we set the HTML5-Doctype and build a page containing a <canvas> for drawing the animation and some buttons contained in a panel (<div>). We could have shortened the document by omitting certain tags. One of the advantages of HTML5 is that each browser has to implement certain fallbacks, e.g., if a tag is not closed or if a certain tag is missing. The shown (more complete and verbose) form is my personal favorite.

A canvas alone would not make a great painting – nor does it give us some animation. What does the actual drawing? It’s some JavaScript! The required <script>-tag is already placed in the <head>-section. In this case, we will not use external JavaScript files to get the required lines of code. This makes only sense if you consider using not many lines of code (small size) and non-repeating JavaScript. Otherwise you could benefit from the browser’s caching as well as multiple (download) connections. Another important point by using external JavaScript files is to consider moving the script-tags to the bottom of the document in order to prevent performance problems.

Let’s start by declaring some variables:

 Collapse | Copy Code
var	dx = 5,				// Velocity at rate 1
	rate = 1, 			// The current playback rate
	ani,				// The current animation loop
	c,				// (Drawing) Canvas Context
	w,				// (Car, hidden) Canvas Context
	grassHeight = 130,	// Height of the background
	carAlpha = 0,		// Rotation-angle of the tires
	carX = -400,		// (x-)Position of the car (will move)
	carY = 300, 		// (y-)Position of the car (will stay constant)
	carWidth = 400, 	// Width of the car
	carHeight = 130,	// Height of the car
	tiresDelta = 15,	// Distance from one tire to the closest edge of the chassis 
			// of the car
	axisDelta = 20,	// Distance from the bottom of the chassis of the car 
			// to the axis with the tires being attached
	radius = 60;	// Radius of one tire

	// In order to init the car canvas (hidden) we use this anonymous function
(function() {
	var car = document.createElement('canvas');	// Creating the element
	car.height = carHeight + axisDelta + radius;	// Setting the appropriate 
						// attributes
	car.width = carWidth;
	w = car.getContext('2d');			// Now we can set the car canvas
})(); // Executed directly

As you can see, most of the variables are actually used as constants. This means the code will give you some freedom in order to adjust the dimensions of the car as well as some other parameters like the speed of the car. The change in the rotation of the tire can actually be calculated by using the ratio of dx to the radius.

Another interesting property arises by looking at the bottom of the code. Here I use an anonymous function. This can be very useful in some cases. This means that variables that are declared within the scope of the anonymous function like car will be deleted by the browser and most importantly will not cause any conflicts with other existing variables.

Why is there a second (invisible) canvas set up? First of all, this will be useful in the transition to CSS3. However, this approach is also very useful in general. By using a canvas for each major object we are animating, we will be able to keep their states as they are, i.e., if we do not have to redraw them we do not have to as supposed to the approach where we will wipe does drawings away with a clean of the main canvas. Another reason is that this model allows us to think more physical. We do not have to animate the chassis (moving) and the tires (moving and rotating) separately, but just as a whole thing meaning the tires (rotating) within the car (moving). This states the physical model more closely, where the tires are rotating which makes the car moving.

Starting the loop:

 Collapse | Copy Code
function play(s) {				// The referenced function, s is the button
	if(ani) {				// If ani is not NULL we have an animation
		clearInterval(ani);	// So we clear (stop) the animation
		ani = null;		// Explicitly setting the variable to NULL
		s.innerHTML = 'Play';	// Renaming the button
	} else  {
		ani = setInterval(drawCanvas, 40);	// We are starting the animation 
						// with 25 fps
		s.innerHTML = 'Pause';	// Renaming the button
	}
}

This function has already been referenced by the HTML we’ve written. Here we just start or stop the animation depending on the current state that is displayed using the ani variable. The framerate has a maximum of 25 frames per second – this might not be the best choice. jQuery is using 77 fps (13 ms) as a default for its DOM object animation. In case of this simple animation, it should give a good insight. An important issue is that our logic (dx = 5) will be bound to those 25 fps. This is something to be careful about when building professional animations or even games.

Let’s have a look at the main drawing function that will be called in the loop:

 Collapse | Copy Code
function drawCanvas() {
	c.clearRect(0, 0, c.canvas.width, c.canvas.height);	// Clear the (displayed) 
							// canvas to avoid errors
	c.save();		// Saves the current state of properties (coordinates!)
	drawGrass();		// Draws the background (grass)
	c.translate(carX, 0);	// Does some coordinate transformation
	drawCar();		// Draws the car (redraws hidden canvas)
	c.drawImage(w.canvas, 0, carY);	// Draws the car actually to visible canvas
	c.restore();	// Restores to last saved state (original coordinates!)
	carX += dx;		// Increases the position by the dx we set per time
	carAlpha += dx / radius;	// Increases the angle of the tires by the ratio

	if(carX > c.canvas.width)	// We keep some periodic boundary conditions
		carX = -carWidth - 10;	// We could also reverse the speed dx *= -1;
}

Basically we just redraw the image. The animation is actually coming from two little methods inside. First we use a translation of coordinates to always draw to the same coordinates but being placed on a different location. The second one is the incrementation of the car’s current position. Without one of those two calls, the car would not move at all! We also outsourced as much code as possible, making it more maintainable (unfortunately, this can also decrease JavaScript code performance).

Why are coordinate transformations so important? The offer us some nice possibilities: Rotating something without writing any mathematical function at all! Or as we have seen: We can just draw to the same coordinates but receive different results. This is the power of coordinate transformation. The translation method is called by using context.translate(dx, dy) and allows us to set a new center (0, 0). The usual center is the upper left corner. If we would rotate without translating at all, we would always just rotate around the upper left corner. In order to rotate around the center of a canvas, we could use something like:

 Collapse | Copy Code
context.translate(context.canvas.width / 2, context.canvas.height / 2)

Now we look at the function for drawing the car itself:

 Collapse | Copy Code
function drawCar() {
	w.clearRect(0, 0, w.canvas.width, w.canvas.height);	// Now we have to 
							// clear the hidden canvas
	w.strokeStyle = '#FF6600'; 		// We set the color for the border
	w.lineWidth = 2;			// And the width of the border (in pixels)
	w.fillStyle = '#FF9900';		// We also do set the color of the background
	w.beginPath(); 			// Now we begin some drawing
	w.rect(0, 0, carWidth, carHeight);	// By sketching a rectangle
	w.stroke();			// This should be drawn (border!)
	w.fill();				// And filled (background!)
	w.closePath();			// Now the close the drawing
	drawTire(tiresDelta + radius, carHeight + axisDelta);		// And we draw 
								// tire #1
	drawTire(carWidth - tiresDelta - radius, carHeight + axisDelta);// Same routine, 
							// different coordinates
}

Here we used some of the possibilities that the <canvas>-element offers us. On the hand we do use paths (very simple – and in this case more or less obsolete since we could have used the drawRect() and fillRect() method. Again we outsourced some code in order to obtain a better maintainability. In this case, this is totally justified since we just have one method to take care of (drawTire()) instead of two identical code blocks that form one big mess.

Finally, let’s have a look at the method for drawing one of the tires:

 Collapse | Copy Code
function drawTire(x, y) { 
	w.save();				// Again we save the state
	w.translate(x, y); 		// And we perform a translation 
					// (middle of the tire should be centered)
	w.rotate(carAlpha);		// Now we rotate (around that center)
	w.strokeStyle = '#3300FF'; 		// Setting the draw color
	w.lineWidth = 1;			// The width of the border (drawline)
	w.fillStyle = '#0099FF';		// The filling / background
	w.beginPath();				// Another sketching is started
	w.arc(0, 0, radius, 0, 2 * Math.PI, false); 	// With a full circle around 
					// the center
	w.fill(); 			// We fill this one
	w.closePath(); 			// And close the figure
	w.beginPath();			// Start a new one
	w.moveTo(radius, 0);		// Where we move to the left center
	w.lineTo(-radius, 0); 		// Sketch a line to the right center
	w.stroke();			// Draw the line
	w.closePath();			// Close the path
	w.beginPath();			// Start another path
	w.moveTo(0, radius);		// Move to the top center
	w.lineTo(0, -radius); 		// And sketch a line to the bottom center
	w.stroke();			// Draw the line
	w.closePath();			// Close it
	w.restore();			// And restoring the initial state 
					// (coordinates, ...)
}

Additionally, I’ve added a preview image by using the onload-event of the <body>-element. I also included a method to increase the speed of the animation by changing the value of the dx variable. The framerate will not be changed in order to increase or decrease the speed.

This is the result of our coding. A car moving around in a canvas!

This example can be viewed live at http://html5.florian-rappl.de/ani-canvas.html.

Moving to CSS3

The basic HTML document now has the following format:

 Collapse | Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Animations in HTML5 using CSS3 animations</title>
<style>
</style>
</head>
<body>
<div id="container">
<div id="car">
<div id="chassis"></div>
<div id="backtire" class="tire"><div class="hr"></div><div class="vr"></div></div>
<div id="fronttire" class="tire"><div class="hr"></div><div class="vr"></div></div>
</div>
<div id="grass"></div>
</div>
</body>
</html>

The document looks quite similar to the one before. However, some things can be noted right away:

  • There is no <script>-element prepared. Instead, we will use a <style>-declaration.
  • There are no controls for setting the speed or play and pause. This is actually one of the key differences I will explain later (interaction).
  • The whole scene is already presented in HTML-elements. They are not styled right now, but they do represent the scenario we want to animate.

While animating something in a canvas is mostly a programming job, we clearly shifted towards a design problem here. We can only manage to animate the scene appropriately if we build a correct model of the scene using HTML-elements (well, <div>s). In this logical scenario, the <div id="container"> represents the canvas from before, <div id="car"> is the HTML-element that is equivalent to the hidden canvas of the previous example and <div id="grass"></div> is exactly the element that has been drawn using drawGrass() before.

The basic CSS outline is the following:

 Collapse | Copy Code
#container
{
	position: relative;	/* Relative pos. - just that we can place 
				absolute divs in there */
	width: 100%;		/* Yes this will get the whole page width */
	height: 600px;		/* and 600px height */
	overflow: hidden;	/* Really important */
}

#car
{
	position: absolute;	/* We position the car absolute in the container */
	width: 400px;		/* The total width */
	height: 210px;		/* The total height incl. tires and chassis */
	z-index: 1;		/* car is in front of the grass */
	top: 300px;		/* distance from the top (y-coordinate) */
	left: 50px;		/* distance to the left (x-coordinate) */
}

#chassis
{
	position: absolute;	/* This defines the space of our car w/o tires */
	width: 400px;		/* The total width */
	height: 130px;		/* The height of the chassis */
	background: #FF9900;	/* Some color */
	border: 2px solid #FF6600;	/* Some thick border */
}

.tire
{
	z-index: 1;		/* Always in front of the chassis */
	position: absolute;	/* Absolute positioned */
	bottom: 0;		/* Will be placed at the bottom of the car */
	border-radius: 60px;	/* And there is our radius ! */
	height: 120px;		/* 2 * radius = height */
	width: 120px;		/* 2 * radius = width */
	background: #0099FF;	/* The filling color */
	border: 1px solid #3300FF;	/* And the border color and width */
}

#fronttire
{
	right: 20px; /* Positions the right tire with some distance to the edge */
}

#backtire
{
	left: 20px; /* Positions the left tire with some distance to the edge */
}

#grass
{
	position: absolute;	/* Grass is absolute positioned in the container */
	width: 100%;		/* Takes all the width */
	height: 130px;		/* And some height */
	bottom: 0;		/* 0 distance to the bottom */
	background: -webkit-linear-gradient(bottom, #33CC00, #66FF22);
	background: -moz-linear-gradient(bottom, #33CC00, #66FF22);
	background: -ms-linear-gradient(bottom, #33CC00, #66FF22);
	background: linear-gradient(bottom, #33CC00, #66FF22); /* Currently we need 
							all of them */
}

.hr, .vr	/* Rules for both: hr and vr */
{
	position: absolute;	/* Want to position them absolutely */
	background: #3300FF;	/* The border color */
}

.hr
{
	height: 1px;		/* Linewidth of 1 Pixel */
	width: 100%;		/* Just a straight line (horizontal) */
	left: 0;
	top: 60px;		/* Remember 60px was the radius ! */
}

.vr
{
	width: 1px;		/* Linewidth of 1 Pixel */
	height: 100%;		/* Just a straight line (vertical) */
	left: 60px;		/* Remember 60px was the radius ! */
	top: 0;
}

Here we use classes and IDs to attach rules one or multiple times. This can be seen best by looking at the code for creating a tire. We do use two different IDs (fronttire and backtire) for distinguishing between different positions. Since both share the rest of their properties (and a rotation!), it was just useful to give them also a class (tire) which attaches some CSS rules to the corresponding elements.

The horizontal and vertical lines will be drawn using the classes hr and vr. We can use the position: absolute; andposition: relative; rules to set positions for each child-element within the mother-element. For the grass, we required a gradient to be drawn. This is no problem in CSS3. Well, maybe it is a small problem since the browser vendors are currently using vendor specific prefixes for those rules. This is an annoying fact and will hopefully vanish within the next year.

A really important rule can be found in the container itself. By setting overflow: hidden; we prevent the car from escaping from our beautiful container-world. This means that the car will behave the same way as in the previous scenario, where it was not possible to draw outside the canvas-area. However, one more really important thing is missing: the animations itself!

Definitions of the keyframes:

 Collapse | Copy Code
@keyframes carAnimation
{
	0% { left: -400px; }	/* Initial position */
	100% { left: 1600px; }	/* Final position */
}

@keyframes tyreAnimation
{
	0% { transform: rotate(0); }	 	/* Initial angle */
	100% { transform: rotate(1800deg); }		/* Final angle */
}

The first comment on those lines is a really important one: do not try making this at home! I do not show the real code here for a purpose. This is how it should look like. However, it does not (but it looks similar). The problem is that CSS3 keyframes are quite new and therefore (yes, you guess (or know) it) you require those prefixes again. Also CSS3 transforms do require prefixes. So just copy those lines and add -webkit- and -moz- and others (IE is about to come to the CSS3 animations party with version 10, hopefully Opera is about to follow!) in front of keyframes and transform.

The next thing you’ll notice is that the syntax is really clean and smooth. You just specify some keyframes (in this case, just one as an initial frame and one as a final frame) and the browser will calculate the rest. However, we cannot integrate such nice physical considerations like the relation between the angle and the position from the previous example.

Now that we specified some keyframes we need to integrate them! How does that look:

 Collapse | Copy Code
#car
{
	animation-name: carAnimation;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.tire
{
	animation-name: tyreAnimation;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

Again – be cautious when trying this at home. You will need some copy and paste plus you’ll have to add the appropriate prefixes in front of those entries. So this tells the browser which set of keyframes to take for the element and what kind of frame distribution within which time to consider. We also tell the browser the number of repetitions to perform. In this case, we will end up with an infinite loop.

This is the result of our styling. A car moving around in a div!

This example can be viewed live at http://html5.florian-rappl.de/ani-css3.html.

Comparison of the Two Methods

In my opinion, both of those methods have their benefits. The first one is actually pretty straight forward from a programmer’s perspective (however, it took quite long until this was possible in HTML / JavaScript). The second one does offer some really nice features and will most certainly be used in an amazing way to build websites that will certainly have an impact on the web’s future.

Pro Canvas-Animations

  • Interaction (like pause, slower, faster, …) is easily possible.
  • We can connect values to form one physical unit directly.
  • We do not need to know or have a complete structure before the animation.

Pro CSS3-Animations

  • The performance is definitely better.
  • We can use the full screen (100% does not work with the canvas element).
  • The frames are computed by the browser – we just specify the keyframes.

All in all, it will depend on the project (as usual). Even though I thought about some possible workarounds to actually stop an infinite CSS3-animation (and start again), it would be tedious to actually implement this in a bigger multimedia animation. Here the interaction possibilities are a clear indicator for a canvas-animation. On the other side, some small (non-interactive) animations could be done by the CSS3 technique. It provides a nice clear syntax that can be GPU accelerated by modern browsers and can be styled to fit everywhere.

Points of Interest

While writing a lot of <canvas>-animations, I never had to opportunity to write an actual CSS3 animation. This was certainly related to the propagation of this really new technique. Now that Firefox implemented the keyframes and with Microsoft up to come we will most certainly see more keyframe rules online. I thought that this technique was quite hard to write and got really surprised how easy it is. I actually had more problems with the linear gradient syntax than the keyframes one.

My only hope is that browser vendors will stop rolling out CSS rules with those prefixes. In nightly builds or such they are acceptable, but having something in a final build that is either not the standard (why rolling it out?) or standardized (why prefixing it?) but with a prefix is just a mess for web developers.

iPad 3 vs. New Samsung Tablet

While the smartphone tech race is pretty much over, there’s plenty of gold in them there tablet hills, as Apple and Samsung may clash, toe-to-toe, next February with new cutting-edge models. Grab your pom-poms and start cheering for your favorite now!

Get Ready To Rumble

With the launch of Amazon’s Kindle Fire upsetting the Apple-cart in recent weeks, you can bet that the iOS company is planning a deep-and-wide family (with models at various screen sizes and budgets) strategy for the iPad in the near future. However, the third iteration will likely be another big feature advance to keep up its momentum.

But, at the same time, its main rival in the power stakes, Samsung, is planning to launch a new tablet, packing all its own latest screen technology. it will also be armed with Google’s latest Ice Cream Sandwich edition of Android. This will make for a battle royal, as Samsung tries to put a big dent in Apple’s sales, ignoring the new round of monotonous patent litigation these launches will probably spark.

In Glorious Hi-Def

The big sell for both systems will be the latest in hi-res displays with Samsung using its own technology to offer an 11.6″ tablet with a 2560 x 1600 display. Word is this tablet won’t be much larger than the current 10″ Galaxy Tab as it uses less bezel.  Apple has been working with Sharp on a display that doubles the resolution of the current model. It should run at 2048 x 1536, but what’s a few pixels between friends?

Inside there will probably be processor, radio and other upgrades, but most users only care about what they can see on those lovely screens and, again, Apple’s iTunes and app store will probably see it outsell the Samsung, but not by as much as previous iterations.

Aficionados will also be looking for design tweaks, with Samsung having turned up the heat with its recent Nexus phone and Apple now looking lackluster with the recent 4S launch, not that an old design stopped it selling. Will there be new twists on the designs, or new materials? Or, will both companies decide that budget is key and tone down the excesses on exotic styling? Nah!

Anyone Else Want to Play?

These advances also pretty much signal the death knell for the lingering pretenders to the throne including RIM’s Playbook. Asian white-box vendors will keep lapping up the low-end and gradually improve their offerings. Give them a couple of years, and tablets might be as generic and cheap as aspirin.

That also means, Microsoft will now be coming into the game even later and further behind the field with its Windows 8 offerings. Samung will be quite happy shipping the new Android 4.0 while Apple, with a new iOS 5.1 update due to ship soon, will likely cram Siri and other new toys into any 5.2 or 5.5 release.

Android app store download reaches 10,00,00,00,000

To put it into perspective, the Android Market hit 1 billion downloads in July 2010 after launching in 2008, and later surpassed the 6 billion mark during July 2011.

Of course, one has to throw in the necessary comparison to iTunes. The Apple App Storereached 10 billion downloads as of January 2011 after launching in July 2008.

To celebrate and reward Android customers, Google will be making select paid apps available for 10 cents each. A new set of apps will be up for promotion each day for the next 10 days.

Connect to a PHP Server using HTML5 WebSockets

Before HTML5 introduced WebSockets, you had to rely on specialized technologies like Java applets (remember those?!) or, more recently, Flash. I covered some of the challenges of working with WebSockets in this early stage of development in my Making HTML5 WebSockets Work article.

In this article, we’ll be utilizing WebSockets to write a kind of automated web chat, where the other party is a machine of great intellect, called “Multivac”, named after the Chatbot demo of the Google phpwebsocket project.

As mentioned in the conclusion of my last article, we will be using the lemmingzshadow php-websocket library because it supports the newer draft-ietf-hybi-thewebsocketprotocol-10 (HyBi-10) WebSockets protocol. You’ll also need a web server that supports PHP, such as Wamp or Apache, and a fairly up-to-date browser; I would recommend google Chrome 14+ or Firefox 6+ as the best choices.

WebSocket Connections

When you see all of the files involved in managing the WebSocket connections, it quickly becomes apparent why it’s not advisable to write your won server-side code from scratch, unless socket communication protocols and other low level operations really float your boat. Nonetheless you should have some familiarity with the files that you’ll be working with; some of them, you’ll have to modify, others, are better left alone! Here’s a rundown of what’s contained in the lemmingzshadow php-websocket download:

  • server.php: Creates the WebSocket server instance, sets server properties, and registers the application to be called by the client component.
  • SplClassLoader.php: Implements the technical interoperability standards for PHP 5.3 namespaces and class names.
  • Connection.php: Manages the WebSocket Connection. The hybi10Decode() and hybi10Encode() functions are located therein.
  • Server.php (upper case ‘S’): It’s the “real” server which monitors the port for client requests.
  • Socket.php: Creates and maintains references to sockets.
  • Application.php: An abstract class that contains the getInstance() method, which ensures that applications are created as singletons, as well as the onConnect(), onDisconnect(), and onData() abstract methods which all applications must implement.
  • ChatApplication.php: A fully functional simple webchat application.
  • DemoApplication.php: A Websocket-Server demo and test application. It can either echo data back to the client or execute a user function.
  • EchoApplication.php: Even simpler than the demo app, this class just parrots back whatever data is sent to it. This is the class upon which our Multivac app will be built.
  • chat.html: The client component of the chat application.
  • client.php: A basic WebSocket client that runs from a command line.
  • echo.html: The client component for the echo application. This is the client-side component that we will be modifying today.
  • index.html: An extremely basic WebSocket server test console.
  • client.css: A stylesheet to spiffy up the browser UI.
  • client.js: A JavaScript template with everything you need to create and communicate with a WebSocket.
  • jquery.min.js: A local minified jQuery script – useful for local development.
  • json2.js: A Douglas Crockford JSON parser from http://www.JSON.org.

Here is how the folders should be structured under your server’s web document root:

Image 1

The Client Page

Open the echo.html page in your favorite HTML editor and you’ll see that most of what we need is already done for us. As it stands, when you enter text in the Message textbox and click the Send button, the data travels to the server.php page, is decoded, re-encoded and sent back to the browser to display in the log

;

not very exciting to be sure, but it does demonstrate that all of the basic processes are functioning just as they should. What we’ll do is tweak the code so that the server sends back a response based on our request. The object of this exercise is to familiarize ourselves with what code to change to develop an application based on existing code.

With regards to the client page, the first thing we’ll do is rename it to something more instructive. Let’s call it “multivacClient.html”.

Next, we’ll add a couple of new CSS classes so that we can differentiate our requests from the server responses:

.human { color: blue; }
.computer { color: green; }

We can now update the log function to accept a class argument. It’s called clazz because class is a reserved word:

var log = function(msg, clazz){ $('#log').append('' + msg + '
') };

A second way to differentiate the client requests from the server responses is to prefix them with a direction arrow: hence, requests have a right facing arrow (>) while the responses have a left facing one (

log('> ' + msg, 'human');

…and socket.onmessage():

log('< ' + msg.data, 'computer');

Another change that I would make is to update the code that creates the WebSocket object. I am not a fan of browser sniffing, so I would replace the existing if statement with the following:

var Socket = window.WebSocket || window.MozWebSocket;

	if(!Socket){
		$('#log, input, button, span').fadeOut("fast");
		$('

You need a browser that supports WebSockets such as Google Chrome.

').appendTo('#container');
	} else {

The Application File

Now it’s time to work on the EchoApplication.php file. Open it up and save it as “MultivacApplication.php”. Rather than take the received data and spit it right back, we’ll send it to our process() function:

    public function onData($data, $client)
    {
        foreach($this->_clients as $sendto) {
            //$sendto->send($data);
            $this->process($sendto, $data);
        }
    }

The process function evaluates the $action parameter and sends back the appropriate response. I will admit that the AI component of this app is a little weak, but IBM wouldn’t lend me the code for Watson:

  private function process($sendto, $action) {
	  switch($action){
	    case "hello" : $sendto->send("hello human");                        break;
	    case "hi"    : $sendto->send("greetings human");                    break;
	    case "name"  : $sendto->send("my name is Multivac, super-genius."); break;
	    case "age"   : $sendto->send("I am far too vain to say");           break;
	    case "date"  : $sendto->send("today is ".date("Y.m.d"));            break;
	    case "time"  : $sendto->send("server time is ".date("H:i:s"));      break;
	    case "thanks": $sendto->send("you're welcome");                     break;
	    case "bye"   : $sendto->send("bye");                                break;
	    default      : $sendto->send($action." not understood");            break;
	  }
	}

The server.php File

This file is where you would set your basic initializing details such as the server name or IP, port number, as well as your application name and class. There’s also an added security feature to check the “Origin” header in WebSockets handshake. Though it could still be potentially spoofed, browsers always add the Origin of the page which initiated WebSockets connection:

$server = new \WebSocket\Server('localhost', 8000);

// server settings:
$server->setCheckOrigin(true);
$server->setAllowedOrigin('localhost');

$server->registerApplication('multivac', \WebSocket\Application\MultivacApplication::getInstance());
$server->run();

Note that the application name (‘multivac’) must match the Socket call in your JavaScript code:

var socket = new Socket('ws://localhost:8000/multivac');

Running the Application

Open a command window and type the following to launch the WebSocket server process and register our application:

php.exe

Here’s what I entered in my Windows DOS prompt:

C:\Program Files\wamp\bin\php\php5.3.8>php.exe "C:\Program Files\wamp\www\phpwebsocket\server\server.php"

If all went well, you should see a confirmation message that says “Server created”.

Start up your web server and make sure that PHP is enabled and working.

Launch your web browser and enter the URL of the multivacClient.html page:

http://localhost/phpwebsocket/client/multivacClient.html

Look for the green online indicator in the top-right corner to confirm that you are connected to the WebSocket server.

Try some commands, then click the Disconnect button when you’re done.

Image 2

Conclusion

There’s a lot that can go wrong when a technology is made up of so many interconnected parts, but hopefully you’ve learned enough here today to avoid the most common pitfalls. WebSockets is definitely something to watch to see where it leads. I for one can’t wait!

Make HTML5 mobile appS

It’s actually not hard. There are a number of companies that offer the ability to create your own app for a minimal fee, which is great for small businesses looking to stay relevant in this increasingly mobile world. Or if you just have a lot of time on your hands.

Take Conduit. The company made its money creating branded toolbars found on your browser. But over the past few months, it has been expanding into the mobile world with a free servicethat allows you to build an app and mobile Web site in minutes. It’s part of a planned shift by the company to build its consumer awareness after spending years serving other businesses in a white label capacity.

“We’re trying to give companies a tool to really go mobile,” said Ori Lavie, vice president of product strategy at Conduit Mobile. “It’s sometimes a difficult struggle.”

 

You can select how many categories, or tabs, you want on your app.

(Credit: Conduit)

 

I’ve tried the service, and it’s pretty simple to use. The best part: it’s completely free. Conduit has a team set up that will take you through the submission process and it will even pay your fee to get the app up in the various mobile app stores. As with everything in life, there are some catches, and Conduit’s offer is a limited-time promotion.

For the purposes of testing, I decided to build a mobile application out of my personal Tumblr blog,Annoying PR. Conduit’s browser-based tool allowed me to select from a set template for how the app would look–including different appearances for each platform.

To add content to the app, I typed in the address for my blog, which drew in the feed. I also added my Twitter and Facebook accounts.

In terms of the look, I was able to change up the color scheme. I also chose a background, splash page, screenshots, and a logo for the app. You can pick images from a provided library of upload your own images.

There’s also an option to run mobile ads on the app, in which Conduit and the customer would split any potential revenue. I opted not to run ads on my app.

 

Potentially get your app on multiple devices.

(Credit: Conduit)

 

The tool worked very much like WordPress, Tumblr, or any other Web site or blog creation service, and is fairly intuitive.

Within minutes I had an HTML5 mobile Web site built. The site worked a lot like an app, especially after I chose to put it on my iPhone‘s home screen. The address, which uses a Conduit-hosted URL, isn’t exactly the catchiest.

(Point your mobile browser here to check out the HTML5 site.)

Of course, I care more about getting it into app form, which is where there are complications. Yes, Conduit will offer to take your app through the submission process–all while covering your fees–but only after its compliance team deems the app ready. It can kick back the app if it lacks content or uses copyrighted or offensive material.

Once the app is ready, an option comes up that allows you to take advantage of this promotion.

In my case, the app wasn’t ready for primetime. I got a message from a Conduit team member saying my app had insufficient content and suggested I add more categories and images. I added more content from CNET’s YouTube page and a contact tab and resubmitted it. I’m hoping for more luck the next time around.

Lavie said the review process by Conduit may take a few days and getting approval from iTunes and Samsung’s Bada may take a few weeks. Beyond iOS, Android, and Bada, a separate Nokia app is created as well. It also creates a Web app for Microsoft’s Windows Phone and BlackBerry, although the site says native apps were coming soon.

Its simple format means this is a better option for businesses without a lot of technical resources to pursue their own app. Large companies and major brands with money behind them are better off building an app from scratch, since it’ll likely be able to take more advantage of the device. There’s a reason why major companies are pouring money into building apps–they want to be a permanent fixture on a device you stare at dozens of times a day.

It’s not just businesses; ambitious individuals are also getting into the app game. Lavie said opera singer Andrea Bocelli will have a personal app up through Conduit, as well as two NFL players who haven’t yet launched their programs yet. He added he expects bands and DJs to be interested in the capability.

It doesn’t have to be small business or celebrities. Conduit’s offer removes any barriers and complications, meaning anyone with something meaningful to share could conceivably build an app. So this is my challenge to readers: use Conduit to build your own app. If I get enough responses, I’ll highlight them in an upcoming Inside Apps column.

How facebook works?

Facebook is social networking. People have been “facebooking” each other for about 6 years now, making Facebook the most used social network with over 350 million users worldwide. But how does Facebook work?

In this article, I will discuss Facebook’s inner workings, covering its architecture and frontend/backend infrastructure””the nuts and bolts that hold Facebook together.

How Does Facebook Work?””The Front End

Facebook uses a variety of services, tools, and programming languages to make up its core infrastructure. At the front end, their servers run a LAMP (Linux, Apache, MySQL, and PHP) stack with Memcache. Not a computer science expert? Let’s take a look at exactly what that means.

Linux & Apache

how does facebook work

This part is pretty self-explanatory. Linux is a Unix-like computer operating system kernel. It’s open source, very customizable, and good for security. Facebook runs the Linux operating system on Apache HTTP Servers. Apache is also free and is the most popular open source web server in use.

MySQL

how does facebook work

For the database, Facebook utilizes MySQL because of its speed and reliability. MySQL is used primarily as a key-value store as data is randomly distributed amongst a large set of logical instances. These logical instances are spread out across physical nodes and load balancing is done at the physical node level.

As far as customizations are concerned, Facebook has developed a custom partitioning scheme in which a global ID is assigned to all data. They also have a custom archiving scheme that is based on how frequent and recent data is on a per-user basis. Most data is distributed randomly.

PHP

how does facebook work

Facebook uses PHP because it is a good web programming language with extensive support and an active developer community and it is good for rapid iteration. PHP is a dynamically typed/interpreted scripting language.

Memcache

how facebook works

Memcache is a memory caching system that is used to speed up dynamic database-driven websites (like Facebook) by caching data and objects in RAM to reduce reading time. Memcache is Facebook’s primary form of caching and helps alleviate the database load.

Having a caching system allows Facebook to be as fast as it is at recalling your data. If it doesn’t have to go to the database it will just fetch your data from the cache based on your user ID.

Downsides to Using LAMP

Facebook has realized that there are downsides to using the LAMP stack. Notably, PHP is not necessarily optimized for large websites and therefore hard to scale. Also, it is not the fastest executing language and the extension framework is difficult to use.

how facebook works

Mike Schroepfer, Facebook’s Vice President of Engineering, recently did an interview at EmTech@MIT concerning this. “Scaling any website is a challenge,” Schroepfer said, “but scaling a social network has unique challenges.”

He went on to say that unlike other websites, you can’t just add more servers to solve the problem because of Facebook’s “huge interconnected dataset.” New connections are created all the time due to user activity.

Facebook has grown so quickly that they are often faced with issues regarding database queries, caching, and storage of data. Their database is huge and largely complex. To account for this, Facebook has started a lot of open source projects and backend services.

How Does Facebook Work?””The Back End

Facebook’s backend services are written in a variety of different programming languages including C++, Java, Python, and Erlang. Their philosophy for the creation of services is as follows:

1. Create a service if needed

2. Create a framework/toolset for easier creation of services

3. Use the right programming language for the task

A list of all of Facebook’s open source developments can be found here. I will discuss a few of the essential tools that Facebook has developed.

Thrift (protocol)

Thrift is a lightweight remote procedure call framework for scalable cross-language services development. Thrift supports C++, PHP, Python, Perl, Java, Ruby, Erlang, and others. It’s quick, saves development time, and provides a division of labor of work on high-performance servers and applications.

Scribe (log server)

Scribe is a server for aggregating log data streamed in real-time from many other servers. It is a scalable framework useful for logging a wide array of data. It is built on top of Thrift.

Cassandra (database)

how facebook works

Cassandra is a database management system designed to handle large amounts of data spread out across many servers. It powers Facebook’s Inbox Search feature and provides a structured key-value store with eventual consistency.

HipHop for PHP

HipHop for PHP is a source code transformer for PHP script code and was created to save server resources. HipHop transforms PHP source code into optimized C++. After doing this, it uses g++ to compile it to machine code.