Semaine du 16 au 20 juin

Journal : Semaine du lundi 16 au vendredi 20 juin 2014

Voici mes entrées de journal pour cette dernière semaine de stage.

> Lundi 16 juin 2014

Les JAS commencent mercredi, l’échéance arrivent à grand pas donc, demain soir précisément ! L’application est presque terminé de toute façon.

J’ai aidé Léa à finaliser les pages et leurs contenu, sur les sliders. J’ai également terminé pour de vrai toute les animations, en fait tout le menu est terminé.

Pour les 6 pages il a fallu que j’ajoute les dernières modifications que j’ai effectué vendredi dernier. J’ai également télécharger les librairies JQuery pour que le JavaScript fonctionne même sans connexion internet ( il n’y aura peut être pas d’accès à internet là bas.).

Depuis que j’ai ajouté JQuery Mobile, les liens ne marchait plus. Il fallait ajouter l’attribut  « rel= »external » » dans les propriétés de la balise ancre faisant le lien.

<a href="index.html"  rel="external"> </a>

J’ai remarquer que JQuery mobile fournissait une feuille de style en plus de la librairie, et que lorsque que l’on l’ajoute à notre page elle casse toute la mise en place et pose d’autres styles, ce qui n’est pas désirable mais lorsque que l’on retire cette feuille de style, JQuery Mobile ajoute une bordure bleu tout autour de la page et un titre avec écrit « loading » en pied de page …

jquery mob

Petit problème donc, j’ai essayer de trouver une solutions pour utilisé JQuery Mobile pour éviter ces petites modifications mais rien à faire, je pense devoir passer par une autre librairie que JQuery mobile …

J’ai recherché d’autres librairies JavaScript qui gèrent les événements tactile (« Touch Events »), j’ai trouvé JGesture et Hammer, mais je n’arrive pas à les faire fonctionner, pourtant les syntaxes sont très similaire à JQuery Mobile mais on trouve beaucoup moins de documentations qu’avec JQuery.

Swan m’a fait remarquer un petit problème qu’il a remarqué en essayant l’application sur son PC, les animations se cachent lorsque l’on est en plein écran avec Google Chrome. Ce « bug » est impressionnant, j’ai n’ai eu aucun problème tout le long du développement et ce n’est qu’à la fin que l’on s’aperçoit que l’application ne marche pas sur un ordinateur (et non un navigateur).

Sidéré, avec Léa, nous avons essayer le plein écran sur l’ultrabook : même problème, ensuite sur l’ordinateur à Léa, pareil, et enfin sur l’ordinateur d’Anne, les animations se font à moitié.

Nous ne nous sommes pas inquiété de cela plus tôt puisque sur MON ordinateur tout fonctionne bien et Léa n’avait pas essayé le plein écran, et lors de la démo (en plein écran) avec Jean-Philippe, sur son ordinateur donc, tout allait bien également.

Tout les tests on été fait sous la dernière version de Chrome, et comme je n’ai pas porté la compatibilité entre les différents navigateurs, aucun test possible sur les autres.

Néanmoins, Chrome est basé sur Webkit, lui même développer à l’origine par Apple, servant de base pour beaucoup d’autre navigateurs : Safari, Chromium, Opera, etc. Nous avons donc essayer sous Safari et là, coup de théâtre, tout marche sur Safari, même en plein écran, mais ensuite, ce qui ne vas pas cette fois ce sont  les sliders (et je soupçonne un problème avec JavaScript cette fois).

Pour le problème sous Chrome, je pensais que les cartes graphiques (GPU) étais trop faiblarde pour faire fonctionner les animations, puisque les animations CSS3 sont calculé par le processeur graphique (ce pourquoi les animations CSS3 sont très puissante.).

J’ai un ordinateur qui sert à la base pour le jeu-vidéo, avec une bonne carte graphique, je ne connais pas les configurations des autres machines mais j’ai tenté quelque bidouilles : changer les réglages des cartes graphiques pour les faire fonctionner au maximum, mettre à jour les drivers, etc …

Léa quant à elle pensais que le problème venait du navigateur qui interprétais mal les résolutions plein écran.

