Reprise du message précédent :
je fous la merde en disant que ça marche pas sur Safari 8 ?

Tu fous la merde si tu donnes pas l'erreur que t'as

Gatsu: http://www.gv.com/2014/#exits
Du topic blabla

Et la?
 
http://codepen.io/anon/pen/LEZxZB

c'est bon

 
 
La section #companies laggue grave chez moi quand je passe la souris dessus.

Une idée alors de comment je peux fixer la largeur des floats en fonction de la largeur des images pour la solution 1...
 
...ou de conserver la ratio de mon image dans les table-cell pour la solution 2 ?

 
   
c'est beau, mais j'aime pas quand le scroll n'est pas fluide  
 

 
c'est le bordel ton truc, j'ai essayé de tout refaire la derniere fois mais j'ai pas eu la patience
j'essaierai de m'y repencher.
De manière générale pour éviter la deformation d'une image, tu mets un height:auto quand tu modifies le width (et inversement). Tu peux aussi mettre un max-width:100% pour éviter que ton soit trop pixélisée. Puis pour la centrer, un display:block et margin:0 auto. Sinon display:inline-block et un text-align:center sur le parent. Mais le mieux pour ça comme l'a dit une personne du topic c'est le flex layout. Et chance pour toi, Alsacréation vient de mettre à jour aujourd'hui son article : http://www.alsacreations.com/tuto/ [...] odule.html

Merki pour le tuto, je sens qu'il y a de la solution potentiel...
 
 
..et dans tous les cas de l'acquisition de connaissance ! ^^

Ça morche pô... :- /
 
http://codepen.io/anon/pen/VYjMPz?editors=110
 
J'ai mis le A dans le LI (toujours en table-cell) en display:flex et du coups je voulais que l'image du haut soit "normal" qu'elle occupe sa hauteur dimensionné par sa largeur (width:100%;height:auto et celle du bas en flex-grow mais mon span.bot prend pas le flex-grow.
 
Bon en plus la mes images n'ayant pas la même largeur, et les li en table cell ayant eux la même largeur, mes images ont pas la même hauteur, mais bon 1 problème après l'autre ! ^^
 
J'ai découvert la case à cocher de l'autoprefixer donc j'ai put nettoyer un peu ma css.

 
honnetemment je comprends toujours pas ce que tu essaies de faire.
 
mais je t'ai fait ca :
http://codepen.io/anon/pen/myEqjb

Merki mais c'est toujours pas ça...
 
J'ai fait une preview :

 
En gros le vert est focus et le rose est hover, on gère ça avec des background en noir ou rgba sur le A, je geres en images car je veux que mes marges noire soient proportionnés.
Ce qui pose soucis c'est que je veux que mes images AAAA, BBBB, CCCC aient la même hauteur (bien qu'elle est des largeurs différentes), qu'elle s'adapte en largeur pour occuper environ un tiers de l’écran (je ferais peut être plusieurs ratio en fonction des ratios d’écrans).
Et le partie basse s'adapte pour remplir l'espace restant en hauteur.
 
Je sais pas si je suis clair, ça me semble pas infaisable, d'ailleurs plusieurs de mes codepen y arrive pas trop mal mais comme d'hab c'est la compatibilité des navigateurs qui fait hiech... :- /
 
Au final si le flex ne me sort pas de l'embarras je ferais avec la version table en corrigeant en js les ratios des images pour que ça pousse les span en table-cell...

 
float: left, texte => http://codepen.io/anon/pen/KwMRYr
float:left:img et bordures => http://codepen.io/anon/pen/WbxyxL
flexbox => http://codepen.io/anon/pen/gbMKav

 
=> les marges de quoi ? quel rapport avec le rgba ? proportionnées par rapport a quoi ? on parle des marges ou des bordures ?
 
Je parles de l'espace entre mes images, le graphiste a pondu du texte vertical qui sera ingérable en css car dont la largeur / hauteur / spacing varie pour être équilibré.
J'ai d'abord essayé de couper au plus cours de la transparence, mais j'ai vite vu que mes border serait pas proportionné et que le client n'en voudrait pas.
Je parles rgba comme couleur de fond car en fond du site y'a une anim et l'on veut que ça bouge sous le menu.
 

 
=> ... et la hauteur est calée sur quoi ? la taille de l'ecran ? une valeur random ? faut les centrer top center ou center center ? Si tu connais la hauteur tu balances les images en fond et tu appliques 'background-size:cover' ou 'background-size:contain'
 
Ben justement c'est la que ça coince, ils faut que les images soient toutes callés à la même hauteur (bien qu'ayant des largeurs différentes),  et je ne veux pas cropper les images (comme tu le fait sur tes exemples ci-dessous).
 

 
=> tu mets le menu et le main en float:left avec width:33% et 66%
 
Non mais ça c'est clairement pas le problème, j’arrive bien à le faire (en float, en inline-block, en table-cell, et sans doute maintenant en flex si j'essayais ^^ ).
 

 
=> tu mets le fond noir sur le li, et tu met le ul en overflow:hidden, sauf si il y a une raison particulière a la transparence des images, auquel cas tu te fais pas chier et tu mets un :after
 
cf. ci dessus, on a toujours de l'alpha sur les zones (sauf l'image du bas qui repeat, focus et hover alpha, le reste du temps opaque).
 

 
=> c'est presque clair, mais tu essaies d'appliquer des solutions a un probleme non posé. je sais toujours pas si ce sont vraiment des images que tu va mettre ou si tu propose des images parce que tu n'arrive pas a mettre du texte.
=> quels navigateurs cible ? ie5 ?
 
J'esperes avoir clarifié la nécessité des images plus haut.
Pour les navigateurs, plus y'en mieux c'est, mais au pire IE8-9 auront une version degradé, IE7 et - osef...
 

 
=> ... cf compat navigateurs
 
http://caniuse.com/ for the win \o/
 
float: left, texte => http://codepen.io/anon/pen/KwMRYr
 
Donc celle la ne colle pas, la typo devra être sous forme d'image, j'aime beaucoup l'idée d'avoir du sémantique, et de gérer au maximum avec :berfore, :after le rendu pour avoir un html propre, mais comme dit plus haute, les contraintes de typo sont à mon avis incompatible avec une mise en page uniquement en css... :- /
 
float:left:img et bordures => http://codepen.io/anon/pen/WbxyxL
 
Ben les images en background-cover, ça vas pas régler mon problème, par contre j'aime beaucoup l'idée de gérer les marges en em pour qu'elle soit aussi responsive, mais après quelque essai je n'arrives pas à reproduire le même effet qu'en intégrant les marges directement à mes images.
 
flexbox => http://codepen.io/anon/pen/gbMKav
 
Autre solution très propre aussi, mais ça ne résout pas mon problème puisque pas de délimitations barre noire entre les éléments du menu et encore une fois de gros doute sur le background cover, j'ai pensé un moment faire des images carré avec (beaucoup ^^) de noir à droite et a gauche, mais en plus d’alourdir les images, ça me ferait des marges noire variable.
 
   
Un grand merci en tout cas pour toutes tes solutions, j'ai appris pas mal de trucs et ça à du te prendre du temps !

Bouais non je fais d'autres trucs en //
mais en fait y'a qu'un truc qui reste flou dans ton explication :  le comportement quand l'image est plus large que le 1/6e du menu (meme recalee). ca fait quoi? ca elargi le conteneur ou juste ca stretch de facon degueu?
 
si ca stretch => http://codepen.io/anon/pen/WbxKwv
qi ca stretch pas => http://codepen.io/anon/pen/xbOJVp

 
  les images

Vous partiriez sur quoi pour faire un système de template de site assez simple (5 pages maxi) ?
 
