Webmaster "has been"

Stellvia · 23 Septembre 2017

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

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 ?

spout · 23 Septembre 2017

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

patrick_lejeune · 24 Septembre 2017

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>

klp · 25 Septembre 2017

spout a dit:
- 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.

spout · 25 Septembre 2017

klp a dit:
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.

klp · 25 Septembre 2017

spout a dit:
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 !

Stellvia · 3 Octobre 2017

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 ?

spout · 3 Octobre 2017

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.

Stellvia · 6 Octobre 2017

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 ?

Stellvia · 6 Octobre 2017

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 ?

spout · 6 Octobre 2017

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

toprank · 23 Janvier 2018

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