Mois : juin 2016

[Hybris] Créer et modifier des fichiers ImpEx

Distinction entre code ImpEx à importer depuis le backoffice et code ImpEx à intégrer dans un fichier *.impex

Dans nos exemples, nous allons partir du même code pour bien souligner les différences (elles ne sont pas nombreuses).

Code ImpEx à importer depuis le backoffice

L’interface backoffice pour importer du contenu ImpEx est disponible dans le CMS Cockpit Hybris via ce chemin : Hybris administration console > Console > ImpEx import, onglet Import content. Exemple de contenu importable :

Un code d’en-tête nécessaire à la moulinette BO qui réalise l’import (sans ces en-têtes correctement renseignées, l’import ne pourra pas être exécuté) :

code ImpEx à intégrer dans un fichier *.impex

Chemin vers le fichier : bin/custom/myproject/myprojectinitialdata/resources/myprojectinitialdata/import/sampledata/contentCatalogs/myproject-frContentCatalog/cms-content.impex.

Le code d’en-tête n’est, à la différence du cas d’importation depuis le backoffice, pas nécessaire (mieux, même : il ne faut pas le mettre).

Plusieurs choses à savoir sur la manière d’écrire des ImPex dans un projet Hybris (valable pour les deux méthodes d’import)

  • Les deux manipulations doivent être obligatoirement effectuées. Vous ne pouvez pas choisir entre l’une ou l’autre et vous affranchir de la seconde.
  • L’utilisation des caractères ' ' pour les différents attributs déclarés sur les éléments HTML :

  • Le doublage systématique des caractères ' ou " lorsque ceux-ci sont utilisés dans un contenu texte (pas d’exemple dans le gros bout de code plus haut, mais voir ci-dessous) :

[Front-end development workflow] Les ressources en ligne pour utiliser Brunch

Bien démarrer avec Brunch

Plugins

Où trouver des plugins pour Brunch ?

Minification de code

  • clean-css
  • UglifyJS

Edition de code bi-directionnelle en temps réel

  • Emmet LiveStyle – The first bi-directional real-time edit tool for CSS, LESS and SCSS.
  • BrowserSync – Time-saving synchronised browser testing (CSS).
  • fb-flo – A Chrome extension that lets you modify running apps without reloading them (injecte CSS et JS).

[Gulp] Astuces d’utilisation et ressources en ligne

Ressources en ligne pour apprendre à maîtriser Gulp

Un peu de lecture au format PDF

A Gulp Workflow for Frontend Development Automation


Link

What does our Gulpfile do?

So what exact­ly does our Gulp fron­tend work­flow automa­tion do for us? Here’s a rundown:

  • Han­dles our CSS 
    • Com­piles all of our SCSS down to CSS, using a cache to make it faster
    • Auto-pre­fix­es our CSS for the browsers we support
    • Cre­ates SourceMaps for our CSS to make debug­ging easy
    • Pulls in CSS from any third-par­ty modules/​packages we use
    • Com­bines and mini­fies all of our CSS
  • Han­dles our JavaScript
    • Tran­spiles all of the JavaScript we write from ES6 to some­thing web browsers support
    • Pulls in JavaScripts from any third-par­ty modules/​packages we use
    • Ugli­fies our JavaScripts
    • Pulls in any JavaScripts we need to inline in our HTML separately
  • Han­dles live reloading
    • CSS/SCSS changes cause an imme­di­ate brows­er repaint with­out a page load
    • JavaScript changes cause the brows­er to reload the page
    • Changes to our Twig/​HTML tem­plates cause the brows­er to reload the page
  • Gen­er­ates Crit­i­calC­SS for our website
  • Runs an acces­si­bil­i­ty audit on our website
  • Gen­er­ates a cus­tom icon font using only the glyphs we use via Fontel­lo
  • Gen­er­ates all of the var­i­ous fav­i­cons for our web­site (and the HTML code for them) from a sin­gle source image
  • Loss­less­ly min­i­mizes all of the the images our web­site uses via imagemin