Genre j'ai une petite admin toute simple, avec un champ "uploader un template" (format ZIP ou autre), puis le système reconnaitrait les différentes variables, ajouterai les pages correspondantes, des champs spécifique à ce template pourrait apparaitre dans l'admin etc..
Un peu comme Campaign Monitor en somme
 

Prend wordpress, t'emmerde pas
 
Je suis plus la ======>[]

le moteur de template le plus simple possible genre mustache

Je viens de découvrir resurectio https://chrome.google.com/webstore/ [...] e-ntp-icon pour générer les scripts casperjs

Ca simplifie * très légèrement* la mise en place de tests fonctionnels

Je vais essayer de le coupler à http://mindthecode.com/recording-a [...] nd-ffmpeg/ pour générer des videos  à de multiples résolutions d'un coup, comme ça mes vidéos de balade dans l'appli pourront être tenues à jour régulièrement

C'est un des petits fantasmes que j'ai jamais eu le temps/occasion d'implémenter, générer les screenshot/video de la doc automatiquement en même temps que les builds.

(Avec l'effet de bord sympa, quand tu demandes un screen qui entoure un bouton dans la doc, et que le bouton a disparu de l'interface,
le générateur te prévient que la procédure dans la doc n'est pas faisable)

/*==============================================================================*/
/* Casper generated Sat Dec 20 2014 13:38:52 GMT+0100 (Paris, Madrid) */
/*==============================================================================*/
casper.options.waitTimeout = 10000;
casper.options.loadImages = true;
 
var x = require('casper').selectXPath;
var mouse = require("mouse" ).create(casper);
var fs = require('fs');
 
 
var wait_before_hover = 2000,
  wait_before_click = 1000,
  frame_duration = 40,
  width= 320,
  height = 568,
  login ='xxxxxxx',
  password ='++++++',
  url = '******',
  frames=1
  ;
 
 
casper.__click__ = casper.click;
 
casper.click = function(el,has_no_delay){
  this.mouse.move(el);
  if(!has_no_delay)
    this.wait(wait_before_hover);
  casper.evaluate(function(el,duration) {
    var offset = $(el).offset(); 
    window.___cursor___.css({
      top:(offset.top)+'px',
      left:(offset.left)+'px'
    })
    window.___cursor___.show();
    window.___cursor___.fadeOut()
  },el,wait_before_click);
  if(!has_no_delay)
    this.wait(wait_before_click);
  this.__click__(el)
}
 
 
casper.test.begin('Resurrectio test', function (test) {
  var start_time = Date.now(), last_frame_id =0;
  casper.start(url);
 
  casper.viewport(width,height);
 
  casper.userAgent('casper');
 
  setInterval(function () {
    frames = Math.floor(( Date.now() - start_time) / frame_duration)
    casper.capture('frames/out' + (frames) + '.png', {
      top: 0,
      left: 0,
      width: width,
      height: height
    }, {format: "png"});
  }, frame_duration)
 
 
  casper.waitForSelector("input#login",
    function success() {
      casper.evaluate(function() {
        window.___cursor___ = $('<div></div>');
        window.___cursor___.css({
          position: 'absolute',
          'z-index': 5000,
          'background-color': 'rgba(255,255,0,0.5)',
          color: 'black',
          width: '50px',
          height: '50px',
          'border-radius':'50%',
          top:'100px',
          right:'100px'
 
        })
        window.___cursor___.appendTo('body')
        window.___cursor___.hide();
      });
      this.sendKeys("input#login", login);
      this.sendKeys("input#password", password);
 
      test.assertExists("form#login-form button" );
      this.click("form#login-form button",false);
    },
    function fail() {
      test.assertExists("input#login" );
    });
 
/* Là je fais toute ma navigation classique, en appelant waitForSelector /  click */
   /*et à la fin */
 
  casper.run(function () {
    test.done();
    var started = false;
    for( var i = 0 ; i < frames; i ++){
// on bouche les trous pour que ffmpeg ne fasse pas la gueule
    if(fs.exists('frames/out' + (i) + '.png')){
      started = true;
    }else{
      if(started){
        fs.copy('frames/out' + (i-1) + '.png','frames/out' + (i) + '.png')
 
      }
    }
 
    }
    console.log('opcied')
  });

 
 
EDIT : ça marche, a part que casperjs ne permet pas d'utiliser /dev/stdout, obligé de passer par le disque  

me sort une video qui fait en gros 10Ko/s

tu fais chier 0x, j'ai pensé une bonne partie de la nuit a ton idée. J'y bosserai ce soir  
 
Je vais partir d'un petit langage de script : des variables ( login, mot de passe) , des actions ( open, fill, click, hover )
 
Je me sert de ca pour construire un script de test phantomjs  
Pendant l'execution du script de test , je récupère les labels et les positions  des bouton/liens a cliquer, et le timing
Je fais une video ( sans aucun timer de pause)
 
Je génère une doc lisible par un humain
 
Je me sers de tout ca pour générer un script d'event de lecture ( lire 3s, pause 1s, afficher un div en overlay, un faux curseur, ....)  
 

Voilà, c'est fait
1/ générer une trace json des dimensions et des timecode + des captures png

var page = require('webpage').create();
var fs = require('fs');
var viewportSize = {
    width: 1024,
    height: 768
  },
  useragent ='casper',
  login = 'wwwww',
  password = 'wwwwww',
  base_url = '**************',
  frame_duration = 40,
  frame = 0,
  start_time;
 
var actions = [], action, current_action, counter = 0;
 
actions = [{
  type: 'open',
  url: base_url
}, {
  type: 'fill',
  target: 'input#login',
  label:'Saissez votre identifiant ',
  value: login
}, {
  type: 'fill',
  label:'Saissez votre mot de passe ',
 
  target: 'input#password',
  value: password
}, {
  type: 'click',
  target: 'form#login-form button',
  delay_before_hover:10,
  delay_before_click:10
}, {
  type: 'click',
  label:'Cliquez sur une opération pour en voir le détail',
  target: '#details .list-group-item:nth-child(4) .center.label a'
}/*et plein d'autres clicks */];
 
page.viewportSize = viewportSize;
 
page.clipRect = { left: 0, top: 0, width: viewportSize.width, height: viewportSize.height };
page.settings.userAgent = useragent;
function nextAction() {
  console.log('NEXT ACTION ', (counter + 1), '/', actions.length)
  if (counter == actions.length - 1) {
 
    setTimeout(function(){
 
      console.log('done');
      var path = 'output.json';
      fs.write(path, JSON.stringify(actions), 'w');
      var started = false;
      for (var i = 0; i < frame; i++) {
        if (fs.exists('frames/out' + (i) + '.png')) {
          started = true;
        } else {
          if (started) {
            fs.copy('frames/out' + (i - 1) + '.png', 'frames/out' + (i) + '.png')
 
          }
        }
      }
 
      phantom.exit();
    },5000)
    return;
  }
  if (current_action) {
    current_action.end = Date.now()-start_time
  }
 
  current_action = actions[counter];
  current_action.start = Date.now()-start_time;
 
  switch (current_action.type) {
    case 'open':
      console.log('open page');
      current_action.ready = Date.now()-start_time;
      page.open(current_action.url, nextAction);
      break;
    case 'fill':
      console.log('fill field ', current_action.target);
      fill(current_action.target, current_action.value, nextAction);
      break;
    case 'click':
      click(current_action.target, nextAction);
      break;
  }
  counter++;
 
}
 
 
function fill(target, value, cb) {
 
  waitFor(function () {
    // Check in the page if a specific element is now visible
    return evaluate(page, function (target) {
      return $(target).is(":visible" );
    }, target);
  }, function () {
 
    current_action.ready = Date.now()-start_time;
    current_action.dimensions = evaluate(page, function (target) {
      var dimensions = $(target).offset();
      dimensions.width = $(target).width();
      dimensions.height = $(target).height();
      return dimensions;
    }, target);
 
    evaluate(page, function (target, value) {
      return $(target).val(value);
    }, target, value);
    cb();
  });
 
}
 
function click(target, cb) {
  waitFor(function () {
    // Check in the page if a specific element is now visible
    return evaluate(page, function (target) {
      return $(target).is(":visible" );
    }, target);
  }, function () {
 
    current_action.ready = Date.now()-start_time;
    var d = current_action.dimensions = evaluate(page, function (target) {
      var dimensions = $(target).offset();
      dimensions.width = $(target).width();
      dimensions.height = $(target).height();
      return dimensions;
    }, target);
 
    setTimeout(function () {
      page.sendEvent('mousemove', d.left + d.width / 2, d.top + d.height / 2);
      current_action.hover = Date.now()-start_time;
 
      setTimeout(function () {
        page.sendEvent('click', d.left + d.width / 2, d.top + d.height / 2);
        current_action.click = Date.now()-start_time;
 
        cb();
      },current_action.delay_before_click ||  1500)
    }, current_action.delay_before_hover || 1500)
 
  });
 
 
}
 
// from https://code.google.com/p/phantomjs [...] ail?id=132
function evaluate(page, func) {
  var args = [].slice.call(arguments, 2);
  var fn = "function() { return (" + func.toString() + " ).apply(this, " + JSON.stringify(args) + " );}";
  return page.evaluate(fn);
}
 
 
//from https://github.com/ariya/phantomjs/ [...] waitfor.js
function waitFor(testFx, onReady, timeOutMillis) {
  var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 10000, //< Default Max Timout is 3s
    start = new Date().getTime(),
    condition = false,
    interval = setInterval(function () {
      if ((new Date().getTime() - start < maxtimeOutMillis) && !condition) {
        // If not time-out yet and condition not yet fulfilled
        condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
      } else {
        if (!condition) {
          // If condition still not fulfilled (timeout but condition is 'false')
          console.log("'waitFor()' timeout" );
          phantom.exit(1);
        } else {
          // Condition fulfilled (timeout and/or condition is 'true')
          console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms." );
          typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
          clearInterval(interval); //< Stop this interval
        }
      }
    }, 250); //< repeat check every 250ms
};
 
start_time = Date.now();
 
setInterval(function () {
  frame = Math.floor(( Date.now() - start_time) / frame_duration)
  page.render('frames/out' + (frame) + '.png');
}, 25);
nextAction();

2/ Faire un film depuis les captures

3/ Rejouer tout ça

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
 
        <div id="video-container" style="position:relative">
 
            <video  controls="controls" id="video" style="position:relative">
                <source src="./out.mp4" type="video/mp4" />
                Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
            </video>
            <div id="overlay" style="position:absolute;width:100%;bottom:0;left:0;height:100px;background-color:rgba(255,255,255,0.5) "></div>
        </div>
 
 
<script>
    var scenario = /*le json généré à l'étape 1 */
 
    var $cursor = $('<div></div>');
    $cursor.css({
        position: 'absolute',
        'z-index': 5000,
        'background-color': 'rgba(255,255,0,0.5)',
        width: '50px',
        height: '50px',
        'border-radius':'50%',
        top:'100px',
        left:'100px'
 
    });
 
    var video = document.getElementById("video" );
    var $textoverlay = $('#overlay');
    $cursor.appendTo('#video-container');
 
    //Todo : listen to pause/buffering and stop events
    scenario.forEach(function(scene){
        if(scene.label){
            setTimeout(function(){
                $textoverlay.text(scene.label).fadeIn();
                setTimeout(function(){
                    $textoverlay.fadeOut();
                },scene.end -500)
            },scene.start+500)
        }
 
        if(scene.hover){
            setTimeout(function(){
                console.log(' move your body')
                $cursor.animate({
                    left:(scene.dimensions.left +scene.dimensions.width/2-25)+'px',
                    top:(scene.dimensions.top +scene.dimensions.height/2-25)+'px'
                })
            },scene.hover-400)
        }
    })
    video.play();
 
 
</script>

Pour fignoler , il faudra

• mieux synchroniser tout ça ( setTimeout glisse )
• mettre en pause le tout lorsque la video bufferise ou que l'utilisateur revient en arrière.
• générer les erreurs sur les tests fonctionnels qui échouent
• voir pourquoi je n'arrive pas a faire sortir les images sur /dev/stdout. Ca economisera mon ssd

Mais en l'état, le simple fait de faire des tests fonctionnels et d'ajouter  un champ label permet de générer une doc , eventuellement en de multiples résolutions et avec de multiples droits d'accès

C'est quand sur Github ?

Il me manque un nom

Je pose ça ce soir, là, c'est l'heure du gouter avec les loulous

poussé : https://github.com/fbeauchamp/phantom-filmmaker

t'as pas un m en trop ?

rhaaa mairde

edit : corrigé

edit2 : je m'attendais à ce que ce soit plus douloureux à corriger en fait

Vous utilisez toujours jQuery ? (je sens que je vais me faire lincher...)
 
Je me suis rendu compte de la lenteur du truc, même dans la dernière version.. sur desktop c'est pas trop perceptible je pense mais sur mobile c'est vraiment marqué comme différence... Pourtant j'en fais une utilisation vraiment basique, pour un un simple sélecteur de mon boutton de menu je faisais un $("#menu-btn-trigger" ).machin(), j'avais une latence qui était perceptible... Hors je suis passé (pour tenter d'optimiser) à du JS classique avec un getElementbyId(), la différence a été stupéfiante.. le menu s'ouvre instantanément  
 
Alors si au niveau des sélecteurs la différence est aussi nette, j'ose même pas imaginer ce que ça doit être a des niveaux plus poussé...  
 
Pourtant Foundation sont revenu à jQuery2 alors qu'ils avaient tenté Zepto.. on m'a parlé de Vanilla, ça vaut le coup pour un webdesigner d'apprendre Vanilla ou c'est un truc de web dev ?

Très étrange. C'est pas ton .machin() qui rame plutôt ?

clair
Je fais attention aux perfs, et pourtant, je n'ai jamais vu un $('#id') faire ramer  
 
Avec des selecteurs plus tordus par contre ....

getElementById c'est ce qu'il y a de plus rapide et je le privilégie si je n'ai pas besoin de $ (genre juste changer la classList ou un append simple)
 
Après c'est a toi de voir ce que tu fais avec mais franchement entre 15Miops et 5Miops si il y a une latence se serait plutot lié au chargement de la lib...
 
pour un designer... vanilla si tu target seulement les navigateurs compatibles pourquoi pas. mais en général tu fais plutot un PoC et a charge au dev de faire en sorte que ca tourne vite. du coup jQuery c'est peut etre plus adapté.

Jamais vu de pertes de perf avec jQuery sauf si tu fais le con et que tu colles et events comme un crasseux
Et le Vanilla JS, c'est simplement le javascript pur.

 
Et avec un query selector ça donne quoi?

 
un simple ToggleClass sur le body pourtant avec le $("body" ) mis en cache...
 
je suis tombé sur ça http://toddmotto.com/avoiding-anon [...] functions/ j'ai voulu optimiser 2/3 trucs, et en JS pur la classe s'ajoute/s'enlève instantanément meme sur un vieil iPhone 4S..
 
Bon, je pense que j'utiliserai au max le JS pur quand je peux ^^

ben tu testes et puis c'est régle
http://jsperf.com/js-simple-toggle-class

 
j'aime bien ce site
 
44K vs 636K  

enfin ce genre de chiffres ne fait pas de différence sur une permutation  
 
tu payera beaucoup plus cher les repaints liés au changement de classe  
 
A noter que classlist n'est pas dispo partout, il me semble. L'implémentation générique est un peu plus chiante