How to add a video in your website : a panorama of the different solutions (Youtube, Flash, HTML5..)

Add the youtube video in your web site with the JQuery plugin fancy box

For MosaLingua, I finally choose to add the youtube video in my website, in order to save bandwidth.
But in a beautiful way (at least I hope, see the home page of MosaLingua, and click the button ‘Voir Video’) :

This was very easy, thanks to the excellent JQuery plugin fancybox :

Download the JQuery plugin here, and simply add a link to your video :

<a id=“screencast” title=“‘MosaLingua Espagnol iPhone” href=”http://www.youtube.com/watch?v=xG9kh1hDiFg“>View the screencast</a>

And the following Javascript code :

$(“#screencast“).click(function() {
$.fancybox({
‘padding’ : 0,
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘title’ : this.title,
‘width’ : 680,
‘height’ : 495,
‘href’ : this.href.replace(new RegExp(“watch\\?v=”, “i”), ‘v/’),
‘type’ : ‘swf’,
‘swf’ : {
‘wmode’ : ‘transparent’,
‘allowfullscreen’ : ‘true’
}
});

return false;
});

That’s it. Again, a live preview of the video in action on MosaLingua, you can check out the source ;-).

Add your own video without youtube

Ok, then you want to follow the hard way? No problem, it’s not that hard 😉

The simple code to embed the video

The following code is not working on all browser, I didn’t test on IE, but it’s working on safari, firefox and chrome :

<div class=”screencast”>
    <embed src=”screencast.mov” width=”240″ height=”355″ autoplay=”true” controller=”false” loop=”true” scale=”tofit”>
</div>

and the css code :

.screencast {
    background: transparent url(iphone.jpg) no-repeat;
    width: 291px;
    height: 546px;
    position: absolute;
    top: 30px;
    left: 30px;
}
.screencast embed {
    position: absolute;
    top: 100px;
    left: 25px;
}

The iphone.jpg background can be download in iTune connect (you must sign the Apple agreement).

This code is simple, but you are not sure it is working everywhere (need a descent browser : not IE6 and quicktime plugin)/

To be sure your video will be working everywhere, see this article : http://camendesign.com/code/video_for_everybody

Embed the flash video

I hate to say that, but currently, the only way to be sure that the video is working (almost) everywhere, you need to encod it in flash. I am waiting for html5 video implemented everywhere. I have done that for others site, and it’s pretty simple :

Convert your video into flash flv video

I use this free converter :
http://www.leawo.com/free-mac-video-converter/
It’s simple and easy.

Include the flv into your html

You need a player for that. The easiest way is to use the free and open source flowplayer. Example are in the download bundle, so it’s really simple/

Here it is, all the possibilities to include video into your website

How to create a Screencast video for a mobile (iPhone or Android) application with your Mac

I have created my first screencast for MosaLingua (only in french for now), and I want to share my experience here because I spent a lot of time searching disparate information, and with several trials and errors.

With this article, it will be very straightforward, and you will quickly create a video to promote your application

Application video recording

To have a perfect looking screencast, I followed the advices in this article : Not Your average iphone screencast.

So I used the application Simfinger to replace the mouse cursor by the circle, and to install the fake application in the iPhone simulator.

If you don’t want to spend time checking the sources on github and compiling the application, you can download simfinger ready to use here.

I did not use the fake iPhone body image of Simfinger, because I wanted to integrate the video on different mobile platform, and on my website.

To record the video of the application in action, I used the excellent Snapz Pro X to record the iPhone screen with  :

http://www.ambrosiasw.com/utilities/snapzprox/

Regarding the settings of Snapz Pro X, make sure you choose million of colour, and the max quality settings or the result will be ugly.

Video editing with iMovie

So you want to add a speech, transitions and maybe some marketing slides.

iMovie is really easy to use and included in Mac OS. It provides all feature needed to create a good screencast :

iMovie Quicktime export for iPhone:

When the video is finished, we need to export it in the right format, to be able to play it on the iPhone.

According to apple, the following compression standards are supported:

  • H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
  • MPEG-4 Part 2 video (Simple Profile)
  • AAC-LC audio, up to 48 kHz

Movie files with the extensions .mov, .mp4, .m4v, and .3gp are supported.

See Creating Video for Safari on iPhone and Creating Content for Safari on iPhone.

In iMovie, export your movies using QuickTime Pro 7.2, as described in “Encoding Video for Wi-Fi, 3G, and EDGE,” :

Choose Share -> Export with Quicktime and change the settings :

After a lot of trials and errors, I can say that the optimal settings, in term of quality and size (6Mo for 2.5min) are :

Sorry for the french screenshot, but I don’t know how to change the language settings in the Apple applications.

Export your application screencast on Youtube

So you don’t want to waste your bandwith, and Youtube is perfect to host your video.

High quality export for youtube :

If you have a demo video of your iPhone app in 320×480 (portrait) and whish to upload it to YouTube, you should upscale it to HD. Open the video in QuickTime 7 Pro and export it as MP4 with Video Format H.264, 2000 kBit/sec, 1280×720 HD and check “Preserve aspect ratio using Letterbox”.

(from http://forums.macrumors.com/showthread.php?t=798599)

Add the video into an iPhone Web App :

To include your video in an iPhone web application, or a native application with UIWebView (with phonegap for example), you can use the html5 video tag :

<video src=”media/ScreenCast.mp4″ height=”100″ width=”100″>

Or you can also include the embed code presented by youtube. It works only on a real iPhone/iPod Touch and not in the simulator.

Add the video in your website

As you can see in the most of iPhone app websites (see for example 40 Awesome iPhone Application Websites), your site should include in the frontpage your screencast.

For better result, you need to use the video hosted in your website (control your bandwidth…), because the youtube video cannot be included in the iPhone body image.

The next article talk about the different way to include your video into your web site (hosting your own video, or use youtube), with code sample. Stay tuned.

Le systÚme de répétition espacée pour apprendre une langue rapidement et durablement

Notre cerveau dĂ©truit ce que l’on a appris trĂšs rapidement

Lors de l’apprentissage d’une langue, la phase de mĂ©morisation (de vocabulaire ou autre) est une Ă©tape obligĂ©e, et cela peut ĂȘtre long et fastidieux. Mais lorsque l’information est enfin mĂ©morisĂ©e, la partie n’est pas gagnĂ©e. Si l’on ne rĂ©vise pas rĂ©guliĂšrement, on oubliera l’information trĂšs rapidement.
Heureusement, la recherche et l’informatique sont lĂ  pour nous aider, il existe des mĂ©thodes pour lutter contre l’oubli. Une des mĂ©thodes les plus efficaces est appelĂ©e Spaced Repetition System (systĂšme de rĂ©pĂ©tition espacĂ©).

Le systÚme de la répétition espacée pour nous aider à ne plus oublier

La rĂ©pĂ©tition espacĂ©e est une mĂ©thode de mĂ©morisation qui repose sur le fait qu’il y a un moment idĂ©al pour rĂ©viser ce que l’on a appris :
En rĂ©visant trop tĂŽt, on perd son temps, et trop tard, on a oubliĂ© et il faut rĂ©apprendre. En fait, le bon moment pour rĂ©viser est juste au moment oĂč l’on est sur le point d’oublier.
Alors Ă©videmment, ce moment est difficile Ă  prĂ©voir, et est diffĂ©rent pour chaque personne et pour chaque information mĂ©morisĂ©e. Mais avec les capacitĂ©s d’un ordinateur (ou d’un smartphone comme l’iPhone), cette planification devient possible. En effet, des chercheurs ont pu modĂ©liser la courbe de l’oubli et implĂ©menter ensuite un algorithme informatique permettant de planifier des rĂ©visions.

Voici l’explication simplifiĂ©e de la rĂ©pĂ©tition espacĂ©e en 1 minute de vidĂ©o :

Le graphique de la video :

Courbe Repetition Espacée

L’algorithme va donc nous prĂ©senter l’information Ă  rĂ©viser de moins en moins souvent, sauf si l’on a des difficultĂ©s Ă  se souvenir de l’information.
Contrairement au bachotage (cram en anglais) et à la répétition sur une courte période, cette façon de réviser est optimale, il faut trÚs peu de révision (et donc de temps) pour mémoriser durablement une information.

Les outils de répétition espacée

Bonne nouvelle pour ceux qui veulent accélérer leur apprentissage, il existe des logiciels qui utilisent la répétition espacée :
Anki est un logiciel qui fonctionne sur PC&Mac. Il est trĂšs utilisĂ© pour l’apprentissage du Japonais, mais il peut ĂȘtre utilisĂ© pour toutes les langues, par contre il faut rentrer soit mĂȘme le vocabulaire Ă  rĂ©viser.

MosaLingua est une application pour tĂ©lĂ©phone mobile (iPhone, Android) qui propose des fiches dĂ©jĂ  prĂ©parĂ©es de vocabulaire et des phrases clefs, avec la prononciation audio (disponible pour l’espagnol, et bientĂŽt l’anglais et l’esperanto). Il y a Ă©galement des dialogues pour amĂ©liorer l’orale.

L’avantage d’une application sur tĂ©lĂ©phone c’est qu’on l’a toujours sur soi, et que l’on peut profiter des temps morts de la journĂ©e (ex. transport) pour rĂ©viser. Et il suffit de quelques minutes par jours pour apprendre 10 mots par jours, ce qui permet de connaĂźtre 900 mots en 3 mois !

Critiques du livre Free! de Chris Anderson

Free! de Chris Anderson

Free! de Chris Anderson

Je viens de finir de lire Free! de Chris Anderson (dispo aussi en Français). Je sais qu’il y a une version pdf gratuite, mais je n’arrive plus Ă  trouver le lien.

J’ai adorĂ©, cela se lit trĂšs vite, et cela fait beaucoup rĂ©flĂ©chir sur le future des mĂ©tiers liĂ©s au web.

Mais attention, certaines affirmations (vĂ©ritĂ©s?) peuvent choquer : “le prix de tout ce qui est numĂ©risable va tendre vers le gratuit”. Cela inclue bien sĂ»re la musique, les livres, les films, et les logiciels… En effet, contrairement aux produits du monde rĂ©el (constituĂ©s d’atomes), les produits numĂ©riques ont des coĂ»ts de rĂ©plication nul (ou nĂ©gligeables), et en allant plus loin, on peut mĂȘme nĂ©gliger les coĂ»ts de production/crĂ©ation au regard du nombre potentiel de lecteurs/utilisateurs accessible via internet.
Mais attention, cela ne veut pas dire que personne ne pourra vivre de son travail, juste que les professions, et les moyens de gagner sa vie pour les crĂ©ateurs vont Ă©voluer drastiquement. L’auteur liste ainsi plus de 50 moyens de gagner sa vie avec le gratuit.
Bref, un livre Ă  lire par tout ceux qui sont liĂ©s Ă  la crĂ©ation de contenu qui peut-ĂȘtre numĂ©risĂ©, pour bien se rendre compte du changement inĂ©vitables qui les attendent.

How to build a web application (database front end) quickly and without programming knowledges ?

As I am a developper, I like to program myself web apps (in PHP, J2EE, or JBoss Seam), but sometime, we don’t have the time to build it by hand, even with Ruby On Rail (RoR).

There are solution to automatically build a web app from a database schema, and without code generation :

Oracle Application Express

The most famous is Oracle Application Express. APEX is a rapid web application development tool for the Oracle database.  Using only a web browser and limited programming experience, you can develop and deploy web applications.

Advantages :
– Very quick and easy, no programming knowledges for a basic database front end. And SQL, javascript, PL/SQL for advanced customisation
– Free (no cost) with Oracle XE (but RAM limited to 1Gb, disque space to 4Go, and one CPU)
Disadvantage :
– Only for Oracle DB
– can’t be hosted on a classic LAMP server

Xataface

Xataface is an open source PHP framework for building PHP/MySQL applications in less time that with fewer lines of code that do more.
Advantage :
– Very quick and easy (perhaps not as APEX), no programming knowledges
– Free and open source (GPL)
– Works with most of hosted server (PHP, MySQL)
Disadvantage :
– Looks a little beta for now (october 2009)
– less features than APEX..

I have some experience with APEX, and I will test Xataface in details soon. Do you know others solutions like that ? What’s your experiences with it ?

Android & Freephonie : Comment téléphoner gratuitement avec son mobile

Comme vous le savez peut-ĂȘtre, Free offre gratuitement un service SIP Ă  ses abonnĂ©s : Freephonie. Cet accĂšs SIP permet d’utiliser sa ligne tĂ©lĂ©phonique Free depuis n’importe quel accĂšs Internet en France.

Pour utiliser cette connexion SIP, il suffit d’avoir un client SIP : il en existe une grande quantitĂ© sur PC, et sur Android il existe le fameux SIPDroid. SIPDroid est un client SIP capable d’appeler et de recevoir des appels via une connexion SIP.

SIPDroid c’est vraiment gĂ©nial pour tĂ©lĂ©phoner gratuitement sur les fixes. Et si votre opĂ©rateur l’autorise (je crois aucun en France), il est mĂȘme possible de passer par le rĂ©seau 3G (donc sans wifi) pour en profiter…

Posted via web from mosam’s posterous