Semaine du 2 au 6 juin

Journal : Semaine du lundi 2 au vendredi 6 juin

Voici mes entrées de journal pour cette troisième semaine de stage.

> Lundi 2 juin 2014

Nouvel semaine, et je poursuis la création de l’application, enfin à ce stade c’est plutôt de l’amélioration. J’ai envoyé les fichiers à Léa pour qu’elle puisse l’améliorer visuellement, en modifiant les propriétés CSS déjà présentes. Modifier les polices, les couleurs, les images du crossfader de fond , etc. Elle a également trouvé un diaporama ( un « carrousel » plus précisément) utilisant du JQuery pour la navigation, car cela à l’air à priori impossible à faire en CSS uniquement, dans tout les cas ce n’est pas approprié au rôle de CSS. Pour rappel :

  1. HTML define the content of web pages
  2. CSS specify the layout of web pages
  3. JavaScript program the behavior of web pages

W3 Schools

En bref :

  • HTML → Contenu
  • CSS → Rendu
  • JavaScript → Comportement

Et une navigation par interaction avec des boutons sur une page de diaporama est clairement une situation où l’on doit modifié le comportement de la page.

Pour la suite de mon application j’ai travaillé vraiment sans contrainte, ou du moins sans consigne de travail.  Au cours de mes nombreuse recherche sur CSS j’ai vaguement abordé les transformation 3D. J’ai donc décidé d’en rajouter, un effet de pivot sur les bulles lorsqu’elles sont cliquée.

flipper

Lorsque l’on clique, la bulle se rapproche de l’écran et va faire un tour de 180 degrés sur l’axe Y et en faisant une légère translation sur Z. Comme je connais maintenant les animations CSS, l’effet « flip » (il s’agit du nom en anglais) vas être plutôt simple à réaliser.

axes_xyz_abc_repere2

 

CSS3 offre la possibilité de réaliser des animations 3D surpuissantes (voir tridiv pour comprendre ce « surpuissant ») très simplement, en spécifiant la profondeur d’une balise on peut y animer d’autres balises suivant un plan 3D (X, Y et Z) , j’ai n’ai eu besoin que de jouez sur une rotation sur Y et une translation sur Z.

td {
  -webkit-perspective: 1000;
}
.flip {
  -webkit-animation: onclick 500ms ease-in-out forwards;
}
@-webkit-keyframes onclick {
  from {
    -webkit-transform: rotateY(0deg) scale(1);
  } to {
    -webkit-transform: rotateY(180deg) scale(1.5);
  }
} 
.bulle {
  z-index: 2;
}

Remarquez que parfois des propriétés sont préfixés par « -webkit-« , ces préfixes servent à assurer la compatibilité de certaines fonctionnalités ou propriétés CSS pour tout les navigateurs principaux, dont certains n’ont pas encore adopter les normes du W3C (ou quand certaine balise/code n’ont pas été encore standardisé). Ici je n’utilise que Webkit (utilisé par Safari, Chrome, Opera, Android …) car je travaille sous Google Chrome, mais si je dois lancer une version finale de ce code je devrais préfixer pour les autres navigateur, par exemple « -moz-« , « -ms- » et m’assurer que le fonctionnement est normal sur les principaux navigateurs. Un travail qui peut sembler redondant et pénible mais en réalité il n’y a que 3 clic à faire pour préfixer les différentes fonctions : il existe par exemple des « prefixer » automatiques disponibles en ligne.

Créer l’animation à été simple mais j’ai passé ma journée à la développé j’ai eu des problèmes à d’appliqué une face avant et une face arrière sur la balise tournante, en effet en usant des mauvais paramètre, ont n’obtient qu’une seule balise affiché mais retourné (dû à la rotation sur Y), j’ai eu également beaucoup de problèmes de « layering », où les mauvais éléments sont affichés en premier plan.

rotat

Cela m’a obligé à reprendre mon HTML, dont la structure des bulles est maintenant constitué d’un conteneur, de deux faces avec chacune leurs contenants (balises « contenu », titres, animations …).

<div class="bulle_container">
  <div class="bulle" id="rwd">
    <div class="content">
      <h2>Site internet<br>Responsive Web Design</h2>
      <img src="../img/rwd-desk.png" alt="">
      <img src="../img/rwd-tab.png" alt="">
      <img src="../img/rwd-mob.png" alt="">
    </div>
  </div>
  <div class="bulle_backface">
    <div id="loader">
    </div>
  </div>
</div>

J’ai également supprimé les liens englobant mes balise formant les bulles, je vais passer par JavaScript pour capté le clic de souris, animé la bulle, et chargé la page correspondante.

