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

[Yuccaman]

La position "absolute" retire ton élément du "flux" de la page, il ne s'affiche pas par rapport au reste (les éléments précédents) mais par rapport aux attributs que tu lui fixe et risque donc de chevaucher un autre élément.

Quel comportement recherches tu?

[Evil3ye]

Merci Yuccaman, je comprends mieux. Je voudrais que cela fasse "comme un vrai" genre comme le logo de YouTube, une image fixe (en haut à gauche dans mon cas) et "scrollable", bref une image html cliquable qui renvoie à l'accueil.
Mais si j'ai bien compris il suffit de remplacer absolute, mais par quoi ? "relative" ?

[tenshu]

Ha tu cherches à ce que le logo reste en haut page même en scrollant.
C'est donc position: fixed

Conseil, observe les exemples que tu veux copier, avec chrome un simple clic droit > inspecter l'élément, ça va sortir le panneau de développement à gauche le html à droite les propriétés CSS appliquées sur l'élément sélectionné.

[Evil3ye]

Non, justement. Comme une image simple, quoi ! Comme un logo tout ce qu'il y a de plus normal (ex : YouTube). Scrollable, l'image. Pas fixe. Des images pour illustrer le problème :

1. En fenêtre "pleine", tout va bien :
http://img100.xooimage.com/views/a/2...e-46b7322.jpg/

