IPTV recording is piracy?

Finnish TTVK (Tekijänoikeuden tiedotus- ja valvontakeskus ry) is planning to sue two Finland's biggest internet service providers Elisa and TeliaSonera. This is because TeliaSonera and Elisa provide their users a recording possibility in their IPTV-service.

At last the IPTV seems to become a basic thing in Finland. IPTV’s advantages are that all tv-channels can be watched whether you were in cable or antenna home. Almost any IPTV program can be recorded to the service providers cloud. Users that have IPTV don’t have a need for big digiboxes with big and slow hard drives. Another advantage is that user can record any amount of programs at the same time in any amount of channels. Yours truly has a Wbox HD2 that can record three channels at the same time as you watch a fourth channel. Turning from IPTV to this normal digibox was first challenging because I have had a habit to record any program from EPG that interested me.

Well to the point. IPTV is the best thing since turning the analog tv to digital. It’s a breakthrough that encourages service providers to enhance their outdated ADSL-connections. If you wonder why, I’ll explain. Let’s think that family has 24/1mb ADSL-connection and someone from the family watches HD-channel through IPTV and one surfs the Internet and watches videos from YouTube. It doesn’t take too long to notice that lame 24/1mb connection isn’t just enough. HD-channels will start to make loud cracking noises and it will be more like watching a cartoon than watching a movie. YouTube user notices that YouTube won’t buffer fast enough.

The family that has IPTV is probably pleased with the service and just don’t want to give up because the connection isn’t fast enough. This means that family needs faster DSL-connection and they probably will contact their service provider to get the faster connection. The main point of this post. Finnish service providers don’t currently have any better connections to offer to the general public than 24/1mb. This is because of ADSL2+ can’t offer faster connections and it’s currently only technique that is available almost for everyone in Finland. I think that if customers need faster connections, service providers will find the way to provide the connection for customer sooner or later. If it doesn’t exist now, it doesn’t mean that it won’t exist in the future. It will improve infrastructure and will help Finland to keep its place at cutting edge of technology. TTKV, which was mentioned in the beginning of this blogpost is now planning to slow this improvement.

It’s very short sighted to think that IPTV-recording services will harm anyone. It’s very far from piracy and is very equivalent to recording with digibox or even with VHS. Well, it does little harm. Let’s say that Expendables comes from tv and I record it with my IPTV. It will stay there for 90 days. TeliaSoneras service allows user to have recordings 90 days stored until those will be erased. That little harm is that I won’t probably buy or rent the movie for these 90 days because of my awesome IPTV-service. It’s a small harm comparing to piracy that happens in the internet for example by Piratebay like services. Almost all movies that come from tv are at least three years old. Not many people will rent or buy those movies or series. Notice also that TeliaSoneras service won’t allow user to record payed CMORE, MTV nordic, Discovery or any other cable like channels.

What TTKV is doing is almost criminal. IPTV-recording is an easy target while they can’t do anything to REAL piracy. I really suggest that people at TTKV consider to get a real job or at least try to do their current job the way that it won’t hurt general public.

Coding quickie: jQuery Mobile and dynamically created content.

I think I don't have to start telling how good jQuery Mobile(JQM) framework is. I think it's the fastest way to create mobile-webpage for newer smartphones. I have tested this framework with iPhone 4 (iOS), iPad 1 and 2 (iOS), HTC Desire HD (Android), Samsung Galaxy Tab (Android), HTC Mozart (WP7), Nokia Lumia 800 (WP7) and amazing Nokia 5230 (Symbian).
I even got my hands on a Blackberry tablet for few minutes. Unfortunately my mobile detection didn't count it as a mobile device so I can't tell how well JQM works on it.
Devices that understand JQM well and run it smoothly are iOS and Android devices. Amazingly JQM works in Nokia 5230's own browser. It doesn't look as good as on iOS or Android devices, but it’s functional. JQM works with WP7 also. Full list of supported devices can be seen here.