A la fin de la journée j’avais toujours deux problèmes :

  • Intercepté l’événement du clic, j’ai vérifié les syntaxes, les déclarations, tout me semble correct et pourtant impossible d’intercepté cet événement ( ou même de savoir si il est créer …), je verrais cela demain.
  • Toujours impossible d’afficher correctement mon animation de « flip » avec deux faces distinct affichés correctement. Je verrais cela demain également.

> Mardi 3 juin 2014

En arrivant le matin j’ai enfin réussi à réalisé l’interception de l’événement de clic de souris, en faite il fallait que je place mon script (ça je ne sais toujours pas pourquoi …) à la fin de mon code HTML mais dans le body.

<script src="../js/onclick.js"></script>
</body>
</html>

J’ai continué mes recherches sur l’effet « flip », j’ai finalement réussi.  µ

J’avais un mauvais jeu sur mes propriétés z-index, et backface-visibility. Il y avait également des conflit entre les animations de rotations et de translation.

.bulle,
.bulle_backface {
  -webkit-backface-visibility: hidden;
}

J’ai ensuite voulu ajouté sur cette face arrière un effet de chargement animé avec des barres. Je pense afficher cette animation pendant 1 à 2 secondes et lancer le chargement de la page suivante, et ensuite afficher la page suivante une fois le temps écoulé et la page chargée complètement (merci JavaScript).

Une fois l’animation créer (au passage, j’ai découvert un petit site sympathique pour tester rapidement et en direct son code HTML/CSS/JS, →JSFiddle) je l’ai intégré sur mon application. J’ai eu d’autres conflits avec mon effet de « flip » et mon animation de chargement.

Léa m’a demander de l’aider à comprendre le code de son carrousel, car elle n’arrivait pas à l’intégrer correctement dans l’application. Et en effet le code était vraiment compliqué, et il s’avérait au final que tout les scripts web était générer par un autre script en JavaScript, et nous avons réussi ( a peu près ) à l’intégrer correctement dans notre application.

J’ai résolu mes problèmes de conflits et l’animation marche maintenant bien. Il faut maintenant intégrer JavaScript pour le chargement des pages, et là encore je reste bloqué, impossible de jouez l’animation, et d’ensuite afficher la page suivante : la page s’affiche sans attendre que l’animation se joue.

Ce n’est qu’une fois la fin de la journée arrivé (comme d’habitude … Hum, hum.) que je réussi à faire ce que je veux.

Il me reste maintenant à chargé la page suivante avant de l’afficher et d’intégrer mes animations sur toutes les bulles. Je n’ai effectuer mes animations uniquement sur une seule bulle, il me suffira de copier et d’adapter mon code (8 fois …).

loading

J’ajouterais également des animations sur chaque bulles comme sur la bulle RWD, ça a beaucoup plu à Jean-Philippe :).

> Mercredi 4 juin 2014

J’ai récupérer les feuilles de styles modifiées par Léa, et les ai fusionner avec les miennes, un net changement mais ça ne reste que graphique.

av ap

Mais (je ne sais pas comment) j’ai des problèmes de z-index avec les bulles, au :hover (survol de souris) ou pendant l’animation de chargement des chevauchement de bulles, je pense que je trouverais rapidement la solution alors je ne vais perdre du temps là dessus et passé à la suite.

chevauchement

J’ai ensuite créer les animations pour chaque bulles de la parties web,  Lèa n’était pas cette après-midi et tout le monde très occupé j’ai alors cherché seul des visuels représentatifs de chaque bulles.

  • Un écran simple pour les vitrines.
  • Les 3 appareils pour le RWD.
  • Un écran avec un panier à l’intérieur pour le e-commerce.
  • Un écran avec un curseur en forme de main et une bulle de dialogue avec une boîte à outil à l’intérieur (pour symboliser le fait que les sites sont administrables par le client une fois finis.) pour le « Back Office ».

– ( j’ai des problèmes avec mon FTP j’uploaderais mes demos plus tard.) –

Je n’ai pas encore beaucoup d’idée concrète  pour les créations graphiques mais j’avais pensé à :

  • 4 carrés de couleurs variantes et un logo prenant différentes forme pour les logotypes et chartes graphiques.
  • 3 boîtes de différents format et type pour le packaging.
  • Un mégaphone et qui en sort à la place du son des cartes de visites, flyers, etc, pour les supports de communications.
  • Je n’ai pas encore d’idée pour les PLV (Publicité sur Lieu de Vente).

J’ai créer mes 3 autres animations, dont le rendu est plutôt sympathique et j’ai créer mes liens dans mon Javascript pour mener aux pages avec le carrousel que Léa à créé.

