Design & Développement web - Le topic des canards qui mangent des cookies

[Anon26492]

Y'a quelques trucs pas fantastiques mais rien de bien grave de ce que j'ai vu. Tu leur reproche quoi par curiosité ?

Des id de partout‚ jquery+jquery UI‚ des globales JS dans le HTML ‚ aucun effort de semantique...
C'est pas la cata‚ mais je ferais pas confiance à un relooker habillé de façon banale ou à un coiffeur à la coupe pas nickel.

Tu prétends former des gens, tu dois être irréprochable.

[Tomaka17]

[Awake]

C'est vrai que pour un site qui affiche le bouclier HTML5 en énorme sur leur home la source manque un peu de balises HTML5..

[tenshu]

Reste que ça ne dit rien des formations dispensées.
On fait de la formation Drupal, heureusement que les gens ne s'arrêtent pas à notre site.
Cordonnier, mal chaussé etc.

[Skiant]

Cordonnier, mal chaussé etc.

+1.

[Anon26492]

Donc vous feriez confiance à ce mec et son agence web toute pourrave pour former en trois mois un inté ?
Vous engageriez le dit inté suite à cette formation ?

[Skiant]

Donc vous feriez confiance à ce mec et son agence web toute pourrave pour former en trois mois un inté ?
Vous engageriez le dit inté suite à cette formation ?

Perso j'ai du mal avec les mecs qui disent s'intéresser au web à 7 ans, mais bon, ça doit être juste un truc à moi…

[tenshu]

Donc vous feriez confiance à ce mec et son agence web toute pourrave pour former en trois mois un inté ?

J'en sais rien je dit juste que notre site est pourrave et pourtant quand je donne des formation les participants trouve ça bien.

Vous engageriez le dit inté suite à cette formation ?

Je présumerais de rien, un entretien avec des mises en situation concrètes + période d'essai comme tout le monde.

[Anon26492]

J'en sais rien je dit juste que notre site est pourrave et pourtant quand je donne des formation les participants trouve ça bien.

C'est un site dédié à la formation ?
Le code serveur du site en question est lisible par les visiteurs ?

Si non, ce n'est pas comparable.

Merde quoi Tenshu, tu m'étonnes... on parle de gens qui piquent de l'argent public (financement des formations) et celui des chômeurs... avec un polytechnicien en page d'accueil... un peu de gauchisme que diable !

[tenshu]

Merde quoi Tenshu, tu m'étonnes... on parle de gens qui piquent de l'argent public (financement des formations) et celui des chômeurs... avec un polytechnicien en page d'accueil... un peu de gauchisme que diable !

Je sais pas je préfères juger sur pièces :q

[lekteur]

J'ai foutu le dawa avec ma question ?
C'est (de loin) la formation la plus chère que j'ai en vue, si ça avait eu une très bonne réputation j'aurais un peu insisté auprès de ma conseillère pour l'avoir.

[superlag]

Réessaie avec ma méthode sans oublier le top:50%; left:50% sur #header img et le position:relative sur #header, ce n'est pas joli (parce que le positionnement absolu c'est moche) mais plutôt solide normalement. Oublie pas non plus de changer des margin-left et margin-top pour qu'elles soient égales à moins la moitié des dimensions de l'image.

Pour la taille incompressible suffit de faire "min-width:600px; width:100%".

Les balises <div> et <span> agissent comme des conteneurs sans sémantique (au contraire de <p> qui doit contenir un paragraphe de texte ou <em> qui doit mettre en avant un morceau de texte). La seule différence entre les deux c'est que <div> s'affiche en display:block par défaut et <span> en display:inline.

Merci beaucoup, j'ai pu comprendre pas mal de trucs grâce à ça!
Un autre truc, dans la feuille de style, par exemple:

