Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 571

Enregistré le: 28 Déc 2004

Message le Sam Sep 23, 2017 10:33

Salut,

Je suis un vieux webmaster qui a commencé en 1998..... j'ai appris le PHP sur le tas avec des bouquins, à l'ancienne quoi....
Actuellement j'ai un problème, mon site web version desktop est pas trop mal, mais la version mobile est une catastrophe, c'est moche et peu ergonomique, pas besoin d'un roman vous comprenez que c'est très problématique en 2017.
J'ai essayé de refaire la version mobile mais je me remets en question, jsuis trop à la ramasse, trop en retard sur tout.
Je suis comme un vieux dinosaure qui n'a pas su évoluer avec son temps :oops:

J'ai tenté le responsive design, flex etc, mais je dois l'admettre je suis dépassé, j'ai beau suivre des tuto mon truc c'est PHP, tout ce bordel ca ne m'interesse pas, ca devrais je le sais, je ne critique pas, juste j'expose la situation.

Mon problème est que actuellement sur le marché il y a quasi que des solution " clef en main " ou TOUT est compris. Je ne peux pas transférer mon site ( mes scripts ) sur un CMS genre wordpress ou autre, j'ai besoin d'avoir toute la partie PHP derrière, tous mes scripts que je voudrais garder, je veux pouvoir continuer à coder à la main.

En fait j'aurais juste besoin d'un " habillage " , simple mais flexible, comme une belle coquille vide qui accueillerait chaleureusement mon code PHP :)

Quelqu'un aurait une solution miracle qui pourrait me sortir du gouffre ?
Haut
10 Réponses
Messages: 8558

Enregistré le: 14 Mai 2003

Message le Sam Sep 23, 2017 13:10

Pour t'aider dans la partie front, il y a des frameworks pas mal foutus:
- http://getbootstrap.com/ le plus connu
Avec quelques thèmes ici:
- https://bootswatch.com/
- http://www.designstub.com/
- http://bootflat.github.io/
- https://startbootstrap.com/
- https://adminlte.io/
- [...]

Et d'autres FW:
- https://foundation.zurb.com/
- http://bulma.io/ (Thèmes: https://dansup.github.io/bulma-templates/)
- https://semantic-ui.com/
- https://getuikit.com/
- http://getskeleton.com/
- [...]

NDLR: c'est la jungle
Haut
Messages: 457

Enregistré le: 1 Avr 2016

Message le Dim Sep 24, 2017 20:58

Par CSS, c'est possible (j'ai ajusté mes sites avec le même problème que toi). Dans mon cas, un en-tête, une colonne à gauche (ou à droite mais je donne uniquement l'exemple à gauche) et un footer.

Le fichier CSS (en partie):

Code: Tout sélectionner
#global {
 position: relative;
 margin-left: auto;
 margin-right: auto;
 height:auto;
 width: 1000px;
 background-color: #D1D1D1;
 text-align: left;
 }
#en_tete { /* bloc supérieur */
 position: relative;
 width: 100%;
 margin-bottom: 0px;
 margin-left: auto;
 margin-right: auto;
 background-color:#61CD34;
 }

#menu
{
  /* menu */
 position: absolute;
 height:auto;
 float:left;
 width:200px;
 margin-left:auto;
 margin-right:auto;
 }

#corps
{
  /* contenu de la page */
 height:auto;
 position: relative;
 margin-left: 200px;
 margin-bottom: 0px;
 padding : 5px;
 background-color: #ffffff;
 }

#pied_de_page { /* bloc bas */
 position: relative;
 text-align: center;
  margin-left: auto;
 margin-right: auto;
 display : table-row
 width:100%;
 background-color: #D1D1D1;
}
   /* utilisé pour menu horizontal   */
a.buttona {
      color:#ffffff;
      text-decoration: inderline;
       font-size: 16px;
       font-weight:18px;
       font-weight:bold;
   }

a.buttona:hover
   {
      color:#0066CC;
       font-size: 16px;
      text-decoration: inderline;
      font-weight:bold;
   }
a.buttona:visited
 {
       font-size: 16px;
       color:#ffffff;
      text-decoration: inderline;
       font-weight:bold;
 }
   /* utilisé pour menu vertical avec table_vertical   */
