Webmaster "has been"

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Stellvia, 23 Septembre 2017.

  1. Stellvia
    Stellvia WRInaute impliqué
    Inscrit:
    28 Décembre 2004
    Messages:
    566
    J'aime reçus:
    5
    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 ?
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 162
    J'aime reçus:
    337
    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
     
  3. patrick_lejeune
    patrick_lejeune WRInaute occasionnel
    Inscrit:
    1 Avril 2016
    Messages:
    426
    J'aime reçus:
    0
    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:
    #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:
    <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>
    
    
    
     
  4. klp
    klp WRInaute discret
    Inscrit:
    19 Octobre 2016
    Messages:
    154
    J'aime reçus:
    4
    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.
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 162
    J'aime reçus:
    337
    Ah ? Tu as un exemple ?
    Je modifie les variables dans le ̶L̶E̶S̶S̶ SCSS et le watcher s'occupe du reste.
     
  6. klp
    klp WRInaute discret
    Inscrit:
    19 Octobre 2016
    Messages:
    154
    J'aime reçus:
    4
    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 !
     
  7. Stellvia
    Stellvia WRInaute impliqué
    Inscrit:
    28 Décembre 2004
    Messages:
    566
    J'aime reçus:
    5
    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 ?
     
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 162
    J'aime reçus:
    337
    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.
     
  9. Stellvia
    Stellvia WRInaute impliqué
    Inscrit:
    28 Décembre 2004
    Messages:
    566
    J'aime reçus:
    5
    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 ?
     
  10. Stellvia
    Stellvia WRInaute impliqué
    Inscrit:
    28 Décembre 2004
    Messages:
    566
    J'aime reçus:
    5
    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 ?
     
  11. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 162
    J'aime reçus:
    337
  12. toprank
    toprank Nouveau WRInaute
    Inscrit:
    22 Janvier 2018
    Messages:
    4
    J'aime reçus:
    0
    je suis dépassé moi aussi, j'ai commence en 2000 avec du html et des bouquins sur php. Sinon ça doit être possible d'integrer un vieux design sans toucher au code html ou juste en ajoutant une balise viewport et un JS par ex avec http://mmenu.frebsite.nl
     
Chargement...
Similar Threads - Webmaster been Forum Date
Impossible de lire le sitemap (webmaster tools) Crawl et indexation Google, sitemaps 17 Novembre 2021
Pas de données à jour pour Webmaster tools Google : l'entreprise, les sites web, les services 22 Septembre 2021
webmaster tools vue d'ensemble Référencement Google 25 Février 2021
Problème d’analyse de mon site web sur bing webmaster Référencement Bing 26 Novembre 2020
Questions sur la Webmaster Tools (Bing) Référencement Bing 28 Juin 2020
Pages exclues dans le webmaster tools Développement d'un site Web ou d'une appli mobile 22 Janvier 2020
Google webmaster tool trouve des pages qui n'existent pas.... ?! Crawl et indexation Google, sitemaps 1 Novembre 2019
Comment s'inscrire sur Baidu Webmaster Tools (ziyuan.baidu.com) Autres moteurs de recherche connus 9 Septembre 2019
Cibler prospects webmaster en difficulté Problèmes de référencement spécifiques à vos sites 2 Septembre 2019
Webmaster tools - Impossible de lire le sitemap Crawl et indexation Google, sitemaps 31 Juillet 2019
Propriétés ajoutées à webmaster tool pour un site unique Crawl et indexation Google, sitemaps 14 Juillet 2019
Petite piqûre de rappel : vidéos Google pour SEO et webmasters Référencement Google 7 Avril 2019
Problème de clics + impressions Google #WebmasterTools Référencement Google 13 Juillet 2018
webmaster tools Référencement Google 10 Juillet 2018
Outils webmaster Google : analyse de la position Débuter en référencement 23 Janvier 2018
Différence entre Webmaster tools et analytics Crawl et indexation Google, sitemaps 16 Novembre 2017
Webmaster Tools / Google Search Console Débuter en référencement 9 Novembre 2017
Erreurs d'exploration GG webmaster tools Crawl et indexation Google, sitemaps 27 Juillet 2017
Premsgo.fr Webmaster tool du moteur de recherche Français Autres moteurs de recherche connus 3 Juillet 2017
Formation référencement pour jeune webmaster Débuter en référencement 9 Avril 2017