Semaine du 26 au 30 mai

Journal : Semaine du lundi 19 au vendredi 23 mai

Voici mes entrées de journal pour cette seconde semaine de stage légèrement écourtée.

> Lundi 26 mai 2014

En arrivant lundi Léa m’informe que l’on laisse tombé la première structure que l’on avait commencé, pour passer à quelque chose de plus simple et moins hiérarchiser. Léa m’a rapidement montrer un schéma représentant la nouvelle structure, avec un genre de mosaïque formé de bulles, dont une centrale présentant l’agence et les autres reprenant le principe précédent : un lien menant vers une page de présentation.

J’ai (très) rapidement créer un carte mentale pour schématiser cela et pour m’en servir de modèle :

sc

J’ai donc commencé à faire cette nouvelle structure, j’ai gardé l’ancienne application dans un dossier « sc_app.old » et créer la nouvelle dans « sc_app ». J’ai conservé les pages de la version précédente puisque les liens mèneront, peut importe l’application, sur ces pages.

Le problème avec cette disposition en mosaïque, c’est que j’ai eu du mal à placer les bulles de façon propre autour de la bulle centrale, alors j’ai opté pour une solution plutôt moche en attendant de trouver mieux (pour ne pas perdre de temps et rester bloqué la dessus). J’ai simplement utilisé la propriété CSS « position: absolute; » pour placer manuellement chaque bulle … Je l’avais dit que c’était moche !

#print {
  position: absolute;
  top: 300px; left: 150px;
}
Positionnement absolu

Pour former des cercles sur chaque bulles, j’ai utilisé la petite propriété CSS « border radius ».

#main_bulle, .bulle {
  border: solid 2px #0B72FF;
  border-radius: 50%;
}
Positionnement absolu

Cette propriété m’a été bien utile mais j’ai maintenant un petit problème : impossible de placer du contenu à l’intérieur de cette bulle sans déformer le cercle, et du coup obtenir une ellipse, ce qui n’est pas très beau.

J’ai décider de mettre le contenu de cette bulle dans une autre balise interne (<div>), de façon à protéger la structure de ma bulle.

<div class="bulle" id="logocg">
    <div class="content">
      <h2>Logotype & Charte Graphique</h2>
    </div>
</div>
Protection de la forme des bulles

J’ai maintenant un autre problème, la forme reste intact, mais peut importe le jeu sur les propriétés « padding » et « margin » et forcé la taille avec les propriétés « width » et « height » que je met, la taille de la bulle varie en fonction de son contenu, ce qui casse tout mon placement absolu : dépassement des bulles les unes sur les autres, désalignement, etc.

Problème qui me fait perdre beaucoup de temps, puisque changer à chaque fois le positionnement absolu de 8 balises, c’est vraiment très long et pas pratique.


> Mardi 27 mai 2014

Dans la matinée Léa m’a montré un outil très intéressant que je ne connaissais absolument pas ( je travaillais jusqu’à présent uniquement avec un navigateur web et mon fidèle éditeur de texte Sublime Text 3) qui se nomme « Developer Tools » par Google Chrome. C’est tout bête, il suffit de faire un clique droit > Inspecter l’élément (avec Chrome évidement) sur n’importe quelle page web pour y voir non seulement le code source, mais tout un tas de détail sur l’affichage de la page, la position des balises, leurs tailles …

chrome_devtools

 

Cet outil m’a permis de comprendre enfin ce qui changeait la taille de mes bulles : je pensais que la taille des balises dépendaient des propriétés « width » et « height », alors qu’en réalité s’ajoute à ces dimensions le « padding » et la taille des bordures … Donc pour si je veux une balises de 200 pixels sur 200 pixels, il faut que je prenne en compte tout ces paramètres,  pour simplifié mon code j’ai forcé le « padding » à 0 et je l’appliquerais si besoin sur les balises filles (par exemple <h1>, <h2> ou <p>).

.bulle {
  padding: 0;
  border: solid 2px #0B72FF;
  width: 196px; height: 196px;
  /* 196 +(2x2) = 200px de largeur et hauteur */
}

Il faut donc faire des calculs pour avoir ses dimensions de balises correcte, mais il existe un fonction de calcul simple en css : « calc() »

.bulle {
  width: calc(196px + 2 * 2);
  height:  calc(196px + 2 * 2)
  /* 196 +(2x2) = 200px de largeur et hauteur */
}

Une fois ce problème résolu, j’en ai eu marre de réajuster à chaque fois le positionnement de mes bulles (vous vous souvenez ? Le « position: absolute; » de tout à l’heure) alors j’ai décidé de tout placé dans une grille, ou plutôt un tableau, dont voici l’architecture :

tab

La solution n’est peut être pas parfaite mais ça me permet, en attendant, d’avoir quelque chose de propre peut importe mes modifications.

Léa m’a également dis qu’il faut avoir un genre de diaporama en plein écran, en fond sur ce menu de bulles. J’ai par conséquent continué mes recherches et je me suis lancé : CSS3 propose des fonctionnalités très puissantes notamment grâce à la propriété « animation » et « keyframes ».

A la fin de la journée et a force de bidouilleries et de fouinage sur internet (je me suis beaucoup aidé du site du W3C pour les syntaxes) j’ai finalement réussi – et avec grande et humble fierté – à créer un diaporama pur CSS, sans la moindre petit goutte de Javascript.

Le problème c’est que c’était difficilement applicable en fond d’écran et de plus l’effet de glissement du diaporama était vraiment perturbant sur un diaporama de fond. J’ai pensé alors qu’un effet de fondu sur les transitions serait plus adapté. Après quelque recherche il s’avère que cela se nomme « crossfader » en anglais, comme c’est un joli mot, je l’appellerais comme ça !


> Mercredi 28 mai 2014

Aujourd’hui j’ai poursuivi mes recherches pour ce fameux Crossfader, la principale problématique était d’appliqué les images en fond sans qu’elle soit déformé (et ce peut importe leurs tailles) et sans qu’elles influent sur le contenu de la page.

Et j’ai pour cela trouvé un assemblage de propriétés CSS vraiment très appropriées :

#crossfader span {
  background-image: url(../img/crossfader/ho.jpg) ;  
  background-size: cover;
  background-position: 50% 0%;
  background-repeat: none;
}

La propriété « background-size: cover » est vraiment intéressante, elle vas appliquer l’image sur la totalité de la balise sans la déformé (sans truandé la proportion hauteur/largeur d’origine)

En m’aidant du site W3Schools, j’ai finalement réussi à faire les animations de fondu en jouant astucieusement sur les propriétés « animation » et « animation-delay » de CSS (que je détaillerais dans un tutoriel).

J’ai donc finalement réussi à faire un Crossfader de fond vraiment très agréable visuellement (bien que personnellement je trouve cela assez perturbant d’avoir des images recouvrant l’arrière plan).

J’ai ajouter quelque propriété sur mes bulles pour qu’elle soit plus belles graphiquement, de la couleur sur les polices, sur les bordures, sur le fond des bulles, de l’ombrage pour un effet de relief par rapport au Crossfader

Maintenant que je maîtrise à peu près CSS3, je me suis amusé à rajouter un effet de grossissement au survol des bulles (toujours la pseudo-classe « :hover ») et un autre effet de surbrillance.

J’ai finalement commencé cette petite animation que Léa m’avait proposé : 3 images d’appareils apparaissant dans la bulle « RWD ». Encore une fois, avec CSS3 rien de plus simple en créant une animation personnalisée et en jouant avec « animation-delay ».

anim

 

#rwd img {
  position: absolute;
  top: 100%; left: 0;
  opacity: 0;
  -webkit-animation-delay: 0ms;
}

#rwd:hover img:nth-of-type(2) {
  -webkit-animation-delay: 100ms;
}

#rwd:hover img:nth-of-type(3) {
  -webkit-animation-delay: 200ms;
}

#rwd:hover img{
  -webkit-animation: rwd 500ms cubic-bezier(1, 0, .35, 1) 1 forwards;
}

@-webkit-keyframes rwd {
  0%   {  top: 100%;  }
  50%  {  opacity: 0;  }
  100% {
    opacity: 1;
    top: 50%;
  }
}

J’ai également trouvé une fonction intéressante en CSS pour améliorer les animations, il s’agit de « cubic-bezier() », dont ce site vaut mille de mes mots pour expliquer ce qu’elle fait (jouez avec les courbes puis cliquez « GO! »), en joie :

http://cubic-bezier.com/

#vitrine:hover img{
  -webkit-animation: vitrine 300ms cubic-bezier(.75, 0, .35, .75) 0ms 1 forwards;
  /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
}

> Jeudi 29 mai 2014

  •  Aujourd’hui, c’est férié sourire

> Vendredi 30 mai 2014

  • L’agence fais le pont ! Prochaine entrée dans le journal le lundi 2 juin ! grand sourire

Entrée je 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 *