#Skip this part if you are not interested in my opinions#
I'm from Finland, the land of Nokia. The great Nokia has employed Finns for decades and is the most known brand from Finland.
Actually it's not too long time ago that I admired Nokia myself. I was very proud of that we had something like Nokia in this little cold country. This is the time when Nokia had just published E63 and E71 "smartphones". I still think that those were one of the best business smartphones of that time. Those were little bit like Blackberry rip-offs but what can you do if you can’t buy Blackberry from Finland.
To the point. For a long time now I haven’t had faith in Nokia. Finland or Finnish shareholders own only a little fraction of Nokia. Well, head office of Nokia is still located in Finland, but I think that not for long anymore. Deal (or alliance) with Microsoft was the last nail in the coffin.
As a developer, WP7 operating system looked promising. I had my first glance of it at Geeks On Wheels-seminar at Tampere. It's promising but I think that it's too raw operating system for Nokia. Android or Maemo would have been better choices. Personally I think that engineers that have worked at Nokia have that kind of knowledge that when they leave Nokia, we will soon have lots of new innovative companies at Finland. These companies will do the same for the technology world that Angry Birds did for the gaming world.
These are just my own opinions and the point of this blog text was not to tell how sad I'm because of Nokia.
#Skip this part if you are not interested of my opinions#

The problem that this blog-post solves is explained next. If content like list items is fetched with ajax the JQM-theme won’t work on it. This is because the JQM does different kind of changes at start to the content that is inside the pages.

JQM will change next button from this:
<a href="#" class="notheme_button" data-role="button">No theme button</a>
in to this:
<a class="notheme_button ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow ui-btn-up-undefined" data-role="button" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">No theme button</span>
</span>
</a>

If the content is fetched with ajax and placed to some JQM-page it won't do these changes. Thats why I'm introducing .trigger("create").

This is the normal JQM page:
<div data-role="page"  data-theme="c" id="main">
    <!-- header -->
    <div data-role="header" data-theme="a">          
        <h1>.trigger("create");</h1>
    </div>
    <!-- header -->
    <!-- content -->
    <div data-role="content">
        <a href="#" class="notheme_button" data-role="button">No theme button</a>
        <a href="#" class="button" data-role="button">Refresh theme button</a>
        <div id="job_list">
        </div>
    </div>
    <!-- content -->
</div>

Let's say that we want to put content inside to div#job_list with ajax. Content that I want is links styled with listview.
Let’s fetch the content like this:
$(".button").click(function(){
    ajax_procedure("ajax.php?giveLinks=yes","theme");
});

Simple javascript ajax function(You can use jQuery .ajax() or .get() too).
function ajax_procedure(ajax_url,style){
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("GET",ajax_url,false);
        xmlhttp.send(null);
        //alert(xmlhttp.responseText);
        if(style == "theme"){
            theme(xmlhttp.responseText);
        }
        else{
            notheme(xmlhttp.responseText);
        }
}

Here is the php file that gives the list of links as a response:
<?php
    if($_GET['giveLinks'] == "yes"){
        echo '<ul data-role="listview" data-inset="true" data-theme="d">';
            echo "<li><a href='http://www.google.fi' rel='external'>Google</a></li>";
            echo "<li><a href='http://www.yahoo.fi' rel='external'>Yahoo</a></li>";
        echo '</ul>';
    }
?>

and the functions that put response to div#job_list.
function theme(response){
        $('#job_list').html(response);
        $('#main').trigger("create");
}

function notheme(response){
        $('#job_list').html(response);
}

This solution is not big secret and it can be found from stackoverflow also. I just explained and simplified the procedure a little. 
Why? If you haven't encountered this problem yet and you are building JQM based apps you are about to struggle with this problem.

Here's the working example of.trigger("create").

Coding quickie: How to make hitbox in canvas with arrays.

This is a tutorial how to make a hitbox with javascript. This code can be used to detect if objects in canvas were hitted. My way is using arrays to store the objects properties.
First understand that object is a block that starts and ends somewhere in canvas in both x- and y-axel.

This shows what data is needs to be stored

Let's define arrays for objects x- and y-axels start and end points. Let's also define array that defines what was hitted.
var hit_areaxs = new Array(),hit_areaxe = new Array(), hit_areays = new Array(),hit_areaye = new Array(),hit_what = new Array();

Next we put "Cow" to array.
hit_what[0] = "Cow"; //defines hitboxes name
hit_areaxs[0] = cow_x; //defines startpoint
hit_areaxe[0] = cow_x + cow_size; //defines endpoint
hit_areays[0] = cow_y; //defines startpoint
hit_areaye[0] = cow_y + cow_size; //defines endpoint

