Tutoriel : Mettre en place bannières et avatars
Aller à la page 1, 2  Suivante
 
Poster un nouveau sujet   Répondre au sujet    Index du forum » Aide & Questions
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message

Inscrit le: 05 Avr 2007
Messages: 246
Localisation: Coptos


Message Vendredi 27 Avr 2007 0h45 Répondre en citant

Bannières et avatars, le pourquoi du comment.

Plan :

    * I. Hébergement d'images sur Internet
    1.1) Les formats
    1.2) L'hébergement
    1.3) L'adresse (ou URL) de l'image


    * II. Avoir une bannière... et un avatar



Ce tutorial a pour but d'expliquer comment avoir une bannière ou un avatar - question frequemment posée - de l'hébergement à la mise en place finale. N'hésitez toutefois pas à poser une question ou à soulever un point que vous n'avez pas compris sur ce tutorial.

I. Hébergement d'images sur Internet


Si vous voulez mettre une image - une bannière, par exemple - dans votre signature ou dans un message, mais que l'image se trouve sur votre ordinateur, il faut d'abord l'héberger sur internet : la rendre disponible et visible par tous les utilsateurs du web. Lui donner une adresse, quoi. Comment faire ?

1.1) Les formats

Tout d'abord, il faut bien comprendre qu'il existe différents formats d'images, tels que le bmp, gif, jpg, png, tif, etc... La différence entre ces formats est que certains font des images compressées, et d'autres non. les formats bmp et tif, par exemple, ne sont pas compressés, alors que le jpg, le gif et le png le sont. Et là, ça change tout : une image compressée sera beaucoup moins lourde, c'est à dire qu'elle mettra beaucoup moins de temps à se charger - en définitive, votre navigateur mettra moins de temps à l'affichier. Donc, sur le web, vous hébergerez uniquement vos images dans des formats compressés, c'est à dire essentiellement le jpg, le gif et le png. Pour vous donner une échelle de valeur, une image compressée correctement en jpg n'aura quasiment aucune différence avec la même image en bmp, mais prendra 20 fois moins de place - elle sera donc 20 fois plus rapide à se charger. Pour ceux qui n'ont pas le très haut débit, c'est appréciable.

Quel est le meilleur format pour mettre des images sur le web ?
Là, ça dépend de l'image. Le format jpg, par exemple, est particulièrement bien adapté à la photographie, car il peut gérer jusqu'a 16 millions de couleurs. En revanche, il ne gère pas la transparance dans les images, ce que font très bien les formats gif et png. Le format gif, lui, ne gère pas plus de 256 couleurs : il est particulièrement bien adapté aux images ne contenant pas trop de couleurs - donc souvent assez petites. Le format png ressemble beaucoup au gif.

Comment faire pour enregistrer des images en jpg, png ou gif ?
D'abord, vérifier que l'image sur votre ordinateur n'est pas déjà en jpg ou gif. Si les extensions des fichiers sont visible, ce sera simple : les images gif ont .gif pour extention, et les jpg .jpg et les png .png. Sinon, faites un clici droit sur votre image et cliquez sur "propriété". Là, vous regardez le champ "type de fichier" (le premier). Il devrait y avoir marqué une indication sur le format de votre image. S'il n'est ni en png, ni en gif, ni en jpg, ouvrer votre image avec le logiciel que vous utilisez habituellement pour regarder vos images, allez dans "fichier" et cliquez sur "enregistrer sous". Là, dans la seconde ligne - celle en dessous du nom du fichier (probablement appelée "Type"), vous sélectionnez le format voulu (png, gif ou jpg). Et vous cliquez sur enregistrer. Tadaaaam.

1.2) L'hébergement


* Une fois que vous avez votre image dans un bon format, vous devez l'héberger sur le web. Une des meilleures solutions est de le faire sur imageshack (ceci n'est pas de la pub, c'est simplement le site le plus pratique car ne nécessite aucune inscription ), en suivant la procédure qui suit :



Premierement, cliquez sur "Parcourir".
La, vous arrivez dans les fichiers de votre ordi.
Sélectionnez l'image qui vous intéresse, et cliquez sur "ouvrir".
Vous reviendrez sur la même fenêtre qu'il y a sur l'image de depart, mais le chemin vers votre image dans votre ordi sera affichée a cote du "Parcourir".

Une fois cela fait, cliquez sur "host it!".

Une fois ceci fait, vous arrivez sur une page nouvelle. Sur cette page, vous trouvez de nombreux liens, comme vous pouvez le voir.

Celui nommé "Thumbnail for forums (1)" sert à mettre une vignette de l'image sur la page, avec un lien vers l'image en taille réelle.Il peut être assez utile, parce qu'ainsi vous évitez à vos lecteurs de charger une grosse image à chaque fois qu'ils regardent votre message ; mais pour une bannière, cela ne convient pas, parce que la vignette est peu esthétique et que l'image est redimensionnée.

Le lien qui nous intéresse est "Hotlink for forums (1)", vous pouvez le copier et le coller dans votre message/signature (là où vous voulez mettre votre image), et l'image apparaîtra.

Le lien "direct link to image" est l'adresse même de l'image que vous venez d'héberger.

* Vous pouvez aussi héberger une image sur un autre hébergeur. Voila, par exemple, propose un hébergement gratuit largement suffisant pour héberger des images : allez voir sur http://monsite.voila.fr et suivez la procédure. Cela ne nécessite aucune connaissance particulière.



1.3) L'adresse (ou URL) de l'image

Première chose à savoir ici, une image est désignée sur internet, pour la retrouver, par son adresse - comme une page internet : l'adresse de la page où vous vous trouvez est dans la barre d'adresse. L'autre nom de l'adresse est URL (d'un sigle anglais bizarroïde).

Si vous avez hébergé votre image sur imageshack, vous avez déjà l'URL normale de votre image (voir plus haut).
Sinon, pour récupérer cette URL à partir d'une image hébergée sur internet :
Faites un clic droit sur l'image, et sélectionnez "Propriétés" (tout en bas de la liste).

* Si vous avez Internet Explorer, sélectionnez l'adresse dans la ligne "Adresse (URL)", la 3 ème ligne.

* Si vous avez Firefox, sélectionnez l'adresse dans la ligne "Emplacement", normalement la premiere.

* Pour les autres navigateurs, c'est toujours relativement similaire.



II. Avoir une bannière... et un avatar


Commencez par lire la partie "I. Hébergement d'images sur Internet" si vous ne l'avez pas lue.

Tout d'abord, assurez-vous que l'image en question est bien hébergée sur internet. Après avoir récupéré l'URL de votre bannière - comme vu dans la partie "1.3) L'adresse (ou URL) de l'image" - dirigez vous vers votre profil en cliquant sur le lien "Profil" ( trop dur hein ? ) où vous trouverez un champ "signature".
Prenez l'URL de votre image, et copiez la dans ce champ, puis entourez la des balises [img] et [/img].



Par exemple, pour cette banniere :

Code:
[img]http://img476.imageshack.us/img476/3497/banegyptisod3.jpg[/img]




Rappel : une bannière ne doit pas dépasser 468 pixels de large, 60 pixels de haut et ne peut pas être animée.

Pour les avatars c'est exactement la même histoire, et sans balises ( encore plus simple... ).

Rappel : un avatar a une largeur qui ne peut pas dépasser 150 pixels, sa hauteur 150 pixels et la taille du fichier pas plus de 96 ko.

Annexe de Stouvrus : la création d'un avatar


(1)

Une image avec une taille maximum de 150 x 150 pixels (l'idéale en JPG), utilisez Photoshop-element ou pictur it ... pour redimensionner votre image.

(2)

http://www.imageshack.us/

(3)



(4)

Haut de page
Voir le profil de l'utilisateur Envoyer un message privé

Inscrit le: 19 Juin 2008
Messages: 4



Message Vendredi 20 Juin 2008 17h15 Répondre en citant

ok merci c cool
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé
Invité








Message Samedi 6 Juin 2009 19h23 Répondre en citant

En réponse à la demande de l'équipe de modération, je transpose ici les explications relatives aux Petites Annonces de la Cité, que j'avais initialement proposé dans ce fil-là : Petites annonces et HTML .... :)

Donc,

Premier avertissement, les petites annonces n'acceptent que partiellement les balises HTML.

Deuxième avertissement, Le code HTML dans les petites annonces est à manipuler avec une extrême précaution. Il risque de déstabiliser l'affichage de la page Égyptis complète ...

En cas de problème d'affichage, rééditez la petite annonce (bouton : ), supprimez tout votre code, validez, puis supprimez votre petite annonce (bouton : ). Vous pourrez ensuite refaire un essai en faisant attention à votre code, (ou vous abstenir si vous ne comprenez pas ce qu'il se passe :dent: ).

Les informations fournies correspondent à des tests effectués par mes soins. Elles sont donc valides, sauf erreur de ma part, à la date de publication de ce post. En revanche, elles ne sont pas forcément exhaustives.

Les balises HTML acceptées sont les suivantes : :lunettes:

Image : <img src="http://Site-Image.xxx/MonImages.png" /> (pas testé pour jpeg et gif)
Lien : <a href="http://MonLien"> Mon lien </a>
Police : <font style="font-family: NomDeMaPolice">texte</font>
Couleur texte : <font color=MaCouleur>texte</font> (MaCouleur = Red, Green, Cyan, Blue, ...)
Taille Police : <font size=x>texte</font> (x = 1, 2 ou 3)
Italique : <i>texte</i>
Souligné : <font style="text-decoration : underline"> texte</font>
Rayé : <font style="text-decoration : line-through"> texte</font>
Clignotant: <font style="text-decoration : blink"> texte</font>
Gras : <font style="font-weight: bold">texte</font>

Toutes les autres balises que j'ai testées ne fonctionnent pas :grr: , en particulier celle-ci <b> texte</b> pour le gras et les balises d'alignement de texte <font style="text-align: paramètre">texte</font> sont inopérantes. Donc pas possible de centrer un texte, c'est dommage. :(

Il est également impossible de combiner les propriétés dans une seule balise. En effet, le caractère ; n'est pas accepté.

Curieusement, les balises de fermeture (</balise>) semblent facultatives.

Enfin, une sérieuse limite est le nombre de caractères acceptés, code HTML compris. Je ne les ai pas comptés, mais on est limité aux cinq lignes proposées. Un copier-coller de davantage de lignes est trompeur. En apparence elles sont acceptées, un ascenseur apparait, mais dans les faits, le nombre de caractères sera tronqués (c'est cette troncature qui peut être source de désordre d'affichage suite à un code HTML incomplet).

Voilà, ce sont mes observations, pour ceux que ça intéresserait. :)

Edit du 20 juillet 2009 : Les liens ne sont plus acceptés. Les images fonctionnent toujours, mais pas tout retesté :)


Dernière édition par Invité le Lundi 20 Juil 2009 20h42; édité 4 fois
Haut de page
Invité








Message Samedi 6 Juin 2009 21h36 Répondre en citant

la limite est de 255 caractères ;) j'imagine que la troncature se fait non pas à l'affichage, mais lors de l'ajout dans la base de données.
Haut de page

Inscrit le: 25 Aoû 2008
Messages: 300
Localisation: PerAndjety


Message Samedi 6 Juin 2009 21h47 Répondre en citant

merci!


Eidya, érudite de PerAndjety// Ex-Nomarque de PerAndjety ***// Historienne et fière de l'être!
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé Visiter le site web de l'utilisateur

Inscrit le: 11 Déc 2006
Messages: 5763
Localisation: Héliopolis


Message Mercredi 10 Juin 2009 15h03 Répondre en citant

J'ai testé pour mettre une image, un lien, une police particulière et écrire en couleur. Tout fonctionne sauf pour la couleur, je ne comprend pas pourquoi. :rougi:
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé

Inscrit le: 15 Avr 2007
Messages: 9439
Localisation: A la recherche de Zerzura, de la wehat seshtat ou de la vallée du Benben (inet benben).


Message Mercredi 10 Juin 2009 15h32 Répondre en citant

@ Zechen
As-tu bien mis une couleur en anglais ? le système ne reconnait que les couleurs écrites en anglais.
Voici un lien avec toutes les couleurs : http://www.aidenet.com/pageperso64j.htm


La main trop courte pour rendre service, l'est aussi pour atteindre aux places élevées (proverbe égyptien)
Qui parle sème, qui écoute récolte (proverbe persan)
Mon Ka réincarné dans Astiza...
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé

Inscrit le: 11 Déc 2006
Messages: 5763
Localisation: Héliopolis


Message Mercredi 10 Juin 2009 15h52 Répondre en citant

Oui Lilig, j'ai pourtant bien mis la couleur en anglais. Je viens de refaire un test avec plusieurs autres couleurs de ton lien, mais ça ne fonctionne toujours pas. :rougi:

Ce n'est pas bien grave, soit je me plante quelque part, soit il y a un souci. Dans tous les cas, je voulais juste le signaler.
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé

Inscrit le: 15 Avr 2007
Messages: 9439
Localisation: A la recherche de Zerzura, de la wehat seshtat ou de la vallée du Benben (inet benben).


Message Mercredi 10 Juin 2009 16h27 Répondre en citant

Pourtant chez moi ça marche. Peut-être un problème avec un espace ... ou le 1er "font", que Halryck a écrit avec une majuscule, alors qu'il ne faut que des minuscules.


La main trop courte pour rendre service, l'est aussi pour atteindre aux places élevées (proverbe égyptien)
Qui parle sème, qui écoute récolte (proverbe persan)
Mon Ka réincarné dans Astiza...
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé
Conseiller - Epluchateur de stats


Inscrit le: 04 Déc 2006
Messages: 13791



Message Mercredi 10 Juin 2009 17h08 Répondre en citant

Bien vu Lilig , je viens de tester , c'est ça ...
J'ai pris la liberté extrême de rectifier ..



Sensei érudit maçon boulanger tailleur de pierres et maître scribe


Dernière édition par Sensei le Mercredi 10 Juin 2009 17h11; édité 1 fois
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé Envoyer un e-mail

Inscrit le: 11 Déc 2006
Messages: 5763
Localisation: Héliopolis


Message Mercredi 10 Juin 2009 17h10 Répondre en citant

Merci Lilig! Le problême venait bien du F majuscule du premier "font", en le remplaçant par une minuscule, ça fonctionne. :content:
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé
Invité








Message Mercredi 10 Juin 2009 17h25 Répondre en citant

Tu as bien fait de corriger la faute de frape, Sensei ... :lol:

Et dans la foulée, tu peux corriger aussi les fautes d'orthographe dont je suis un invétéré spécialiste. :fourbe:
Haut de page
Invité








Message Jeudi 11 Juin 2009 0h11 Répondre en citant

en html c'est soit tout en majuscules, soit tout en minuscules... il n'y a pas de demi mesure ;)

et puis il manque des " à la fin de certaines balises de l'exemple :)
Haut de page

Inscrit le: 29 Déc 2006
Messages: 166


Nôme: Edfou
Message Jeudi 23 Oct 2014 16h33 Répondre en citant

Bonjour

J'ai lu dans le premier message "le site le plus pratique car ne nécessite aucune inscription " ce n'est pas ce que j'ai à l'écran. On me demande mes coordonnées que je ne veux pas donner car on est envahi par la pub ensuite et que ça ça m'insupporte au possible.

Merci de bien m'indiquer peut-être un autre site ?? :)

;D


Nomarque *******
Récite tes prières à Aton lorsqu'il apparaît à l'horizon pour qu'il t'accorde une grande prospérité, la santé et qu'il t'épargne du besoin et de la misère pour toute ta vie.
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé

Inscrit le: 25 Sep 2009
Messages: 2486



Message Vendredi 24 Oct 2014 17h14 Répondre en citant

Y'aurait celui-là ;) réalisé par Para
... qui ne t'envoie aucune publicité et n'en présente pas même après inscription (qui n'est pas obligatoire)

--> http://prdx.fr/


Libéré, délivré.
Haut de page
Voir le profil de l'utilisateur Envoyer un message privé
Montrer les messages depuis:   

Poster un nouveau sujet   Répondre au sujet    Index du forum » Aide & Questions Aller à la page 1, 2  Suivante



Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum





© Egyptis.com - Contact - Règlement du forum - Powered by phpBB © phpBB Group