…and a bit more too! But that’s a quick overview of what a work­flow automa­tion can do for you. And it’s portable from project to project, because of sep­a­ra­tion of con­cerns that puts the data into our package.json.

Gulp 4

Débuter avec Gulp

Les plug-ins Gulp utiles

Astuces d’utilisation de Gulp

Installer Gulp en tant que package Bower

bower install gulp --save-dev

Installer un plugin Gulp non répertorié en tant que package Bower

bower install <url_git://_du_plugin> --save-dev suivi de sudo npm install <nom_du_plugin> -g. Exemple :

Copier uniquement des fichiers (et pas un chemin complet) dans un dossier

Exemple : j’ai des webfonts accessibles depuis src/webfonts/MyFontsWebfontsKit/webfonts/ et je souhaite les copier via Gulp vers image/webfonts/ sans conserver l’arborescence initiale.

Utiliser le plugin gulp-flatten.

Afficher des logs d’erreurs quand la compilation SASS est foireuse

Logger les erreurs de compilation pour n’importe quel plugin

Ajouter la ligne .pipe(uglify()).on('error', function(e){console.log(e);}). Exemple d’intégration avec gulp-uglify :

Définir un ordre dans lequel les fichiers doivent être chargés

Il peut-être est important que certains fichiers JS soient chargés avant d’autres dans un projet donnée sous peine d’avoir une exception JS au chargement de la page.

Il faut donc dire à Gulp l’ordre dans lequel les fichiers doivent être chargés. Pour cela nous allons utiliser un tableau pour déclarer nos fichiers au lieu d’une regex :

Mettre en place des tâches de cleaning

Nous allons rajouter les tâches de « cleaning » qui serviront à supprimer du dossier contenant les fichiers destinés à la prod certains fichiers avant l’exécution des tâches :

Maîtriser l’ordre dans lequel les tâches Gulp sont exécutées avec gulp.parallel et gulp.series

Solution ultime: Plug-in run-sequence.


To watch and run a single task upon a change, you will use the following syntax:

If your project requires you to run multiple tasks upon a change, you will use one of the following syntaxes:

Simply replace the task string with the method that you need to use for your project and then pass in all tasks that need to be ran as arguments.


Source : How to run Gulp tasks synchronously/one after the other.

Dans un snippet comme celui-ci :

Dans la tâche develop, je veux d’abord exécuter clean et, après seulement, exécuter coffee.

La solution à ce problème est détaillée dans la documentation de Gulp :

Résolutions d’erreurs liées à l’utilisation de Gulp

Plugin gulp-imagemin – SyntaxError: Use of const in strict mode

Message d’erreur complet lorsqu’on lance Gulp et que le script utilise le plugin gulp-imagemin:

Solution ici : Upgrading Node.js to latest version

The module n makes version-management easy:
sudo npm install n -g
sudo n 0.12.2

For the latest stable version:
sudo n stable

Il est possible qu’avec une mise à jour de nodejs, un autre message d’erreur intervienne après lancement de la commande gulp watch :

A ce moment, il ne faut pas tenter de rebuilder ou de ré-installer node-sass, mais de réinstaller gulp-sass :
sudo npm uninstall --save-dev gulp-sass
sudo npm install --save-dev gulp-sass@2

Plugin gulp-imagemin Unhandled rejection Error :

Solution : I am getting this when running gulp serve #101.

Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 6.x

Contrairement à ce que propose le message d’erreur un peu plus bas (Run <code>npm rebuild node-sass to build the binding for your current environment.), il ne faut pas tenter de rebuilder ou de ré-installer node-sass, mais de réinstaller gulp-sass :

Au lancement d’une ou plusieurs tâches Gulp, des problèmes de droits sur les fichiers de destination interviennent :