After that create a function that detects if mouse hit the hitbox.
Function needs two more arrays.
var x_hit= new Array(),y_hit=new Array();
These arrays store the name of the object that was hit.

Hit test happens in for loop:
for(var i = 0; i < hit_areaxs.length; i++) { //loop can use any hit_areas x or y start or end point
x_hit[i]="x"; // define something to x_hit and y_hit arrays to ensure that
y_hit[i]="y"; // x_hit and y_hit have diffirent values

if(hit_areaxs[i] < mouseX && hit_areaxe[i] > mouseX){ //check if any object in x-axel were hitted
x_hit[i] = hit_what[i]; //store the hitted objects name
}
if(hit_areays[i] < mouseY && hit_areaye[i] > mouseY){ //check if any object in y-axel were hitted
y_hit[i] = hit_what[i]; //store the hitted objects name
}

if(x_hit[i] == y_hit[i]){ //if x and y hit values are the same print hitted objects name in console.log
console.log("You hitted: " + hit_what[i]);
}
}

This shows what click does

Coding quickie: JQuery and CSS3 animation.

You may have struggled with JQuery .animate and CSS3 shadow. Shadow can be applied for text and boxes like divs. Because .animate() can’t (or at least I haven’t got it working) animate box-shadow animation, I’ll show you a way to do it another way.
Instead of using .animate() I use .css(). Function .css() itself doesn’t have the capability of animating things. CSS3 has this capability. It’s called transition. Transition can be applied to text- and box-shadow. First you need to tell where you want to apply transition effect (in example it’s: all) then how long transition lasts (0.5s) and last the type of timing (ease-in-out).
Here’s how to make box glow when you put your mouse over:


<body>

<div class="apply_to_this">
This is div
</div>

<script>
$('.apply_to_this').mouseover(function(){
$('.apply_to_this').css({
'box-shadow':'0px 1px 5px 2px white,0px 0px 2px black inset',
'-moz-transition': 'all 0.5s ease-in-out',
'-webkit-transition': 'all 0.5s ease-in-out',
'-o-transition': 'all 0.5s ease-in-out',
'transition': 'all 0.5s ease-in-out'
});
});
$('.apply_to_this').mouseout(function(){
$('.apply_to_this').css({
'box-shadow':'0px 1px 5px black,0px 0px 2px black inset',
'-moz-transition': 'all 0.5s ease-in-out',
'-webkit-transition': 'all 0.5s ease-in-out',
'-o-transition': 'all 0.5s ease-in-out',
'transition': 'all 0.5s ease-in-out'
});
});
</script>
</body>

Notice that you can do the same with css by using :hover.

Working example goo.gl/9kI8z

Switching to (JQ)mobile

You may have some kind of website. You may have some viewers too. What you don’t have is a mobile website. You may find too challenging to start building one. There is an easy way to make a mobile website and it’s called JQmobile.

JQmobile is a JavaScript based framework for smart phones and mobile devices. It’s easy and fast way to build web-apps and mobile-websites. Notice that there is no support for all mobile platforms. List of supported platforms can be found here. On my own tests I have figured that Iphone4 beats android devices like the Samsung Galaxy-tab and HTC Desire HD in graphics though only slightly.
Because of limited support of mobile platforms I’ll show one way to make a mobile website that works even in ancient phones like Nokia E71. Solution isn’t based on JQmobile.
If you aren’t building too complicated mobile website, here’s some kind of instructions how to build one with JQmobile.

Lets get started!
There is a big difference between a normal website and a mobile website. The biggest difference of all is that mobile devices have so much smaller display compared to a regular PC user. Although mobile devices today have great resolutions, small size of display forces developers to produce mobile optimized websites.

Here’s how to quickly scale a normal webpage to mobile friendly:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

-->

To prevent unwanted zooming on a page use “user-scalable=no”.

Next you need JQmobile –css file:

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />

Then you add JQ scripts to your page:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

Then we start building the page.



Rest is almost like building a normal webpage with HTML. Using JQmobile we have to use some data tags like data-role, data-theme and data-transition.
The main page of your site starts like this:

<!-- Main -->
<div data-role="page" data-theme="a" id="main">
<!-- header -->
<div data-role="header" data-theme="a">
<h1>JobiJobi.fi</h1>
</div>
<!-- header -->
<!-- content -->
<div data-role="content">
<p>
<a href="#info" data-role="button" data-rel="dialog" data-transition="slidedown">Info</a>
<a href="http://www.google.com/" data-role="button" rel="external">Google</a>
<a href="http://electricfoundry.blogspot.com/" data-role="button" rel="external">Electric Foundry</a>
<a href="http://www.jobijobi.fi/" data-role="button" rel="external">JobiJobi.fi</a>
</p>
</div>
<!-- content -->
</div>
<!-- Main -->

There’s nothing too complicated if you have ever built a webpage. The roles of simple div-elements are determined with data-role attribute.

The first link on the page is Info. Next the attributes are explained:
href=”#info” means that this link is linked to the element which has id info.
data-role=”button” means that this link will be shown as a button.
data-rel=”dialog” means that the Info box will open as pop-up like a window.
data-transition=”slidedown” means that the Info pop-up will have a slide down animation.

Other links are external and shown as a buttons. To have a correct syntax, rel=”external” attribute is added to the a-element.
Now we have a page that has four links. External links are of course already functional but the Info link needs some more attention. To have a Info pop-up we have to of build one.
Lets add this code below main page:

<!-- InFO -->
<div data-role="page" id="info">
<!-- header -->
<div data-role="header" data-theme="a">
<h1>Info</h1>
</div>
<!-- header -->
<!-- content -->
<div data-role="content">
This is cool<br />
<div style="text-align:center;background-color:#FFFFFF;padding:2px;border-radius:5px;">
Isn't this cooler
</div>
</div>
<!-- content -->
</div>
<!-- InFO -->

Result is like this:


It is almost like the main page. I just added one div with some style definitions on it. It’s there to show you that you can make your kind of content inside JQmobile-site. You can also make your kind of themes in Themeroller.
Well, that was easy.

If you want to learn more about JQmobile go to http://jquerymobile.com/demos/1.0/


Another way to build mobile website
At the beginning of this post I promised to show a way to make mobile-website that would work even in the oldest smart phones. Only requirement is that device understands JavaScript.
Here’s the full code:

<!DOCTYPE html>
<html>
<head>
<title>JobiJobi!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
html{
font-family: Helvetica,Arial,sans-serif;
}
.a{
background: none repeat scroll 0 0 #BFE085;
border: 1px outset #8DAF44;
font-size: 120%;
margin: auto;
position: relative;
text-align: center;
text-decoration: none;
width: 98%;
border-radius:100px;
}
a{
text-decoration: none;
}
#info{
display:none;
}
</style>
<script>
setTimeout(function(){
window.scrollTo(0,1);
},1000);
function info(){
document.getElementById('main').style.display = 'none';
document.getElementById('info').style.display = 'block';
}
function main(){
document.getElementById('info').style.display = 'none';
document.getElementById('main').style.display = 'block';
}
</script>
</head>
<body>
<!-- main -->
<div id="main" style="text-align:center;">
<div>
<h1>JobiJobi.fi</h1>
</div><!-- /header -->
<div>
<a href="#info" onclick="info();"><div class="a">Info</div></a><br />
<a href="http://www.google.com/"><div class="a">Google</div></a><br />
<a href="http://electricfoundry.blogspot.com/"><div class="a">Electric Foundry</div></a><br />
<a href="http://www.jobijobi.fi/"><div class="a">JobiJobi.fi</div></a><br />
</div>
<!-- content -->
</div>
<!-- Main -->

<!-- InFO -->
<div id="info" style="text-align:center;">

<div>
<a href="#main" onclick='main();'><div class="a_paa">Back to main</div></a><br />
<h1>Info</h1>
</div><!-- /header -->

<div>
This is cool<br />
<div style="text-align:center;">
<div style="text-align:center;background-color:#F7BE81;padding:2px;border-radius:5px;">
Isn't this cooler
</div>
</div>
</div><!-- /content -->
</div><!-- InFO -->
</body>
</html>

Full html-files can be downloaded from here:
goo.gl/brqTo


-Peter

Facebook-social plugins and javascript performance.

It has been a while since I last wrote to my blog. Things have changed a lot since my last blog post. Facebook demands now https connections to applications and there is lot more moderation tools for applications in Facebook itself. My old posts are useless because lot of those things are now easily made in Facebook app settings.

This time my blog post is about Facebook-social plug-ins and JavaScript performance. Why? Because I made new website for the project that I’m working for and I found some performance issues with Firefox.

