Semaine du 9 au 13 juin

Journal : Semaine du lundi 9 au vendredi 13 juin 2014

Voici mes entrés de journal pour cette quatrième semaine de stage, légèrement écourtée !

> Lundi 9 juin 2014

  • Lundi de pentecôte, c’est férié !

> Mardi 10 juin 2014

j’ai poursuivis la création de l’application, je n’ai pas retouché au menu mais plutôt commencé à créer les pages (enfin, une autre versions des pages) avec d’abord un diaporama automatique en pur CSS, c’est à dire sans interaction de l’utilisateur. slider J’ai réussi à l’implémenter de façon à ne pas avoir à redimensionner les images, c’est CSS qui s’occupe de les centrées et les positionnés au plus grand sans les déformés, de façon à pouvoir mettre des images de dimensions diverses et variés. Ceci d’abord grâce à la propriété « cover » de CSS, mais j’ai remarquer que pour les images ayant des dimensions très large (1000 x 300 pixels par exemple), la propriété cover ajuste l’image sur la dimension la plus étroite de façon à couvrir l’élément, cachant donc des morceaux de l’image, j’ai trouvé la propriété « contain » qui agit comme cover en affichant l’image au plus grand sans la déformé mais dans sa totalité. covercontain

J’ai ensuite ajouté un « caption » – ou légende – sur chaque « slide » (avec l’effet que j’ai appliqué, ces diaporamas s’appellent « sliders« , et donc chaque diapo est une « slide« ) avec un descriptif. J’ai ajouté quelques effets comme de la transparence sur le fond, des ombres, des bordures arrondis.

caption

J’ai ensuite voulu créer des boutons de navigation, alors j’ai commencé par créer deux boutons à droite et à gauche du slider, et a les stylisés. Leurs styles n’est pas définitif j’ai moi même choisi ce design arbitrairement, on pourra les laissés comme cela ou les modifier après validation.

<span class="bouton" id="prev">&lt;</span>
<!-- lt = Less Than -->
<span class="bouton" id="next">&gt;</span>
<!-- gt = Greater Than -->
.bouton {
  font-family: Consolas;
  top: 200px;
  margin: 5px; padding: 5px 5px;
  width: 1.3em; height: 1.3em;
  font-size: 20px;  
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 100ms ease-in-out;
  color: #AAAAAA;
  background-color: #EEEEEE;  
  background-image: linear-gradient(#FFFFFF,#DDDDDD);  
  text-shadow: 0 0 1px #aaa;  
  border-radius: 50%;  
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  position: absolute;
}

button

J’ai ensuite cherché comment gérer la position des slides en fonction des clics effectués sur les boutons. JavaScript obligatoire. J’ai d’abord désactivé mon animation automatique en CSS et je pense la supprimé dans le futur pour implémenter une méthode en JavaScript seulement, sinon il y aurait trop de conflit entre animations CSS et manipulations JS, et de toute façon CSS n’est pas fait pour contrôler une page.

J’ai créer les interactions entre le slider et l’utilisateur via les boutons en conservant le concept « slider » où à chaque boucle les slides reviennent comme au départ, et non « carrousel », où les enchaînements sont linéaires et semblent infini. carouselslider

Jean-Philippe m’a montré un « slider » propriétaire qui le fait rêver, Revolution Slider, c’est vrai qu’il est impressionnant mais des animations de ce genre sont loin d’être irréalisable (évidement pas autant, avec autant d’effets et de qualité) mais je pense pouvoir réaliser quelque chose de plus modeste mais restant dynamique et beau.

Du moins j’espère ! J’ai commencé à réfléchir pour intégrer des enchaînements automatiques en plus des interactions, j’ai finalement (et je vais) utilisé JQuery pour manipulé mes slides, notamment grâce à la très puissante fonction « .animate() ».

animate

 Fonction .animate() – JQuery API Documentation

> Mercredi 11 juin 2014

Aujourd’hui j’ai finalisé totalement ( enfin, ça reste à fignolé et a validé ) les animations de la première page.

J’ai approfondi sur mon diaporama, qui est maintenant plus du tout en pur CSS ! Mais bon, c’est obligatoire pour ajouter de la navigabilité. J’ai améliorer mon code JavaScript en utilisant des fonctions.

$("#next").click(function() {
    nextSlider();
});

$("#prev").click(function() {
    prevSlider();
});
function nextSlider() {
    if (currentSlide == maxSlide)
        $("#slider").animate({ "left": "0%" }, 1000);
    else
        $("#slider").animate({ "left": "-=100%" }, 1000);
}

function prevSlider() {
    if (currentSlide == 1)
        $("#slider").animate({ "left": "-" + (maxSlide - 1)*100 + "%" }, 1000);
    else
        $("#slider").animate({ "left": "+=100%" }, 1000);
}

J’ai voulu ajouter un effet sur les transitions des captions, une rotation sur Y  prenant son origine sur le coté droit de la caption, à chaque changement de slide. moulin

Ça a été plutôt difficile il a fallu que je revois mon code JavaScript pour qu’il soit déjà beaucoup plus universel et généralisé, et non adapter à mon application seulement, pour en faire un plug-in presque.

J’ai utilisé un mixte entre transition CSS et contrôle par JavaScript, j’utilise les fonction addClass(), removeClass et toggleClass() de JQuery, le CSS se charge de faire le reste avec les transitions 3d.

.caption {
  -webkit-transform-origin: center right; /*x-axis y-axis z-axis*/
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(90deg);
  opacity: 0;
  right: 0;
}

.turn_in {
  -webkit-animation: turn_in 1000ms linear forwards;
}

.turn_out {
  -webkit-animation: turn_out 1000ms linear forwards;
}

@-webkit-keyframes turn_in {
  0%   {  -webkit-transform: perspective(1000px) rotateY(90deg);
          opacity: 0;
          right: 0;  }
  80%  {  -webkit-transform: perspective(1000px) rotateY(0deg);
          opacity: 1;
          right: 0;  }
  100% {  -webkit-transform: perspective(1000px) rotateY(0deg);
          opacity: 1;
          right: 25px;  }
}

@-webkit-keyframes turn_out {
  0%   {  -webkit-transform: perspective(1000px) rotateY(0deg);
          opacity: 1;
          right: 25px;  }
  20%  {  -webkit-transform: perspective(1000px) rotateY(0deg);
          opacity: 1;
          right: 0;  }
  100% {  -webkit-transform: perspective(1000px) rotateY(-90deg);
          opacity: 0;
          right: 0;  }
}
Animations et classes CSS
function nextCaption(direction) {
    if (direction == "next") {
        $(".caption").removeClass("reverse_turn_in");
        $(".caption").removeClass("reverse_turn_out");
        $("#c" + nextSlide).addClass("turn_in");
        $("#c" + nextSlide).removeClass("turn_out");
        $("#c" + currentSlide).removeClass("turn_in");
        $("#c" + currentSlide).addClass("turn_out");
        $("#c" + prevSlide).removeClass("turn_out");
    } else {
        $(".caption").removeClass("turn_in");
        $(".caption").removeClass("turn_out");
        $("#c" + prevSlide).addClass("reverse_turn_in");
        $("#c" + prevSlide).removeClass("reverse_turn_out");
        $("#c" + currentSlide).removeClass("reverse_turn_in");
        $("#c" + currentSlide).addClass("reverse_turn_out");
        $("#c" + nextSlide).removeClass("reverse_turn_out");
    }
}

Pour ces animations de captions le travail à été complètement différent de celui pour les slides, je me basais au début sur la positions des slides pour placer la bonne caption, ce qui était lourd et peut efficace, la position des slides n’étant pas « précise », ont trouve des valeurs du genre « -99.999998786 », alors pas facile pour savoir exactement où en sont les slides pour ensuite ajuster la caption.

J’ai opté pour un système de numérotation des slides, avec un des compteurs représentant la slides précédente, la suivante, et l’actuelle. C’est beaucoup plus performant et plus simple.

function incrementation(direction) {
	if (direction == "next") {
		if (currentSlide >= maxSlide ) {
			prevSlide = maxSlide;
			currentSlide = 1;
			nextSlide = currentSlide + 1;
		} else {
			prevSlide = currentSlide;
			currentSlide ++;
			if (currentSlide + 1 > maxSlide )
				nextSlide = 1;
			else
				nextSlide = currentSlide + 1;
		}
	} else { 
		if (currentSlide <= firstSlide ) {
			prevSlide = maxSlide - 1;
			currentSlide = maxSlide;
			nextSlide = firstSlide;
		} else {
			nextSlide = currentSlide;
			currentSlide --;
			if (prevSlide - 1 < 1 )
				prevSlide = maxSlide;
			else
			prevSlide = currentSlide - 1;
		}
	}
}
Compteurs pour les slides

J’ai ensuite allégé mon JavaScript en le  découpant encore avec des fonctions sur les nouveaux fragments de code. J’ai également essayer de rendre le code le plus lisible possible pour quelqu’un qui ne connait pas trop JavaScript, en utilisant des variables plutôt que des valeurs, pour que cela se rapproche du langage naturel. Enfin j’ai utilisé l’anglais comme langage, les noms sont plus court et pour que cela plus compréhensible par rapport aux docs que l’on trouve surtout en anglais.

	if (direction == "next") {
		if (currentSlide >= nbMaxSlide ) {
			prevSlide = nbMaxSlide;
			currentSlide = firstSlide;
			nextSlide = currentSlide + 1;
		} else {
			prevSlide = currentSlide;
			currentSlide ++;
			if (currentSlide + 1 > maxSlide )
				nextSlide = 1;
			else
				nextSlide = currentSlide + 1;
		}

A la fin de la journée j’ai presque réussi à finalisé mes deux animations de transition, sur les slides et les captions. Il me manquait encore l’effet 3D sur la transition des captions et d’arranger le javascript correctement pour que tout s’enchaine dans les deux sens J’ai beaucoup fait de JavaScript aujourd’hui. Plus que jamais en réalité (ce qui n’est pas tant que ça …) et ça a été plus simple que je ne l’imaginais. Je suis passé sous NetBeans et me suis fait un projet, notamment pour JavaScript, qui me fait penser à du Java mais plus souple et moins typé. L’écriture du code se fait simplement, il suffit de regarder dans les documentations pour les syntaxes et le reste du temps les recherches se font sur l’algorithmique.

> Jeudi 12 juin 2014

J’ai terminé dans la mâtiné toute mes animations de transition sur les pages, en 3D. J’ai également arrangé mon code javascript pour qu’il y ai un minimum de modifications à effectué suivant les différentes page : il y a juste à renseigner le nombre maximum de slides et c’est tout, le code se débrouille tout seul avec ça.

// A modifier en fonction du nombre de slides
var nbMaxSlide = 5;

Au début de l’après midi nous voulions avec Léa faire le point avec Jean-Philippe pour savoir si ça lui convenait, mais il a préfère reporter et faire cela quand Swan sera revenu demain, car aujourd’hui il était absent (il passait une épreuve pour son examen). Nous nous sommes donc débrouiller avec Léa, elle m’a donné les différentes images à mettre dans les sliders, et une nouvelle organisation du contenu. Elle pense que ce n’est pas la peine de détaillé autant avec les sites webs, vus que les offres se ressemblent beaucoup. Ce que j’approuve. Nous avons alors décider de découper les sites webs en 2 parties (2 bulles dans ma mosaïque donc), les sites internet et le Back Office. Je vais donc revoir l’architecture de ma mosaïque, on passe de 8 à 6 bulles et je vais devoir adapter logiquement mon tableau de placement. Menu - Mosaïque J’ai créer une nouvelle versions de l’application, j’ai épurer les dossiers et n’ai pris que le nécessaire, c’était le « bazar « dans le dossier « images » ! J’ai créer les 4 pages pour les créations graphiques, les sliders sont adaptés et avec les bonnes images, il manque juste les légendes à remplir. J’ai seulement commencé à faire les pages pour le web, Léa m’a fourni les images un peu tard alors j’en ai profité pour recréer le logo animé de la Sacrée Com que l’on retrouver sur leur site (qui fait temporairement office de bouton « retour »). sc logo anim J’ai adapter le tableau de structure à la nouvelle hiérarchie. Il faudra réfléchir aux nouvelles animations au survol des bulles et je pense également que je pourrais arranger mon javascript pour qu’il s’adapte, sans aucune modification du fichier, à n’importe quel page avec slider dans lequel on l’inclut. scapp2

> Vendredi 13 juin 2014

J’ai terminé complètement tout les animations saufs celle de l’identité web, j’ai complètement intégrer le Javascript : il recherche dans le CSS le nombre de slide pour en adapter les animations du slider. J’avais créer un fichier JavaScript par page auparavant mais désormais je n’ai besoin que d’intégrer un seul fichier !

var maxSlide = ($("#slider").width()) / 800;

Nous avons fais le point avec Jean-Philippe, Léa et Swan.  Jean Philippe est plutôt content du résultat, il a même été impressionné par les animations que j’ai créer avec seulement du CSS . D’après cette démo nous avons déterminé qu’il fallait ajouté ou corrigé les points suivants :

  • Les pages sont très épurées, il faudrait essayer de stylisé le slider
  • Un bouton « retour » sur les pages
  • Le titre affiché sur la page pour ne pas être perdu
  • Centrer légèrement le texte sur la bulle centrale de la mosaïque
  • Ajuster le logo
  • Organisé le contenu des diapos
    • Des titres et des textes courts
    • Caption placée en bas
    • Organisé les visuels dans les images.
  • Et ajouter si possible une navigabilité adapter aux supports tactiles sur les sliders (un mouvement du doigt sur le slider pour changer de slide).

Juste après la démo j’ai de suite corriger les petits détails n’allant pas, comme ajuster le logo et centré le texte de la bulle principale, enlevé les décorations de texte … J’ai modifié les captions en les plaçants sur le coté inférieur des slides et avec une animation différente, les captions apparaissent de la même façon qu’avant mais en suivant l’axe X au lieu de l’axe Y. moul2.0 J’ai fais ensuite faits des recherche pour intégrer la gestion du tactile sur le slider. JQuery mobile conviendrais parfaitement pour ajouter l’effet que je désire, s’appelant « Swipe ». Mouvement qui correspond à un glissement du doigt de 30 pixels de large minimum pendant moins d’une seconde. swipes J’ai découpé encore plus mon code JavaScript en fonction et je n’ai ajouter que 2 lignes en plus de JQuery Mobile.

// Au glissé du doigt

$( "#slider" ).on( "swiperleft", toNextSlide);
$( "#slider" ).on( "swiperight", toNextSlide);

// Sur le clic des boutons

$("#prev").click(function() { toPrevSlide(); });
$("#next").click(function() { toNextSlide(); });

Pour les tests de cette partie du développement j’ai utilisé un ultrabook hybride de l’agence (très belle machine au passage) sous Windows 8, avec 2 écrans sur chaque façade de la machine, la façade arrière étant tactile. asus-taichi31-2 D’ailleurs cette partie étant purement de la réflexion de Responsive Web Design, c’est à dire adapter le contenu, au support. Il est plus logique sur un support tactile de faire glisser des images pour naviguer que de cliqué sur des boutons de contrôle. swipe D’ailleurs le menu de mon application utilise beaucoup la pseudo classe CSS « :hover », qui correspond à un survol de souris sur un élément. Sur internet on voit beaucoup de développeur essayer de porter cette pseudo classe sur support tactile, ce qui n’a pas de sens car le survol de souris n’a lieu d’être uniquement lorsqu’il y a une souris ou un pointeur. J’ai commencé à créer un genre de barre au dessus du slider, avec le titre de la page et un bouton « retour ».  J’ai essayer de mettre 2 petites bandes de couleurs pour faire jolie, j’en discuterais avec Léa pour savoir si c’est vraiment mieux visuellement (peut être changer les couleurs ? Des choses comme ça …). slider2 Maintenant que j’ai adapter l’application pour ce support, Jean-Philippe pourra la mettre à disposition des visiteurs sur tablette lors des JAS.

Entrée de journal précédente

Entrée de journal suivante

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *