[VTAB-TEAM-LINDER-PARTNER-1][OSC] - Revue de la charte Graphique /* ATTENTION - il a été décidé que pour cette version de module fait-maison par Saphyra Interactive à terme maintenue par l'équipe VTAB, que l'on va partiellement conserver la logique de OSCommerce concernant la philosophie des tableaux. nous allons nous servir d'une astuce intuitive: 1) nous allons créer un tableau (, une et une
correspondant à une seule et même cellule) 2) dans ce tableau, sera construite une structure de sectionnement en
,
, , cela permettra au responsive d'être plus efficace et on respecte à 80% la philosophie OSCommerce. FIXME by NOTE ceci est expérimental, donc à voir si ça tiendrait. Du fait du nombre massif des éléments DE CETTE PAGE (et de ce qui en découlerait) qui seront à revoir pour transformer le design en design responsive et lui appliquer une nouvelle charte graphique.. .. il est alors plus judicieux de globaliser un TAG unique pour cette tâche pour ne pas alourdir de commentaires le code déjà suffisemment alourdi comme cela! En gros, ici, pour cette méga-tâche, je vais ré-utiliser le même format maison de commentaires que la tâche [SI-LINDER-PARTNER-2][OSC] pour cette tâche précise: --> pour en comprendre les méandres, voir le fichier /[!] - Saphyra-Interactive-TaskList-Explanations/[SI-LINDER-PARTNER-2][OSC]--semantic.php ---> mais à la place de [SI-LINDER-PARTNER-2][OSC], ici, on abordera le fichier et sa logique comme faisant parties de la tâche [VTAB-TEAM-LINDER-PARTNER-1][OSC] */ // <- [VTAB-TEAM-LINDER-PARTNER-1][OSC] - Revue de la charte Graphique ?>[VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions]:{ [VTAB_1_MODULE_VTAB_SIXTHEMELINKS] - 1/ dans la nouvelle version du design, on a souhaité avoir un système de 6 vignettes affichées bien spécifiquement en desktop et tablette, cela propose alors 6 liens à thèmes (identiques à ceux du diaporama, les chemins des vignettes sont les mêmes que ceux employés dans le diaporama (voir CODETAG[VTAB_1_DIAPORAMA] fichier: '/includes/header.php') mais il peut servir aussi en hors responsive, c'est pour cela qu'il n'a pas été étiquetté comme uniquement desktop/tablette de plus, il est important de spécifier que la structure ne doit pas s'afficher en cas qu'une catégorie de produits est sélectionnée sa charte graphique a été définie par Aurore de l'équipe VTAB il sera sous forme de cartes empilées (effet via un fichier SVG créé par Bérengère de l'équipe VTAB) il y a beaucoup de code dans ce 6 vignettes, il a été développé par Tempérance de l'équipe VTAB/Saphyra Interactive il y a deux choses importantes à considérer: a) il se sépare en 3 éléments : a.a) le code CSS de mise en page a.b) le code HTML/PHP de structure et de dynamisme de chargements des vignettes dans le code a.c) le code JAVASCRIPT de l'interaction du l'utilisateur et du navigateur avec le système de 6 vignettes b) il ne se sert absolument pas d'UIKit cette fois puis finalement, le nom des classes CSS et le nom des éléments est volontairement en Anglais, car respectant le fait que ce système de 6 vignettes est un système de 6 liens à thèmes au final, d'où le nommage SixThemeLinks - ATTENTION: à l'instar des boxes, dans la nouvelle version du design et de la charte graphique, cette page module fait-faison implique pour, un meilleur contrôle des éléments en responsive respectant l'homogénéïté de OSCommerce de conserver la structure habituelle sous forme de tableaux HTML mais nous le ferons partiellement comme expliqué plus haut et ce même si il s'agit d'une page qui est inclue dans les fichiers du coeur de OSCOMMERCE comme MODULE (mais sans pour autant en faire partie), NOTE - donc, en cas de mises à jours, il faudra comparer si ce fichier n'est pas réécrit par un quelconque tiers - 2/ ici se trouve la structure CSS que l'on inclue depuis différents fichiers CSS externes créés à cet effet - 3/ ici se trouve la structure HTML qui construit le système de 6 vignettes et le PHP qui se charge de dynamiser le 6 vignettes actuel on ajoute une classe précise spéciale: --weHaveChosenCategory si on est dans une catégorie de produits au lieu de la page d'accueil - 4/ ici se trouve la structure JAVASCRIPT qui permet autant à l'utiliateur qu'au navigateur d'intéragir avec le diaporama actuellement nous n'utilisons pas de structures Javascript, mais j'ai repéré des plugins de mises en page via jQuery + jQuery UI, donc, on prévoit la possibilité dans un futur proche, mais on commente - 5/ on vide éventuellement les variables PHP utilisées ici dans le but de purger la mémoire du serveur et de libérer par extension la mémoire - 6/ initialement l'on voulait un effet d'empilement de cartes, on utilisait initialement une structure en background-image pour le fond de la vignette (fond qui était en réalité un SVG d'empilement de cartes), désormais, au vu de la non-compatibilité entres les différentes résolutions, nous avons décidé de nous en séparer, au profit d'une seule et unique image () qui contiendra tout en un, et pré-assemblée cela signifie donc : (l'empilement de carte + la vignette, le tout pré-assemblé dans un logiciel graphique) = la vignette pour le nom des vignettes: initiallement le nom des fichiers de vignettes était appelée 'vignetteX.png', désormais cela sera sensiblement différent et sera alors 'carte_vignetteX.png' (voir CODETAG[VTAB_1_OSC_MODULE_VTAB_SIXTHEMELINKS_HOME_PAGE_NEW_MECHANISM_VALUE]) l'ancienne structure a été mise en commentaire pour un usage éventuel futur lors d'une version à venir du site (voir CODETAG[VTAB_1_OSC_MODULE_VTAB_SIXTHEMELINKS_HOME_PAGE_NEW_MECHANISM_STRUCTURE]) -7/ masquage du titre "Liens à thèmes" par commentarisation HTML } */ ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] ************************************************************************/ ?>