Pages perso : insérer des contenus sans assistant

Vous pouvez insérer des photos ou des vidéos dans vos pages perso. Vous pouvez également, si vous avez créé votre site sans assistant (ou avec l'ancienne offre « confirmé ») intégrer des sons et des vidéos, des fichiers, ainsi que des fonctionnalités multimédia (formulaire, livre d’or etc.).
Voici comment intégrer tous types de fichiers et fonctionnalités dans vos pages perso.
Pages perso d'Orange

Vous devez être authentifié comme utilisateur principal.

Insérer une image

La résolution d'une image est la valeur en dpi (Dot Per Inch ou Point Par Pouce) que nous donnons à une image numérisée. Il s'agit du nombre de points discernables sur un écran. Plus ce nombre est élevé plus la taille du fichier créé sera importante et meilleure sera la qualité (définition, précision) de l'image. Mais plus lente sera la vitesse d'affichage de l'image.

La résolution standard pour l'affichage web est de 72 dpi : c'est la résolution maximale supportée par un écran jusqu'à maintenant.

 la résolution des images destinées à l'impression sont de 150 dpi pour l'impression qualité journal, et de 300 dpi pour l'impression qualité affiche, jusqu'à 600 dpi pour une impression en qualité photo.

Avant de faire des choix en terme de résolution, il faut toujours faire des essais. En effet, selon le support et le format de l'original, on obtient des résultats très différents pour une même résolution.

Les règles générales sont les suivantes :

  • pour sa capacité à supporter les transparences : utiliser le format PNG.
  • pour les petites images (moins de 100 pixels de côté), les images animées : utiliser le format GIF.
  • pour les dessins, les aplats de couleurs, les textes : utiliser le format GIF.
  • pour les photographies de taille supérieure à 100 x 100 pixels : utiliser le format JPEG.

Voici des sites qui vous aideront à optimiser vos images :

Voici quelques logiciels de traitement d'image : PaintNet, Gimp, Adobe Photoshop, PhotoScape, PhotoFiltre, Darktable, Paint Shop Pro, ImageViewer (Mac OS X).

Insérer du son

Les fichiers audio supportés : Utilisez le format mp3, standard numérique sur internet, reconnu par la majorité des navigateurs actuels.
Pour plus d'information sur ce format, et notamment sur la production de sons au format mp3, vous pouvez consulter le site suivant :

Vous y trouverez de nombreux logiciels gratuits pour créer, éditer et convertir vos fichiers audio.

Vous pouvez utiliser d'autres formats de son : .mp3, .wma, .wav, .mov, .qt, .ogg, .aac, .au

Ajouter du son

Pour ajouter tout genre de fichier audio, il suffit d'ajouter la balise <bsound> entre la balise <head>et </head>.

L'élément BGSOUND permet de créer des pages avec un fond sonore et de paramétrer la durée de diffusion, le volume et la balance.
Attention tout de même à la taille de votre fichier (il ne doit pas être supérieur à 40-60 Ko)

Les attributs sont :

  • id="..." : identifiant de l'élément
  • src="..." : l'URL du fichier son
  • loop="..." : nombre de répétitions ( -1 ou infinite , n )
  • volume="..." : réglage du volume sonore. Valeurs possibles de -10,000 à 0, avec 0 correspondant au volume maxi (full Wave Output volume)
  • disabled="..." : active ou désactive le contrôle ( true, false )
Utiliser la balise <embed>

Voici les attributs de cette balise :

  • align : aligne la console ou le texte (4 valeurs possibles, right, left, top, bottom).
  • border : largeur de la bordure du cadre (en pixels)
  • width : largeur de la fenêtre qui accueillera la console
  • height : hauteur de la fenêtre qui accueillera la console
  • pluginspace : URL de la page Web contenant les informations sur le plug-in (facultatif)
  • src : URL complète (chemin) du fichier
  • autostart : spécifie si l'objet multimédia est joué automatiquement (true) ou non (false) (défaut : true)
  • autoload :spécifie si le chargement de l'objet multimédia s'effectue automatiquement (true) ou non (false) (défaut : true)
  • loop : spécifie le nombre de fois où le fichier sera joué (si la valeur est -1, le fichier sera joué indéfiniment)
  • type  : indique le type MIME ex: type="audio/mod" (facultatif)
  • controls * : indique l'aspect de la console de contrôle
  • console : affiche toute la console (choix par défaut)
  • smallconsole : affiche une console réduite
  • playbutton : affiche seulement le bouton lecture
  • stopbutton : affiche seulement le bouton stop
  • pausebutton : affiche seulement le bouton pause
  • volumelever : affiche seulement le bouton volume
  • hidden : cache le panneau de contrôle
  • volume * : volume initial en pourcentage
  • startime * : indique le temps de départ par rapport au début du fichier (sous forme mm:ss)
  • endtime * : indique le temps de fin par rapport au début du fichier (sous forme mm:ss)

* : à noter que quelques attributs sont spécifiques à certains plug-ins.

Insérer un fichier vidéo

Les fichiers vidéo supportés : Plusieurs formats sont possibles mais les plus courants sont le .wmv (Windows Media Video), le .mpg, le .mov (Quicktime), .rm (Real Video) et le .flv (Flash Video).

Pour ajouter un fichier vidéo, plusieurs solutions existent :

  • Vous pouvez proposer votre vidéo en téléchargement en ajoutant un simple lien html.
  • Les visiteurs de votre site téléchargeront votre vidéo pour la visualiser sur le lecteur vidéo de leur ordinateur. Toutefois il faut qu'ils aient tous les codecs compatibles avec le format de votre fichier.
  • Il est possible aussi d'héberger vos vidéos sur un site de partage comme Youtube ou Dailymotion puis de copier-coller le code html que l'hébergeur vous fournira dans votre page html. Ceci a pour avantage que l'hébergeur choisi convertira à un format universel (Flash Video) votre vidéo et intégrera un lecteur compatible embarqué dans le code. Ce qui vous exempte de tout souci de compatibilité puisque la majorité des navigateurs web sont compatibles flash.
  • Si vous voulez maîtriser la diffusion de votre fichier, il est possible d'héberger vous-même sur votre site un lecteur vidéo ainsi que votre fichier. Cette opération bien que plus complexe et coûteuse en espace disque, vous permet de choisir le lecteur flash dont l'ergonomie se rapproche le plus du design de votre site. De nombreux sites proposent des tutoriaux très élaborés et sur la majorité des sites proposant un lecteur vidéo, une aide est disponible. Nous vous conseillons les sites suivants :

Ci-dessous des sites qui indiquent comment ajouter une vidéo :

Quelques exemples :

Voici un exemple de code pour insérer le player Windows Media.

Vous pouvez aussi intégrer une vidéo Youtube sur votre site.

Pour cela, vous pouvez copier et coller le code qui est accessible sur la droite de la page Youtube : Intégrer la vidéo sur un site ». Vous pouvez aussi personnaliser l'affichage.

Créer des liens entre les pages

Nous vous proposons divers sites pour comprendre le fonctionnement des liens hypertextes :

Insérer un fichier
  • Il n'y a aucune limite de taille par fichier, toutefois la taille totale de votre site ne doit pas dépasser 100 Mo.
  • Comme sur le disque dur de votre ordinateur, votre espace est géré par blocs de données d'une taille de 512 octets, il est donc normal que l'espace consommé dans votre répertoire soit supérieur à la somme des tailles de vos fichiers (en particulier si vous avez de très nombreux petits fichiers, de taille inférieure à 512 octets). Si vous utilisez de gros fichiers (images, vidéos), pensez à préciser la taille, ou à mettre des vignettes pour réduire la vitesse d'affichage de votre site.
  • Vous pouvez à tout moment savoir quelle est la taille occupée par vos fichiers dans votre répertoire en vous reportant au tableau de bord.
  • En cas de dépassement de l'espace qui vous est alloué, vous serez prévenu dans le tableau de bord pages perso et par mail, l'accès à votre page sera suspendu jusqu'à ce que vous supprimiez des fichiers. Cet accès sera automatiquement rétabli dès que vous repasserez "au dessous" de l'espace autorisé.
Créer une image réactive (rollover)

Comprenez et créez des images réactives (rollover) :

Créer un menu rollover

Vous trouverez des scripts pour le rollover aux adresses suivantes :

Insérer un forum

Vous trouverez des forums prêts à l'emploi aux adresses suivantes :

Ces scripts sont à insérer directement dans le code source de votre page.

Concernant les composants tels que forum, livre d'or, et autre outil complexe, veillez à ce que le script soit exécuté sur le serveur distant. En effet, ces outils ne peuvent pas être exécutés directement depuis les serveurs Orange.

Insérer un livre d'or

Vous trouverez quelques exemples de sites qui proposent des livres d'or :

Ces scripts sont à insérer directement dans le code source de votre page.

Concernant les composants tels que forum, livre d'or, et autre outil complexe, veillez à ce que le script soit exécuté sur le serveur distant. En effet, ces outils ne peuvent pas être exécutés directement depuis les serveurs Orange.

Insérer un mailto

Voici le code à intégrer pour insérer un mailto sur votre site :

Insérer un formulaire

Pour insérer le script dans votre site :

  • Recopiez le script présent dans la boite à outils.
  • Collez le script dans le code html de la page sur laquelle vous souhaitez l'insérer et à l'endroit où vous souhaitez le voir apparaître.

Pour pallier à tout problème lors de l'insertion, utilisez la méthode suivante :

  • Ouvrez la page qui doit contenir le script dans votre bloc-notes (Démarrer/Programmes/Accessoires)
  • Ouvrez votre page HTML en prenant bien soin de sélectionner au bas de votre bloc-notes l'option type : tous (*.*).
  • Collez directement le script à l'emplacement désiré dans le code HTML.
  • Sauvegardez en veillant à bien indiquer nom.du.dficher.htm (ou html) puis fermez le bloc-notes.
  • Retransformez votre page en utilisant de préférence un logiciel FTP.
Insérer un flash

Pour insérer une animation flash dans vos pages perso, il existe la balise <embed> .

Nous vous proposons quelques sites sur lesquels vous trouverez des informations :

Voici un exemple de code. Écrivez ce code à l'endroit précis où vous voulez que votre animation apparaisse.

N'oubliez pas de :

  • mettre le chemin de votre animation (en rouge)
  • changer la taille suivant vos désirs (en vert)
  • mettre la qualité : high, medium, low (en bleu)

Pourquoi utiliser deux balises  <embed> et <object>. La balise <object> correspond à un contrôl ActiveX utilisé par internet explorer. La balise <embed> correspond à un fichier nécessitant un plug-in, qui peut être utilisé par certains navigateurs.

Utiliser du JavaScript, des applets Java ou des contrôles ActiveX
  • L'utilisation dans vos pages HTML du Java Script, des applets Java ainsi que des contrôles ActiveX sont possibles. Veillez simplement à proposer des versions " légères " de vos pages si vous souhaitez toucher un très large public de façon à ce qu'il soit accepté par la plupart des navigateurs.
  • Vous trouverez certainement le script que vous recherchez dans l'un des sites suivants, qui proposent de nombreux outils :
  • Concernant les composants tels que forum, livre d'or, et autre outil complexe, veillez à ce que le script soit exécuté sur le serveur distant. En effet, ces outils ne peuvent pas être exécutés directement depuis les serveurs Orange.
Utiliser des CGI*
  • Pour des raisons de sécurité et de charge d'exploitation, les CGI ne sont pas autorisés sur les sites sans assistant (ou créés avec l'ancienne offre « confirmé »). Le serveur Web est configuré pour ne pas exécuter ce type de programmes.
  • Vous pouvez cependant créer des images cliquables à plusieurs endroits (image map) en utilisant exclusivement les commandes HTML (client side). Pour se faire, lorsque vous mettez une image, utilisez cette commande : <--IMG USEMAP="#exemplemap" ISMAP SRC="img/exemple.gif">.
  • L'argument USEMAP="#exemplemap" est utilisé pour appeler la commande suivante, dans laquelle sont stockées toutes les coordonnées utilisées pour votre image :

<--MAP NAME= "exemplemap">
 <--AREA SHAPE="rect" COORDS="235,45,314,124" HREF="page1.html">;
 <--AREA SHAPE="rect" COORDS="280,126,381,201" HREF="page2.html">;
 <--AREA SHAPE="rect" COORDS="135,100,231,189" HREF="page3.html">;
 <--AREA SHAPE="rect" COORDS="45,155,133,245" HREF="page4.html">;
 <--AREA SHAPE="rect" COORDS="73,247,140,381" HREF="page5.html">;
 <--AREA SHAPE="rect" COORDS="143,191,248,310" HREF="page6.html">;
 <--AREA SHAPE="rect" COORDS="250,203,351,330" HREF="page7.html">;
 <--AREA SHAPE="rect" COORDS="142,312,225,429" HREF="page8.html">;
 <--AREA SHAPE="rect" COORDS="227,332,326,467" HREF="page9.html">;
 <--AREA SHAPE="rect" COORDS="99,431,196,575" HREF="page10.html">;
 <--/MAP>

  • Lorsque vous passerez votre pointeur sur l'image, en fonction des coordonnées de celui-ci, la page appelée correspondra au lien défini dans la commande.

* : un script CGI (Common Gateway Interface, traduisez interface de passerelle commune) est un programme exécuté par le serveur web (on dit généralement « côté serveur »), permettant d'envoyer au navigateur de l'internaute un code HTML créé automatiquement par le serveur (basé par exemple sur une autre application, telle qu'un système de gestion de base de données, d'où le nom de passerelle).