a.vertical{
      ##display:block;
      color: rgb(0,0,255);
      height:16px;
      line-height:16px;
      ##margin-bottom:0px;
       /* font-size: 16px; */
       text-decoration: underline;
       background-color: transparent;
   }
a.vertical:hover
   {
   /* font-size: 16px; */
   color: #FFFFFF;
   text-decoration: underline;
   background-color: transparent;
   height:16px;
   }
a.vertical:visited
   {
      color: rgb(255,255,255);
      height:16px;
      line-height:16px;
      ##margin-bottom:0px;
       /*font-size: 16px;*/
       text-decoration: underline;
       background-color: transparent   ;
       # font-weight:bold;
   }
#table_vertical
 {
 visibility: visible;
 width: 100%;
 position: relative;
 padding: 5px;
 ## background-color: #99ff99;
 }
#table_vertical td
 {
 height: 30px;
 }
#table_vertical table
 {
 font-size: 16px;
 font-family: Verdana, Geneva, Arial, sans-serif;
 background-color: transparent
 }

    a:hover.buttonb{
      color:#0066CC;
        }                        }
#recherche
{
 /* permet de supprimer le bloc de recherche sur les smartphone */
}
td.colonC
{
   height: 30px;
   font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  /*utilisé pour les navigations verticales*/
}
td.colonD
{
height: 30px;
   font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  /*utilisé pour les navigations verticales*/
}
BODY {
  background: #f0f0f0;
  color: #000000;
  margin: 0px;
      font-family: Arial, Helvetica;
   background-color: #FFFFFF;
   color: rgb(0,0,50);
   margin:0px;
   /*font-size: 12px;*/
   line-height:1.8em;
}
/* liens
*/
A {
  color: #000fff;
  text-decoration: underline;
}
/*
A:hover {
  color: #AABBDD;
  text-decoration: underline;
}
*/
/* début des colonnes
*/


.gauche
{
font-family: Arial, Helvetica;
Color: #000000;
font-size: 12.5px;
      line-height:2em;
      font-weight: bold
}
p
{
font-family: Verdana, Arial, Times New Roman, Helvetica;
   font-size: 13px;
      line-height:1.8em;
  }
  ul
  {
   font-family: Verdana, Arial, Times New Roman, Helvetica;
   font-size: 12px;
      line-height:1.8em;
  }
    ol
  {
   font-family: Verdana, Arial, Times New Roman, Helvetica;
   font-size: 12px;
      line-height:1.8em;
  }

@media screen and (max-width:480px)
{
          img {
      max-width:190px;
   }
   #global{
      width:310px;
   }
   #menu
   {
        width:100px;
        }
        #table_vertical
        {
           width:100px;
           font-size: 12px;
        }
#corps
{
   margin-left: 100px;
}
 a.vertical{
       font-size: 12px;
   }
a.vertical:hover
   {
   font-size: 15px;

   }
a.vertical:visited
   {
       font-size: 15px;
   }
#table_vertical table
 {
 font-size: 15px;
}
          #recherche
        {
        display:none;
        }
        td.colonC
{
  font-size: 10px;
}
td.colonD
{
  font-size: 7px;
}
}
@media screen and (max-width:720px) and (min-width:481px)
{

   #global{
      width:470px;
   }
   #menu
   {
        width:150px;
        }
        #table_vertical
        {
           width:150px;
           font-size: 15px;
        }
#corps
{
   margin-left: 150px;
}
 a.vertical{
       font-size: 15px;
   }
a.vertical:hover
   {
   font-size: 15px;

   }
a.vertical:visited
   {
       font-size: 15px;
   }
#table_vertical table
 {
 font-size: 15px;
}
}


@media screen and (max-width:1000px) and (min-width:840px)
{

   #global{
      width:835px;
   }
   #menu
   {
        width:200px;
        }
        #table_vertical
        {
           width:200px;
           font-size: 12px;
        }
#corps
{
   margin-left: 00px;
}
 a.vertical{
       font-size: 12px;
   }
a.vertical:hover
   {
   font-size: 12px;

   }
a.vertical:visited
   {
       font-size: 12px;
   }
#table_vertical table
 {
 font-size: 12px;
}
}


Le codage d'une page:

Code: Tout sélectionner
<html>

<head>
<!-- entête classic + -->
<link rel="stylesheet" type="text/css" href="../style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<div id="global">
<div id="en_tete">
 <!-- le bloc supérieur: en-tête -->

  </div>

<div id="menu">
 <!-- le bloc gauche (menu de navigation de gauche) -->
         
          </div>

<div id="corps">
 <!-- le bloc central : contenu -->


<div id="pied_de_page">
 <!-- le bloc du bas Fin de contenu avec navigation -->


  </div>
<!-- peu être intéressant de mettre quelque chose ici) -->
</div>


Haut
Messages: 148

Enregistré le: 19 Oct 2016

Message le Lun Sep 25, 2017 15:28

spout a écrit:- http://getbootstrap.com/ le plus connu


Même si ce n'est pas responsive à 100% (il y aura souvent un petit truc à "responsiver" manuellement), pour un débutant comme moi ou un vieux fossile comme toi (Stellvia), Bootstrap, c'est magique.

Dès que tu as compris le principe de rangée et colonne, tu peux faire un beau site responsive.
Haut
Messages: 8558

Enregistré le: 14 Mai 2003

Message le Lun Sep 25, 2017 16:24

klp a écrit:Même si ce n'est pas responsive à 100% (il y aura souvent un petit truc à "responsiver" manuellement)

Ah ? Tu as un exemple ?
Je modifie les variables dans le ̶L̶E̶S̶S̶ SCSS et le watcher s'occupe du reste.
Haut
Messages: 148

Enregistré le: 19 Oct 2016

Message le Lun Sep 25, 2017 17:04

spout a écrit:Ah ? Tu as un exemple ?
Je modifie les variables dans le ̶L̶E̶S̶S̶ SCSS et le watcher s'occupe du reste.


Ce que j'ai voulu dire c'est que la grille est responsive mais il faudra toujours vérifier les contenus et le rendu final pour réaliser un site entièrement responsive et opérationnel.
Je vais m'arrêter là pour ne pas prendre le risque de dire des bêtises car je débute avec Bootstrap :) .

En tout cas, vas y fonce sur Bootstrap, Stellvia !
Haut
Messages: 571

Enregistré le: 28 Déc 2004

Message le Mar Oct 03, 2017 16:28

Merci pour vos réponses.
Du coup je regarde bootstrap.

Par contre je trouve que des tuto bootstrap V3 et la V4 est encore beta ( le site web officiel mets pourtant la V4 bien en évidence ), d'après mes recherche ca fait genre 2 ans que c'est en dev et toujours pas terminé.

Du coup vous conseillez la v3 ou la v4 ?
Haut
Messages: 8558

Enregistré le: 14 Mai 2003

Message le Mar Oct 03, 2017 18:38

Si tu es satisfait avec le thème BS4, opte pour BS4, il ne devrait plus trop tarder à sortir.
Si tu veux plus de thèmes (Bootswatch ou autre) et des ressources (tutos, aides,...), BS3.

Mes sites sont en BS3, mais dès que BS4 sort de la beta et qu'il y a les thèmes Bootswatch, je migrerais dessus.
Haut
Messages: 571

Enregistré le: 28 Déc 2004

Message le Ven Oct 06, 2017 15:30

Merci beaucoup pour le conseil de bootstrap, j'y travail la et c'est vraiment puissant j'adore.

Il me reste un dernier problème que je n'arrive pas à résoudre, qu'utilisez-vous comme lecteur vidéo universel et responsiv ?

J'ai bien vu que bootstrap propose une solution, simple d'ailleurs, mais je suis pas convaincu qu'un code aussi simple soit compatible avec tout les appareil du marché, android, ios, windows, pc, mac, ainsi que la plétitude de navigateur plus ou moins connus. Mes recherche google m'aide pas trop, y en a pas mal mais c'est un sacrès bordel.
Est-ce que vous en connaissez un qui sort du lot ?
Haut
Messages: 571

Enregistré le: 28 Déc 2004

Message le Ven Oct 06, 2017 17:25

C'est pénible de plus pouvoir éditer ses messages sur le forum.... bref.

Je voulais dire qu'on peut faire simplement :

<video class="img-responsive" src="fichier.mp4" autoplay loop/>

en utilisant la class img-responsive de bootstrap, par contre pour <IE9 on fait comment ?
Haut
Messages: 8558

Enregistré le: 14 Mai 2003

Message le Ven Oct 06, 2017 19:53

Pour le support des vieux browsers, il faut utiliser des polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#video
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.