_blank

_Blank – Etape 05

23 mars 2019

Précédent Suivant

1Dans votre navigateur…

Lire index-ALL.html avec Firefox
Vous devez pouvoir accéder à Développement Web > Choisir Vue Adaptive
Régler la vue sur 549px de large – Restitution de la page depuis un terminal ayant une largeur de 549px (pour mémoire – le point de rupture défini dans la feuille de style est @media (min-width: 550px) – ce qui signifie, pour les écrans plus grands que 550px.

Observations

La restitution est conforme à ce qui est défini dans le code HTML
La restitution n’est pas conforme à ce qui est « juste » pour un utilisateur.
- La seconde zone 1/3-2/3 propose, sur un terminal de petite taille, la lecture des informations secondaires avant le propos principal. Ce n’est pas logique.
  (Cette réflexion fait appel à la notion d’ergonomie et d’expérience utilisateur – UX – mais c’est également une démarche pragmatique…)
Les marges bas des propos principaux et propos secondaires sont manquantes.

2Correction de l’ordre des colonnes

Plusieurs options possibles

Dupliquer la colonne 1/3 après la colonne 2/3
1. Ne rendre visible ce dupli de la colonne 1/3 qu’au point de rupture défini
2. Rendre invisible l’original de la colonne 1/3 à ce même point de rupture défini
Dupliquer la section précédente – colonne 2/3+1/3 – et se servir du style pour corriger le placement et l’ordre des colonnes avant le point de rupture défini – pour les terminaux à écran large.

L’option 1 est intéressante, mais « bancale ».
Si une correction survenait, il faudra la réaliser deux fois et ne pas oublier de la réaliser deux fois afin de transmettre la même info sur « grand écran » et « petits écrans ».

Changer l’ordre des colonnes à l’aide de la feuille de style reste donc la meilleure

solution.

3Manipulation HTML

Dans page index-ALL.html, depuis Notepad++ :

Copier le contenu des lignes 66 à 72.
Remplacer le contenu des lignes 77 à 83 par la copie précédente.
Ligne 76 (le commentaire) – ajouter ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE

Le code modifié (lignes 76 à 84)

<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">
		<div class="eight columns bleu">
		<p>2</p>
		</div>
		<div class="four columns orange">
		<p>1</p>
		</div>
	<!-- /2 COLONNES 1/3+2/3 -->

L’ordre « naturel » des colonnes sur « petit écran » est retrouvé.
Afin de la bonne restitution sur « grand écran » de l’ordre des propos – en accord avec notre projet – Il faut modifier l’ordre des colonnes.
<div class="eight columns bleu"> doit passer à droite et <div class="four columns orange"> à gauche – dans sa restitution grand écran.

Ajouter une class supplémentaire aux class déjà en place afin de corriger le comportement défini (ici le placement) des colonnes. (bureauDroit et bureauGauche)

Le code modifié (lignes 76 à 84)

<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<div class="eight columns bleu bureauDroit">
		<p>2</p>
		</div>
		<div class="four columns orange bureauGauche">
		<p>1</p>
		</div>
	<!-- /2 COLONNES 1/3+2/3 -->

4Manipulation CSS + HTML

Dans Notepad++ > créer un nouveau document > Le sauvegarder dans HTML CSS>Site>css – Le nommer monstyle.css (choisir css – cascadind style sheet au moment de son enregistrement si requis)

Le positionnement des colonnes s’inscrit dans le flux et est relatif – relatif à la définition qui en est faite dans la page HTML – où se trouve la colonne ? Un contenant ? Avant ou après telle(s) autre(s) colonne(s) ?
(.container est lui même en position:relative;)

Le comportement des colonnes est défini ligne 38 de skeleton.css.

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

Notre correction doit intervenir sur le media query qui cible le « grand écran ».

@media (min-width: 550px) {
(…)
}

Depuis Notepad++ dans monstyle.css > Définir les class bureauGauche et bureauDroit, dans le media query qui cible le « grand écran ».

@media (min-width: 550px) {

.bureauGauche {

}
.bureauDroit {

}
}

Pour la suite – voir les corrections apportées – lier la feuille de style à la page HTML.
Dans Notepad++, un saut de ligne à la fin de la ligne 23, et insérer <link rel="stylesheet" href="css/monstyle.css"> – code qui nous sert à lier la feuille de style précédemment créée – appelée après skeleton.css afin de « corriger » les définitions qu’elle contient.

5Manipulation CSS

Les modifications CSS réalisées se voient/constatent dans la lecture du document HTML auquel la feuille de style est liée, depuis le navigateur.

Dans Notepad++ > monstyle.css > .bureauDroit devient

.bureauDroit {
position: absolute;
right: 0;
}

Dans votre navigateurExplication

A l’intérieur de .container la proposition position: relative; dont hérite notre colonne est passé en position:absolute; et right: 0; indique que le bloc bleu doit se positionner à 0 sur un axe Abscisses/ordonnées imaginaire dont le centre serait le coin haut-droit du .container.

6Manipulation CSS

Les modifications CSS réalisées se voient/constatent dans la lecture du document HTML auquel la feuille de style est liée, depuis le navigateur.

Dans Notepad++ > monstyle.css > .bureauGauche devient

.bureauGauche {
margin-left: 0;
}

Dans votre navigateurExplication

Nous corrigeons les définitions faites ligne 55 et 58 dans skeleton.css.

.column,
.columns {
    margin-left: 4%; }
.column:first-child,
.columns:first-child {
    margin-left: 0; }

La marge à gauche des colonnes – ligne 58 – est ramené à 0 pour le premier enfant dans le code – ici notre colonne bleue.
La colonne orange – qui dans le code n’est pas le premier enfant – est donc conditionnée par la définition ligne 55 – dont la marge à gauche est spécifiée par la valeur 4% – que nous ramenons à 0 pour recréer visuellement la marge séparant les deux colonnes.

7Dans votre navigateur…

Lire index-ALL.html avec Firefox
Vous devez pouvoir accéder à Développement Web > Choisir Vue Adaptive
Régler la vue sur 549px de large – Restitution de la page depuis un terminal ayant une largeur de 549px (pour mémoire – le point de rupture défini dans la feuille de style est @media (min-width: 550px) – ce qui signifie, pour les écrans plus grands que 550px.

Observations

La restitution est conforme à ce qui est défini dans le code HTML
La restitution est conforme à ce qui est « juste » pour un utilisateur et à notre projet
Les marges bas des propos principaux et propos secondaires sont manquantes.

8Code source des cette étape

HTML

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/monstyle.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body class="gris">

<!-- PAGE -->
<div class="container">

	<!-- ENTETE -->
	<div class="row">
		<div class="twelve columns vert">
		<p>1</p>
		</div>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<p>1</p>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<div class="four columns magenta">
		<p>1</p>
		</div>
		<div class="four columns magenta">
		<p>2</p>
		</div>
		<div class="four columns magenta">
		<p>3</p>
		</div>
	<!-- /ACCUEIL ligne 2 -->
    </div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<div class="eight columns bleu">
		<p>1</p>
		</div>
		<div class="four columns orange">
		<p>2</p>
		</div>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<div class="eight columns bleu bureauDroit">
		<p>2</p>
		</div>
		<div class="four columns orange bureauGauche">
		<p>1</p>
		</div>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<div class="twelve columns bleu">
		<p>1</p>
		</div>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<div class="twelve columns vert">
		<p>1</p>
		</div>
	<!-- /PIED -->
	</div>

 
<!-- /PAGE -->
</div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

CSS (monstyle.css)

@media (min-width: 550px) {

.bureauGauche {
margin-left: 0;
}
.bureauDroit {
position: absolute;
right: 0;
}

}

Précédent Suivant