Attention : dans mon cas, l’erreur provenait du fait que je confondais les commandes « chmod » et « chown ». Message d’erreur complet :

Pour vérifier l’owner et les droits du fichier : ls -l <chemin_vers_le_fichier>. Ce qui donne :

En remontant jusqu’à la racine du dossier responsive, je me suis rendu compte que tout le dossier ainsi que l’ensemble de ses sous dossiers et fichiers avait pour owner « 777 ». J’avais probablement dû, à un moment donné, essayer de donner un maximum de droits en lecture/écriture à ce dossier ou à un fichier en particulier, mais en tapant la commande « chown » au lieu de « chmod »! L’owner du fichier est donc devenu 777. Cet utilisateur n’existe pas sur ma machine. Il faut donc redonner l’appartenance du dossier ou du fichier incriminé à un utilisateur existant.

sudo chown -R intlangf:intlangf /home/intlangf/change30/alainflou/themes/responsive pour donner tous les droits à l’owner intlangf sur le dossier responsive et tous ses sous-dossiers (avec « -R »). Résultat :

Moving NPM packages main files out or bower_components directory

Problem : You’ve got directory bower_components full of packages downloaded from NPM, and there’s a lot of fluff, tests and examples, those serve an important purpose to the development of the project, but has little value to the end user. Most of those files don’t belong to the end product and should not be included to the project repo. That’s what this post is all about, moving packages main files out or bower_components.

gulpfile Cédric

TODO

  • Compression du sprite png
  • Compression des icones svg avec création de la police
  • Séparation plug-ins Gulp dans bower.json
  • Régler le watch pour que la tâche Gulp se relance après des modifs sur les fichiers à surveiller
  • mettre une option comme –watch pour qu’elle tourne en boucle, et par défaut elle rendrait la main

[Hybris] Créer et appeler un fichier *.tag

Objectif: créer un fichier *.tag comprenant les informations de disponibilité relatives à un produit (stock).

