Bonsoir,
Merci pour ces différentes réponses.
Il semble effectivement que la solution b) soit une bonne candidate pour constituer la valeur par défaut prise en compte par le générateur.
Elle a le mérite d'être a priori mieux structurée et plus apte à être reconnue par les lecteurs d'écrans.
Concernant les "données structurées", le générateur les prend déjà en charge et les génère pour chaque composant (ex. fil d'ariane, article) pour lequel un schéma est disponible. Je ne me préoccupe pas de la composition de ce "markup schema" puisqu'elle est déduite automatiquement et renseignée en fonction du contexte de la page.
Idem pour la dernière entrée du fil d'ariane, correspondant à la page courante. Celle-ci est de facto grisée et différenciée via CSS.
En cas de réorganisation de la structure du site, le fil d'ariane est recalculé par le composant qui le prend en charge.
Pyxis a écrit :


1) Quelle formation avez-vous suivi ?
2) Vos études vous ont-elles suffisent ou aviez-vous besoin d’un plus (formation en ligne, expérience personnelle) ?
3) Votre travail correspond-t-il à ce que vous pensiez lors de vos années d’études ?
4) Avez-vous des heures fixes et combien d'heures travaillées vous par semaines ?
5) Lors de votre travail êtes-vous amené à vous déplacer ?
6) Est-il facile de se faire embaucher dans ce secteur ?
7) Lors de votre premier jour qu'elle difficultés avez-vous rencontré ?


Et l'eau,

1. infographie/arts graphiques, puis dev en tant qu’autodidacte. J'ai aussi de bonnes notions en marketing / ventes
2. Savoir se remettre en question constamment : les pratiques d'aujourd'hui ne seront pas forcément les mêmes dans 2 - 3 ans (!!)
3. non
4. pas d'heures fixes. Mais il y a une moyenne. Par contre, dans ce métier, il faut comprendre que parfois / souvent, on peut se retrouver à faire du 60 heures
5. question ambiguë
6. oui mais il fait être bon (voir même très bon si on veut se dégager un bon salaire)
7. aucune sur mon métier. Par contre désorienter puisqu'on ne connait personne.

<<<EDIT
Je viens de m'apercevoir que le sujet porte sur le métier de webmaster. Or de mon côté tout comme kustolovic, sommes développeurs
EDIT;
Modifié par niuxe (14 Nov 2019 - 22:43)
bacasable a écrit :
Le problème c'est que cela empêche ensuite d'utiliser la cascade normalement car une propriété déclarée avec !important aura toujours la priorité quoiqu'on fasse. Par exemple tu ne peux plus faire ceci :

.red.section2{
    background-color: red;
}


A moins d'utiliser ensuite !important pour toutes les propriétés ce qui n'aurait plus vraiment de sens.


Ouais ça semblait logique finalement xd .. Ty ^^
Jean-Pierre-Bruneau a écrit :
Comment juger ?? tu ne nous donnes pas ton début de code, as-tu bien démarré ta page en HTML5 ?

&lt;!DOCTYPE html&gt;&lt;html lang='fr'&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;!--[if IE]&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;![endif]--&gt;
ETC...


Oui ^^
Raphael a écrit :
Bonjour,

L'explication est simple : elle est due au position absolute sur ton élément .middle.

La hauteur d'un élément dans une page web est calculée à partir du contenu (dans le flux) au sein de cet élément. Or avec position absolute, tu retires du flux tout le contenu (.middle) de ton footer, il n'occupe donc plus aucune hauteur. Il suffit d'utiliser l'inspecteur d'élément pour s'en assurer.

Le positionnement absolu est à utiliser en dernier recours, uniquement lorsqu'il est souhaitable de sortir du flux, ce qui ne me semble pas être le cas ici (tout ce que tu veux est de déplacer .middle à droite dans le footer, non ?)

Bonne chance Smiley smile


Hello, merci de ta réponse. Hélas ça a rien changé. J'ai décidé de supprimer le footer et de juste placer mon code en fin de page html et je l'ai arrangé comme je le voulais.
Merci d'avoir essayé de régler mon soucis j'ai supprimé l'absolute dcp ^^.
Modifié par Efeelios (14 Nov 2019 - 19:13)
De rien!
Essaye de faire un var_dump de $user_infos juste avant de vérifier le mot de passe, pour voir si tu récupères bien tout ce qu'il faut dans ta BDD?
Sinon attention à deux petites choses :
- Page register cette ligne va merder^^
 $pseudo = $pseudo = htmlentities(trim($_POST['pseudo']));

- Page login, tu fais une deuxième fois la connexion à ta base, donc ça écrase la première qui est la bonne (l'enfer du copié/collé^^). C'est peut-être ça qui fait merder la vérification du mdp d'ailleurs
 $sql = new PDO('mysql:dbname=vip_pro_crm;host=127.0.0.1','root',''); //Connexion à la BDD en PDO
Le Register.php


<?php
/* Connexion à une base MySQL avec l'invocation de pilote */
$dsn = 'mysql:dbname=vip_pro_crm;host=127.0.0.1';
$user = 'root';
$password = '';

try {
    $sql = new PDO($dsn, $user, $password);
} catch (PDOException $e) {
    echo 'Connexion échouée : ' . $e->getMessage();
}

?>


<?php

if(isset($_POST['submit']))
{
$pseudo = $pseudo = htmlentities(trim($_POST['pseudo']));
$mdp = password_hash(htmlentities(trim($_POST['mdp'])), PASSWORD_DEFAULT);

{


$query = $sql->prepare("INSERT INTO utilisateur(pseudo, mdp) VALUES (?,?)");
$query->execute(array($pseudo,$mdp));
	
die("Inscription terminée <a href='login.php'>connectez </a> vous");

}
}	
?>

<form method="POST" action="register.php">
<p>Pseudo : </p>
<input type="text" name="pseudo">
<p>Mot de passe : </p>
<input type="password" name="mdp">
<input type="submit" value="Connexion" name="submit">
</form>


Login.php

<?php
/* Connexion à une base MySQL avec l'invocation de pilote */
$dsn = 'mysql:dbname=vip_pro_crm;host=127.0.0.1';
$user = 'root';
$password = '';

try {
    $sql = new PDO($dsn, $user, $password);
} catch (PDOException $e) {
    echo 'Connexion échouée : ' . $e->getMessage();
}

?>

<?php
session_start();
if(isset($_POST['submit']))
{
	$pseudo = htmlentities(trim($_POST['pseudo']));
	$mdp = htmlentities(trim($_POST['mdp']));

	if($pseudo && $mdp){
		// $mdp = md5($mdp);  Ligne supprimée
		// $sql =mysqli_connect('localhost','root','','vip_pro_crm') or die ('Error'); // Supprimé, il vaut mieux utiliser PDO
		$sql = new PDO('mysql:dbname=vip_pro_crm;host=127.0.0.1','root',''); //Connexion à la BDD en PDO
		
		$query = $sql->prepare("SELECT * FROM utilisateur WHERE pseudo = ?"); //Préparation de la requête

		if($query->execute(array($pseudo))){ //Envoi de la requête
			if($user_infos = $query->fetch(PDO::FETCH_ASSOC)){
				if(password_verify($mdp,$user_infos['mdp'])){ //Vérification du mot de passe
					$_SESSION['pseudo'] = $pseudo;
					header("location:membre.php");
				} else echo "Mot de passe incorrect !!";
			} else echo "Utilisateur non existant !!";
		} else echo "Erreur lors de la requête !!";
	}
}
?>

<form method="POST" action="login.php">
<p>Pseudo : </p>
<input type="text" name="pseudo">
<p>Mot de passe : </p>
<input type="password" name="mdp">
<input type="submit" value="Connexion" name="submit">
</form>
J'aime bien "display: flex" aussi.
En général je rajoute avec un "justify-content" avec un des valeurs suivantes : center, space-around ou space-between, pour avoir une présentation un peu plus propre sans se compliquer la vie.
Et si cela risque de déborder de l'écran un " flex-wrap: wrap" règle le problème facilement.

Pour tester on peut utiliser l'inspecteur de code de Firefox ou Chrome ( touche F12).
Modifié par bazooka07 (14 Nov 2019 - 14:14)
Bonjour,

Dans le cadre de mes études je dois réaliser une interview d'un professionnel.
Voulant me diriger vers cette voie et étant assez compliqué d'avoir une interview par mail, je me tourne vers cette plateforme.
Je vous laisse ci-dessous mes questions en espérant que vous ayez le temps d'y répondre.

1) Quelle formation avez-vous suivi ?
2) Vos études vous ont-elles suffisent ou aviez-vous besoin d’un plus (formation en ligne, expérience personnelle) ?
3) Votre travail correspond-t-il à ce que vous pensiez lors de vos années d’études ?
4) Avez-vous des heures fixes et combien d'heures travaillées vous par semaines ?
5) Lors de votre travail êtes-vous amené à vous déplacer ?
6) Est-il facile de se faire embaucher dans ce secteur ?
7) Lors de votre premier jour qu'elle difficultés avez-vous rencontré ?
Bon, j'ai viré les fausses-balises <col-md-4> qui me choquaient trop Smiley smile

J'ai fait un essai en Flexbox qui donne globalement ceci :


/* layout */
@media (min-width: 576px) {
  .dossiers-documentaires .row {
    display: flex; /* on passe en modèle Flexbox */
  }
  .dossiers-documentaires [class^="dossier"] {
    flex: 1; /* on répartit équitablement les enfants */
  }
  .dossiers-documentaires [class^="dossier"]:not(:first-child) {
    margin-left: 1rem; /* marge à gauche de tous sauf le premier enfant */
  }
}


Le résultat est dispo ici :
https://codepen.io/raphaelgoetter/pen/eYYPevR?editors=1100
spip93 a écrit :

Comment obtenir le même résultat (voir comme sur la maquette dans l'idéal) en faisant différemment (sans passer par des positions relatives et absolute) et en plus propre, sans (trop) bidouiller ?
Autrement dit, comment avoir plusieurs blocs avec contenu différent avec la même hauteur et à la même hauteur ?

Je vais faire quelques tests sur Codepen, mais la réponse à ces questions qui me vient immédiatement à l'esprit est : Flexbox et Grid Layout car c'est le comportement naturel des éléments d'y avoir la même hauteur.
Modifié par Raphael (14 Nov 2019 - 10:44)
Bonjour,

L'explication est simple : elle est due au position absolute sur ton élément .middle.

La hauteur d'un élément dans une page web est calculée à partir du contenu (dans le flux) au sein de cet élément. Or avec position absolute, tu retires du flux tout le contenu (.middle) de ton footer, il n'occupe donc plus aucune hauteur. Il suffit d'utiliser l'inspecteur d'élément pour s'en assurer.

Le positionnement absolu est à utiliser en dernier recours, uniquement lorsqu'il est souhaitable de sortir du flux, ce qui ne me semble pas être le cas ici (tout ce que tu veux est de déplacer .middle à droite dans le footer, non ?)

Bonne chance Smiley smile
Modifié par Raphael (14 Nov 2019 - 10:37)
Bonjour à tous et à toutes,

Désolé si mon titre n'est pas clair, mais ce n'est pas évident de résumer en 70 caractères Smiley langue

Je sollicite votre aide et vos compétences, car les miennes sont un peu limitées.
Voici (une partie de) mon code HTML :
<div class="title-h3">Nos dossiers documentaires</div>
<div class="dossiers-documentaires">
    <div class="container-fluid">
        <div class="row">
            <col-md-4>
                <div class="dossier1">
                    <div class="clear"></div>
                    <h3>Le mois de la bande-dessinée</h3>
                    <hr>
                    <div class="node-item-content node-item-content-">
                        <div class="node-item-thumb"><img
                                src="https://example.fr/data/example.fr/application/node/3677/thumb.jpg?v=1573548673">
                        </div>
                        <div class="node-item-teaser">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend fringilla magna
                            vitae consequat. Aenean accumsan ligula nisl, ut vestibulum libero tempus eu. Donec in justo
                            vehicula, pulvinar lorem eget, mollis ante. Phasellus id eros congue, fermentum nibh vitae,
                            auctor dui. Vivamus gravida tortor id nisl mattis tempor. Donec et porta ligula.
                            Pellentesque habitant morbi tristique senectus... </div>
                        <div class="node-item-readmore">
                            <a href="https://example.fr/node/content/nid/3677">
                                <i class="fa fa-link"></i> Lire la suite </a>
                        </div>
                    </div>
                </div>
            </col-md-4>
            <col-md-4>
                <div class="dossier2">
                    <div class="clear"></div>
                    <h3>Des robots et des hommes dans les livres</h3>
                    <hr>
                    <div class="node-item-content node-item-content-">
                        <div class="node-item-thumb"><img
                                src="https://example.fr/data/example.fr/application/node/3678/thumb.jpg?v=1573548838">
                        </div>
                        <div class="node-item-teaser">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus leo sem, ut
                            fermentum elit condimentum sit amet. Pellentesque ullamcorper metus vitae accumsan volutpat.
                            Etiam fermentum, elit nec suscipit malesuada, purus lectus tempus velit, non egestas massa
                            ipsum quis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis
                            tortor at tortor vehicula efficitur quis... </div>
                        <div class="node-item-readmore">
                            <a href="https://example.fr/node/content/nid/3678">
                                <i class="fa fa-link"></i> Lire la suite </a>
                        </div>
                    </div>
                </div>
            </col-md-4>
            <col-md-4>
                <div class="dossier3">
                    <div class="clear"></div>
                    <h3>La folie dans l'art</h3>
                    <hr>
                    <div class="node-item-content node-item-content-">
                        <div class="node-item-thumb"><img
                                src="https://example.fr/data/example.fr/application/node/3679/thumb.jpg?v=1573548959">
                        </div>
                        <div class="node-item-teaser">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae sapien in orci sagittis
                            ultrices sit amet id lacus. Etiam imperdiet eget elit eleifend feugiat. Vivamus nec diam
                            augue. Fusce est sem, egestas eget nulla varius, malesuada hendrerit erat. Sed quis eros mi.
                            Mauris in auctor ipsum. Nam nec felis id est aliquam venenatis nec in nulla. Orci varius
                            natoque penatibus et magnis dis parturient... </div>
                        <div class="node-item-readmore">
                            <a href="https://example.fr/node/content/nid/3679">
                                <i class="fa fa-link"></i> Lire la suite </a>
                        </div>
                    </div>
                </div>
            </col-md-4>
        </div>
    </div>
</div>

Et (une partie de) mon code CSS :
/* Dossiers documentaires */
.dossiers-documentaires {
    position: relative;
}
.dossier1, .dossier2, .dossier3 {
	width: 30%;
	display: inline-block;
	border: solid 1px #e6e6e6;
	border-radius: 10px;
    position: absolute;
    top: 0;
    height: 163px;
}
.dossiers-documentaires h3 {
	font-size: 0.7em;
	display: block;
}
.dossiers-documentaires .node-item-teaser {
    display: none;
}
.dossiers-documentaires .pull-right {
    position: absolute;
    z-index: 1;
}
.dossiers-documentaires .node-item-thumb img {
	width: 100%;
	position: absolute;
	top: 0;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0 !important;
}
.dossiers-documentaires h3 {
	font-size: 12px;
	margin-top: 107px;
	font-family: "RobotoSlab-Regular";
	margin-bottom: 0;
}
.dossier1 {
    left: 2%;
  }
.dossier2 {
    left: 35%;
}
.dossier3 {
    right: 2%;
}
.mediatheque {
    height: 521px;
}

Voici ce que ça donne en résolution 2560px :
upload/1573721222-40463-dossierdocs2560px.jpg
Voici ce que ça donne en résolution 1920px (rassurez-vous, je vais pas vous faire toutes les résolutions) :
upload/1573721446-40463-dossierdocs1920px.jpg
Voici la maquette (autrement dit ce que je souhaiterais dans l'idéal) :
upload/1573721660-40463-dossierdocsmaquette.jpg

Bref...
Comme vous pouvez le voir, c'est pas super propre, dans le sens où pour arriver à ce résultat j'ai dû passer par des positions relative (sur la div .dossiers-documentaires) et absolute (sur .dossier1 .dossier2 et .dossier3). En effet, j'ai dû faire ça pour avoir les 3 blocs/dossiers à la même hauteur. Sans ça, j'avais le bloc du milieu plus haut que les 2 autres.
Comment obtenir le même résultat (voir comme sur la maquette dans l'idéal) en faisant différemment (sans passer par des positions relatives et absolute) et en plus propre, sans (trop) bidouiller ?
Autrement dit, comment avoir plusieurs blocs avec contenu différent avec la même hauteur et à la même hauteur ?

Il y a 2 choses à prendre en compte :
- Les 3 dossiers sont appelés dynamiquement et vont (donc) changer => faire comme si les 3 dossier avaient le même nombre de caractères que le dossier2 (celui du milieu)
- (Dans le HTML) Comme ces 3 dossiers sont appelés dynamiquement, je n'ai pas la main (et c'est pas moi qui l'ait écrit Smiley langue ) sur le code HTML entre les balises .dossier1, .dossier2 et .dossier3

Je vous remercie pour votre aide
Bonne journée

P.S : Pour ceux que ça intéresse, je peux leur envoyer en MP l'adresse du site. Je préfère qu'elle ne soit pas publique, vis à vis de notre client, désolé
Hello vip,

Pour la partie PHP, ça ferait un truc du genre :

<?php
session_start();
if(isset($_POST['submit']))
{
	$pseudo = htmlentities(trim($_POST['pseudo']));
	$mdp = htmlentities(trim($_POST['mdp']));

	if($pseudo && $mdp){
		// $mdp = md5($mdp);  Ligne supprimée
		// $sql =mysqli_connect('localhost','root','','vip_pro_crm') or die ('Error'); // Supprimé, il vaut mieux utiliser PDO
		$sql = new PDO('mysql:dbname=vip_pro_crm;host=127.0.0.1','root',''); //Connexion à la BDD en PDO
		
		$query = $sql->prepare("SELECT * FROM utilisateur WHERE pseudo = ?"); //Préparation de la requête

		if($query->execute(array($pseudo))){ //Envoi de la requête
			if($user_infos = $query->fetch(PDO::FETCH_ASSOC)){
				if(password_verify($mdp,$user_infos['mdp'])){ //Vérification du mot de passe
					$_SESSION['pseudo'] = $pseudo;
					header("location:membre.php");
				} else echo "Mot de passe incorrect !!";
			} else echo "Utilisateur non existant !!";
		} else echo "Erreur lors de la requête !!";
	}
}

J'ai utilisé PDO plutôt que mysqli_connect etc, c'est vachement mieux (par contre, il faudra ajuster par rapport à ta base, je te conseille de lire ça: https://www.php.net/manual/fr/pdo.construct.php)

Ensuite, sur ton script d'enregistrement des utilisateurs (à faire en PDO aussi...) tu dois avoir quelque part un bout de code qui ressemble à ça:

$pseudo = $pseudo = htmlentities(trim($_POST['pseudo']));
$mdp = md5(htmlentities(trim($_POST['mdp'])));
mysqli_query($sql, "INSERT INTO utilisateurs(pseudo, mdp) VALUES ('$pseudo','$mdp')")

Il faudrait remplacer par :

$pseudo = $pseudo = htmlentities(trim($_POST['pseudo']));
$mdp = password_hash(htmlentities(trim($_POST['mdp'])), PASSWORD_DEFAULT);
$query = $sql->prepare("INSERT INTO utilisateurs(pseudo, mdp) VALUES (?,?)");
$query->execute(array($pseudo,$mdp));


Et voilà! Bon courage tiens-nous au courant Smiley smile
25 Dernières réponses