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.

Forum de l’article

Jouer avec le bandeau

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre.

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

Modifier un texte
Ok c’était bien ça, cool. A l’avenir, utilises plutôt un éditeur de code plutôt que LibreOffice, (...)

Modifier un texte - suite et fin -
Super, c’est réparé Les apostrophes inclinés venaient de LibreOffice ! Encore (...)

Modifier un texte
Hello Je pencherais pour les apostrophes qui sont incurvées au lieu d’être droites car je ne vois (...)

Modifier un texte
Le fichier ci-dessous déposé dans le répertoire lang ne passe pas. "Parse error : syntax error, (...)

images dans un article
Bonjour Jean Christophe, non, je n’ai pas accès à ce fichier ; le répertoire /config ne m’est pas (...)

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2024 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.6.2