La page de détail d’un produit dans Hybris embarque un composant addtocart consigné dans un fichier web/webroot/WEB-INF/views/responsive/cms/productaddtocartcomponent.jsp. Ce composant sert de base à l’affichage de plusieurs éléments :

  • un sélecteur de quantité,
  • des informations de disponibilité produit (stock),
  • des actions (boutons d’ajout au panier, retrait en magasin, ajout à la liste de souhaits.

Nous allons extraire les informations de disponibilité produit du composant productaddtocartcomponent.jsp pour les placer dans un fichier tag spécifique web/webroot/WEB-INF/tags/responsive/product/speProductStock.tag. Voici le bout de code à extraire :

Notre tag ne pourra pas être exploité en l’état : il faut intégrer en en-tête la logique […]

Plusieurs choses dans ces en-têtes :

  • <%@ tag body-content="empty" trimDirectiveWhitespaces="true" %>
  • <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  • <%@ taglib prefix="theme" tagdir="/WEB-INF/tags/shared/theme" %>
  • <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
  • <%@ attribute name="product" required="true" type="de.hybris.platform.commercefacades.product.data.ProductData" %>
  • <%@ attribute name="divCSS" required="false" %>

Dans un fichier *.tag ou *.jsp :

Va afficher en front :

[Hybris] Ajout de nouvelles locales

Les clés de locales du projet se trouvent dans web/webroot/WEB-INF/messages/base_fr.properties.

Dans ce fichier, nous allons initialiser une locale pour le terme quantité. Nous l’écrirons comme suit :

Pour l’utiliser dans un fichier *.tag, utiliser le code suivant :

ou:

Nous pouvons ensuite utiliser des fonctions de formatage propres à JSP comme par exemple fn:toUpperCase pour passer tout le texte en majuscules :

En en-tête du fichier *.tag :

Puis à l’endroit ou vous souhaitez voir apparaître votre texte :

[jQuery] Passer des paramètres à une fonction avec data

Préconisations supports graphiques pour développement front-end

Quelques bonnes pratiques, à l’attention de nos amis graphistes, pour fournir des supports de découpe exploitables.

Prise en charge des différents navigateurs et OS

Proposer une prise en charge des versions n -1 de chaque navigateur et OS (pour les mobiles) sur la base des dernières statistiques (en fonction de la zone géographique visée) accessibles ici https://www.w3counter.com/globalstats.php.
Suivant la cible d’utilisateurs propre au projet on peut affiner si il le faut, mais par contre on ne va pas différer le scope de prise en charge en fonction des zones géographiques (France : telle et telle version, Angleterre : telle et telle version, etc..). Il faut absolument dégager un tronc commun de versions de navigateurs et d’OS.

Autres sources d’informations sur la fréquentation des sites selon les OS, navigateurs, résolutions d’écran, etc…:

Pour une liste exhaustive et chronologique des versions des OS et des navigateurs: https://crossbrowsertesting.com/browsers.

Peut-être se caler sur le support de Flexbox ? http://caniuse.com/#search=flexbox.

Etat des lieux OS et navigateurs au 22/03/2017

  • Internet Explorer 11
  • Edge 14, 13
  • Firefox 52, 51
  • Chrome 57, 56
  • Safari 10, 9.1
  • iOS Safari 10.2, 9.3

Points de rupture

Les points de rupture préconisés à l’heure actuelle (précos fondées sur des stats d’utilisation à l’échelle mondiale – W3Counter Global Web Stats) sont :

  • Limite haute Smartphone : 640px; (soit, à partir de 641px, on passe en vue Tablette)
  • Limite haute Tablette : 768px; (soit, à partir de 769px, on passe en vue Desktop)

On ne cible pas un modèle ou une marque de smartphone ou de tablette, mais des résolutions cibles moyennes.

Si le site exploite la totalité de la largeur disponible en vue Desktop

La page s’étend sur 100% de la largeur de l’écran. A ce moment-là, pas de préconisations si ce n’est de respecter les deux points de rupture donnés ci-dessus.

Pour un site dont la page serait contenue dans une largeur fixe et centrée en vue Desktop

Voici les largeurs maximum préconisées par vue, gouttières (marges) incluses :

  • Smartphone : 640px (soit 610px avec 15px de gouttières à gauche et à droite)
  • Tablette : 768px (soit 738px avec 15px de gouttières à gauche et à droite)
  • Desktop : 1200px (soit 1170px avec 15px de gouttières à gauche et à droite)

Si le principe de gouttières n’est pas maîtrisé côté graphistes, me les envoyer.

Grille

La grille de 12 colonnes est un standard aujourd’hui car elle est pratique à diviser (2,3,4,6 ont tous 12 comme multiple).
Aujourd’hui, la version SASS de Bootstrap nous permet de générer à la volée des grilles du nombre de colonnes qu’on veut.
Donc ils peuvent très bien partir sur du 6, 14, 16, 18, 24 colonnes si ils ont envie.

Ce qui est important par contre, c’est :

  • d’avoir la même grille sur toutes les pages, peu importe la vue (Mobile, Tablette, Desktop)
  • de bien maîtriser le concept de gouttières et de les exploiter pour créer des espaces verticaux entre les différentes zones dans les maquettes

Texte dans les supports graphiques

Utiliser l’unité px pour vos tailles de texte. L’unité pt n’a de valeur que pour les documents destinés à l’impression papier et 10pt ne sont pas l’équivalent de 10px.

Polices de caractères spé

Dans l’idéal, les polices de caractères spé viennent de https://www.google.com/fonts.

Le client peut, bien entendu, imposer l’utilisation d’une police payante si il s’acquitte des droits nécessaires à son utilisation pour le support web.
La plupart du temps, il s’agit d’un service qui fonctionne comme Google Fonts (à savoir qu’il héberge les polices et fournit un CDN qui permet de les exploiter sur son site), mais payant.
Plusieurs types de forfaits sont généralement proposés.
Si le client fait ce choix, nous irons plus loin dans les explications de ce qu’il doit nous fournir.

En tout cas, de notre côté, il faut refuser de passer des fontes TTF à la moulinette. C’est illégal. D’ailleurs, le service en ligne qui permet de convertir des TTF dans des formats exploitables sur le web (Font Squirrel Webfont Generator) bloque la conversion des polices soumises à des droits d’utilisation sur demande des auteurs.
Aucune police Adobe ne passe, par exemple.

Polices de caractères spé : pour aller plus loin

Voir aussi plus bas: cas des polices Adobe

La maquette livrée intègre plusieurs déclinaisons d’une police propriétaire ?

Le client doit dans un permier temps s’acquitter des droits d’utilisation de cette police et de ses déclinaisons et dans un second temps nous fournir des sources dans un format exploitable pour le support web (« Webfont » sur la plupart des services d’achat, j’y viens plus bas).

Polices manquantes identifiées :

  • FuturaStd Book
  • FuturaStd Bold
  • FuturaStd Medium
  • FuturaStd Heavy

J’ai trouvé une police « Futura », diffusée par « Adobe », sur le suite suivant : https://www.myfonts.com/fonts/adobe/futura/. Mais il semble qu’elle soit uniquement commercialisée dans un format à destination des supports « print » (Cliquer sur « Buying choices » : elle est disponible pour une utilisation « Desktop » seulement).

Il existe d’autres polices « Futura » (https://www.myfonts.com/fonts/bitstream/futura/alternate_cuts.html), comme par exemple celle-ci diffusée par « Bitstream » : https://www.myfonts.com/fonts/bitstream/futura/#index. En cliquant sur « Buying choices », on voit que les sources sont disponibles pour une utilisation « Desktop », mais aussi « Webfont » qui nous conviendra mieux.

On voit dans la liste déroulante que cette police se loue pour un nombre de pages vues par mois (10 000, 100 000, 1 000 000, illimité).
Je parle de location car ce type de service fonctionne comme Google Fonts en fournissant un CDN que l’acquéreur peut ensuite déclarer dans les en-têtes des pages de son site afin d’accéder à la police.
Avec ce fonctionnement, la police sera hébergée sur un serveur du service myfonts.com.

Ce service va surveiller le nombre de pages vues qui accèdent à la police et couper l’accès lorsque le seuil de pages à afficher défini lors l’achat est dépassé.
La police sera alors remplacée par une version déclarée en fallback dans nos CSS.
Les personnes en charge de la charte doivent nous communiquer laquelle. Il faut préférer une police répandue, installée sur une majorité de postes comme Arial, Verdana…
Le service http://www.cssfontstack.com/ donne un bon aperçu des polices les plus disponibles suivant les environnements (Win, Mac).

J’ignore par ailleurs si l’itération de la police « Futura » proposée par « Bitstream » conviendra pour la charte que nous devons mettre en place.
Il en existe d’autres sinon (lien déjà donné plus haut – https://www.myfonts.com/fonts/bitstream/futura/alternate_cuts.html).
C’est aux personnes en charge de la charte graphique de nous confirmer ça.

Voilà pour les pratiques actuelles. Le client peut, bien-sûr, trouver un autre service si le mode de fonctionnement ou les tarifs de celui-ce venaient à ne pas convenir.
Je ne le préconise pas particulièrement; c’est juste qu’il met à disposition la police utilisée.

Il reste possible de remplacer les polices propriétaires par des polices gratuites fournies sur le même mode par https://www.google.com/fonts.
Gage aux graphistes de nous en communiquer la liste, avec équivalence pour chaque itération de la police Futura (un remplacement des polices dans les sources psd et une nouvelle livraison sera demandé côté intégrateurs).

Attention si le client nous fournit un pack de polices arrivé de nulle-part à exploiter : il existe encore aujourd’hui des moulinettes en ligne capables, à partir d’une police au format *.TTF de générer des packs « Webfont ».
La plupart de ces outils (comme https://www.fontsquirrel.com/) bloquent la conversion de polices nécessitant des droits d’utilisation.

Dans tous les cas, si le client nous fournit un pack de fichiers, il devra également nous fournir la preuve d’achat et l’autorisation et les conditions d’exploitation qui vont avec.

Cas des polices Adobe

Voici les différentes formules proposées par Adobe : https://typekit.com/plans.

La police Aktiv Grotesk n’est pas disponible dans la formule GRATUIT : https://typekit.com/fonts/aktiv-grotesk/availability.

  • La formule PORTEFEUILLE (50$/an) permet l’affichage de la police Aktiv Grotesk pour 500 000 pages vues/mois.
  • La formule PERFORMANCES (100$/an) permet l’affichage de la police Aktiv Grotesk pour 1 000 000 de pages vues/mois.

Mode d’utilisation légale des polices Adobe sur un site web : https://helpx.adobe.com/fr/typekit/using/add-fonts-website.html.

  1. On se connecte à Typekit
  2. On sélectionne les polices qu’on souhaite exploiter sur notre site
  3. On récupère un code javascript qui nous permet d’afficher les polices choisies dans les pages de notre site (https://helpx.adobe.com/fr/typekit/using/add-fonts-website.html#main-pars_text_4).
  4. Utilisation des noms font-family dans votre code CSS. Pour une police dont la classe ajoutée à l’élément html correspond à wf-aktivgroteskthin-i2-active, le code à ajouter dans les styles est : font-family: aktiv-grotesk-thin, sans-serif;.

Convertir une source TTF en police WEB (formats WOFF, WOFF2 notamment) qu’on hébergerait sur serveur nous appartenant est une pratique illégale pour des polices ADOBE.

Icônes, pictogrammes

Quelques règles de base

  • Eviter de fournir des icônes au format bitmap (BMP, JPG ou GIF récupérées sur internet et sur lesquels ont été appliqués des filtres Photoshop comme l’incrustration de couleur – HTML/CSS/JS ne nous permettent pas de faire la même chose dans un navigateur).

Icônes libres de droits

Icônes spé (designées côté créas)

  • Les icônes spé doivent nous être fournies au format SVG de manière à faciliter la création d’une police d’icônes.
  • 1 icône = 1 fichier SVG. Pas de fichier/planche unique comprenant toutes les icônes.
  • Ces icônes doivent être monochromes; elles pourront être fournies dans n’importe quelle couleur car nous pourrons modifier la teinte via CSS.
  • Si une même icône est assemblée à partir de plusieurs tracés vectoriels, s’assurer que ces derniers sont bien liés avant de générer le SVG. Les tracés vectoriels de vos icônes doivent être convertis en éléments pleins pour être exploitables. Démarche à suivre sous Illustrator et Fireworks.
  • Si vous utilisez Illustrator, sauvegardez vos SVG avec les paramètres définis ici.
  • Avant de nous renvoyer les pictos modifiés, le graphiste peut vérifier l’intégrité de ses fichiers SVG en tentant de les importer dans un outil en ligne de création de polices d’icônes : https://icomoon.io/app/#/select. Il suffit de cliquer sur le gros bouton mauve « Import Icons », d’uploader les fichiers SVG et de vérifier que l’affichage est optimal.

Guide de styles

Un article (en français) qui explique bien l’intérêt du guide et ce qu’il doit contenir : 24 jours de web – Un guide qui a du style.

Un exemple de guide (base Bootstrap 3 – mais il y a trop de choses) : Bootstrap Style Guide Boilerplate by Monolinea.

Cet exemple contient beaucoup d’informations. Le graphiste doit lister uniquement les éléments et composants récurrents qui vont réellement servir. Les indispensables selon moi :

  • Foundation
    • Colors
    • Grid
    • Typography
  • Base styles
    • Buttons (on a 6 boutons dans l’exemple ; pas la peine d’essayer de placer les 6. On peut très bien s’en sortir avec 2, 3 ou 4 différents seulement. Ne créer plusieurs couleurs de boutons que si ils ont réellement un sens d’action différente attendue de la part de l’utilisateur)
    • Form Controls
    • Headings (pareil : on a 6 niveau de titres ; pas la peine d’essayer de tous les placer. On peut très bien s’en sortir avec 4)
    • Images (ici, consigner absolument tous les formats d’images qui seront utilisés. Passé 5 ou 6 formats différents, il y en a trop…)
    • Lists
    • Tables
    • Text Elements
  • Patterns
    • Alerts (ne créer plusieurs couleurs d’alertes que si elles ont réellement un sens différent pour l’utilisateur)
    • Forms
    • Navs – Tous les mécanismes de navigation du site (navigation principale, navigation contextuelle, fil d’Ariane, onglets, pagination…)

Des éléments non présents dans cette liste peuvent être rajoutés au besoin si d’autres composants récurrents sont présents dans les pages.


Travail avec Zeplin ou Avocode

  • Absolument toutes les tailles (pas uniquement les textes) sont en points (pt) dans les maquettes que j’ai vu. Il est très important pour nous d’avoir des tailles en pixels (px).
  • J’ai repéré au moins une taille d’élément (tuto-step-3 > cercle ’30 min’) dont la largeur était un nombre décimal (105.3pt). On ne va pas implémenter d’éléments dont les dimensions sont fondées sur des nombres décimaux.
  • Les informations de couleurs sont en RGB. Il faut nous les fournir en hexadécimal. J’ai vu qu’elles étaient en hexadécimal dans le Guide de Styles. Il faudrait qu’elles s’affichent en hexadécimal directement dans les maquettes afin de ne pas avoir à switcher systématiquement entre le Guide de Styles et les maquettes pour obtenir une couleur.
  • Les sorties proposées pour les icônes/pictogrammes sont au format PDF et PNG. Il nous faudrait une sortie au format SVG ou, à défaut, que toutes les icônes proviennent d’un pack d’icônes de type http://fontawesome.io/ qui fournit une fonte web. Si un pack d’icônes payant a été utilisé, il faudra nous le fournir. Nous n’allons pas traiter les icônes sous forme de sprite PNG, mais sous forme de fonte.
  • Je vois dans la page ‘login’ que tous les éléments graphiques sont au format Bitmap et qu’on ne peut pas les extraire. A ce titre :
    • Les sorties proposées pour les visuels d’illustrations (photos, bannières, etc…) doivent inclure le format Jpg.
    • Les logos et autres éléments qu’on ne considère pas comme des icônes ou pictogrammes doivent être extractibles sous forme de PNGs transparents.
  • Zeplin laisse-t’il la possibilité d’afficher la grille en surimpression sur les maquettes (de manière légèrement transparente) ?

Remarque d’ordre plus général :

  • Les points énoncés dans la liste ci-dessus doivent être respectés pour nous permettre de réaliser un travail optimal de notre côté.
  • On ne s’engage pas sur du Pixel Perfect. On garantira simplement des espacements et des alignements homogènes entre les différents composants des pages. L’intérêt d’utiliser une grille est également de pouvoir caler les composants de pages dessus. Par exemple, un champ texte de formulaire ou un visuel dans une page donnée ne fait pas 300px de large mais 3 colonnes. L’espacement entre deux éléments alignés ne fait pas 30px de large mais la largeur de la gouttière de la grille, etc …
    Je crois qu’ils ont parlé de Pixel Perfect. En responsive, ça n’a pas de sens sachant que toutes les largeurs (voir certaines hauteurs, notamment pour les images) s’adaptent de manière homothétique/fluide en fonction de la largeur de l’écran du support de consultation. Et des supports de consultation, il peut y en avoir 15.000 différents …
  • Sachant que nous acceptons de travailler avec un outil (Zeplin) imposé par nos interlocuteurs afin qu’ils puissent travailler dans les meilleures conditions, nous attendons de leur part d’être réactifs si nous rencontrons des soucis d’exploitation des sources fournies.

Ressources externes

Photoshop etiquette

Photoshop etiquette – A guide to discernable webdesign. Défend une approche organisée du webdesign en promouvant la clarté, l’empathie et l’intention.

Les objets dynamiques liés dans Photoshop

Les objets dynamiques sont des calques qui contiennent les données d’images pixellisées ou vectorielles, comme les fichiers Photoshop ou Illustrator. Ils conservent le contenu source des images avec toutes leurs caractéristiques d’origine, vous permettant ainsi d’apporter des modifications non destructrices au calque. Comme avec du templating, vous y trouverez quelques avantages :

  • moins de répétition ;
  • une propagation des changements « automagique » ;
  • une organisation proche de celle de votre CMS ;
  • et une facilité pour travailler à plusieurs.

[Hybris] Ajouter une référence JS proprement

Cas d’école : j’écris du code JS spécifique pour un bloc (un tag) donné, par exemple la pagination, et je souhaite l’inclure proprement afin :

  • qu’il ne soit pas présent directement dans le template *.jsp du bloc (chemin : /webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag)
  • qu’il soit plutôt déclaré dans un fichier séparé qui contient uniquement des directives JS propres à ce bloc (chemin : /webroot/_ui/responsive/common/js/)
  • qu’il soit exécuté uniquement si une pagination est présente dans la page qui s’affiche dans le navigateur

Ajouter, dans le template de bloc, une classe qui servira à l’exécution des directives JS

Dans /webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag :

Ici, on ajoute une classe js-spe-pagination.

Créer le fichier qui contiendra notre code JS spécifique

Dans /webroot/_ui/responsive/common/js/, créer un fichier acc.spe.pagination.js qui contient le code ci dessous :

  • ligne 3: l'_autoload va définir qu’on exécute le code présent dans la fonction spePagination à la condition que la classe .js-spe-pagination soit présente dans le DOM
  • ligne 1: l’ensemble du code JS spécifique relatif à notre pagination est encapsulé dans un namespace ACC.spePagination qu’on retrouve ensuite à chaque fois qu’on cherche à exécuter une fonction (spePagination: function (){ACC.spePagination.buildDropupPagination();})
  • Attention: noter la présence de virgules lignes 3, 4 et 8 pour bien assurer la transition entre les différentes parties du code

Déclarer la nouvelle référence JS

Dans /webroot/WEB-INF/tags/responsive/template/javaScript.tag, ajouter :

mais aussi dans web/webroot/WEB-INF/wro.xml.

Déclarer des variables (hors fonctions)

Starter kit :

Sample de code pour démarrer récupéré ici : /_ui/responsive/common/js/_autoload.js.

Activer le mode « wro » (la concaténation des fichiers JS et CSS) :

Le mode « wro » permet de concaténer l’ensemble des fichiers JS du projet. Il faut déclarer les scripts dans deux fichiers distincts :

  • /webroot/WEB-INF/tags/responsive/template/javaScript.tag (pour le JS)
  • \webroot\WEB-INF\tags\responsive\template\styleSheets.tag (pour le CSS)
  • /webroot/WEB-INF/wro.xml

Pour le second, le chemin vers chaque ressource Js se déclare comme suit :

Pour tester sans passer par une modification de conf’ plus lourde :

Ne pas versionner de code avec l’exemple ci-dessous!

Dans le fichier /webroot/WEB-INF/tags/responsive/template/javaScript.tag ajouter le caractère ! dans <c:when test="${!wro4jEnabled}"> :

où: