(Spécifications du langage HTML

Spécifications du langage HTML
pour écrire des sites web spécifiques
à la freebox
01/10/2005 v0.3
DaRkYoda (Freeplayer.org)
Avec l’aide de Wizou (freexplorer.free.fr)
SOMMAIRE
1
2
3
Introduction ___________________________________________________________ 3
1.1
Pourquoi des sites web particulier __________________________________________ 3
1.2
Glossaire _______________________________________________________________ 3
1.3
Principe de fonctionnement________________________________________________ 4
Images / couleurs supportées par la Freebox _________________________________ 5
2.4
Généralités _____________________________________________________________ 5
2.5
Format des images _______________________________________________________ 5
2.6
Couleurs des textes et cellules de tableaux____________________________________ 6
Interaction entre un mod et le site HTML-Freebox! ___________________________ 7
3.7
Gestion des urls _________________________________________________________ 7
3.8
Les tags remplacés à l’exécution____________________________________________ 7
3.8.1
3.8.2
4
5
TAGS de gestion des URLS _____________________________________________________ 7
TAGS de gestion de la navigation_________________________________________________ 9
Généralités ___________________________________________________________ 10
4.9
Balises META__________________________________________________________ 10
4.10
Police de caractères disponibles ___________________________________________ 10
4.11
Taille du site web _______________________________________________________ 10
4.12
User-Agent ____________________________________________________________ 11
Gestion de l’affichage d’une vidéo sur un site HTML Light ____________________ 12
5.13
Création de tags et actions pour commander VLC____________________________ 12
5.14
Définition des dimensions de la vidéo_______________________________________ 13
ANNEXE A_______________________________________________________________ 14
ANNEXE B_______________________________________________________________ 17
1 Introduction
1.1 Pourquoi des sites web particulier
La freebox dispose d’un client web basé sur le langage HTML dérivé de la spécification
suivante : W3C HTML-3.2 reference specification
On peut trouver les spécifications de base du langage HTML supporté par la freebox dans le
document « Freebox HTML Reference Specification » fournit par Free avec le Freeplayer ou
disponible à l’adresse suivante :
http://www.freeplayer.org/download/documentation/html-rs.pdf
Les principaux ajouts fait par rapport à du HTML classique sont :
• Gestion de la vidéo en fond d’écran
• Gestion des touches de la télécommande
• Gestion de la transparence sur les couleurs de fond et sur la couleur du texte
La définition d’une spécification est destinée à normaliser l’écriture des sites web créés
spécialement pour la freebox.
Tous les sites web écrits pour la freebox ne devront nécessiter aucun traitement particulier
(surtout pour les images) avant d’être affiché par la freebox.
Cependant, la freebox ne sachant pas lire les sites web directement sur Internet (uniquement
sur le réseau local), la lecture de ces sites nécessitera l’utilisation d’un « mod » freeplayer
disposant d’un proxy qui chargera la page en local avant de la retransmettre à la Freebox.
Afin d’ajouter des fonctionnalités avancées pour ces sites, un paragraphe de ce document
décrit la manière d’interagir entre le site web et le « mod »
1.2 Glossaire
Mod : Un mod freeplayer est un logiciel destiné à remplacer ou à améliorer le logiciel
freeplayer d’origine fournit par Free.
HTML-Freebox! : Dans tout le reste du document ce terme désigne le langage HTML
supporté par la Freebox avec toutes les spécificités qui le caractérise.
Proxy : Le proxy est la partie logicielle qui permet de charger une page web en local avant de
la renvoyer vers la freebox. Le proxy sert de passerelle entre la Freebox et Internet.
1.3 Principe de fonctionnement
La page web créée grâce à ce document peut être placée sur n’importe quel serveur web
standard.
Le mod freeplayer qui souhaite ensuite pouvoir lire ces pages devra gérer toutes les
fonctionnalités définies ici.
Pour les mods basés sur php, il est possible de trouver un exemple de module de base à
l’adresse suivante :
http://www.freeplayer.org/freebox/internet.phps
Un annuaire a été mis en place afin de regrouper les sites web créé en HTML-Freebox!
http://www.freeplayer.org/freebox/
N’hésitez pas à proposer vos créations à l’équipe de freeplayer.org ([email protected])
afin de figurer dans cet annuaire.
2 Images / couleurs supportées par la Freebox
2.4 Généralités
Le client HTML de la freebox ne supporte que le format gif.
Une limitation matérielle fait que la freebox ne peut pas et ne pourra jamais afficher plus de
256 couleurs sur une même « page écran ».
9 couleurs sont réservés pour les affichages standard de la freebox est ne peuvent donc pas
être redéfinies (rouge, noir …).
2.5 Format des images
La freebox peut afficher les images au format gif, tout autre type d’image ne sera pas affiché.
Toutes les images utilisées avec la freebox doivent prendre en compte les exigences
suivantes :
•
La freebox a une palette de 256 couleurs.
•
Chaque couleur est définie par 4 valeurs rouge, vert, bleu, transparence sur 64 niveaux
avec la vidéo.
•
Elle a 9 couleurs prédéfinie (pour le teletext):
NONE
BLACK
RED
GREEN
YELLOW
BLUE
MAGENTA
CYAN
WHITE
•
#00000000
#0000003f
#ff00003f
#00ff003f
#ffff003f
#0000ff3f
#ff00ff3f
#00ffff3f
#ffffff3f
Après, y a les couleurs de la page html. Par défaut :
bgcolor
text
link
alink
vlink
#00000000
#f0f0f03f
#0020003f
#f0f0003f
#f000003f
•
Soit au total, 14 couleurs réservées. Donc, dans le meilleur des cas, il ne reste plus que
242 couleurs pour les images.
•
Les couleurs des images sont allouées dans la palette de la freebox dans l'
ordre
d'
apparition dans l'
image (et non dans l'
ordre de la palette d'
origine de l'
image). Cela
permet de n'
allouer dans la palette globale que les couleurs réellement utilisées dans
l'
image.
•
Au delà des 256, toutes les autres couleurs de l'
image sont mappées
sur le noir (ça changera dans les prochaines versions 1.7.x).
•
La couleur marquée "background" dans un gif est transparente sur la page
html, même si le flag transparent n'
est pas activé.
Exemple : Il est possible d’utiliser plusieurs images gifs avec des palettes de 50 couleurs
totalement différentes, mais 2 images gifs de 256 couleurs devront partager la même palette.
Il est possible de faire une page web avec n’importe quelles palettes personnalisées en
respectant ces exigences.
Si une image dépasse la taille maximum ou si elle dépasse en dehors de l’écran, elle n’est pas
affichée.
2.6 Couleurs des textes et cellules de tableaux
•
•
•
Il est possible de définir la couleur de fond d’une cellule avec l’attribut bgcolor=
Il est possible de définir la couleur du texte grâce à la balise <FONT color=xxxx>
La couleur s’exprime toujours sous forme hexadécimale avec une notation RGB
o #RRGGBBTT avec TT qui représente la transparence
o La transparence est une valeur comprise entre 0 et 3F et représente un niveau
de transparence entre 0 et 100%
o Exemple : #FF000020 représente une couleur rouge transparente à 50%
o La transparence permet entre autre d’afficher des pavés semi transparent par
dessus la vidéo.
3 Interaction entre un mod et le site HTMLFreebox!
3.7 Gestion des urls
La gestion des urls dans un site web HTML-Freebox! est identique au HTML standard :
utilisation de la balise <a href=[url]> [texte] </a>
Ces balises peuvent se voir ajouter l'
attribut focused pour indiquer que cet hyperlien doit être
sélectionné par défaut à l'
apparition de la page.
Cela permet de faciliter la navigation de l'
utilisateur :
<a href="lien.html" focused>titre du lien</a>
La freebox ne sait pas lire directement un lien sur internet.
Il est donc nécessaire de convertir tous les liens extérieurs pour que les pages soient chargées
par l’intermédiaire d’un « proxy ».
Dans le paragraphe suivant, nous allons voir un ensemble de tags qui permette au site web de
s’interfacer avec le mod freeplayer. Il faut noter que le mod devra donc, en fonction de la
gestion de chacun de ses tags, utiliser ou non le proxy dans les liens de remplacement.
3.8 Les tags remplacés à l’exécution
Afin de pouvoir s’intégrer dans un mod freeplayer un site web écrit en HTML-Freebox! doit
utiliser des « tags » particulier qui seront remplacé lors de la lecture de la page web.
3.8.1
TAGS de gestion des URLS
Afin de pouvoir permettre au mod qui va lire les pages web de garder le contrôle sur la
navigation, un certain nombre de tags représentant les urls du mod sont intégrés dans les
pages web.
Les tags suivants sont définis, ils seront remplacés par le proxy avant d’envoyer la page vers
la freebox.
Les tags dérivés pour les balises META
%%HOME_PAGE%%
%%LOVE_PAGE%%
%%LOVE2_PAGE%%
%%MAIL_PAGE%%
%%MAIL2_PAGE%%
%%NOCHANNEL_PAGE%%
Lien
Lien
Lien
Lien
Lien
-
vers
vers
vers
vers
vers
la page d’accueil du mod
une page de favoris
une seconde page de favoris
la gestion des mails du mod
la lecture des mails
Ces tags seront en particulier utilisés pour définir les actions concernant les touches de la
télécommande gérées par la balise META.
Exemple :
<meta name="home_page" content="%%HOME_PAGE%%">
Tous ces liens doivent être redéfinis pour utiliser les touches de la télécommande pour la
navigation dans votre site web ou pour permettre au mod de gérer lui même la touche de la
télécommande.
Dans tous les cas, il est conseillé de laisser la touche home pour revenir vers la page d’accueil
du mod et ne pas créer un site web d’ou on ne peut plus ressortir…
Certains TAG n’ont pour l’instant pas d’action normalisé (%%NOCHANNEL_PAGE%%) il est donc
déconseillé de les utiliser.
Les tags dérivés pour les balises LINK
%%HELP_PAGE%%
%%OPTIONS_PAGE%%
%%RED_PAGE%%
%%GREEN_PAGE%%
%%YELLOW_PAGE%%
%%BLUE_PAGE%%
%%INFO_PAGE%%
%%GUIDE_PAGE%%
%%STOP_PAGE%%
%%PAUSE_PAGE%%
Touche
Touche
Touche
Touche
Touche
Touche
Touche
Touche
Touche
Touche
?
options
rouge
verte
jaune
bleue
info
guide
stop
pause
Exemple d’utilisation :
<link rel="help" href="%%HELP_PAGE%%">
Les touches de directions
%%UP_PAGE%%
%%DOWN_PAGE%%
%%LEFT_PAGE%%
%%RIGHT_PAGE%%
Touche
Touche
Touche
Touche
haut
bas
gauche
droite
Il n’est pas conseillé de surcharger les touches de directions car elles sont utilisées dans la
navigation des liens de la page web.
Les TAGS d’informations
%%NAME%%
%%VERSION%%
Nom du mod
Version du mod
Dans le mod qui gère l’explorateur de page web, il est nécessaire de remplacer tous ces tags.
S’ils ne sont pas utilisés, il suffit de les remplacer par la valeur none
Le mod n’a aucune obligation de contrôler la validité de l’utilisation de ces TAGS, il est donc
de votre responsabilité de les utiliser correctement.
Le site web ne devra pas faire appel à un fichier d’un mod particulier de manière directe afin
de permettre une lecture correcte sur l’ensemble des mods existants. Si le webmaster souhaite
faire un lien vers une des pages du mod, il doit utiliser le tag correspondant à la fonction
souhaitée et c’est au mod de gérer correctement ce tag pour une compatibilité parfaite.
3.8.2
TAGS de gestion de la navigation
La navigation dans les différentes pages doit être gérée par le mod.
Cependant, certains mots clés sont ajoutés afin de permettre l’ajout de lien de navigation sur
les pages.
%%BACK%%
%%NEXT%%
%%HOME%%
%%RELOAD%%
Retour à la page précédente
Avance à la page suivante (si un retour a été fait)
Première page ouverte dans le navigateur (à ne pas
confondre avec %%HOME_PAGE%%
Recharge la page courante
Exemple :
<a href="%%BACK%%">Précédent</a>
<< Navigation >>
<a href="%%NEXT%%">Suivant</a>
Dans tous les cas, si le mod souhaite redéfinir une touche par un lien vers un site sur internet,
il doit gérer l’utilisation du proxy.
Par exemple en utilisant le proxy internet.php (cf annexe) si le mod souhaite lire la page
annuaire lors de l’appui sur la touche LOVE il devra définir :
%%LOVE_PAGE%% => internet.php ?url=http://www.freeplayer.org/freebox
4 Généralités
4.9 Balises META
La freebox propose un certain nombre de tag META qui permette de rediriger vers une autre
page web ou de faire disparaître une page au bout d’un certain temps.
Le format est le suivant :
<META NAME="meta_name" CONTENT="tps;url=page.html">
Dans tous les cas, tps spécifie le temps au bout duquel l’action est effectuée, et page.html
représente la page à charger durant l’opération.
meta_name peut prendre les valeurs suivantes :
• disappear: qui permet de faire disparaître la page web au bout du temps tps.
• refresh: qui permet de charger la page indiquée au bout du temps tps
• nopicture: qui permet de charger la page indiquée si il n’y a aucune image durant le
temps tps indiqué
4.10 Police de caractères disponibles
La freebox dispose de peu de police de caractère, une police « par défaut » qui correspond à la
police Helvetica et une police Symbol qui permet d’afficher un certain nombre de caractères
spéciaux (cf annexe)
La balise <FONT> permet de changer la police de caractère pour dessiner certains symboles :
Exemples :
<FONT family=symbol size=0>...</FONT>
<FONT family=symbol size=+2>...</FONT>
4.11 Taille du site web
La taille standard de l’écran utilisé par la freebox est 720x576
Cependant, il est possible en fonction du téléviseur qu’il y ai une partie de l’écran qui soit
masquée.
Il est donc préférable de se baser sur une taille inférieure (600x400 par exemple) et de centrer
le site sur la page afin de garantir une compatibilité maximale.
Remarque :
Dans la construction de tableau (balise <TABLE> ou <TD>) si l'
attribut width est exprimé
en pourcentage, il se réfère toujours à la largeur de l'
écran, même s'
il s'
agit d'
une table
imbriquée dans une autre
4.12 User-Agent
Afin de permettre au créateur de page web de faire des statistiques sur les différents mods
parcourant leurs pages, il est important que chaque mod définissent un user-agent qui lui est
propre et qui devra si possible avoir la forme normalisée suivante :
[VERSION FREEBOX] : [NOM DU MOD] / [VERSIONDUMOD]
Par exemple en php pour définir un tel user-agent, il suffit d’utiliser :
ini_set('user_agent', $_SERVER["HTTP_USER_AGENT"].":".$Nomdumod."/".$version);
le résultat obtenu est le suivant :
freebox/1.6.13 :FreeplayerMod/2.0
Le respect de cette normalisation permet à chaque site de tester le user agent et de faire des
spécificités en fonction de tel ou tel mod, d’afficher des messages pour un utilisateur qui n’a
pas le dernier firmware freebox…
5 Gestion de l’affichage d’une vidéo sur un site
HTML Light
5.13 Création de tags et actions pour commander VLC
Pour pouvoir commander la lecture d’un flux vidéo directement à partir d’un site HTMLFreebox ! il faut rajouter un tag supplémentaire.
%%VLC_CONTROL%%
et le pilotage de VLC
Ce tag sera remplacé par le mod afin de lui permettre de gérer la lecture
En plus du tag, il est nécessaire de définir un certain nombre d’action (de commande)
La commande sera spécifiée en l’ajoutant de la manière suivante juste après le tag :
%%VLC_CONTROL%%?action=xxx
Les différentes actions disponibles sont :
• action=add
Joue le fichier ou le flux multimedia indiqué par le dernier paramètre _file= spécifié
Le paramètre peut désigner n'
importe quel MRL valide pour VLC
Vous pouvez également préciser des réglages VLC spécifique pour cette MRL en l'
entourant
de guillemets ou d'
apostrophes et en la faisant suivre des réglages en utilisant la syntaxe
suivante :
un espace de séparation (symbolisé par le caractère + dans un URL)
suivi du caractère : (deux-point)
suivi du nom du réglage (ex: sout-transcode-ab)
suivi du signe = (égal)
suivi de la valeur du réglage (ex: 128)
Exemple :
L'
URL suivante provoque la lecture de la WebRadio RTL: mms://vip2.yacast.fr/encoderrtl
avec transcodage audio à 128 kbits
<a
href="%%VLC_CONTROL%%?action=add&_file='mms%3A%2F%2Fvip2.yacast.fr%2Fencode
rrtl'+:sout-transcode-ab=128&param=Connexion+a+RTL...">
Ecouter RTL
</a>
• action=play
Relance la lecture si celle-ci est arrétée
• action=rewind
Saute en arrière dans la video ou le son
• action=forward
Saute en avant dans la video ou le son
•
action=plprev
Passe a l'
entrée précédente de la playlist
• action=plnext
Passe à l'
entrée suivante de la playlist
• action=pause
Met la lecture courante en pause ou reprend la lecture
• action=stop
Arrête la lecture en cours
5.14 Définition des dimensions de la vidéo
Pour changer la taille de l'
affichage, vous pouvez faire par exemple
<body background="ts://127.0.0.1?ox=10&oy=10&ow=700&oh=500">
ox,oy,ow,oh pour spécifier la zone d'
affichage de la vidéo
ix,iy,iw,ih pour spécifier la zone à afficher dans la vidéo
ANNEXE A
Exemple de proxy php utilisé pour la lecture
des pages écrites en HTML Frebox !
<?php
//////////////////////////////////////////////////////////////////////////////
// Browser de page web ecrit en langage HTML-Freebox!
// Ce module permet de lire les pages et de gérer les tags ainsi que le proxy
// tel que décrit dans le document Langage HTML-Freebox! disponible
// à cette adresse : http://www.freeplayer.org/download/documentation/HTMLFreebox.pdf
// Merci de signaler vos problémes ou les eventuelles améliorations
// à DaRkYoda équipe Freeplayer.org : [email protected]
//
// Afin d'utiliser ce module dans votre mod freeplayer, il suffit de remplacer
// les différentes url du tableau ci-dessous par les urls correspondant à votre
// configuration. A noter que la première url (.*) est trés importante ! car
// elle correspond à la gestion standard pour utiliser le proxy web pour les
// page sur internet
//////////////////////////////////////////////////////////////////////////////
// Version 0.1 - xx/09/2005
//
Création du module
//
// Version 0.2 - 01/10/2005
//
Modification du module afin de respecter les spécifications
//
du document Langage HTML-Freebox!
//////////////////////////////////////////////////////////////////////////////
$mod_name = "MonMod";
$mod_version = "2.0";
$mod_proxy = "/AnnuaireFbx/internet.php";
$url_base = "";
$url_remplace = array (
// Les tags dérivés pour les balises META
// Lien vers la page d'accueil du mod
'%%HOME_PAGE%%', '/menu.php',
// Lien vers une page de favoris
'%%LOVE_PAGE%%', '',
// Lien vers une seconde page de favoris
'%%LOVE2_PAGE%%', '',
// Lien vers la gestion des mails du mod
'%%MAIL_PAGE%%', '',
// Lien vers la lecture des mails
'%%MAIL2_PAGE%%', '',
// Les tags dérivés pour les balises LINK
// Touche ?
'%%HELP_PAGE%%',
'',
// Touche options
'%%OPTIONS_PAGE%%',
'',
// Touche rouge
'%%RED_PAGE%%',
'',
// Touche verte
'%%GREEN_PAGE%%',
'',
// Touche jaune
'%%YELLOW_PAGE%%', '',
// Touche bleue
'%%BLUE_PAGE%%',
'',
// Touche info
'%%INFO_PAGE%%',
'',
// Touche guide
'%%GUIDE_PAGE%%',
'',
// Touche stop
'%%STOP_PAGE%%',
'',
// Touche pause
'%%PAUSE_PAGE%%',
'',
// Les touches de directions
// Touche haut
'%%UP_PAGE%%',
'',
// Touche bas
'%%DOWN_PAGE%%',
'',
// Touche gauche
'%%LEFT_PAGE%%',
'',
// Touche droite
'%%RIGHT_PAGE%%',
'',
// Lien de navigation sur les pages.
// Retour à la page précédente
'%%BACK%%',
'',
// Avance à la page suivante (si un retour a été fait)
'%%NEXT%%',
'',
// Première page ouverte dans le navigateur (à ne pas confondre avec %%HOME_PAGE%%)
'%%HOME%%',
'',
// Recharge la page courante
'%%RELOAD%%',
''
);
function RebuildUrl($oldurl)
{
global $mod_proxy;
global $url_remplace;
global $url_base;
$newurl = "";
$oldurl = trim($oldurl);
// Si l'ancienne url contient '%%' c'est surement un tag à remplacer
if (substr($oldurl,0, 2)=="%%")
{
// On parcours le tableau de remplacement des urls
for ($i=0; $i<count($url_remplace)/2; $i++)
{
if ($oldurl==$url_remplace[2*$i])
{
// C'est bien un tag, on remplace l'url
$newurl = $url_remplace[2*$i+1];
break;
}
}
}
// Si l'url n'est pas un tag :
if (empty($newurl))
{
// On transforme les chemins relatifs en absolu
if (substr($oldurl,0,7)!="http://")
{
if ($oldurl[0]=="/")
$newurl = $url_base.$oldurl;
else
$newurl = $url_base.'/'.$oldurl;
}
else
$newurl = $oldurl;
// On rajoute le chargement par le proxy
$newurl = $mod_proxy."?url=".urlencode($newurl);
}
return $newurl;
}
ini_set('user_agent', $_SERVER["HTTP_USER_AGENT"].':'.$mod_name.'/'.$mod_version);
isset($_GET["url"])?$url=$_GET["url"]:$url = "http://www.freeplayer.org/freebox/";
// On converti tout les slashe en antislashe
$url = str_replace("\\","/",$url);
// On sauvegarde l'url de base pour gérer les répertoires relatifs
$url_base = substr($url,0, strrpos($url, "/"));
$file = file_get_contents($url);
if(strtoupper(substr($url,-3))=="GIF")
header("Content-type: image/gif");
else
{
// Création des pattern pour les ereg
$search = "/(.*)< *(a|img|meta|link) *.* (href|src|content)= *\"([^\"
]*)\"([^<]*)/e";
$replace = "'\\1<\\2 \\3=\"'.RebuildUrl('\\4').'\"\\5'";
$file = preg_replace($search, $replace, $file);
// On remplace classiquement les TAGS d'informations
// Nom du mod
$file = str_replace("%%NAME%%", $mod_name, $file);
// Version du mod
$file = str_replace("%%VERSION%%", $mod_version, $file);
}
echo $file;
?>
ANNEXE B
Caractère Symbol Freebox
(merci à dhaya - [email protected] - pour cet excellent travail)