Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 483 sites
Forum de l’article

Jouer avec le bandeau

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Rappel de la discussion
Bandeau SVG
Lignite - le 26 novembre 2018

Bonjour,

j’aimerais y mettre un bandeau en SVG, possible ?

Bandeau SVG
spipfactory - le 26 novembre 2018

ça doit etre jouable ;

faudrait ptet mettre les mains dans le cambouis car actuellement seul jpg et png est prévu

[(#CHEMIN{images/bandeau/rubrique#GET{num}.jpg}|oui)
#SET{largeurmaxbandeau,#CHEMIN{images/bandeau/rubrique#GET{num}.jpg}|balise_img|extraire_attribut{width}}
#SET{chemin,images/bandeau/rubrique#GET{num}.jpg}
]

[(#CHEMIN{images/bandeau/rubrique#GET{num}.png}|oui)
#SET{largeurmaxbandeau,#CHEMIN{images/bandeau/rubrique#GET{num}.png}|balise_img|extraire_attribut{width}}
#SET{chemin,images/bandeau/rubrique#GET{num}.png}
]

quel est l’intérêt du svg ?

Intérêt du SVG
Lignite - le 26 novembre 2018

Image qui ne pixelise pas, transparente. Je n’ai pas compris les « mains dans le Cambouis » : adaptation d’Escal ou modification d’un squelette ?

Optimiser ses images pour le web : formats - JPG, PNG, GIF, SVG, …
Jaseur Boréal - le 26 novembre 2018

Les images.png8 sont :
- Légères
- sans perte (pas de pixellisation)
- Possibilité de choisir le nombre de couleurs indexées (de 2 à 256)
- avec une gestion de la transparence

Elles sont bien plus faciles à concevoir et créer avec les outils professionnels gratuits tels GIMP et XNVIEW

Pour plus de précisions et comparaisons des images :
https://www.oboqo.com/blog/optimiser-images-web-format-jpg-png-resolution-nom-fichier-export-photoshop/#avantages-du-png-8

Bandeau SVG
Jean Christophe Villeneuve - le 28 novembre 2018

GIMP et le SVG, ça ne m’a pas l’air très simple. Inskape me semble plus adapté ...

Bandeau SVG
yves-web - le 29 novembre 2018

Bonjour,
Gimp et le svg, c’est foutu d’avance, Gimp a été fait pour tout, sauf du vectoriel, le svg c’est Inkscape.
Si on veut écrire "bonjour" en bleu sur fond jaune, le svg c’est super, sauf qu’on fait ça beaucoup plus facilement via la css et une taille de police proportionnelle, sans avoir à apprendre le b a ba d’Inkscape.
Si on veut écrire "bonjour" sur un bitmap, idem.
En svg le passage du bitmap au svg engendre un fichier hyper lourd, voire avec de telles pertes au niveau des couleurs qu’on frise l’effet spécial.
Dans le cas d’une image très simple, le logo spip par exemple, le svg est très performant, mais il faudra le redessiner dans Inkscape, pas importer le jpg.
Bonne journée,
Y

Bandeau SVG
yves - le 27 novembre 2018

Le svg dans le bandeau ? Bonne idée ! Un simple export avec Inkscsape et c’est joué pour un texte... Si ce texte a un arrière plan fait avec une image, là j’ai des doutes au niveau du poids et du rendu.
Pour faire simple, pourquoi tout simplement déclarer le svg dans #bandeau avec un background-image ?
Et quid de la compatibilité avec les navigateurs, là je ne sais pas.

Merci
Lignite - le 27 novembre 2018

pour :
- le lien et le comparatif sur les différents types d’image,
- la mise en garde sur la compatibilité avec certains navigateurs,
- l’idée d’intégrer l’image SVG avec CSS.

Du coup, je vais laisser mon bandeau actuel :) Wait and see.

Bandeau SVG
Jean Christophe Villeneuve - le 28 novembre 2018

Là ce code c’est pour afficher un bandeau différent sur une ou plusieurs rubriques.

Bandeau SVG
Jean Christophe Villeneuve - le 28 novembre 2018

je ne connais pas bien le SVG, je n’ai donc jamais essayé. As-tu essayé de ton côté ?

Bandeau SVG
Lignite - le 30 novembre 2018

Je vais rester sur l’idée d’un bandeau constitué d’une image de fond PNG légère avec l’ajout d’un titre CSS et éventuellement d’un logo en SVG toujours via CSS. Sinon, oui sur d’autres projet, j’ai déjà joué avec SVG : exemple de saison ;) https://pierrez.net/adventCandles/advent-candles.svg à voir aujourd’hui mais surtout à partir de demain.

Derniers commentaires

0 | 5 | 10

Nuage de mot clé sur une seule colonne
Mais ça c’est normal car le nuage prend toute la largeur. Regarde sur un smartphone et tu verras (...)

Nuage de mot clé sur une seule colonne : Résolu
merci... j’ai donc sur deux lignes désormais... c’est nettement mieux. Amitiés. (...)

Nuage de mot clé sur une seule colonne
Et pour améliorer #tag_cloud a{ text-decoration: none;

Nuage de mot clé sur une seule colonne
Hello Attention, l’url de ton article est plutôt https://lairederien.net/spip.php?article859 (...)

Nuage de mot clé sur une seule colonne
Bonjour j’ai bien suivi les indications, et je vous remercie pour votre travail et votre (...)

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.99