Nous avons fait chacun nos recherches, et il s’avère que Léa avait raison, les navigateurs actuels « triche » sur les résolutions des pages pour les afficher en plein écrans et donc, chaque navigateur à sa façon d’interprété le plein écran. Le problème semble donc pour le moment insolvable.

> Mardi 17 juin 2014

L’application est, malgré les différents problèmes (mineures), terminée.  J’ai continuer brièvement de rechercher une solution à notre problème, je suis tomber sur une fonctionnalité très intéressante de Chrome  : activer des modules expérimentales.

chrome://flags

Dans ses modules, on pouvait forcer Chrome à utilisé Direct3D 11.

Microsoft DirectX est une collection de bibliothèques destinées à la programmation d’applications multimédia, plus particulièrement de jeux ou de programmes faisant intervenir de la vidéo, sur les plates-formes Microsoft (Xbox, systèmes d’exploitation Windows).

– Wikipedia

dx11

Grâce à ce module, les animations fonctionnaient uniquement lors du premier chargement de la première page.

Les animations s’affichait même en plein écrans sur les ordinateurs où cela ne marchait pas mais uniquement sur la première visite de la première page, il suffisait de visiter une page, de revenir, et cela ne fonctionnait plus …

Le module est en expérimentation ce qui explique l’instabilité de la solution, à mettre de côté donc. J’ai améliorer l’animation de la bulle « Identité visuelle », qui était un peu « fixe »,  j’ai appliqué un effet similaire à celui qu’il y avait dans la bulle RWD, mais avec une transitions CSS, et non une animation CSS.

IDVISUELLE

Les transitions permettent d’ajouter des effets sur les changement de valeurs du style d’un objet.

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

– W3Schools

Les animations permettent de découper dans le temps le jeu qu’il y aura sur les propriétés CSS qui permettront d’animé l’élément.

An animation lets an element gradually change from one style to another.

You can change as many properties you want, as many times you want.

You can specify when the change will happen in percent, or you can use the keywords « from » and « to » (which represents 0% and 100%).

0% represents the start of the animation, 100% is when the animation is complete.

– W3Schools

En clair, si l’on veut une animation simple lors d’un changement de valeurs, comme la couleur et la taille d’un élément lors d’un :hover, il vaudra mieux utilisé la transition.

Mais si on veut ajouter des effets supplémentaire, ou découper le timing de l’animation, l’animation est plus adapté.

/* Comparaison d'une animation avec une transition */
/* Animation */

.bulle {
	position: absolute;
	top: 100%; left: 25%;
	opacity: 0;
}

.bulle:hover {
	animation: apparition 1000ms ease-in-out both;
  /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
}

/* les keyframes permettent de définir le timing de l'animation, ce qu'il va s'y passer */
@keyframes apparition { 
	0% {
		top: 100%;
		opacity: 0;
	}
	25% {
		top: 75%;
		opacity: 1;
	}
	95% {
		top: -5%;
	}
	100% {
		top: 0%;
	}
}

/* Transition */

.bulle {
	position: absolute;
	top: 100%; left: 25%;
	opacity: 0;
	transition: all 1000ms ease-in-out;
/* transition: property duration timing-function delay|initial|inherit; */
}

.bulle:hover {
	top: 0%;
	opacity: 1;
}

A 14h le professeur qui devait me rendre visite, M. Laluque, est venu nous rendre visite pour voir comment mon stage se passais. Plutôt bien ! Léa m’a demandé si c’était possible, pour la page des sites internet, de modifier le titre de la page en fonction de la slide visible, par exemple « Site e-commerce », « Site vitrine » …

changetitre

C’est facilement faisable ! J’ai ajouté une fonction dans mon JavaScrip « changeTitre » qui, en fonction d’une slide, modifie le contenu du titre du slider grâce à la fonction « innerHTML ».

titre.innerHTML="Site Vitrine";

J’avais d’abord besoin de savoir le nom de la page, pour exécuté la fonction uniquement lorsque que la page est celle des sites webs, grâce à la fonction « pathname », avec un peu de traitement sur la chaîne de caractère renvoyée.

var nomPage = location.pathname.substring(
  location.pathname.lastIndexOf("/") + 1
);

