PhzX


Travaux & Tutoriels


Projet OSAKA

Projet Osaka

Refonte du site Osaka.fr

  Osaka.fr a été conçu avec Drupal 7   sur un template de 2011 qui ne répondait plus aux exigences des   normes  W3C, il n'était pas responsive.


Objectifs:
Reproduction du design à l'identique, responsive,
et administrable.
Outil:
Wordpress, photoshop,
html5, css3,
jquery.





Osaka original sous Drupal 7



osaka original

+Cliquez sur l'image



refonte sous Wordpress



osaka refonte

+Cliquez sur l'image



Préparation - Codage - Intégration

Préparation

Tout d'abord nous avons comptabilisé 115 aricles, autant de photos a trier, retraiter, et adapter.
Pour respercter les normes W3C il a fallu contrôler le poids de chaque photos de façon à ne pas dépasser les 20ko pour assurer un chargement de page optimal.









Réferencement

Dans un souci de référencement, nous avons renommé chaque image d'un nom cohérent assurant une taxonomie efficace.
Une phase essentielle dans toute préparation à la mise en ligne. Une recherche test de mots clefs en ligne par google analytique et autres "ahref.com"..a permis d'acquerir un fil précis du contenu, titres et sous titre.


Analyse des difficultées

Une fois avoir bien analyser la problematique du design imposé, c'est à dire une reproduction a l'identique ou presque mais adapté en responsive il a fallu choisir une méthode:
1. Partir d'un template et en faire un thème enfant,
2. Utiliser un starter (thème vide)
3. Ou d'une création en démarrage "0".

Nous avons choisi la première solution.

Création du Thème enfant

La première étape dans la création d'un thème enfant est de créer le répertoire du thème enfant, qui sera placé dans wp-content/themes.
L'étape suivante consiste à créer la feuille de style du thème enfant
Le(style.css).
La feuille de style doit commencer par les lignes suivantes en commentaire (en-tête de feuille de styles) :


theme_enfant

+Cliquez sur l'image

theme_enfant

+Cliquez sur l'image







La dernière étape consiste à mettre en file d'attente les feuilles de styles parents et enfants. La méthode de mise en file d'attente de la feuille de style du thème parent est d'utiliser
wp_enqueue_script() (en anglais) dans le functions.php du thème enfant.

J'ai donc de crée un fichier functions.php dans le répertoire du thème enfant. La première ligne de functions.php du thème enfant est une balise d'ouverture de PHP.








Style css et le header


Ici j'ai commencé par appeler la "Font", changé la couleur du body, et structurer l'apparence du menu principal.
Les puces qui structurent le menu sont séparées par une barre vertical, j'ai donc recréé celle-ci en insérant une image:

body {
background: #000;
color: #cacaca;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
letter-spacing: -0.05em;
font-size: 13px;
line-height: 1.5;
margin: 0;
padding: 0;
}

#logo {margin: 20px
;} @media screen and (max-width:650px)
{#logo {margin-top: -10px;
padding-top: 20px;}}

@media screen and (max-width:960px)
{.headerslider {width: 50%;}}
@media screen and (max-width:650px)
{.headerslider {width: 100%;}}

.menu {
margin: 0;
padding: 0;
width: 100%;
height: 32px;
background: transparent url(../../uploads/2016/04/px-menu.jpg) top left repeat-x;
padding: 1 0px;
}

.menu li{
margin: 0;
list-style: none outside none;
background-image: none;
display: block;
background: transparent url(../../uploads/2016/04/sepa-menu-1.gif)
center right no-repeat;
padding: 0 1px 0 0 !important;
float: left;
height: 32px;

}


La règle CSS "!important" permet de spécifier l'importance de la propriété css en lui donnant un poids plus important.
La règle de feuille de style "!important" est généralement utilisée dans le cas où une propriété de feuille de style css est déclarée plusieurs fois avec des ciblages différents.








La difficulté suivante était le menu secondaire avec les étiquettes.
En effet, le thème parent ne dispose pas de menu secondaire et l'installation d'un plugin c'est avéré être une perte de temps car ce menu est spécifique et sur mesure:






Le thème utilisé s'appel "responsive", son nom veut tout dire mais le responsive a ses limite et quelques media query (pour les tableaux) par exemple sont obligatoire pour être bien adaptable a tous supports.

Donc por ce menu imagé, j'ai codé directement dans le WySyWYG de Wordpress puisque celui-ci propose cette possibilité dans la mesure ou nous restons sur du Css et Html...
Je teste tous mes codes sur mon éditeur avant, j'utilise sublime-text2 et ou Brackets.

theme_enfant

+Cliquez sur l'image

theme_enfant

+Cliquez sur l'image



Pour le Hover (l'animation au survol de la souris), j'ai travaillé sur l'opacité:

.li3active{
   list-style-type : none;
   opacity: 1.0;
   filter: alpha(opacity=100); /* IE8 */
   display:inline-flex; }

.li3active:hover{
   opacity: 0.6;
   filter: alpha(opacity=60); /* IE8 */



Comme vous pouvez le constater la propriété "opacity" ne suffit pas,en effet certain navigateur bien que rares de nos jours, n'interprêtent pas ou mal certaine propriétés alors une solution de remplacement existe le: filter: alpha(opacity=60);

Voici le résultat:



Conclusion

Il a fallu environ 3 semaine pour cette réalisation.
Pour conclure, je tiens à préciser que je n'ai montré et expliqué qu'une infime partie du travail, en effet, pour la mise en page de chaque élément une "class" et un "id" ont étés mis en place pour structurer, placer et styliser de façon a se rapprocher le plus possible du design d'origine...
la mise en ligne sera faite fin Mai.
Pour le moment le site est en test sur un serveur privé pour vérification de bugs éventuels.

Pour cette réalisation, le travail a été partagé en fonction des compétences respectives entre Alain Lefevre.(AWA) et moi même MARTIN Fabien (PhZx.fr)



Wordpress

Wordpress

Service

WHAT WE DO BEST

Applications
Applications

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Productions
Productions

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

Web Designing
Web Designing

Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.

CHOSSE YOUR PLAN

Basic

$19/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Business

$29/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Premium

$39/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

Ultimate

$49/Month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
learn more

OUR VALUABLE CLIENTS

contact

COME IN TOUCH

House -3, Road-2, Block - F,
Akhalia Ghat R/A, Sylhet.
hello@boots4.com
+880 12345 - 67890