Forum de FilmDeCulte
https://forum.plan-sequence.com/

Le fil du webmaster en herbe
https://forum.plan-sequence.com/fil-webmaster-herbe-t13671-15.html
Page 2 sur 12

Auteur:  rotary [Bot] [ 14 Fév 2011, 18:22 ]
Sujet du message:  Re: Les petites astuces CSS

Image

Delirium Tremens a écrit:
je trouve ça plus simple d'avoir 2 images, on a pas géré le positionnement du background

rien à gérer

#facebook {display:block; width:60px; height:60px; background:url(facebook.png) no-repeat 0 0;}
#facebook:hover {background:url(facebook.png) no-repeat 0 -60px;}

1 image, 2 lignes de css, je ne vois pas de méthode plus simple pour un bouton réactif au survol.

Auteur:  deudtens [ 14 Fév 2011, 18:28 ]
Sujet du message:  Re: Les petites astuces CSS

Le gros avantage de cette méthode, c'est qu'on se tape pas le temps de chargement de la seconde image quand on passe sur la première.

Auteur:  rotary [Bot] [ 14 Fév 2011, 18:28 ]
Sujet du message:  Re: Les petites astuces CSS

Exactement

Auteur:  Delirium Tremens [ 15 Fév 2011, 09:55 ]
Sujet du message:  Re: Les petites astuces CSS

rotary [Bot] a écrit:
rien à gérer

#facebook {display:block; width:60px; height:60px; background:url(facebook.png) no-repeat 0 0;}
#facebook:hover {background:url(facebook.png) no-repeat 0 -60px;}

1 image, 2 lignes de css, je ne vois pas de méthode plus simple pour un bouton réactif au survol.

Là en effet le cas est super simple (un simple positionnement horizontal à gérer), seulement 2 images de taille identique et carrée sans transparence mais c'est pas toujours le cas, et il faut parfois gérer le positionnement horizontal et vertical...

Sur ce bouton, y'a plusieurs méthodes possibles de toute façon, tu pourrais mettre une seule image avec le F et le petit ombrage blanc en transparence, et 2 couleurs de fond différentes... (on pourrait même ne pas utiliser d'image, si le F est dans une police basique, avec la transparence du blanc sur l'ombrage, mais bon ça fait 2 div pas sûr que ce soit plus intéressant, qu'une div et une image)

Pour ce qui est du temps de chargement sur 3-4 images c'est un net avantage, si vous en avez 20 comme ça, c'est la page qui mettra le double de temps à se charger, donc ça ne fait que déplacer le temps de chargement (mais ça semblera en effet moins buggué pour le visiteur avec la méthode 1 seule image). Après y'a des solutions (que je n'utilise pas encore perso), comme charger les images lourdes en fin de page, avec des fonds et des images temporaires, ce qui du coup ne déforme pas la page, et quand les vraies images sont là elles remplacent les images temporaires.

Auteur:  Mon Colonel [ 15 Fév 2011, 19:42 ]
Sujet du message:  Re: Les petites astuces CSS

Dédé il fait du dev. web comme dans les année 90 avec des technologies des années 2000...

Auteur:  Delirium Tremens [ 15 Fév 2011, 20:09 ]
Sujet du message:  Re: Les petites astuces CSS

Mon Colonel a écrit:
Dédé il fait du dev. web comme dans les année 90 avec des technologies des années 2000...

Parfois oui... malheureusement car je connais pas forcément les dernières petites trouvailles ! Mais dans l'ensemble ça va, je suis à peu près au point, je pense, mais je développe toujours pour IE6 contrairement à pas mal de devs qui ne s'emmerdent même plus...

Auteur:  rotary [Bot] [ 16 Fév 2011, 01:45 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
je développe toujours pour IE6

7 % des internautes hors Chine. Mais peut être as tu des clients chinois.

Auteur:  Delirium Tremens [ 16 Fév 2011, 08:58 ]
Sujet du message:  Re: Les petites astuces CSS

rotary [Bot] a écrit:
Delirium Tremens a écrit:
je développe toujours pour IE6

7 % des internautes hors Chine. Mais peut être as tu des clients chinois.

7% c'est énorme (et sur différents sites dont je m'occupe c'est plus que ça, c'est au-dessus de 10, à mon avis aux USA c'est moins de 5%, en Europe aux alentours de 10) ! C'est plus que le pourcentage de personnes qui n'ont pas Flash... Et puis généralement IE6 et IE5.5 sont pas très loin au niveau compatibilité, donc tu peux récupérer 2-3% encore... A partir de 3% je pense que je peux commencer à faire l'impasse, au dessus ça me parait difficile. Après ça dépend de la cible du site comme toujours (si ce ne sont que des djeunz de 15-25 européens, je peux faire l'impasse sans trop réfléchir). Après, je ne fais pas non plus d'énormes efforts, je fais en sorte si possible que le site soit lisible sous ces navigateurs, mais pas forcément identique...

Auteur:  Mon Colonel [ 17 Fév 2011, 21:41 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
rotary [Bot] a écrit:
Delirium Tremens a écrit:
je développe toujours pour IE6

7 % des internautes hors Chine. Mais peut être as tu des clients chinois.

7% c'est énorme (et sur différents sites dont je m'occupe c'est plus que ça, c'est au-dessus de 10, à mon avis aux USA c'est moins de 5%, en Europe aux alentours de 10) ! C'est plus que le pourcentage de personnes qui n'ont pas Flash... Et puis généralement IE6 et IE5.5 sont pas très loin au niveau compatibilité, donc tu peux récupérer 2-3% encore... A partir de 3% je pense que je peux commencer à faire l'impasse, au dessus ça me parait difficile. Après ça dépend de la cible du site comme toujours (si ce ne sont que des djeunz de 15-25 européens, je peux faire l'impasse sans trop réfléchir). Après, je ne fais pas non plus d'énormes efforts, je fais en sorte si possible que le site soit lisible sous ces navigateurs, mais pas forcément identique...


Dans les 7% t'as une bonne partie des gens qui sont au bureau dans des entreprises verrouillées par des DRI rétrogrades je suis pas sur que ça vaille le coup de les prendre en compte.
(au boulot je suis encore sur XP avec IE6... heureusement j'ai un mac à disposition pour m'évader).

Auteur:  Delirium Tremens [ 17 Fév 2011, 21:49 ]
Sujet du message:  Re: Les petites astuces CSS

Mon Colonel a écrit:
Dans les 7% t'as une bonne partie des gens qui sont au bureau dans des entreprises verrouillées par des DRI rétrogrades je suis pas sur que ça vaille le coup de les prendre en compte.
(au boulot je suis encore sur XP avec IE6... heureusement j'ai un mac à disposition pour m'évader).

Si car ce sont des visiteurs comme les autres qui visitent ton site... Ce serait comme faire un site entièrement en flash que d'abandonner les 7% (mais c'est plus que ça en France de toute façon). Donc non, sous la barre des 5, là je dis pas... (et je dis ça mais tous les sites que je fais ne sont pas compatibles IE6 mais j'aimerai et je fais tout mon possible pour qu'ils le soient...)

Auteur:  Mon Colonel [ 21 Fév 2011, 20:25 ]
Sujet du message:  Re: Les petites astuces CSS

tiens dédé jette un oeil là dessus : http://www.spritebox.net/

Auteur:  Delirium Tremens [ 21 Fév 2011, 21:42 ]
Sujet du message:  Re: Les petites astuces CSS

Mon Colonel a écrit:
tiens dédé jette un oeil là dessus : http://www.spritebox.net/

La prouesse technique est belle, même si pour moi ce genre de choses ne me sert pas. Mais y'a des idées intéressantes pour des sites comme Facebook par ex... Sinon l'effet "cahier à carreaux" avec transparence des div flottantes a un petit rendu bien sympa, en plus j'ai téléchargé une photo de coquelicot pour le test et ça donnait vraiment un super rendu du coup ! Faudrait que je me fasse un petit catalogue avec ce type de sites pour récupérer certaines idées (CSS Zen Garden parait dépassé à côté de ce type de sites, faudrait qu'ils renouvellent le truc)...

Sinon rien à voir, t'as déjà matté le SDK iOS ou pas du tout ? Si oui t'as lu des bouquins intéressants sur le sujet pour s'y mettre ? J'aimerai faire une appli (pour tester et que j'ai une idée sympa), j'ai pas besoin d'énormément de choses, car ce sera principalement des flux xml que je compte récupérer et j'ai besoin de gérer des notifications push et surtout une grosse et bonne gestion de la géolocalisation ? Si d'autres ont essayé le SDK d'Android ça m'intéresse tout autant...

Auteur:  Mon Colonel [ 21 Fév 2011, 23:36 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
Sinon rien à voir, t'as déjà matté le SDK iOS ou pas du tout ? Si oui t'as lu des bouquins intéressants sur le sujet pour s'y mettre ? J'aimerai faire une appli (pour tester et que j'ai une idée sympa), j'ai pas besoin d'énormément de choses, car ce sera principalement des flux xml que je compte récupérer et j'ai besoin de gérer des notifications push et surtout une grosse et bonne gestion de la géolocalisation ? Si d'autres ont essayé le SDK d'Android ça m'intéresse tout autant...


J'avais installé le version beta du SDK puis j'ai rien pigé alors je l'ai viré, mais l'interface builder avait l'air bien sympa.
Des bouquins y en plusieurs mais j'en ai lu aucun...

Auteur:  Delirium Tremens [ 17 Oct 2011, 09:29 ]
Sujet du message:  Re: Les petites astuces CSS

Delirium Tremens a écrit:
Ca revient au même que 2 images, je trouve ça même plus simple d'avoir 2 images, on a pas géré le positionnement du background et à bien positionner chaque image à égale distance. Cela dit pour des barres de menu avec icônes ça peut être pratique...

Je corrige les bêtises que je dis, la technique des sprites a un avantage au niveau "rapidité", un navigateur met moins de temps à charger une seule grosse image que plusieurs petites. Surtout qu'un navigateur est limité au niveau des téléchargements parallèles par domaine (du coup si vous avez beaucoup de téléchargements parallèles (js, css, images...) pour une même page, il est préconisé d'utiliser des sous-domaines pour tromper le navigateur). Les sprites CSS devraient donc améliorer la vitesse et le référencement du coup (je les utilise pour un nouveau site, verdict dans quelques semaines, mais bon ajouter à d'autres techniques : CSS et JS compressés (bon ça c'était déjà le cas, mais le système de compression va changer), sprites, caches différés, stats en js au lieu de php, bannières pubs appelées en fin de page... ce sera donc difficile de savoir ce qui améliore le plus la vitesse du site, par contre j'attends de voir le ref, même si le site change aussi donc dur de comparer, faudrait faire ça sur un site sans rien toucher au design et aux balises).

Sinon petite astuce pour mettre du texte à la verticale (pas les lettres sous les autres, juste comme si on avait tourné une div à 90°) :

Citation:
-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


Comme d'hab, IE en fait qu'à sa tête, mais sinon ça commence à me gonfler aussi de devoir préciser à chaque fois le nav (webkit, moz, o et ie) dans les options css récentes. Le rendu est pas terrible sous IE tel quel, il faut mettre un background de la couleur du fond, pour ne pas que la police bave.

Source : http://snook.ca/archives/html_and_css/css-text-rotation

Auteur:  Delirium Tremens [ 04 Nov 2011, 16:55 ]
Sujet du message:  Re: Le fil du webmaster en herbe

Pour ceux que ça intéresserait, il y a une magnifique bibliothèque pour faire des graphiques (courbes, barres, zones...) avec légendes, sans... : http://www.highcharts.com/

La licence est payante pour une utilisation commerciale (300 et quelques $) mais je pense que ça les vaut largement, c'est excessivement simple à prendre en main, ça produit un résultat très classe... Bon y'a plein de libraires qui produisent presque le même résultat, mais là je crois que c'est la Rolls.

Page 2 sur 12 Heures au format UTC + 1 heure
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/