mot {

ou

#mot {

ou j'ai vu aussi

.mot {

Ça change quoi?

[Tomaka17]

http://www.w3.org/TR/css3-selectors/#selectors

"mot" veut dire "n'importe quel élément de tag mot"
"#mot" est un raccourci pour "*#mot", qui veut dire "n'importe quel élément dont l'id est : mot"
".mot" est un raccourci pour "*.mot", qui veut dire "n'importe quel élément de classe : mot"

[GrandFather]

mot {

Applique le style qui suit aux balises mot.

#mot {

Applique le style à la balise ayant leur attribut id égal à mot ; l'id devant être unique, ce style ne s'appliquera donc qu'à une seule balise de ta page.

.mot {

Applique le style aux balises ayant mot dans leur attribut class.

EDIT: grillé au poteau

[Anon26492]

Sauf que Tomaka complique un peu avec le sélecteur universel... donc ta version est mieux je trouve.

[Tomaka17]

C'est plus logique d'expliquer le truc avec le sélecteur universel, vu que tu peux aussi écrire "div > p.machin" par exemple

[Skiant]

Ouais mais le sélecteur universel c'est une bad practice, donc il vaut mieux éviter de trop en parler aux rookies.
Tant qu'ils savent que # = id et . = classe, ça ira.

[Anon26492]

C'est plus logique d'expliquer le truc avec le sélecteur universel, vu que tu peux aussi écrire "div > p.machin" par exemple

Oui, mais à ce moment tu vas te retrouver à expliquer la différence entre div > p.machin et div > .machin, tu vas être obligé d'introduire des exemples, parler de la spécificité, du right to left, etc.
Je ne dis pas qu'il ne faut pas le connaître, je dis que vu la question posé, on est face à un débutant total, donc faut pas le brusquer

[superlag]

Vous êtes mignons c'est gentil

Donc le lien entre ma feuille de style et le html c’est (version simple) principalement et généralement via une balise <div id=" ou <span id="

Par contre en css je réussi pas à visualiser l’intérêt du

.truc

Je veux dire, si on veut que le style soit lié à une seule balise, suffit de l'utiliser qu'une fois?

Et sinon je n'arrive pas à trouver comment obtenir un truc similaire à la fonction remplissage de windows (pour les wallpaper) avec une photo en backgroud.
Là j'utilise background-size: 100%; mais ça ne couvre que la largeur et pas la hauteur.

[Anon26492]

Les id sont uniques, tu ne peux avoir une même id qu'une seule fois par page HTML.
Les classes ne le sont pas. Du coup ce sont elles qui sont le plus employées.

Pour le fond d'écran, background-size: cover ou contain

[Tomaka17]

Donc le lien entre ma feuille de style et le html c’est (version simple) principalement et généralement via une balise <div id=" ou <span id="

En général les <div id=""> ça s'utilise pour le layout global, c'est à dire comment tu organises toute ta page.

En fait dans la réalité tu ne peux pas simplement écrire "<body><h1>Bonjour </h1><p>lorem ipsum</p></body>".
Ça ressemble plutôt à : "<body><div id="all"><div id="partieGauche"><div id="sousPartieHautGauche"><h1>Bonjour</h1></div></div></div></body>"

On fait ça à cause des limitations du CSS. Quand le langage se sera amélioré, on n'aura probablement plus besoin de ces <div id=""> parasites, et peut être même plus d'id du tout.

Je veux dire, si on veut que le style soit lié à une seule balise, suffit de l'utiliser qu'une fois?

T'as pas 36 000 balises non plus.
Par exemple pour afficher une petite image pour illustrer ton article, tu vas pas appliquer un style sur <img>. Tu vas plutôt écrire "<img class="vignette" />" et appliquer un style sur ".vignette".
De cette façon tu peux également écrire par exemple "<img class="grosseImageCentree" />" et appliquer un style sur ".grosseImageCentree".

Si le HTML avait beaucoup de balises qui répondaient à toutes les situations imaginables, on pourrait probablement se passer de classes. Mais là non.

Là j'utilise background-size: 100%; mais ça ne couvre que la largeur et pas la hauteur.

Quand tu écris "background-size: 100%;" ça veut dire "largeur de l'image égale à 100 % de la largeur, et hauteur calculée automatiquement pour conserver le ratio de l'image". C'est en fait un raccourci pour "background-size: 100% auto".
Si tu écris "background-size: 100% 100%;" ça étire pour couvrir entièrement.

"background-size:cover" veut dire "faut que ça couvre entièrement tout en préservant le ratio", ce qui est encore un peu différent.
En fait si l'image est plus large que haute, "cover" est équivalent à "auto 100%", et si l'image est plus haute que large, "cover" est équivalent à "100% auto".

[Skiant]

Si le HTML avait beaucoup de balises qui répondaient à toutes les situations imaginables, on pourrait probablement se passer de classes. Mais là non.

Genre des balises <font>, <center> ou <marquee>, par exemple?

Ce qu'il faut pas lire, des fois…

[Tomaka17]

Des balises <vignette>, <popup>, <publicité>, etc., gros malin

Pour remplacer <div class="vignette">, <div class="popup"> et <div class="publicité">

[moimadmax]

Trop de balise tue la balise.

[Tomaka17]

Ce dont je parle c'est juste une supposition, vu que superlag demandait pourquoi on utilisait pas des balises plutôt que des classes.

J'ai l'impression d'être très doué pour lancer des débats enflammés contre mon gré.

[Awake]

J'aimerai beaucoup une version de HTML où il sera possible de créer ses propres balises et d'y attacher une sémantique (avec une feuille de sémantique qui reprendrais les infos de schema.org par exemple) en plus de la feuille de style.

flim {
    type:Movie;
}
flim h1 {
    type:Name;
}
flim em {
    type:Person;
    prop:director;
}

XSLT permet plus ou moins de se rapprocher de ce résultat mais pas tout à fait il faut faire une transformation en HTML classique.

[tenshu]

Vous vous rendez compte qu'il serait impossible de standardiser TOUTES les balises correspondant à TOUT les usages?
Certaines sont apparu par ce qu'elle on un sens sémantique suffisamment large pour être utilisé dans dans contextes différent genre <article>
Mais on parle de web pas de gestion documentaire hein.


Sinon le background c'est très bien pour les trucs responsive particulièrement.
Mais il me semble que ce n'est pas encore standard (ou alors depuis peu)
Du coup :

background: url(image/bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */

Histoire de prendre en compte les principaux nav et le standard lorsqu'il sera définitivement ... un standard.

[Awake]

Vous vous rendez compte qu'il serait impossible de standardiser TOUTES les balises correspondant à TOUT les usages?
Certaines sont apparu par ce qu'elle on un sens sémantique suffisamment large pour être utilisé dans dans contextes différent genre <article>
Mais on parle de web pas de gestion documentaire hein.

Oui ben justement en dissociant la sémantique du nom de tags de la même manière qu'on dissocie la mise en page du contenu il n'y aurait plus besoin de standards pour les balises. Enfin c'est pas pour tout de suite..

[tenshu]

Comment tu dissocies la sémantique du nom des tags?

Faut bien se rendre compte que HTML c'est un format de sortie destiné à l'affichage, pas un format de document.
Si vous voulez, stockez vos contenus en XML et faites une moulinette pour sortir ça dans du HTML.

[Awake]

Oui c'est le principe du XSLT. J'ai l'impression que tu lis mes posts un peu en diagonal, je ne proposait qu'un système fantaisiste pour augmenter le sens des balises. N’empêche que si il y avait moyen d'associer plus de sémantique au contenu le web serai tellement mieux (rien que les possibilités au niveau de la recherche et de l’agrégation..). C'est un peu triste d'avoir tout ce contenu tellement en bordel alors que si on avait penser dès le début à une bonne manière d'organiser tout ça... :rage: