[ Amateur / Intermédiaire ] Live4Dance.be

Bonjour à tous,

J'ai créée un site pour ma compagne qui a un club de danse.
Le site à été créée en même temps que le club, donc j'ai du tout faire, du logo à la recherche du nom, au design du site et bien entendu le code.

J'ai essayé de faire un travail propre niveau design et aussi par rapport au code.

Je vais modifier par la suite certaines choses en intégrant du contenu avec 'INCLUDE' de PHP (PHP que j’apprends depuis peu, donc pas tout à fait acquis pour me facilité le travail en cas de changement par la suite, par exemple pour le footer, les menus, ...

Pour les albums photos, c'est du javascript, mais je n'ai fait qu'utiliser une application en ligne et copier coller sur le site.

Pour le formulaire de la page contact, idem c'est du copier coller que j'ai trouvé sur le net, je n'ai fait qu'adapter la mise en forme.

Vos critiques, avis, découverte d'erreurs, conseil ou toute autres choses bonne à dire sont les bienvenues

Ca ne fait que peu de temps que j'ai commencé à faire du code après journée...

Merci à vous.
Laurent.


www.live4dance.be
Modifié par laurent_ltz (04 Feb 2012 - 17:12)

Coucou !

Tout d'abord chapeau c'est vraiment pas mal
Quelques remarques (subjectives bien sur)
- Le menu top je l'aurais mis sur une ligne et plus petit, un peu comme dans ton footer.
-Les titres (les élèves 2011/12, tarifs...) sont quasi illible.
- J'aurais fais continué le site en top et bottom (car actuellement je trouve que le cadre blanc referme trop le site, on se sent un peu opressé, d'autant plus que la dominante est noire)

Voila pour le code j'ai pas regardé (ha oui aussi un petit décalage dans l'ouverture des diaporamas)
En tout cas fonctionne sur safari 5 bonne continuation

aeon a écrit :
Coucou !

Tout d'abord chapeau c'est vraiment pas mal
Quelques remarques (subjectives bien sur)
- Le menu top je l'aurais mis sur une ligne et plus petit, un peu comme dans ton footer.
-Les titres (les élèves 2011/12, tarifs...) sont quasi illible.
- J'aurais fais continué le site en top et bottom (car actuellement je trouve que le cadre blanc referme trop le site, on se sent un peu opressé, d'autant plus que la dominante est noire)

Voila pour le code j'ai pas regardé (ha oui aussi un petit décalage dans l'ouverture des diaporamas)
En tout cas fonctionne sur safari 5 bonne continuation

Bonjour Aeon,

Merci pour ton retour

- Pour le menu top on m'avait effectivement déjà mentionné que il était pas "top"
Si je le fait en 1 ligne, je vais devoir un peu réduire la taille de ma typo / bouton, parce que je crains que le menu entre en collision avec la jolie dame au chapeau

- Oui, ta raison pour les titres... surtout celui des élèves 2011/2012...
Je vais les changer en <h1> avec du style css, ca sera bien plus lisible.

- Concernant le site en top et bottom, pas certain de comprendre...
Tu veux dire que je n'aurais pas du faire un margin-top et le coincé dans une boite?
Modifié par laurent_ltz (04 Feb 2012 - 17:52)

a écrit :
Tu veux dire que je n'aurais pas du faire un margin-top et le coincé dans une boite?

Tu peux garder ton margin pour donner de l'espace mais je pensais a quelque chose comme sa :
http://www.florianbranchet.com/left/images/web/opera.jpg
les cotés du site se prolongent jusqu'en haut et de même pour le bas, je ne suis pas certain d'etre tres clair ^^

a écrit :
Tu peux garder ton margin pour donner de l'espace mais je pensais a quelque chose comme sa :
http://www.florianbranchet.com/left/images/web/opera.jpg
les cotés du site se prolongent jusqu'en haut et de même pour le bas, je ne suis pas certain d'etre tres clair ^^

Oui, je vois ce que tu veux dire.
Pour l'espace 'top' je pourrai effectivement le modifier, mais si je le prolonge le site en bottom...
Ca risque de faire assez vide entre mon contenu et mon footer.
Parce que je n'ai pas autant de contenu que sur la photo du site de l'opéra.