Je n’avais ensuite qu’à vérifié quelle slide est active, j’avais déjà créer des fonctions pour cela auparavant, j’ai n’ai eu qu’à les réutiliser.

function changeTitre() {
  var nomPage = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
  if(nomPage == "site.html") {
    var titre = document.getElementById('titre');
    if(currentSlide == 1)
      titre.innerHTML="Site Vitrine";
    if(currentSlide == 2)
      titre.innerHTML="Site Vitrine";
    if(currentSlide == 3)
      titre.innerHTML="Site E-Commerce";
    if(currentSlide == 4)
      titre.innerHTML="Site Vitrine";
    if(currentSlide == 5)
      titre.innerHTML="Site E-Commerce";
  }
}

Swan m’a demandé si c’était possible de cacher la barre de défilement. Après quelque recherche, il s’avère que la barre de défilement est généré (évidement) par le navigateur, à aucun moment on lui demande d’en mettre une, comme c’est une propriété spécifique au navigateur, il faut utiliser les préfixes propriétaires pour que cela fonctionne, et forcer la propriété avec « !important ».

body::-webkit-scrollbar { width: 0 !important; }

Après plusieurs re-vérification, et le problème du plein écran insolvable, et la gestion du tactile qui n’est plus disponible l’application est totalement terminé, et prête dans les temps !

> Mercredi 18 juin 2014

Aujourd’hui, Jean-Philippe et Swan sont aux JAS, et Léa est retournée en formation. Il ne reste donc plus que Anne, et moi !

Anne travaille surtout sur du graphisme, elle dessine sur sa tablette graphique et travail sur de l’imprimerie, des choses dont je n’y connais absolument rien, et où je ne peux pas beaucoup l’aider ! Enfin je reste malgré tout à sa disposition si elle a un travail pour moi.

Jean-Philippe m’a dit hier que je pouvais profiter des derniers jours de stage restant pour préparer, si j’en avais, mes rapports de stage ou documents similaire.

Je vais donc commencé à me préparer pour les soutenances et si une idée me vient pour améliorer l’application (sait-on jamais, ils pourraient la réutilisée). Je pense que je vais peut être essayé de créer une documentation.

> Jeudi 19 juin 2014

J’ai poursuivi la création de mes documents finaux pour le passage à l’oral, tout est a peut prêt terminer, j’ai relu tout mes journaux pour corriger quelque faute et enrichir un petit peu.

J’ai également rédigé une documentation technique de l’application, expliquant la structure de l’application et ses fonctionnalités, il n’y a pas besoin de documentation utilisateur puisque l’application est simplissime à utiliser.

J’ai tenté de remplir mon portefeuille de compétence, avec beaucoup de difficulté, je ne trouve pas de compétence correspondantes au travail que j’ai effectué.

> Vendredi 20 juin 2014

Jean-Phillipe et Swan sont revenu des JAS, tout s’est très bien passé apparemment, ils était très content.

J’ai poursuivis la rédaction de mes journaux et de mes documents pour la soutenance, j’ai passé du temps avec Jean-Philippe pour remplir l’attestation de stage et créer un petit schéma réseau de l’agence.

J’ai parler du deuxième stage en 2ème année à Jean-Phillipe, il m’a dit qu’il me reprendrait en stage avec grand plaisir !

Aujourd’hui, dernier jour, j’ai pu terminer ma journée un peu plus tôt que prévu.

> Petite conclusion personnelle

Ce premier stage en entreprise à été énormément enrichissant pour moi, j’ai eu l’opportunité de travailler et de découvrir le monde du travail dans une structure du travail un peu contradictoire à l’idée que l’on se fait du travail en entreprise.

J’ai pu travailler librement, sans contrainte au niveau hiérarchique, et au niveau technique. J’étais considéré comme un employé, en tant qu’adulte responsable ce qui est très épanouissant, j’étais libre du choix de la solution et de la gestion de mon temps, tout ceci évidement en cohérence avec l’équipe.

J’ai rempli ma mission à temps et correctement, le gérant est très satisfait du travail que j’ai produit et de mon implication au travail.

 Page de journal précédente

Laisser un commentaire

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