$( document ).ready(function() {
  $( "#logocg" ).click(function() {
    $( this ).toggleClass( "flip" );
     setInterval(function(){
         window.location.href = "pages/vitrine.html";
     }, 1600);
  });
});

> Jeudi 5 juin 2014

Ce matin Léa m’a montré comment se passait le travail pour passer un site en responsive (adaptation sur tout type d’écran), du fait qu’ils travaillent sur CMS pour créer les sites (et ce pour qu’ils soient ensuite administrable par les clients), le travail est très long et prise de tête,  il faut regarder pour chaque dimension écrire un feuille de style différente, dire si tel ou tel éléments doit s’afficher, comment il doit s’afficher, si la page s’affichent correctement, vérifier les comptabilités avec les principaux navigateurs, alors on vérifie avec son smartphone, avec une tablette, puis à différente résolutions sur bureau, en bref avec tout les outils et appareils à dispositions pour vérifier que tout fonctionne correctement.

deskp

On utilise beaucoup d’outil, dont un « rezizer » pour tester les dimensions, le Developper Tool de Google Chrome (je n’avais pas regardé mais il existe l’équivalent sous Firefox), un éditeur de texte externe … J’ai également trouvé quelque chose d’assez intéressante sur le Developper Tool de  Chrome : la possibilité d’émuler un dispositif d’affichage.

emul

Firefox propose également un outil d »affichage en 3D des couches de la page, ce qui aide à visualiser ce qui va/ne va pas. Bref, toute une panoplie d’outil intéressant et compétitif pour aider les Web Dev’ à rendre le web plus créatif !

J’ai beaucoup discuté avec Léa sur les méthodes de travail pour le développement web, et il est intéressant de voir que suivant les formations les méthodes sont différentes. J’ai une formation technique, je préfère tout construire de A à Z, je comprend mon code et le connais, je ne travaille que sous éditeur de texte mais mon code peut être obsolète, syntaxiquement faux, non responsive, non trans-navigateur, comparé à un travail sur CMS où la création est beaucoup plus rapide et efficace, on se focalise sur l’aspect et non le rendu, mais dès qu’il faut toucher au code et modifier des choses, on est perdu et bloqué. Mais la construction du code est sûre.

J’ai donc travaillé un peu avec Léa sur les media queries d’un site pour le rendre responsive, puis je suis retourné sur mon application pour fignolé quelques détails, comme rajouté, à la place du gras sur le texte, des ombrages …

J’ai également commencé l’animation pour la bulle « Logotype & Charte Graphique ».

> Vendredi 6  juin 2014

J’ai encore continué à travaillé avec Léa sur du responsive, on a eu quelque problème avec des images ne voulant pas se cacher sur des petites résolutions, c’était dû a un conflit entre les feuilles de style, une propriété était noté « !important » et bloquait donc les autres.

display: true; !imporant

J’ai poursuivis un peu mon application, j’ai ajouté des animations dans chaque bulle et corrigé le problème de z-index que j’ai eu mercredi, en purifiant le code j’avais enlever une propriétés nécessaire au fonctionnement de z-index : la balise doit être déclaré en position soit relative, absolute ou fixed, sinon elle ne s’appliquera pas.

.bulle:hover {
  position: relative;
  z-index: 1;
}

Avec Léa nous avons améliorer les animations en trouvant des visuels meilleurs, nous garderons mes idées pour toute la partie site internet mais prendre des images meilleures que celle que j’avais choisie. Par contre pour la partie graphique elle a pensé mettre des productions de l’agence plutôt que mes idées. Il faut admettre qu’elle n’était pas terrible et plutôt abstraites. Elle m’a également dis d’essayer si je pouvais de mettre en place (finalement) le diaporama que j’avais conçu en pur CSS. Je pensais pouvoir facilement en créer de sorte à ne pas avoir à redimensionner les images spécialement pour le diaporama mais il s’avère que c’était plus compliqué que prévu, j’ai mis cela en attente et maintenu la méthode où les images doivent être redimensionnées au profit de l’amélioration des animations de bulles.

J’ai également essayer de revoir mon placement de bulles via un tableau qui n’était pas optimal visuellement, j’ai essayer d’ajouter lignes et colonnes pour l’améliorer mais sans réussite convaincante, je veux dire, le rendu est mieux, mais encore perfectible …

J’ai par curiosité essayé de validé mon fichier par le W3C HTML markup, après quelque petites erreur à corrigé mon document était valide pour HTML5, pour mes feuilles de style on attendra un peu !

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 *