Je suis pas certain de ce que ca donnerai au final...

- Pour les titres, c'est corriger et donc plus lisible.
- Utilisation des balise 'include' en PHP c'est fait depuis hier soir C'est bien pratique, mais quand on affiche le code source de la page la sémantique est un peu moins belle maintenant.

Je vais maintenant m'occuper un peu avec javascript pour valider mon formulaire de contact coté client.

Merci et bon dimanche

laurent_ltz a écrit :
- Utilisation des balise 'include' en PHP c'est fait depuis hier soir C'est bien pratique, mais quand on affiche le code source de la page la sémantique est un peu moins belle maintenant.

En principe ça ne change rien à la sémantique de ton site (ou alors tu as raté un truc quelque part ). Ca abime un peu l'indentation du code source mais ça n'a strictement aucune importance : Une page html n'a (sauf cas particuliers) pas vocation à être lue par des humains, donc à part pour t'aider à débugger, l'indentation a surtout pour conséquence d'alourdir la page avec des caractères d'espacement inutiles.

Si tu veux vraiment chipoter sur la sémantique, l'utilisation de "<li>|</li>" dans ta barre de navigation me parait infiniment plus problématique : Sémantiquement parlant tu place tes "|" sur un pied d'égalité avec les liens "accueil" ou "profs"...
Ce n'est pas bien grave non plus, mais c'est pour te donner une idée de la distinction entre sémantique et présentation du code.


PS : Ah et j'oubliais, j'aime bien le design
Modifié par BlueScreenJunky (05 Feb 2012 - 12:08)

BlueScreenJunky a écrit :

En principe ça ne change rien à la sémantique de ton site (ou alors tu as raté un truc quelque part ). Ca abime un peu l'indentation du code source mais ça n'a strictement aucune importance : Une page html n'a (sauf cas particuliers) pas vocation à être lue par des humains, donc à part pour t'aider à débugger, l'indentation a surtout pour conséquence d'alourdir la page avec des caractères d'espacement inutiles.

Si tu veux vraiment chipoter sur la sémantique, l'utilisation de &quot;&lt;li&gt;|&lt;/li&gt;&quot; dans ta barre de navigation me parait infiniment plus problématique : Sémantiquement parlant tu place tes &quot;|&quot; sur un pied d'égalité avec les liens &quot;accueil&quot; ou &quot;profs&quot;...
Ce n'est pas bien grave non plus, mais c'est pour te donner une idée de la distinction entre sémantique et présentation du code.


PS : Ah et j'oubliais, j'aime bien le design

Effectivement, j'ai mentionné la "sémantique" mais je voulais dire l'indentation... Me suis trompé Oui, je sais que ça change rien à l'affichage après dans le browser, mais c'est parce que la propreté du code au complet est un peu une signature de celui qui la effectué
Mais ce n'est que très peu comme tu dit

Ah oui, je comprends ce que tu veux dire avec mes "|" par rapport à la sémantique.
Tu aurai fait différemment?

Autre point non résolu :

Je viens d'ajouter un script pour valider l'adresse mail sur le formulaire de contact.
Mais il ne fonctionne pas comme je voudrai.

J'ai une fonction clique() sur 2 champs d'après qui vérifier le champ 'email'.
Ma fonction doit m'afficher une boite 'alert' si l'adresse mail est fausse et en même temps m'appliquer une class qui modifie le border de mon champ 'email'.

La boite 'alert' c'est ok.
Mais le changement de class pour le border ne fonctionne pas.

En faite c'est ma feuille CSS qui prime sur ma fonction JS.
Si je désactive mon style sur mon champ 'email' ca fonctionne, mais seul problème c'est que alors au départ mon champs 'email' n'as pas du tout de border...

Je n'arrive pas à trouver une alternative...

Voici les styles des champs du form (feuille extérieur) :

#sujet, #nom , #email, #message {
	width: 250px;
	float: right;	
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 10pt;
	background-color: #d5b5c5;
	color: #000;
	border: 1px #FFF solid;
}

Voici les nouvelles class de style après exécution de ma fonction (style dans ma page contact ) :

	          <style>
		  .NOK {border:1px solid red;}
		  .OK {border:1px solid white;}
		</style>

Ma fonction JS :

	<script>
		function clique() {
			var elem_champ = document.forms["formulaire"].elements["mail"];
			elem_champ.value = elem_champ.value;
			var valeur = elem_champ.value; 
			var modele = /^[a-z0-9\-_\.]+@[a-z0-9]+\.[a-z]{2,5}$/i;
			if (!modele.test(valeur)) {
				alert("Adresse email invalide ou incomplète")
						document.getElementById('email').className = "NOK";
			}else {
						document.getElementById('email').className = "OK";
				}
		}
	</script>

Mon formulaire :

						<form action="envoi.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire">
							<p>
								<label for="nom">Nom &amp; prénom :</label>
								<input type="text" name="nom" id="nom"/>
							</p>
							<p>
								<label for="email">Adresse email :</label>
								<input type="text" name="mail" id="email"/ style="border:1px solid #FFF">
							</p>
							<p>
								<label for="sujet">Sujet :</label>
								<input type="text" name="objet" id="sujet" onclick="clique()"/>
							</p>
							<p>
								<label for="message">Message :</label>
								<textarea id="message" name="message" rows="5" cols="5" onclick="clique()"></textarea>
							</p>
							<p class="rightForm">
								 <input type="reset" name="Submit" value="Réinitialiser le formulaire"/>
								<input type="submit" name="Submit" value="Envoyer"/>
							</p>
						</form>

Merci à ceux qui pourront m'aider
Vous pouvez tester le formulaire, vous tracasser pas pour les emails bidons, j'ai accès à la boite pour aller les effacer après.

Regardes de plus près ton code html :

<input type="text" name="mail" id="email"/ [b]style="border:1px solid #FFF"[/b]>

Tu as laissé un attribut style dans le html, qui s'applique directement à l'élément et a donc la priorité sur tes feuilles de style CSS. Donc tu as beau ajouter une classe via javascript, ça ne change pas l'apparence. En supprimant ça ça devrait fonctionner je pense.

edit : J'avais pas fait attention que le border blanc est aussi défini pour l'id #email (qui a aussi la priprité sur la classe .NOK) Pour parer ça tu peux ajouter !important dans ta classe .NOK :

.NOK {
    border: 1px solid red !important;
}

Sinon pour les "|" dans la liste c'est pas forcément super gênant non plus. Dans l'idéal tu pourrais essayer de le faire en CSS avec des "border-left" ou "border-right"... Mais à toi de décider si ça en vaut vraiment la peine (personnellement j'en suis pas convaincu).
Modifié par BlueScreenJunky (05 Feb 2012 - 19:31)

BlueScreenJunky a écrit :

edit : J'avais pas fait attention que le border blanc est aussi défini pour l'id #email (qui a aussi la priprité sur la classe .NOK) Pour parer ça tu peux ajouter !important dans ta classe .NOK :

.NOK {
    border: 1px solid red !important;
}

J'avais oublié mon attribut dans mon html
Mais ca ne corrige pas mon problème...

Comme tu dit, mon id #email à aussi la priorité sur ma classe .NOK
Je voudrais bien utilisé le "!important" sur la classe, mais je ne sais pas du tout comment l'appliquer... Et à quoi ça sert exactement?

Bien vu pour le border left / right, j'y avais pas du tout pensé
Je vais laisser ainsi parce que ça ne gène pas, mais tu ma donné l'idée pour un eventuelle même cas

Merci à toi

Ben euh... tu l'utilises exactement comme je l'ai écris dans mon message précédent , et ça sert à indiquer que c'est cette règle qui doit être appliquée, même si elle est contredite par un autre règle sur la même classe ou id.

Si tu ne veux pas utiliser le "!important", tu peux trouver d'autres solutions. Par exemple tu pourrais très bien ne pas appliquer de style à #email mais donner à ton input la classe .email, et utiliser ton code javascript pour enlever la classe .email et ajouter la classe .OK ou .NOK à la place.
Modifié par BlueScreenJunky (05 Feb 2012 - 22:40)

Il est ou le smiley pour se faire tout petit ??
J'ai pas vu que tu l'avais directement ajouté dans le code, je m'était contenté de lire tes explications

Merci beaucoup pour ton aide, ça fonctionne comme je le désire.
A bientôt et encore merci...

Laurent.