[ PROJET ] Manga-life

Message par **trigun** » jeu. 18 août 2005, 09:43

***EDIT*** Je donne pas mon msn, si ta des questions, c'est ici, ou sur le chan. ***

Bon, déjà, CLEAR n'a jamais été un attribut, ni en strict, ni en transitionnel, ni en rien du tout.

Ensuite, il vaut parfois mieux mettre un style= quand c'est utilisé une seule fois, plutot que d'ajouter une classe ou un id à ta feuille css.

Faut savoir trouver le bon compromis.
tout mettre dans sa feuille de style l'alourdira pour rien, surtout si le style n'est utilisé qu'une fois dans tout le site.

Et puis, pense avant de mettre des styles à tout va, qu'il existe des balises html (souvent oubliées les pauvres) qui ont déjà un début de mise en forme.

Exemple : si tu veux faire un titre de news, évite de faire un

Code : Tout sélectionner

<span class="titre_news">

Le titre de la news

Code : Tout sélectionner

</span>

ou encore pire,

Code : Tout sélectionner

<p class="titre">le titre</p>

Il existe les balise h1,2,3... qui servent à définir des titres de paragraphes.

Le truc c'est que beaucoup pense que si leur site a été validé xhtml c'est qu'il est niquel au niveau du code.

FAUX FAUX FAUX et archi FAUX.

La première mise en forme doit se faire au niveau des balises.

Pas d'usage abusif des div ou des spans. Les div ne servent qu'à créer des blocs (le corps, l'entete, le contenu, le menu,le pied de page).

Pensez à utiliser les balises hx pour vos titres, la balise

Code : Tout sélectionner

<p>

pour du texte.
Il faut également préféré les

Code : Tout sélectionner

<ul ><li>

quand vous créer une liste plutot qu'une successions de

Code : Tout sélectionner

 < br / >

Au niveau des listes :

Code : Tout sélectionner

<ul><li>

pour des listes avec puce;

Code : Tout sélectionner

<ol>

pour des listes numérotées,

Code : Tout sélectionner

 <dl>

pour des liste de définition.

Pour votre mise en page textuelle, il existe des balises comme BIG, BLOCKQUOTE, ABBR, ACRONYM qui sont totalement oubliées.

BIG permettra de mettre en évidence un mot ou une expression qui a de l'importance dans le texte. La différence avec

Code : Tout sélectionner

<b>

c'est que BIG ne se limite pas à de la mise en forme, mais donne un réel sens à cette portion, un sens d"insistance.

Code : Tout sélectionner

<big>

peut être concaténé pour donner encore plus d'importance : <big><big>EXEMPLE</big></big>.

BLOCKQUOTE permet de définir que le texte est une citation. Cette balise prend l'attribut 'cite' pour linker vers le site source.

ABBR permet de spécifier que le texte est une abbréviation. Avec l'attribut title, vous donnez le sens de l'abbréviation (merci firefox car ie ne le prend pas en compte)

ACCRONYM permet de définir des sigles (SNCF, VTFF, LOL, CTB,CMB) via l'attribut title également. (merci fofox encore une fois).

L'avantage d'utiliser les balises spécifiques et que les synthétiseurs vocaux seront plus efficaces (quand il veront CTB en accronym, il ne diront pas "STEUB", mais bien "C T B" et certains diront même la signification si elle est dans title " Comme ta Bite").

Bon les aveugles on s'en fout un peu (sort de moi humour noir, sort de moi). Mais au niveau du référencement, vous gagnerez en crédibilité et en efficacité. Car les robots aiment les choses faitent dans les règles de l'art.

Je viens de me rendre compte que j'ai fait un long speech lourd et rébarbatif, mais j'espère qu'il vous servira.

Voici un petit lien sympa pour les balises HTML : http://www.laurent-bernat.com/html-bali ... ap_balises

Un ptit tour sur mon blog (que j'ai toujours pas mis à jour :<) pour d'autres infos : http://creactivex.blogspot.com/

En espérant avoir servi à quelque chose.

PS : Le site bugge sous firefox.
Source possible du problème : application de width à un span (marche sous ie car c'est de la merde mais pas sous firefox car c'est génial); utilisation de padding pas gérer de la même manière (évitez le plus possible les padding).

xS_ · Message par **xS_** » jeu. 18 août 2005, 11:51

Salut Trigun, dans l'esprit de ton post je suis entièrement d'accord. Le html et son successeur le xhtml sont des langages à balises permettant de structurer un document.

Lorsque l'on écrit une page html il faut garder à l'esprit la sémantique (le sens) des balises. Et donc ne pas mettre une balise pour son rendu à l'écran mais utiliser son sens. Trigun l'explique bien avec l'exemple du titre. Utilisez h1 ou hx au lieu de id="titre" class="titre". L'aparence sera entièrement gérée par votre feuille de style. Si vous voulez un titre, qui est la taille de police de votre paragraphe et qui s'affiche en bleu, pas de problème redéfinissé la balise h1 dans le css.

L'intérêt du xhtml est le gain d'optimisation et la comptabilité descendante (utilisation sur tous les naviateurs même les plus vieux).Coté optimisation : plus vous réduisez la taille de .html plus vous gagnez en bande passante. Chaque internaute téléchargeant ce fichier lorsqu'il vient sur le site, le css sera problement dans le cache donc pas retéléchargeable ou si il ne l'ai pas il sera télécharger une fois. L'intérêt n'est pas flagrant lorsque vous n'êtes pas un site avec des millions de pages vues par jour... je conçoit, mais bon c'est pour l'avenir que je fais cette effort. La comptabilité a intérêt aussi important. Elle permet d'assurer à votre site un affichage correct (pas identique) dans tous les navigateurs y compris les lecteurs d'écrans pour les personnes handicapées.

Une autre idée associée à l'xhtml est l'accessibilité. Elle doit permettre de rendre votre site utilisable par tous. Ceci implique l'utilisation de balise alt, title, summary pour une <table> ... et de bien d'autre astuces et attributs. Le débat n'est pas là, mais comme dit Trigun les robots aiment bien ça , et n'oubliez pas que le plus grand des aveugles c'est juste un gars qui s'appele google

Le site manga-life est construit dans cette esprit.

Par contre avec ce que tu dis Trigun, il y a des choses qui me dérange quand même beaucoup.

Bon, déjà, CLEAR n'a jamais été un attribut, ni en strict, ni en transitionnel, ni en rien du tout.

L'attribut clear existe bien pour un br mais n'est pas valide en xhtml. Je te propose deux exemple.
Sur ton forum sous le sondage de mon post voilà je que je trouve

Code : Tout sélectionner

 <tr>
		<td colspan="4" align="center"><span class="gen"><b>Total des votes : 10</b></span></td>
	  </tr>
	</table>
	<br clear="all" />
  </td>
</tr>

et ce site : allHTML de confiance expliquant l'attribut clear de br

--------------------
--------------------

BIG permettra de mettre en évidence un mot ou une expression qui a de l'importance dans le texte. La différence avec
Code:
<b>
c'est que BIG ne se limite pas à de la mise en forme, mais donne un réel sens à cette portion, un sens d"insistance.
Code:
<big>
peut être concaténé pour donner encore plus d'importance : <big><big>EXEMPLE</big></big>.

La aussi je ne suis pas d'accord. Car on ne doit pas s'occuper de l'aparence, c'est la feuille de style qui s'en occupe.
concaténé de Big n'a aucun sens à mon avis.

Dans ce cas j'aurais fait comme ceci

Avant (non valide) car utilisation de la balise b :

Code : Tout sélectionner

<b>exemple</b>

Action : met en gras "exemple"

Non valide car il s'agit d'une mise en forme visuelle.
Pour la version valide utilisée la balise <strong> qui remplace <b>
Ce qui donne :

Code : Tout sélectionner

HTML
<strong>exemple</strong>

CSS

strong { font-size:2em; font-weight:bold}

La première règle indique que le texte compris entre les strongs fera 2em = 2x la taille de la police par défaut de l'utilisateur et la deuxième règle indique que le texte sera en gras.

Voila j'ai moi aussi fait mon post lourd et rébarbatif;

J'espère que la discussion continuera. Je la trouve fort intéressante.
je vous conseil de trois sites si vous voulez en savoir plus.

http://www.alsacreations.com
http://www.zeldman.com Site de l'auteur d'un super bouquin que j'ai acheté "Designing with Web Standards"
http://www.pompage.net
http://www.openweb.eu.org

Message par **trigun** » jeu. 18 août 2005, 12:02

C'est pas trop le sujet donc on va pas polémiquer 100 ans, mais la balise BIG permet de marqué une insistance au niveau du sens.

Un synthétiseur vocal insistera sur le mot dans la balise BIG.

Exemple : je VEUX allez au zoo.

Si je veux est dans BIG, cela apportera une insistance à VEUX et la phrase sera prise comme une requete et non comme une simple envie.

Pour l'attribut CLEAR, je suis assez étonné, je la connaissai pas du tout. Mais je pense que si c'est pas valide c'est pas pour rien ^^.

En tout cas, j'apprécie énormément l'effort fait pour votre site. J'ai matté le code source et la feuille de style. La source ça va. Le style pa du tout ^^. 3 DIV horizontaux pour le header c'est pas top top.Surtout que j'en vois pas l'intéret (à part un élargissement en fonction de la taille de l'écran, mais ya d'autre solutions pour ça).

Faudrait eclaircir votre feuille de style car là ya beaucoup de truc pour pas grand chose. Avec la webdevelopper tool bar de firefox j'ai viré pas mal d'attribut à la feuille de style et ça ne modifiez pas l'affichage.

xS_ · Message par **xS_** » jeu. 18 août 2005, 12:43

En tout cas, j'apprécie énormément l'effort fait pour votre site. J'ai matté le code source et la feuille de style. La source ça va. Le style pa du tout ^^. 3 DIV horizontaux pour le header c'est pas top top.Surtout que j'en vois pas l'intéret (à part un élargissement en fonction de la taille de l'écran, mais ya d'autre solutions pour ça).

Faudrait eclaircir votre feuille de style car là ya beaucoup de truc pour pas grand chose. Avec la webdevelopper tool bar de firefox j'ai viré pas mal d'attribut à la feuille de style et ça ne modifiez pas l'affichage.

Je connais pas la toolbar de firefix, je vais me reseigner !! ^^

Pour les trois div, je viens bien unea autre solution car je la trouve pas top celle que j'ai fait !!

PS l'up est en cours

Dark shadow · Message par **Dark shadow** » jeu. 18 août 2005, 16:45

alors à 16h45 en allant sur le site j'ai ça XD

Fatal error: Call to a member function setFull() on a non-object in /home.2/mangalif/www/WEB-INF/classes/model/MdlNews.php5 on line 132

Hisoka · Message par **Hisoka** » jeu. 18 août 2005, 19:25

C est trop passe-partout, pas reellement acrrocheur pour quelqu un qui passe de site en site.

Désolé ^^

Faut travailler encore a mon avis

J ai voté moyen :)

xS_ · Message par **xS_** » jeu. 18 août 2005, 21:52

Merci de tes conseils, il est vrai que le design est un peu simpliste.

Pour l'instant possède les caractéristiques que nous voulions le donner :

* adaptable à la résolution de l'écran
* Pas fatiguant pour les yeux car il s'agit d'un site d'information mais j'ai peut-être trop simplifié.

Message par **Mottires** » jeu. 18 août 2005, 23:08

moi j'aime bien quadn c'est simple. comme ca aca me convient (sauf la couleur de fond qui m'enerve, mais ca je te l'ai deja dit)

Hisoka · Message par **Hisoka** » jeu. 18 août 2005, 23:18

Oui, c'est bien quand c est simple. Mais la simplicité ne doit pas enlever l'accroche qu'un internaute doit ressentir, au passage sur le site.

C'est comme le marketing, simplicité et efficacité :). Simple ok, mais on doit avoir quelque chose qui accroche l'oeil, c'est une regle en marketing et les sites web n'y echappe pas.
Surtout sur un site avec un objectif comme le leur.

Mais continuez les gars!!!

xS_ · Message par **xS_** » mar. 23 août 2005, 13:14

Voici quelles que nouvelles du site :
Il se construit et se remplit petit à petit.

Nous allons bientôt attaquer la gestion des teams de scan trad

Message par **Mottires** » jeu. 16 mars 2006, 21:40

Bonsoir, je déterre ce topic oublié dans les profondeurs de la section divers pour le rammenner au renouveau de la section lien.

Donc, suite a des problèmes divers et varés, le projet avait été mis en pause. il revient plus beau et plus fort que jamais! (surtout plus beau quand même)

Je rappelle brievement le but de ce site. Répertorier l'intégralité des mangas et en proposer un apercu a la masse grouillante des anonymes du net. Créer un annuaire des différentes teams de scantrad et de leurs release (gérer par les teams eux mêmes).

Voila, je vous invite a passer faire un tour sur : http://www.manga-life.net pour voir une beta du site.

Autre petite chose, je recrute, principalement des rédacteurs et des checkeurs (pour le reste faut voir avec xS_ ), enfin surtout des rédacteurs pour l'instant.

Les gens intérésser (et même les autres) peuvent s'inscrire sur http://forums.manga-life.net

Mais pour communiquer avec moi il est souvent plus simple de passer par IRC :
Serveur : irc.fansub-irc.org
canal : #manga-life

Vous pouvez suivre le tuto que j'ai fait (lien dans ma sign) pour vous connecter sur le chan, pensez juste a remplacer #naruto-trad par #manga-life

Voila voilou

@+
Mottires

Narutotrad.com

[ PROJET ] Manga-life

Comment trouver vous le nouveau design de manga-life?