Link to the site is here www.jobijobi.fi. There’s lots of new web features. There is the bubble kind of design which is powered with CSS3. There is a dynamically drawing canvas in background and lots of jquery animation.
Problem was that the site runs lots of javascript code at start. Lots of code itself doesn’t make any performance problems. Even with Iphone 4, starting animations run smoothly. When I added Facebook like to my site, performance problems started. I’m using Firefox for testing and suddenly jquery animations started to flicker. Pieces on the site started to jump in their places instead of smooth moving. Google Chrome and Safari were working well.

I wrestled long time to figure out what was wrong with my code. I noticed that something was loading from facebook.com while start animation was playing. Of course it was Facebook like plug-ins JavaScript part, loading info from Facebook servers. The animations were almost so sticky that the site was in unpublishable condition.
I solved the problem following way. I put the Facebook social plug-in JavaScript part to load after the sites animations were complete. That solved the performance issues. Of course I had to change some things in the site because of these modifications.

Anyway the main thing is to load things that are not in your server locally on background after site-loading is complete. If that is not possible, make JavaScript Loading… kind of start to your site and load plug-ins before you show anything.
Remember that when adding Facebook like and Facebook comments to your site only one JavaScript plug-in is enough.

Kuinka tehdä redirect url link/How to make redirect url link?

Edellinen tekstini käsitteli miten laajentaa sovelluksen oikeuksia. Sovelluksen oikeuksien laajennuksen voi sisällyttää linkkiin. Alla oleva linkki voi toimia oikeuksien laajentajana.
<a href="https://graph.facebook.com/oauth/authorize?client_id= your app-id &redirect_uri= http://apps.facebook.com/testi_sov /&scope=user_education_history,user_work_history,user_photos">Laajenna</a>

Tämä ei kuitenkaan ole hyvä tapa sillä laajennuksen jälkeen käyttäjä ohjataan facebook-sivulle jossa näkyy vain facebook logo. Käyttäjän on varmasti hyvin ikävä klikkailla itsensä siltä sivulta takaisin sovellukseen. Tässä parempi tyyli, tarvitsemme siihen javascriptiä.

Tehdään seuraavanlainen linkki:
<a href="#" onclick="laa()">Laajenna sovelluksen oikeuksia</a>.
Onclick tapahtuma sisältää laajennus funktion.

Tässä funktio:
<script type="text/javascript">
function laa(){
top.location.href = 'https://graph.facebook.com/oauth/authorize?client_id= your app-id &redirect_uri=http://apps.facebook.com/testi_sov/&scope=email';
}
</script>

Funktiossa ei varmaan ole suurempaa selitettävää. Facebookin maailmassa simppelein ei vain toimi, joten käytetään vaikeampaa tietä. Tällä onclick funktiolla sovelluksen muutkin linkit saadaan linkkaamaan juuri sinne mihin halutaan, vaikka facebookin ulkopuolelle. Huomaa, että tavalliset a_href-linkit eivät linkkaa ulos facebook-sovelluksesta vaan avaavat sivun (esim. googlen) facebook canvasissa.

In english
My last text told about how to extend facebook-apps permissions. Extension can be included in a link but there is a better way. For example link below is the solution that probably first comes up to everyone:

<a href="https://graph.facebook.com/oauth/authorize?client_id= your app-id &redirect_uri= http://apps.facebook.com/testi_sov /&scope=user_education_history,user_work_history,user_photos">Laajenna</a>

This works but isn’t the best way because after extended permissions are granted app redirects user to facebook site that only the facebook logo can be seen. It’s probably frustrating on user’s opinion to click back to facebook-app. As I said there is better way and we need javascript for that.

Let’s make a link like this:

<a href="#" onclick="laa()">expand app’s permissions</a>.
Onclick includes extension function.
Here’s the function:
<script type="text/javascript">
function laa(){
top.location.href = 'https://graph.facebook.com/oauth/authorize?client_id= your app-id &redirect_uri=http://apps.facebook.com/testi_sov/&scope=email';
}
</script>
I think that there is nothing complicated in a function so it doesn’t need to be explained further. In a facebook world simplest way just isn’t enough and that’s why we have to use the hard way. On this onclick-function you can point to any site outside of facebook. With normal a_href link (for example google) opens in facebook canvas.

-Peter Virtanen