2. Le logo est scrollable, même en fenêtre réduite (normal, c'est ce que je voulais) :
http://img106.xooimage.com/views/e/5...3-46b7350.jpg/

3. Mais il empiète sur le titre en fenêtre réduite :
http://img100.xooimage.com/views/c/a...2-46b7342.jpg/

[tenshu]

Alors dans ce cas tu dois avoir au même niveau un conteneur avec le logo puis un conteneur avec le titre.
Il faut que les 2 conteneurs un un display de type block (un titre est par défaut en display de type inline).
Un fois que tu es sur de ça, tu places un float: left sur ton logo ce qui va permettre a ton titre de se caler à sa droite et d'y rester sans chevauchement.

Je pense que tu as besoin de faire quelques petits apprentissages en CSS avant tout.



Aussi en 2014 on essaye de ne plus travailler comme ça from scratch même pour l'intégration. Une fois que tu auras quelques bases je te conseille de jeter un oeil à un framework CSS/HTML se basant sur un grille, comme bootstrap, fondation, ...

Par exemple avec bootstrap tu peux lui dire Okay mon logo va prendre 1/3 de la place et le titre 2/3
Ce qui donnerais :

<div class="row">
  <div class="col-md-4">MON LOGO</div>
  <div class="col-md-8">MON TITRE</div>
</div>

Tu vois que tu spécifies une ligne (row) avec 2 colonnes (col-XX-YY) avec l'espace à occuper avec les classes col-md-xx, la grille comportant 12 colonnes c'est donc en fraction de ... 12.
Soit col-md-4 pour 1/3 de la place et col-md-8 pour 2/3 de la place.
Tout les systèmes de grille marche de cette façon, c'est pas plus compliqué et c'est très pratique :smile:

Cerise sur le gâteau sur mobile si il n'y a plus de place pour mettre les 2 côte à côte, il peut les placer automatiquement l'un sous l'autre.
Voir l'exemple à Two columns : http://getbootstrap.com/examples/grid/

Et de cette façon tu te fais plus chier avec tout les float et autre position qui peuvent parfois être tellement tordu que tu peux perdre ton âme.

[Evil3ye]

Euh... Merci tenshu, j'ai pas tout pigé mais je pense que j'ai compris l'essentiel
Donc les float -> à éviter, ou alors en dernier recours ?
Et je savais même pas que les attributs genre "class" pouvaient influer sur la disposition de la page... Wow ! Merci de tous ces conseils.

[Skiant]

Euh... Merci tenshu, j'ai pas tout pigé mais je pense que j'ai compris l'essentiel
Donc les float -> à éviter, ou alors en dernier recours ?
Et je savais même pas que les attributs genre "class" pouvaient influer sur la disposition de la page... Wow ! Merci de tous ces conseils.

Je te conseille de suivre le cursus de HTML/CSS basique sur Codecademy, c'est bien foutu et ça devrait t'aider à avoir une meilleure compréhension de ce que tu fais.

[tenshu]

Euh... Merci tenshu, j'ai pas tout pigé mais je pense que j'ai compris l'essentiel
Donc les float -> à éviter, ou alors en dernier recours ?
Et je savais même pas que les attributs genre "class" pouvaient influer sur la disposition de la page... Wow ! Merci de tous ces conseils.

Prends sérieusement le temps de relire ce que j'ai écrit, là tu as just elu en diagonale et tu as tout mélangé
C'est une des qualité requise pour le "développement" lire très posément des quantités de doc parfois profondément imbitable au premier abord.

Tiens hier je lisais de la doc sur ma liseuse et ma copine regarde et se met à lire à haute voix la page, et dit "putain j'ai pas compris un mot".
C'était drôle par ce que j'ai moi même rien pigé avant la troisième lecture et avoir cherché un exemple concret.

Donc non le float c'est un peu obligatoire pour toi en fait.
Les attributs type class, id et nom de balise plus quelques états peuvent effectivement servir à appliquer des propriétés CSS, c'est même ... bah le principe du truc.

Suit le tuto que point Skiant, je pense que tu devrais rien essayer avant.

[messe sans cause]

Bon je reviens vers vous après une session de reporter de guerre dans les entrailles de meteorjs.

Si vous n'avez pas encore essayé ce framework, faites le, maintenant. Je me suis rarement autant éclaté.
Je sais pas du tout ce que ça donne en prod, je vous dirai ça bientôt, mais bordel qu'est ce que c'est agréable de bosser avec.

La réactivité quasi sans coût en dev c'est juste excellent. Le moteur de template et de rendu commence à avoir de la gueule et est d'une simplicité d'utilisation bluffante. Le système de pub/sub est tout aussi simple, super ingénieux et carrément fiable niveau sécurité pour peu qu'on ne fasse pas le bourrin.

Dans les trucs chiants, y'a les jointures mongo, c'est galère de les rendre réactives, mais quelques packages aident bien. Les transitions sont pas encore au point, mais en mettant très légèrement les mains dans le camboui tout roule. Le router de base est limité, mais iron-router est en train de devenir le standard et vaut largement les routers de pas mal d'autres frameworks.

Pour les amoureux d'angular, c'est possible et ça marche pas mal.
Et pour les allergiques au js, utilisez coffeescript ou livescript et roulez jeunesse

Bref je suis pas mal emballé, on est pas encore à une release stable et ça a déjà une putain de bonne gueule. Encore une fois c'est pas en prod, mais apparemment les soucis de perf ont été réglés il y a quelques mois.

[Evil3ye]

D'accord, merci pour tous vos conseils. Pour l'instant je suivais celui d'OpenClassrooms. Ok, je retourne bosser (lire 27 fois le message de Yucca) merci pour tous ces liens.

EDIT: le message de TENSHU, désolé. Je me suis emmêlé les pinceaux avec un autre topic :/

[tenshu]

Dans les trucs chiants, y'a les jointures mongo

Les bases de données documentaires ne sont pas conçues pour faire des jointures.
C'est le prix à payer pour les avantages qu'elles procurent.

Maintenant, c'est tellement rapide que tu peux ne pas te soucier de la redondance des info dans ton model, non?

[messe sans cause]

Les bases de données documentaires ne sont pas conçues pour faire des jointures.
C'est le prix à payer pour les avantages qu'elles procurent.

Maintenant, c'est tellement rapide que tu peux ne pas te soucier de la redondance des info dans ton model, non?

Ouais, c'est certes moins optimisé qu'avec des BDD relationelles mais j'ai énormément de marge avant que ça cause des soucis de performance.
Le reproche que je vois le plus passer et qui pour le coup est un peu justifié, c'est la consistance des données. Mais là pareil je m'en fout un peu, je gère ça au niveau applicatif, ça me rajoute pas énorme de boulot puisque j'aurai foutu des validations quoiqu'il arrive.

Non le réel problème des jointures avec meteor c'est la réactivité.
En gros tu publies une liste des 10 meilleurs articles du site avec leurs commentaires dénormalisés dans la collection articles. Le client y souscrit. Tout se passe bien, un nouvel article arrive dans cette liste et tout est mis à jour sans problème, sauf l'auteur qui est rattaché au nouveau post. Côté client c'est réactif, mais le serveur, lui, ne publie que les données de l'article et ne prend pas en compte que le curseur sur l'auteur doit lui aussi être publié. Si il est déjà rattaché à un autre post c'est ok, sinon bah c'est vide.

Il y a des solutions pour ça:
- Surpublier, mais du coup c'est pas opti. Si tu publies l'intégralité des auteurs, le client a plus qu'à taper dedans. Si t'as énormément d'auteurs t'es baisé.
- Dénormaliser, pas applicable partout ni tout le temps.
- Jointure côté client, du coup tu récupères les facilités du côté réactif, mais tu doubles la latence.
- Faire en sorte de rendre les jointures réactives côté serveur. C'est dur, c'est casse-gueule, mais c'est le plus optimisé.

Je suis parti sur la dernière solution et vu que l'aspect communautaire est primordial pour moi (je suis un gros branleur ) j'ai utilisé le package meteor-publish-composite.
En gros avec ce package dans tes fonctions publish tu déclares des "childs", des données qui vont dépendre des données racine que tu déclares.
Dans l'exemple des articles, la racine sera le top dix des articles, en childs les auteurs. Le child va observer les changements dans le top des articles et automatiquement publier les auteurs manquants.
Là où c'est pas mal foutu, c'est que si l'auteur est déjà publié le package fait en sorte d'éviter un roundtrip serveur et ne le republie pas. C'est là dessus que j'avais galéré quand j'essayais d'implémenter ma propre solution.

Voilà, c'était vraiment très intéressant.

Une fois qu'on arrive à régler les petits soucis de ce genre tout roule. Le système d'identification est inclus et est très facilement modifiable, Oauth2 est inclus aussi. Et si jamais vous voulez utiliser des packages npm, pas de soucis, il suffit de les déclarer dans un fichier. Avec meteor on a le beurre, l'argent du beurre, les loches de la crémière, la fille de la cré.. Enfin c'est généreux quoi.

[zatura]

Aussi en 2014 on essaye de ne plus travailler comme ça from scratch même pour l'intégration. Une fois que tu auras quelques bases je te conseille de jeter un oeil à un framework CSS/HTML se basant sur un grille, comme bootstrap, fondation, ...

Et tu fait comment pour intégrer ton framework quand tu bosses sur des produits magnifiquement bien pensés comme Sharepoint ?

[tenshu]

Par principe je ne bosse pas sur des techno propriétaires.

[Awake]

Hello. Quelqu'un pour faire un retour sur Ghost à tout hasard https://github.com/TryGhost/Ghost ?

[deathdigger]

Quelqu'un a un VPS chez OVH ?
J'ai une merde au niveau du KVM, il me demande de saisir mon couple login/mdp, et quand je valide, il me redemande le login. Si je valide, j'arrive sur la fenêtre de commande, je peux taper une commande, et là il me redemande mon mdp

[Anon26492]

Wow
Such wow
Much wow

http://alistapart.com/blog/post/ten-...e-native-apps/

[messe sans cause]

Hello. Quelqu'un pour faire un retour sur Ghost à tout hasard https://github.com/TryGhost/Ghost ?

J'ai joué un peu avec, c'est propre, réactif, léger et l'éditeur markdown est très classe.
Pour un petit blog c'est très bien, le système de template est pas trop mal foutu en plus.
On est loin de la machine wordpress en terme de fonctionnalités dispo, mais ça fait son job.

Après c'est du nodejs, nodejs en prod c'est pas ce qu'il y a de plus trivial.

[tenshu]

Wow
Such wow
Much wow

http://alistapart.com/blog/post/ten-...e-native-apps/

Ça me semble assez génial pour la mise en colonne, mais très insuffisant pour remplacer les principes du responsive d'aujourd'hui.

Je sais pas comment ça pourrait se combiner concrètement avec des trucs comme les media queries pour définir des break point etc. mais il y a intérêt que ce soit le cas.

[Awake]

J'ai joué un peu avec, c'est propre, réactif, léger et l'éditeur markdown est très classe.
Pour un petit blog c'est très bien, le système de template est pas trop mal foutu en plus.
On est loin de la machine wordpress en terme de fonctionnalités dispo, mais ça fait son job.

Après c'est du nodejs, nodejs en prod c'est pas ce qu'il y a de plus trivial.

Oui, il semble qu'ils veulent garder les fonctionnalités au minimum et se concentrer sur le blogging.

Pourquoi nodejs pose problème en prod ? Il me semble pas que ça monte moins bien en charge que apache.

[Skiant]

Paypal a basculé tout leur stack sur Node.
Ebay utilise Node pour leur api HTTP.
LinkedIn se sert de Node comme base pour leur stack mobile.
Flickr a choisi un serveur Node pour développer leur système de notifications temps réel.

Je pense qu'on peut arrêter le mythe de "NodeJS c'est pas pour de la prod", maintenant.

[tenshu]

Je sais pas je lis ça quand même très souvent sans trop chercher a comprendre c'est vrai, mais ça semble être un peu plus qu'une vieille habitude.

[war-p]

Paypal a basculé tout leur stack sur Node.
Ebay utilise Node pour leur api HTTP.
LinkedIn se sert de Node comme base pour leur stack mobile.
Flickr a choisi un serveur Node pour développer leur système de notifications temps réel.

Je pense qu'on peut arrêter le mythe de "NodeJS c'est pas pour de la prod", maintenant.

Bah, c'est juste que ça reste jeune, mais c'est vrai que pour m'en servir en quasi prod, c'est de la bombe Node!

[Anon26492]

Je pense qu'on peut arrêter le mythe de "NodeJS c'est pas pour de la prod", maintenant.

Que dalle.
Tu cites des boites qui ont quoi ? Des centaines d'ingénieurs ?

[Nattefrost]

Un truc en prod ne veut pas dire qu'il est utilisé par des milliards de personnes et soutenu par une multinationale avec des dizaines de milliers d'ingénieurs.

[Awake]

J'ai déjà utilisé Node en prod, pas rencontré de problèmes. Du moment que c'est bien codé.

[Skiant]

Que dalle.
Tu cites des boites qui ont quoi ? Des centaines d'ingénieurs ?

Et ? Tu as un argument derrière ou tu fais juste ton troll gratuit ?

[Anon26492]

L'argument c'est :
"c'est pas parce que Google le fait que ta PME de dix personnes peut/doit le faire."

[Skiant]

L'argument c'est :
"c'est pas parce que Google le fait que ta PME de dix personnes peut/doit le faire."

Doit, certainement pas. Peut, par contre ça se débat sur base du nombre de devs, de leurs compétence, et de la masse de boulot que ça se représente.
Faire un petit serveur tout simple avec Express et quelques middlewares ça demande pas cent ingénieurs.

[war-p]

Doit, certainement pas. Peut, par contre ça se débat sur base du nombre de devs, de leurs compétence, et de la masse de boulot que ça se représente.
Faire un petit serveur tout simple avec Express et quelques middlewares ça demande pas cent ingénieurs.

Je confirme, je suis en train de bidouiller un petit cms pour faire ensuite un site perso

Spoiler Alert!

Et après revendre le cas

Et si c'est bien codé, je pense pas qu'il y ai plus de soucis que ça, surtout que niveau sécurité t'elemine pas mal de problèmes les aux injections par exemple.