Avis site internet

Répondre
Partager Rechercher
Bonjour tout le monde pour mon TPE j'ai fait un jolie site internet.

C'est "rendu" et finit mais j'aimerais avoir quelques avis sur le site au niveau du design et pourquoi pas du contenu.

Voici le lien. Ne soyez pas trop méchant !
Message supprimé par son auteur.
Essaye d'aérer un peu plus tes textes, c'est plus agréable pour la lecture. Essaye aussi de faire un menu un petit plus clair dans le sens ou tu devrais essayer de mieux distinguer tes parties et tes sous parties. Sinon essaye de trouver des couleurs un peu plus sobre, moins agressive pour l’oeil. Enfin c'est déjà vraiment pas mal du tout pour un TPE.
Ah je m'était dit que pour faire ressortir le titre qu'il fallait la couleur opposé.
Donc il faudrait que je fasse un rouge moins foncé voir de l'orange.

Le post-it je voyais vraiment pas quoi mettre de mieux comme fond.

Merci de cette aide je peut plus modifier mais ça m'aidera pour le suite.

@Eno : Peut tu être plus clair j'ai un peu de mal à comprendre de manière précise.

@Ternel : Ni vu ni connu . Merci

@$¥ƒ : Pour l'aération c'est vrai qu'il y a trop peu d'espace. Pour les couleurs merci, c'est vrai que c'est trop flash comme l'a dit Cerba.

Merci à tous de votre aide, même si je peut pas tout appliquer ça m'aide.

Dernière modification par Yame ; 10/02/2013 à 22h51.
Message supprimé par son auteur.
Citation :
Publié par Yame
Ah je m'était dit que pour faire ressortir le titre qu'il fallait la couleur opposé.
Donc il faudrait que je fasse un rouge moins foncé voir de l'orange.
Le meilleur moyen, c'est de garder la même couleur mais dans une autre intensité, ou assez proche en tout cas. Donc si tu as un menu en bleu foncé, tu mets un bleu clair, pas un orange, sinon tu vas juste faire saigner les yeux


Sinon, comme dit au dessus, rajouter un peu de marges, ce sera plus lisible et agréable.

Sinon, ça passe largement bien, j'ai déjà vu bien pire chez des "webmaster professionnels"
J'ai ajouté des espaces et des retours à la ligne un peu partout.
Pour la marge c'est celle qui espace le texte des bords ?

Pour l'intensité je m'y connais pas pour moi une couleur c'est en RGB mais merci du conseil encore une fois .

J'ai même téléchargé paint.net parce que pour la première fois j'ai mit de la transparence dans une image .

@Ternel : Je sais pas trop quoi mettre à la place de court.

Dernière modification par Yame ; 10/02/2013 à 23h36.
Arrondir les coins de ton sommaire à gauche et peut être centrer les textes,
I/II/III pour vent solaire / magnétosphère / phénomène visible (Toujours dans le sommaire, encore une fois à voir si ça n'alourdit pas trop )
Bon courage pour l'oral, mais tu sembles avoir un truc solide !
Je ne vais pas donner mon avis qui serait beaucoup trop critique (c'est mon métier IRL) mais je te conseil juste de te pencher sur les grilles (grid) une bonne journée, et avec les bases que tu as acquis là, tu fera des chose 10x mieux et 10x plus rapidement !

Si tu as besoin, MP open !
Le menu est mal foutu à mon avis. Le titre des sous rubriques aurait pu amener sur une page avec des liens et des résumés par exemple. Un petit coup de flash pour faire les menus menu aurait apporter un petit plus sans trop de connaissance requise.

Si t'as fait le plus gros à la main, ça fait du travail. Mais visuellement c'est du niveau d'un powerpoint je trouve. On ne sait pas d'où tu es parti. Si t'as fait ça seul, sans connaissance et au bloc note c'est "bien" par exemple.
D'accord effectivement si le prof qui regarde a une petite résolution il faut mieux réduire les risques.

@Au dessus : Je ne connais pas le flash ni la javascript j'ai utilisé PHP/HTML/CSS.
J'ai fait le site avec Notepad je connais les langages en théorie depuis quelque temps grâce au site du zéro.
J'ai mit le menu gauche en arrondit.
J'aime pas trop et même avec une marge avec le texte je pense pas que ça va changer grand chose.
Vous en pensez quoi ?

@Zatax : Merci du conseil.

Je vais dormir bonne nuit.

Dernière modification par Yame ; 10/02/2013 à 23h33.
Citation :
Publié par Zatax
Oublie le flash pour le web. Oublie le bien, et ne t'en souviens jamais.
Je en parlais d'un point de vue accessibilité. Évidemment à terme, son utilité est assez faible.
Citation :
Publié par kéwa
Je en parlais d'un point de vue accessibilité. Évidemment à terme, son utilité est assez faible.
On va pas s’engueuler maintenant quand même ?

Il faut juste arrêter Flash sur le web, c'est tout. Il n'a AUCUNE utilité, et encore moins dans ce genre de situation !
Quand vous faites votre site de TPE, vous êtes obligés de le créer vous-mêmes ? Parce que très souvent c'est moche et mal foutu. Vous n'avez pas le droit de faire un vrai site avec wordpress ou autre CMS et d'utiliser un vrai design ?
Citation :
Publié par kéwa
Un petit coup de flash pour faire les menus menu aurait apporter un petit plus sans trop de connaissance requise.
C'est un des pires trucs que tu peux faire sur un site internet.
Citation :
Publié par kéwa
Je en parlais d'un point de vue accessibilité. Évidemment à terme, son utilité est assez faible.
LOL justement...
Citation :
Publié par Anyanka
Quand vous faites votre site de TPE, vous êtes obligés de le créer vous-mêmes ? Parce que très souvent c'est moche et mal foutu. Vous n'avez pas le droit de faire un vrai site avec wordpress ou autre CMS et d'utiliser un vrai design ?
Pas besoin d'aller jusque là, une page en HTML très basique suffit amplement, tu utilise un sytem de grilles genre 960, le travail est déjà fait a moitié, et ton rendu sera très bon !
Citation :
Publié par kéwa
Je en parlais d'un point de vue accessibilité.
Ben justement, c'est bien pour ca que c'est pas à faire ni à conseiller.

Bref, en gros, non, pas de flash, pas pour faire un menu, certainement pas.

Flash est acceptable pour ce pour quoi il est fait : les animations, c'est à dire un contenu qui peut être interactif, mais qui doit rester optionnel. Flash aurait été ok pour montrer des animations, des schémas animés, etc... Mais certainement, certainement pas pour un menu. Si on veut faire un truc joli, il y a JS, c'est déjà largement suffisant... et en plus on vérifie que son menu marche sans JS !

Le menu du site est certes pas terrible, mais c'est avant tout au niveau contenu : les titres ne mènent a rien et c'est dommage, et comme ils sont très proches visuellement des sous-titre, on a l'impression que ce sont des liens. De plus, niveau intéret pour le lecteur, je vois mal pourquoi faire des titres ET des sous titres, surtout quand les titres ont un (!!) ou deux sous titre...
Mais bon, c'est les TPE, c'est ptet imposé, et c'est surement apprécié un plan bien hiérarchique.



Citation :
Publié par Yame
@Au dessus : Je ne connais pas le flash ni la javascript j'ai utilisé PHP/HTML/CSS.
PHP ? Il y a vraiment du PHP derrière ? quel est l'intéret ? Qu'est ce que tu as fait en php ?

Et tu as mis des balises title a tes liens, c'est bien, mais pourquoi sont elles vides ?

Enfin, j'ai pas tout regardé mais si tu veux vérifier les bons usages, fais passer tes pages au validateur XHTML du W3C. http://validator.w3.org/ On apprend toujours des trucs ^^
Mais a première vue, les "grosses" erreurs de syntaxe sont évitées. Pour un site de TPE, au niveau code du site, c'est pas mal du tout je trouve.
Mon avis:

- Un peu de padding ne ferait pas de mal (menu, bloc central, sources) histoire que le texte ne soit pas collé aux bords.

- Le bleu/surbrillance rouge est bien trop agressif imho.
Pour les couleurs, tu peux t'inspirer des conseils donnés sur http://colorschemedesigner.com/

- Il n'y a pas de police de caractère (font) définie sur la page. Perso, je trouve le Verdana assez passe partout.

- Le bloc relatif aux sources jure un peu avec le reste de la page. C'est sans doute l'image de fond "bloc-note" qui donne cette impression.
Citation :
Publié par Anyanka
Quand vous faites votre site de TPE, vous êtes obligés de le créer vous-mêmes ? Parce que très souvent c'est moche et mal foutu. Vous n'avez pas le droit de faire un vrai site avec wordpress ou autre CMS et d'utiliser un vrai design ?
On peut faire avec tout ce qu'on veut. J'ai juste voulu pour la première fois faire un site internet.

Citation :
Publié par Bjorn
Le menu du site est certes pas terrible, mais c'est avant tout au niveau contenu : les titres ne mènent a rien et c'est dommage, et comme ils sont très proches visuellement des sous-titre, on a l'impression que ce sont des liens. De plus, niveau intéret pour le lecteur, je vois mal pourquoi faire des titres ET des sous titres, surtout quand les titres ont un (!!) ou deux sous titre...
Mais bon, c'est les TPE, c'est ptet imposé, et c'est surement apprécié un plan bien hiérarchique.
Oui au début on avait un texte sous word. J'ai "bêtement" remis le même plan.
Il faut bien voir qu'un TPE n'est pas un exposé. On doit faire des expériences et répondre à un problème. Donc si au bout d'une partie on voit qu'il n'y plus rien à explorer on change.


Citation :
Publié par Bjorn
PHP ? Il y a vraiment du PHP derrière ? quel est l'intéret ? Qu'est ce que tu as fait en php ?

Et tu as mis des balises title a tes liens, c'est bien, mais pourquoi sont elles vides ?

Enfin, j'ai pas tout regardé mais si tu veux vérifier les bons usages, fais passer tes pages au validateur XHTML du W3C. http://validator.w3.org/ On apprend toujours des trucs ^^
Mais a première vue, les "grosses" erreurs de syntaxe sont évitées. Pour un site de TPE, au niveau code du site, c'est pas mal du tout je trouve.
Et oui il y a du php même de l'Orienté Objet.
Voici la page central.
Code PHP:

<?php
function chargerClasse ($classe)
{
require 
$classe '.class.php'
}
spl_autoload_register ('chargerClasse'); 
 
// Configuration de la base de donnée
$db = new PDO('mysql:host=sql.franceserv.com;dbname='MA_BDD', 'MOI', 'MON_MDP');
// Création du gestionnaire d'
article
$A_Manager 
= new Article_Manager($db);

// Vérification du numéro de l'article
if(isset($_GET['lire']))
{
$Num = (int) $_GET['lire'];
}
else
{
header('Location: ?lire=1');  
}
if (
$Num $A_Manager->Maximum_Article() || $Num $A_Manager->Minimum_Article())
{
header('Location: ?lire=1');  
}

// Récupération de l'article
$Article_Lire =  $A_Manager->Recuperer_Article($Num);


// Récupération de la liste des articles
$Liste_Article $A_Manager->Recuperer_Liste();


?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Aurore Polaire</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Design_TPE" href="site.css" />
</head>

<body>


                <div class="banniere">
            <a href="?lire=1"><img style="width: 100%; height: 150px;" src="img_site/logo.png" alt="Pourquoi les aurores polaires n'apparaissent-elles pas dans nos regions ?" /></a>
                </div>

                <div class ="menu">

                <div class = "partie_tpe">
            <div class="titre_grande_partie">Introduction</div>
                    <?php 
                    
foreach ($Liste_Article as $Article_I)
                    {
                    if(
$Article_I->Categorie()==1)
                    {
                    echo 
'<div class="titre_partie"><a href="?lire='$Article_I->Num(), '" title="titre"><span title=" ">'htmlspecialchars($Article_I->Titre()), '</span></a></div>';
                    }
                    }
                    
?>    
                </div>
                    
                <div class = "partie_tpe">
                <div class="titre_grande_partie">Vent solaire</div>
                    <?php 
                    
foreach ($Liste_Article as $Article_I)
                    {
                    if(
$Article_I->Categorie()==2)
                    {
                    echo 
'<div class="titre_partie"><a href="?lire='$Article_I->Num(), '" title="titre"><span title=" ">'htmlspecialchars($Article_I->Titre()), '</span></a></div>';
                    }
                    }
                    
?>    
                </div>

                <div class = "partie_tpe">
                <div class="titre_grande_partie">Magnetosphere</div>
                    <?php 
                    
foreach ($Liste_Article as $Article_I)
                    {
                    if(
$Article_I->Categorie()==3)
                    {
                    echo 
'<div class="titre_partie"><a href="?lire='$Article_I->Num(), '" title="titre"><span title=" ">'htmlspecialchars($Article_I->Titre()), '</span></a></div>';
                    }
                    }
                    
?>    
                </div>

                <div class = "partie_tpe">
                <div class="titre_grande_partie">Phenomene</div>
                    <?php 
                    
foreach ($Liste_Article as $Article_I)
                    {
                    if(
$Article_I->Categorie()==4)
                    {
                    echo 
'<div class="titre_partie"><a href="?lire='$Article_I->Num(), '" title="titre"><span title=" ">'htmlspecialchars($Article_I->Titre()), '</span></a></div>';
                    }
                    }
                    
?>    
                </div>

                <div class = "partie_tpe">
                <div class="titre_grande_partie">Conclusion</div>
                <?php 
                    
foreach ($Liste_Article as $Article_I)
                    {
                    if(
$Article_I->Categorie()==5)
                    {
                    echo 
'<div class="titre_partie"><a href="?lire='$Article_I->Num(), '" title="titre"><span title=" ">'htmlspecialchars($Article_I->Titre()), '</span></a></div>';
                    }
                    }
                    
?>    
                </div>

                </div>
            
                <div class="article">
                    <?php     
                    
if(isset($Article_Lire))
                    {echo 
nl2br($A_Manager->Recuperer_HTML($Article_Lire->Texte()));}
                    
?>         
                </div>

            
                <div class ="menu_droit"> 
                <div class="source">
            Source :
            <?php     
                    
if(isset($Article_Lire))
                    {echo 
'<br/><h6>',nl2br($A_Manager->Recuperer_HTML($Article_Lire->Source())),'</h6>';}
                    
?>     
                </div>
                </div>
 

                <div class="bas">
              - TPE de premiere S - Annee scolaire 2012 -2013 - Tous droits reserves - Lycee Fresnel Caen - 
                </div>   

</body>
</html>
Voici la classe Article :
Code PHP:

<?php
class Article
{
protected 
$id;
protected 
$Texte;
protected 
$Source;
protected 
$Titre;
protected 
$Num;
protected 
$Categorie;


// Fonction d'accès.
public function id()
{
 return 
$this->id;
}

public function 
Texte()
{
return 
$this->Texte;
}

public function 
Source()
{
return 
$this->Source;
}
public function 
Titre()
{
return 
$this->Titre;
}
public function 
Num()
{
return 
$this->Num;
}
public function 
Categorie()
{
return 
$this->Categorie;
}

// Fonction de changement des valeurs numériques.
public function SetId($idN)
{
$idN = (int) $idN;

 if (
$idN 0)
 {
   
trigger_error('L\'id d\'un article doit être positif !!'E_USER_WARNING);
   return;
 }
 
$this->id $idN;
}


public function 
SetNum($NumN)
{
$NumN = (int) $NumN;

 if (
$NumN 0)
 {
   
trigger_error('La place de l\'article doit être positif !'E_USER_WARNING);
   return;
 }
 
$this->Num $NumN;
}

public function 
SetCategorie($CategorieN)
{
$CategorieN = (int) $CategorieN;

 if (
$CategorieN 0)
 {
   
trigger_error('L\'importance de l\'article doit être positif !'E_USER_WARNING);
   return;
 }
 
$this->Categorie $CategorieN;
}
// Changement des valeurs textuelles.
public function SetTexte($TexteN)
{
  
$this->Texte $TexteN
}
public function 
SetSource($SourceN)
{
  
$this->Source $SourceN
}
public function 
SetTitre($TitreN)
{
  
$this->Titre $TitreN
}


// Constructeur d'un article. 
public function __construct (array $donnees
{
$this->Hydrate($donnees);
}

public function 
Hydrate(array $donnees)
{
foreach (
$donnees as $key => $value)
{
$method 'Set'.ucfirst($key);
if (
method_exists($this$method))
{
$this->$method($value);
}
}
}

}
?>
Et enfin l'article manager :
Code PHP:

<?php
class Article_Manager
{
protected 
$db;

public function 
__construct($db)
{
$this->setDb($db);
}

public function 
Ajouter_Article(Article $article)
{
$q $this->db->prepare('INSERT INTO article SET Texte = :Texte, Source = :Source, Titre = :Titre, Num = :Num, Categorie = :Categorie');
$q->bindValue(':Texte'$Article->Texte());
$q->bindValue(':Source'$Article->Source());
$q->bindValue(':Titre'$Article->Titre());
$q->bindValue(':Num'$Article->Num(),PDO::PARAM_INT);
$q->bindValue(':Categorie'$Article->Categorie(),PDO::PARAM_INT);
$q->execute();
}

public function 
Supprimer(Article $article)
{
$this->db->exec('DELETE FROM article WHERE id ='.$article->id());
}

public function 
Recuperer_Article($Num)
{
$Num = (int) $Num;

$q $this->db->query('SELECT id, Texte, Source, Titre, Num, Categorie FROM article WHERE Num = '.$Num);
$donnees $q->fetch(PDO::FETCH_ASSOC);
return new 
Article($donnees);
}

public function 
Recuperer_HTML($texte)
{
// Gras,Italique,Souligné et centré ainsi que les titres des parties
$texte preg_replace('`\[g\](.+)\[/g\]`isU''<strong>$1</strong>'$texte); 
$texte preg_replace('`\[i\](.+)\[/i\]`isU''<em">$1</em>'$texte);
$texte preg_replace('`\[s\](.+)\[/s\]`isU''<div class = "Souligne">$1</div>'$texte);
$texte preg_replace('`\[Titre\](.+)\[/Titre\]`isU''<div class = "Titre">$1</div>'$texte);
$texte preg_replace('`\[Video\](.+)\[/Video\]`isU''<div class = "Video">$1</div>'$texte);

//Mise en forme des liens et des images
$texte preg_replace('#&#isU','$amp'$texte);
$texte preg_replace('#Lhttp://(.+),texte ="(.+)"#isU''<a href="http://$1" title="source"><span title=" ">$2</span></a>'$texte);

$texte preg_replace('#\[img="(.+)",texte="(.+)"\]#isU''<div class="image_article">$2<br/><img src="image/$1" alt="$2"/></div>'$texte);
$texte preg_replace('`\[Element\](.+)\[/Element\]`isU''<div class = "Element"><img src="img_site/puce.png" alt="Puce de numerotation"/> $1</div>'$texte);

return 
$texte;
}

public function 
Maximum_Article()
{
$q $this->db->query('Select Max(Num) As Num_Max from article');
$donnee $q->fetch(PDO::FETCH_ASSOC);
return 
$donnee['Num_Max'];
}

public function 
Minimum_Article()
{
$q $this->db->query('Select Min(Num) As Num_Min from article');
$donnee $q->fetch(PDO::FETCH_ASSOC);
return 
$donnee['Num_Min'];
}

public function 
Recuperer_Liste()
{
$Article = array();
$q $this->db->query('SELECT id, Texte, Source, Titre, Num, Categorie FROM article ORDER BY Num');
while (
$donnees $q->fetch(PDO::FETCH_ASSOC))
{
$Article[] = new Article($donnees);
}
return 
$Article;
}
public function 
Modifier_Article(Article $Article)
{
$q $this->db->prepare('UPDATE article SET Texte = :Texte, Source = :Source, Titre = :Titre, Num = :Num, Categorie = :Categorie');
$q->bindValue(':Texte'$Article->Texte());
$q->bindValue(':Source'$Article->Source());
$q->bindValue(':Titre'$Article->Titre());
$q->bindValue(':Num'$Article->Num(),PDO::PARAM_INT);
$q->bindValue(':Categorie'$Article->Categorie(),PDO::PARAM_INT);
$q->execute();
}

public function 
setDb(PDO $db)
{
$this->db $db;
}
}
Je n'ai qu'a modifier ma base de donnée pour changer l'article c'est l'intérêt.
Merci pour la validateur mais j'ai déjà fait et tout est bon (sauf l'intégration Youtube).

Les titles ne sont là que pour identifier en CSS quel design je doit appliquer.
Oui c'est horrible mais j'ai pas trouvé de .a .source dans les sélecteurs avancé.
Cela doit être super simple mais j'ai pas trouvé donc j'ai du mettre une balise extistante (sinon W3C pas content) et la rendre invisible.

C'est horrible je sais mais bon je voulais que le W3C trouve ma page bien...

Citation :
Publié par Cthulhoo
Mon avis:

- Un peu de padding ne ferait pas de mal (menu, bloc central, sources) histoire que le texte ne soit pas collé aux bords.

- Le bleu/surbrillance rouge est bien trop agressif imho.
Pour les couleurs, tu peux t'inspirer des conseils donnés sur http://colorschemedesigner.com/

- Il n'y a pas de police de caractère (font) définie sur la page. Perso, je trouve le Verdana assez passe partout.

- Le bloc relatif aux sources jure un peu avec le reste de la page. C'est sans doute l'image de fond "bloc-note" qui donne cette impression.
Je vais de ce pas mettre du padding et une police.
Je ne sais pas quoi mettre à la place du fond bloc-note quant aux couleurs ça me prendrais trop de temps mais merci du lien.
Répondre

Connectés sur ce fil

 
1 connecté (0 membre et 1 invité) Afficher la liste détaillée des connectés