Yvanoph Karim Modérateur ABC du Web Karim Yvanoph WebMaster 3Alannet webmaster@abc-du-web.com BP 116 7080 Menzel JEMIL Gouvernorat de BIZERTE Tunisie Yvanoph www.abc-du-web.com 0021625332209
Retour à l'Accueil du Mode d'Emploi du Forum XWebDesignor ?
   Accueil   Aide Rechercher Tags Identifiez-vous Inscrivez-vous  
Pages: [1]   Bas de page
  Imprimer  
Auteur Fil de discussion: JSC * Back Ground * SIMPLE et UNIVERSEL !  (Lu 41127 fois)
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« le: Lun. 12 Octobre 2015 à 15:39:05 »

Bonjour / Bonsoir, en analysant un Site, le contenu d'un Elément de fond m'a choqué !


En effet, il ne contient qu'une simple Image, poids plume certes, comme quoi le message est fort bien passé auprès de certains, et bien évidemment en répétition afin de couvrir l'ensemble de la surface ?
Donc jusque là, RIEN à dire, non NON, je ne rouspèterais pas ! c'est "PERFECT" ! ! !

Mais je me suis simplement fait la réflexion suivante : Pourquoi employer le [Composant] Version "lourde", à savoir avec les transparences et tout le toutim qui va avec en matière d'appel à des "<script>"s et donc de lignes de Codes divers dans la Page pour, le lire, puis, l'activer, cela selon les paramètres voulus ? ? ?


Aussi je rappelle qu'existe le JSC de #Fond Version simple, ou allégée, tel que à sa création initiale, en Catégorie même [ 02 ] puisque ne contenant QUE du css et même [U ] puisque UNIVERSEL, y compris donc SANS aucun souci pour les Cellulaires, Tablettes etc. ?

D'autant que, comme BIEN mentionné à l'époque, la transparence dans le cas de l'emploie de ce dernier avec une image répétée peut se faire par son réglage à la création de ladite Image ?
Imaginons le besoin d'un fond bleu pâle :
Le Fond de la Page elle même est blanc, mais nous pouvons appliquer un carré de deux pixels de coté, en bleu foncé, genre #000080, mais pour lequel nous appliquons cinquante pour cent d'opacité, puis l'enregistrons au format .png ?
Notre Image va alors peser un poids plume de seulement une cinquantaine d'Octets... Et laissera donc deviner le fond blanc !


Alors pour une Image sur laquelle AUCUNE transparence n'est appliqué autant employer ce dernier ?
Bon, il date, certes, puisque du 24 Août 2011, mais toujours d'actualité, toujours aussi "Poids plume" par lui même, et même mis à jour en ce qui concerne les Bordures en date du 3 Août 2013, date de sa dernière modification !



Voilà voilà, bien cordialement, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #1 le: Mar. 28 Novembre 2017 à 20:05:28 »

Bonjour / Bonsoir à toutes et tous ! Voilà déjà une "éternité" que je n'emploie plus que ce #JSC / #[Composant] pour générer tous mes #Fonds de #Page, Y COMPRIS ceux nécessitant de la ... Quoi ? #Transparence Hein ? QUOI ? !


"A que comment ça t'est-ce possible" va bêler fort surprise la majorité ? "A que depuis quand qu'une #Image qu'elle peut être transparente" ? ? ?

Pourtant bien élémentaire mon cher #Watson...

Tout simplement parce qu'un petit carré de 2 px de coté, de n'importe quelle #Couleur, peut accepter toute #Transparence possible, puis être enregistrée au format .gif ou .png et vous générer un #Fichier aux environs de 100 #Octets, soit un #Poids super plume, et qui répétée mille et une fois peut vous couvrir un #Fond IMMENSE Hein ? QUOI ?, en ne pesant PLUS RIEN Bien bien ! !


Défaut de la Version initiale, point d'arrondis Hésitant... Pourquoi les aie-je oubliés Hausse les yeux ? Va savoir Quoi ? Non mais......

Mais voilà, depuis le temps que je ne fais que me le dire, c'est FAIT ! Et, cerise sur le gâteau, j'en ai profité pour rajouter même l' #Attribut "shadow", les ombres ?

Par contre, à ce niveau là, si vous rajoutez une #Bordure, penser à diminuer du double vos #Largeur et #Hauteur ?
Sinon un bloc de 80 x 60 px finira à 86 x 66 si vous avez demandé une #Bordure de 3... Alors que 74 x 54 eut donné les dimensions espérées sans dépasser sur le voisin ?


Et c'est sp59 qui m'a poussé à finir de le mettre à jour, par son nouveau #Fond très astucieux ? Car suite à ma "gue..nte" sur l'embonpoint insupportable de ses #Pages, il a de façon maligne conservé son BLANC #FFF en premier fond, recouvert d'un petit bout de faux marbre, mais transparent à moitié, ce qui fait qu'en le recopiant sans fin, avec du #Texte dessus, nous n'y voyons que du feu ?

Du coup chargé son #Image, appliquée à 50 % sur un calque BLANC, et enregistrée au format à .jpg, à 50 % de compression, nous voilà juste en dessous du seuil des 1 024 #Octets / 1 Ko ?


Néanmoins, ATTENTION, actuellement complété de Smpl quant à son #Nom, en sortie finale il portera celui de son grand frère, amené à disparaître puisque utilisant du #JavaScript pour générer la fameuse #Transparence ?
Donc peut-être penser à le renommer comme tel de suite, ce qui oblige alors à revoir un par un chacun d'eux installé dans vos #Pages ?


Voilà voilà, bon courage à toutes et tous, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #2 le: Sam. 09 Décembre 2017 à 19:49:59 »

Bonjour / Bonsoir à toutes et tous, les dernières Mises à Jour de ces deux #[Composant]s sont sorties !


Conformément à toute la Série en Version 2.0, l'ensemble de ces #JSCs, #JSCXs ou #[Composant]s ne sont plus dotés des Ressources internes communes minimales nécessaires puisque augmentant autant leurs #Poids, tant sur vos #HD, "Hard Disk" ou Disques Durs que dans la #DB d' #XWD ou #XWebDesignor, et donc ensuite dans la #RAM...

Moins de Ressources chargées, moins de Consommation, plus de rapidité, moins de Plantage, bref, des économies certaines ?


Bien évidemment l'affichage des Versions a été actualisé, ainsi que ceux des #Catégories, et, suite à l'excellente demande de gb87, est devenu apparent, tant au #Survol que dans les #Aides.


Par ailleurs, la Version "historique" (Début 2012...) des "BackGround"s est donc cette fois officiellement annoncé comme HS, non maintenue puisque la Case "Obsolète" a été activée !

Il n'y a en effet aucune raison de maintenir ni conserver dans vos #Sites ce #[Composant] puisque exploitant #JavaScript pour générer des Transparences qu'il est possible de créer tout autrement ?
Il a bien vécu, bien évolué, mais a fait son temps Ainsi soit-il et dès lors que #JavaScript n'est plus nécessaire pour des #Fonds, ce ne peut être que synonyme de progrès ?


Donc penser à mettre à jour vos #Pages ? Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
sp59
Full Member
***
Hors ligne Hors ligne

Messages: 220


Voir le profil
« Répondre #3 le: Lun. 11 Décembre 2017 à 10:41:46 »

Bonjour Chef,


j'ai une question pour le #JSC de #Fond simple.
Comment faire pour mettre un #Fond genre "shape" avec ce #[Composant] ?
Je joins le fond en question. Marciiiiiiiii


Faut-il l'enregistrer comme une #Image ou comme un #Fichier ?


Bien cordialement

sp 59

Journalisée
sp59
Full Member
***
Hors ligne Hors ligne

Messages: 220


Voir le profil
« Répondre #4 le: Lun. 11 Décembre 2017 à 10:56:15 »

Désolé j'ai oublié le #Fichier en question. Voilà qui est fait.


Merci

Sp59

Journalisée
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #5 le: Lun. 11 Décembre 2017 à 11:48:13 »

 ... indirectement je vous avais déjà répondu en mettant en pièce jointe votre #Image revue et corrigée ! Mais je ne sais plus où hélas, avec le nombre de réponses sorties tous ces jours, pffff...


Bref, je vais carrément faire un didacticiel pour montrer comment jouer avec tout ça ? Avant ce soir !
Et vous verrez ainsi qu'il n'y a rien de plus facile Perfect ! et Attend voir... simple Au s'cours ! à réaliser Nananère ! ! ! !
Car ainsi toutes et tous ne pourrons que l'utiliser à terme ! Donc MERCI pour cette question Marciiiiiiiii !


A tout à l'heure, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #6 le: Lun. 11 Décembre 2017 à 20:20:36 »

Alors de fait, la chose est fort simple à réaliser ? Par exemple, relevé le #Code il y a déjà fort longtemps dans votre #Site, et j'avais donc enregistré l' #Image, chargé dans #Photo-Filtre-Studio et effectué les opérations suivantes :


- Rajouté au dessus un #Calque, #Couleur BLANCHE donc #FFF en abrégé, sinon #FFFFFF.

- Appliqué à ce #Calque une #Transparence de 50 % identique à vos #Paramètres.

- Concaténé le total, puis enregistré, au format .jpg, appliqué là encore un taux de #Compression à 50 % !
Cf. #Images ci dessous les différentes étapes de fabrication ?




Cliquer sur l'Image ci dessus pour l'ouvrir en GRAND dans une nouvelle Fenêtre
?


Et retrouvé la réponse dans laquelle je vous l'avais déjà laissée à titre d'exemple :

Lien : http://forum.abc-d-xwd.com/index.php/topic,451.msg4470.html#msg4470


Ensuite, je savais avoir une #Page "un peu folle", dans laquelle j'avais testé X #Sliders et autant de #Fonds...

Donc méfiez vous de ces "bestiaux", ils s'ouvrent, se ferment de façon insolite, sinon Clic sur les #Boutons pour les faire disparaître ? Surtout celui d'en haut, AUCUN délai de disparition, donc "éternel"...

Lien : http://www.abc-d-xwd.com/AdV73/EssaiSlider.html

A NOTER, nous pourriez fort fort être surpris par les #Poids des #Images utilisées...

Vous verrez qu'ainsi il est parfois préférable de charger un tout petit carré en format .bmp ou .png en lieu et place d'un .jpg, et un .png en lieu et place d'un .gif ? Ou, dit autrement, une fois votre #Image créée, l'enregistrer sous ces trois ou quatre formats, et en .jpg appliquer 20, 50  et 80 % en taux ? Voir ce que cela donne, et choisir le moins lourd pour le meilleur résultat ?


ATTENTION, comme TOUS les #JSCs, #JSCXs ou #[Composant]s de la Version 2.0, AUCUNE garantie de fonctionnement en dessous d'Internet Explorer 8 ! Les anciens descendaient jusqu'à la 6 incluse, mais les #Hacks pesaient trop lourd dans le #Code compte tenu des impératifs actuels de rapidité à transiter puis s'afficher...

Enfin, il faut que je vérifie un détail quant aux ombres, il me semble déceler une erreur de quelques pixels quant aux positions...


Alors Quoi ?, Attend voir... FACIIIIILE Perfect !, non Youpiii ? Pété de Rires Plié de Rires Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #7 le: Mar. 12 Décembre 2017 à 13:48:38 »

Et j'avais bien raison, il y avait bel et bien un souci en ce qui concerne les Ombres, les fameuses "shadow"s !


Alors de fait, pour vérifier au #Pixel près l'exactitude de mon impression, rajouté deux "#Fonds", de deux #Pixels de largeur et 720 de #Hauteur, l'un à gauche par -2 en X, l'autre à droite avec 960, donc encadrant exactement ma #Page "active" qui fait cette #Largeur ?

Lien : http://www.abc-d-xwd.com/AdV73/EssaiSlider.html

Donc la zone d'affichage est clairement délimitée, et tout ce qui dépasse avant ou après n'a pas lieu d'être...

Et finalement, ce sont mes propres Valeurs qui n'étaient pas correctes ! Alors ci dessous quelques méthodes de Calculs et Positionnements ?


Définitions :

Par principe, nous considérons un #Fond de :

X = 20 px,

Y = 20 px,

L = 400 px,

H = 300 px.

Enfin, avec ou sans rayons, les Calculs sont IDENTIQUES en tous points !


Bordures :

Supposons que nos rajoutions une #Bordure BE = 2px.

Par principe, tous les #Navigateurs RAJOUTENT cette #Bordure, comme tous les Habillages de contours d'ailleurs. Donc notre #Éléments va devenir L = 404 et H = 304 car 2 + 400 + 2 = 404... Et NON #Pigeot !

DONC, pour CONSERVER nos #Dimensions voulues à l'affichage, nous allons modifier par L = 400 - (2 x 2) = 396, et H = 296...
X et Y NE CHANGENT PAS !

RAPPEL :

Si vous utilisez le #Style "double", il vous faut au MINIMUM BE = 3 sinon 6 ?

DONC L = 394 ou 388 et H = 294 ou 288 ?


Ombres :

Voilà bien un Habillage un peu plus complexe à comprendre, avec TROIS Valeurs :

- SX, Valeur de décalage en X,

- SY, Valeur de décalage en Y,

- SE, Valeur de l'épaisseur de l'Ombre souhaitée ?

Appliquons simplement une Ombre, pour faciliter les Calculs, de 20 px ? Soit les Valeurs "0px 0px 20px" ?

Comment cela va t-il se traduire ? Et bien tous les #Navigateurs vont créer un PSEUDO #Élément, exactement aux mêmes #Dimensions que notre #Élément initial, de la #Couleur paramétrée, mais placé dessous !
Puis ils vont RAJOUTER l'Ombre, à savoir 10 px tout autour... Exactement le même principe qu'une #Bordure, à la différence près que la Valeur est divisée par deux pour l'appliquer et non considérée comme un Contour ?

De cela, nous allons en déduire que :

- Tous ceux qui me paramétreront une Valeur NON divisible par DEUX se verront immédiatement traités dans ce #Forum de C.N FINI qui ne comprend RIEN à RIEN ?

- Notre #Élément va donc prendre de l'embonpoint, et de 400 x 300 va passer à 420 x 320 ?
Nous DEVONS donc, pour conserver notre emprise initiale dans notre #Page, DIMINUER #Largeur et #Hauteur d'autant que la Valeur de notre Ombre, donc L - SE et H - SE, soit 380 x 280 px ?

Et comme nos décalages sont à zéro, nous allons voir un PSEUDO #Élément dont l'emprise dans notre #Page, Ombre comprise, démarre exactement à X et Y, et dont les #Dimensions sont exactement L et H tels telles que voulues au début, et par dessus notre véritable #Élément, qui démarre AUSSI à X et Y, mais fait 380 x 280 avec à droite et en bas une bande de la couleur de notre Ombre de 10 px, puis l'Ombre elle même de 10 px...

Alors si nous voulons notre Ombre parfaitement centrée tout autour de notre #Élément, il va falloir jouer sur les décalages ? Et dans le cas présent appliquer un RECUL à notre PSEUDO #Élément de la moitié de la Valeur de l'Ombre ! Donc SX = -10 et SY de même...

Soit les Valeurs "-10px -10px 20px", ainsi notre PSEUDO  va reculer de l'Ombre exacte, et notre #Élément être placé juste au Centre !
Ou, dit autrement, par rapport à la #Page, le PSEUDO #Élément sera à X et Y, soit ici 30 - 10 = 20, comme initialement, avec L et H, alors que notre #Élément initial sera lui à X = X + SE/2 = 30, de même pour Y ? Et 380 x280, soit en bas à droite en retrait de 10 px par rapport au PSEUDO #Élément... D'où le fait qu'il soit "farpaitement" centré !

Donc BIEN assimiler que SX et SY sont les décalages de l'Ombre ou "shadow" par rapport à l' #Élément lui même Au s'cours ! ?
Et que l' #Élément DOIT donc être déplacé de la demie Valeur de l'Ombre...

Ou, dit autrement, de la Notion fort FORT  F O R T importante de la Relativité du regard posé ("Comprendo" ? "Si" ?)...


Bordures ET Ombres :

Donc nous avons appris qu'en ajoutant une #Bordure, nous DEVONS diminuer du DOUBLE L et H de son épaisseur ?

Puis nous avons appris qu'en ajoutant une Ombre, nous DEVONS diminuer L et H de son épaisseur ?
De plus, nous DEVONS augmenter X et Y de son épaisseur ?

Donc dans le cas des deux ensemble, nous devons calculer L - ((2 x BE) + SE) ou L - BE - BE - SE,
puis X = X + (SE / 2) et Y = Y + (SE / 2) !

Ensuite, et dans tous les cas, déplacer l'Ombre selon envies, en négatif comme en positif ?


Soit, en résumé :

- Bordures :

DIMINUER les #Dimensions initiales du DOUBLE de l'Épaisseur de la #Bordure afin de CONSERVER ces dernières en Affichage.

Et ATTENTION, en cas de style "double", donc deux lignes PLUS une troisième au milieu, BE DOIT être un multiple de TROIS !

- Ombres :

DIMINUER les #Dimensions initiales de la Valeur totale de l'Ombre afin de CONSERVER ces dernières en Affichage,

AUGMENTER X et Y de la demie Valeur de l'Ombre !

- Bordures ET Ombres :

DIMINUER les #Dimensions initiales du DOUBLE de l'Épaisseur de la #Bordure additionné de la Valeur totale de l'Ombre afin de CONSERVER ces dernières en Affichage,

AUGMENTER X et Y de la demie Valeur de l'Ombre !


Et ... Quoi ? au point où j'en suis Au s'cours !, Attend voir... les Rayons ? Youpiii ? Perfect ! ?


Rayons :

En regardant le premier #Fond de la #Page donnée en #Lien au début, ses Angles sont carrés, et l'Ombre présente un Rayon ! Comme l'Ombre fait 10 px, la moitié de la Valeur paramétrée, le Rayon est de dix automatiquement aux quatre Angles.

RAPPEL :

Norme Mondiale établie depuis une éternité, tout élément commence à être vu en haut à gauche puis en tournant dans le sens des aiguilles d'une Montre !
EN clair, positionné sur le coté droit d'un véhicule, les roues tournent à droite, et si sur le coté gauche elles tourneront à gauche dès que ce dernier avance. Et bien évidemment vice versa s'il recule ?
De même pour un Boulon, sa Norme sera HM6 par exemple, le H souvent "oublié" pour dénommer une tête hexagonale, le 6 son diamètre nominale qui sous entend un pas de 1...
Et par principe, placé devant nous, il faudra tourner à droite pour le visser ?
Et si nous nous plaçons de l'autre coté de la tôle, il faudra encore tourner à droite pour serrer l'écrou...

Alors qu'un M6-G, donc complété du G, voudra dire, exceptionnel, serrage à GAUCHE ! ! !


Et bien, dans un #Navigateur, cette Norme est là AUSSI appliquée ! DOnc nous devons paramétrer nos quatre Valeurs ainsi "10px 10px 10px 10px", ce qui veut dire que nos quatre Rayons sont identiques ? Une façon abrégée sera "10px".

Mais si nous tapons "10px 0px 0px 10px", nous devons comprendre qu'il s'agit du premier Rayon en haut à gauche de 10 px, alors qu'à droite Angle droit, ainsi qu'en bas TOUJOURS  à DROITE, puis à nouveau Rayon de 10 en bas à gauche...

Et si nous voulons mettre deux Pages d'un Livre  aux angles arrondis cote à cote, celle de gauche pourrait donc avoir "10px 0px 0px 10px" alors que celle de droite "0px 10px 10px 0px" ?


Quant aux Ombres, avec de tels Rayons, nous aurons visible 20 px puis 10, 10 et à nouveau 20 ! Car la demie épaisseur de l'Ombre sera rajoutée à chaque Rayon rencontré ! ! !


Voilà voilà, fait le tour ... complet, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
Tags: JSC JSC: BackGround Transparence 
Pages: [1]   Haut de page
  Imprimer  
 
Aller à:  

Propulsé par MySQL Propulsé par PHP Powered by SMF 1.1.20 | SMF © 2013, Simple Machines
Soutenir Yvanoph par un Don ?
Boréal - V 1.0 by Yvanoph | Sitemap
XHTML 1.0 Transitionnel valide ! CSS valide !
Page générée en 0.086 secondes avec 22 requêtes.