Association Aquariophilie.org 2.0 !!!

[Nicolas]

Oui il y a bien un problème avec le scrolling mais je sais pas d'où ca vient ! (j'ai l'impression que ca viens d'une marge à gauche) Et c'est pire sous IE avec le scrolle qui s'arrête jamais en bas de page

Pareil que vous je n'aime pas les marges sur les cotés même si elles ont leur utilités : si on ne fixe pas de limite à la largeur de l'écran, sur les grande définition (17, 21 pouces, TV, projecteurs, etc.) le site apparait tout aplatie et les paragraphes se retrouve sur une seul ligne. C'est pour ca que tout les sites internet qui possèdent beaucoup de texte, fixent une taille maxi à la largeur, au delà de cette taille, il y a des marges. Souvent, pour accentuer et "grossir" les articles ont utilisent aussi des colonnes intérieur.

De toutes manière mon 3ème tests était prévu sans marges sur les cotés

T'inquiète pas Pecky, on est ok pour les couleurs, je comprend que vous avez besoin d'un produit fini pour donner votre avis mais j'en suis pas la. (et peut être pas capable) Pour le moment je ne fait que dessiner et tracer les traits (contours) du site internet. Le remplissage se fera à la fin. Comme personne ne met les mains dans le cambouis, je m'y met sinon dans 10 ans l'asso aura toujours la même tronche.
En ce moment, vous avez compris que j'expérimente les nouvelles fonction de CSS3 et surtout comment construire un site sans utiliser les tableaux mais que du CSS.
Pour le moment, je ne vais pas passer 10 h à peaufiner les icônes, les couleurs, le texte pour m'apercevoir à la fin que la colonne de droite doit être supprimé, celle de gauche déplacer au dessous, etc. !

Comme pour la mise en eau d'un aquarium, il faut déjà définir la structure. On ne vas pas mettre en premier l'eau, les plantes et les poissons puis le sable, les racine et les roches en dernier

+1 Pecky pour la visualisation de juste un extrait des news sur la page d'accueil. Pour le mot "impression" je vais le remplacer par "Imprimer" dans la 3ème version

Pour mon 3ème tests je penses limiter les CSS3 uniquement au border-radius des menus + quelques effets sur les liens (transform: rotate). Pour le reste je vais rester sur du CSS1 et 2 compatible avec tout les navigateurs, une colonne de menu à gauche, un header + footer le tout scrolable. Je vous tiens au courant.

Sinon Robin me suggère d'utiliser des kits graphiques CSS pour simplifier les choses, l'avantage est qu'on a plus grand choses à faire, juste à ajouter son logo et adapter les couleurs. Qu'en pensez vous ? Exemple de ressources cité :
- http://www.oswd.org/design/preview/id/3134
- http://www.oswd.org/design/preview/id/2725
- http://www.oswd.org/design/preview/id/2448
- http://www.oswd.org/design/preview/id/2386
- http://www.oswd.org/design/preview/id/2493

Aquatiquement,

[Advance]

Oui il y a bien un problème avec le scrolling mais je sais pas d'où ca vient !

pour infos, SeaMonkey gère mieux le scrolling que Firefox
c'est pas parfait, mais c'est mieux
(les deux sont des navigateurs de Mozilla)
NB: y'a aussi un recouvrement des cadres bas et gauche, mais ce n'est pas forcément gênant

Pareil que vous je n'aime pas les marges sur les cotés même si elles ont leur utilités : si on ne fixe pas de limite à la largeur de l'écran, sur les grande définition (17, 21 pouces, TV, projecteurs, etc.) le site apparait tout aplatie et les paragraphes se retrouve sur une seul ligne. C'est pour ca que tout les sites internet qui possèdent beaucoup de texte, fixent une taille maxi à la largeur, au delà de cette taille, il y a des marges. Souvent, pour accentuer et "grossir" les articles ont utilisent aussi des colonnes intérieur.

qui utilise un projo pour aller sur le site ?
sinon, je suis en 1280px de large, et j'ai déjà des marges
j'imagine pas sur l'ordi d'un ami qui a un 16" avec une carte graphique de malade (il doit avoir plus de 1600px) ou sur des écrans encore plus grands

Sinon Robin me suggère d'utiliser des kits graphiques CSS pour simplifier les choses, l'avantage est qu'on a plus grand choses à faire, juste à ajouter son logo et adapter les couleurs. Qu'en pensez vous

on peut s'en servir comme base et modifié par dessus non ?
à moins qu'ils soient bloqués :/

[Nicolas]

C'est vrai qu'il est assez rare de trouver des écran de + 1600 px de coté

Pour les kits graphiques je penses pas qu'ils sont bloqué (j'ai pas encore téléchargé pour tester) et oui, le but est de se servir d'une base et d'ajouter ce qu'on a besoin.

Au faites personne n'a causé de mon test de visionneuse des images en jQuery, qu'en pensez vous ? c'est à peu prêt la même chose que l'animation flash de la page d'accueil ... mais 100 % compatible et sans flash

Sinon je cherche toujours un développeur de script de petite annonces avec système de notation des vendeurs/acheteurs, localisation sur map, gestion d'images et miniature, expiration des annonces le tout compatible phpBB (utilisation du système de MP pour communiquer entre acheteur/vendeur) et 100% open source.
Si vous connaissez quelqu'un qui veux montrer au monde ce qu'il est capable de faire (bon d'accord j'en fait trop) contactez le !
je penses aussi de plus en plus à redémarrer un listing + annotations (modérés) de magasins aquariophile avec un système de localisation sur une map.


Aquatiquement,

[Pecky]

t'as pensé à demander à progalacarte s'il pense pouvoir t'aider pour ça ?... c un développeur...

je préfère tes essais au kit graphique et l'avantage c'est que comme ça, on saura exactement quoi est quoi...
je trouve pas qu'il y ait un super gain de temps à reprendre les codes de qqun d'autre. Quand on veut personnaliser, il faut vraiment comprendre, et auquel cas, on est mieux avec ses codes...

[TeTRaM78]

Salut tout le monde...

j'ai déjà de nombreuses fois utilisé les kits graphiques, et franchement, rien de plus simple... Tout est dans le fichier CSS. Pour quelqu'un qui comprend un tant soit peu le php et l'html, ya vraiment plus rien de sorcier là derrière. Modifier le layout du kit graphique se fait une seule fois, dans le CSS, puis la reprise des balises customisées dans les pages de contenu est extrêmement simple.

@Nico, si tu me balances par zip le contenu de la page d'acceuil du site par exemple, je peux voir pour faire l'un ou l'autre essais à partir de quelques kits pris sur OSWD... Et bien sur, les kits dispos sur ce site sont modifiables, dans certains cas même, leurs auteurs n'exigent pas de voir leur nom apparaitre dessus...

EDIT: Ah oui... Logo 5 pour moi aussi... Justement, en raison de la nostalgie à l'ancien logo qui y est suggérée...

[TeTRaM78]

Bonsoir tout le monde...

Voici un petit exemple de ce qu'on peut faire à partir d'un kit déjà fait:

http://www.thys-martin.be/andreas09/

J'ai passé plus de temps à travailler sur la fonction qui va modifier le contenu de la div "content" (manière dynamique de loader une page, tout en gardant le style du CSS sans avoir à le recopier dans chaque page), que sur le design en soi.

J'ai d'ailleurs encore un petit soucis avec cette fonction, mais je vais y jeter un oeil ce soir.

Il faudrait juste retirer l'ancien logo du background en haut à gauche évidemnet.

Vos avis?

[Yzy]

Moi j'aime, il faut encore travailler mais c'est la bonne direction.

[Nicolas]

C'est un bon exemple de ce qu'on peu faire ... même si j'ai pas compris à quoi sert la fonction de chargement de la page (le cache du navigateur ne le fait pas ?)

Je continu à faire des tests et vous les présente pour avoir votre avis.

Aquatiquement,

[TeTRaM78]

@Nico, en fait, la page est divisée en plusieures DIV, toutes stylées selon le css. Le fait est que les menus par exemple représentent pas mal de lignes de code et pas mal de blabla dans les pages d'un site. Pour remédier à ça, j'ai écrit une fonction qui ne fait qu'une chose:

quand on clique sur un lien (par exeemple depuis le menu à gauche), on ne charge pas une page html contenant la totalité de la structure (head, meta, menus, footers/headers, etc), mais juste le contenu data intéressant (globalement, l'information qu'on veut afficher). Ce contenu est envoyé vers une des div qui contient uniquement le contenu informatif. On n'a donc qu'une seule page, mais avec une div dynamique dont le contenu change en fonction de la navigation sur le site.

Ca permet également d''uniformiser totalement le site, au niveau du background, des fonts, des styles, etc, sans constamment renvoyer au client une masse d'information qui ne change pas.

Le script que j'ai écrit utilise javascript et Ajax... Si tu veux plus d'infos, je peux t'en fournir... Si tu veux une maquette plus complete, je peux également t'en fournir une, dans la mesure ou le contenu consistera à faire un "bête" copier/coller depuis ce qui existe déjà dans de nouveaux fichiers html et qui seront afficher dans la page que je vous ai proposé.

Resterait les question des fonctions un peu plus particulières, genre le forum, le chat, les modules d'ajout de fiche, etc...

@Yzy, sur qu'il faut encore travailler dessus... J'ai passé à tout casser 4 heures sur ce layout, dont plus de la moitié sur les scripts... Donc il y a certainement des choses à améliorer niveau graphisme/design, mais n'étant ni graphiste, ni designer dans l'âme (suis un développeur), ce n'est certainement pas abouti...

[Nicolas]

oki je comprend, c'est une sorte de simulation d'iframe, j'avais fait des tests sur ce sujet. C'est super pratique, faudrait juste mettre le DIV de la pub Google en dynamique ... on est rémunéré en % du nombre d'affichage (et de clics) donc si la pub gogole n'est pas réactualisé à chaque clic les revenue risque de diminuer (et on en a besoin même si google est intelligent et voit que c'est la même personne qui surf sur le site à chaque clic)

Aquatiquement,

[Yzy]

@Yzy, sur qu'il faut encore travailler dessus... J'ai passé à tout casser 4 heures sur ce layout, dont plus de la moitié sur les scripts... Donc il y a certainement des choses à améliorer niveau graphisme/design, mais n'étant ni graphiste, ni designer dans l'âme (suis un développeur), ce n'est certainement pas abouti...

En fait, d'après ce que tu nous montres et dis c'est pas facile de se faire une idée, même pour moi qui suis développeur aussi (bon pas trop web).
Je vois à peu près le concept, mais il faudrait regarder le code en détail pour bien comprendre...
Enfin, c'est clair que tu maîtrises ton sujet et tes idées sont les bienvenues, c'est ce que je voulais dire.

[TeTRaM78]

'fin voilà, c'est une contribution... Je peux encore donner un coup de main, mais il faudrait avoir d'autres avis sur l'idée ou non d'utiliser un kit graphique... Perso, je trouve que ça simplifie grandement le travail...

[Pecky]

en fait j'aime la présentation de nico utilisant css3, en l'améliorant, et ensuite si c plus pratique d'utiliser un kit graphique on peut voir comme ça... si techniquement c mieux...
mais niveau design, je préfère les petites idées de l'essai de nicolas pour le coup...

[TeTRaM78]

le css3 est loin d'être compatible sur les machines actuellement... Faut faire vachement attention à ce qu'on utilise au risque de rendre les browsers incapables de comprendre l'information à afficher.

A mon sens, il est encore trop tôt pour passer au css3...

[Antoine91]

Salut !

Heu ... perso je vois fait confiance

[CôtéBidouilles]

Bonjour

C'est vrai un kit graphique peut-être très utile côté gros oeuvre

Mon avis sur ce qui a été écrit jusqu'à maintenant c'est qu'en ayant vu le test2 de Nicolas(https://www.aquariophilie.org/news/test2.php) et sa structure je ne pourrais déjà plus m'en passer Garder tout le temps les différentes barres de navigation à porter de clic !! le pieds !

après comme tu/vous le dîtes , la charte graphique est encore à bosser et ca pfiou c'est pas le moins compliqué ^^

JQuery +12 pour ce système

[Nicolas]

Salut je continu à bosser sur le projet. J'ai testé des kit CSS mais j'ai rien trouvé de concluant, les kit proposé sont soit trop vieux soit ressemble à tous les blogs. En plus pour les adapter à nos options, il y a pas mal de travail.

J'ai donc pioché quelques astuces dans ces kits pour continuer à écrire un truc pour l'asso.

Petit rappel de mes tests :
N°2 https://www.aquariophilie.org/news/test2.php
N°3 https://www.aquariophilie.org/news/test3.php
N°4 https://www.aquariophilie.org/news/test4.php

En ce moment je bosse sur le N°4, je vais me pencher sur le coté design et graphique pour faire un truc plus zolie.

Je trouve qu'il nous manque un truc sur les différents tests, notre nouveau logo sera un dessin, je pense qu'il faut également mettre d'autres dessins ou photos simple pour donner plus de cachet. Je pense à des plantes qui bulles ou reprendre le guppy de l'actuel site qui touche le logo (en haut). Si on met juste notre logo et des arrière plan unie, ca risque de faire un peu tristounet

Affaire à suivre ...

P.S. : je cherche un script qui permette d'agrandir ou réduire une conteneur DIV. Exemple sur cette page http://www.zonecss.fr/style_css/feuille ... l#exemple0 (cliquez sur le bouton Déplier des codes CSS)

[manfried]

P.S. : je cherche un script qui permette d'agrandir ou réduire une conteneur DIV. Exemple sur cette page http://www.zonecss.fr/style_css/feuille ... l#exemple0 (cliquez sur le bouton Déplier des codes CSS)

Hello,

Un truc de genre (vite fait)

Code : Tout sélectionner

<script>
function auto_size(id) {
	var div_size = document.getElementById(id);
	if (div_size.style.height != 'auto') div_size.style.height = 'auto';
	else div_size.style.height = '20px';
}
</script>

<div id="div_test" style="height: 20px; width: 300px; background-color: black; color: white; overflow: hidden" onclick="auto_size('div_test')">
un<br />
deux<br />
trois<br />
quatre<br />
cinq<br />
six<br />
sept
</div>

[Nicolas]

Salut Matthieu,

Comment vas tu ?

C'est exactement ca ... super ! Test en ligne sur https://www.aquariophilie.org/news/test4.php (la zone en dessous de .:: Actualités des sites ::. )
Juste un truc en plus pour être supermégagénialcool : pour que les personnes comprennent bien, en plus de la zone de clique dans le DIV, peut on créer un lien/bouton qui agisse sur le div id="div_test" ?

C'est Pecky qui vas être content car ca correspond exactement à ce qu'elle suggérait.

Aquatiquement,

[manfried]

Hello Nicolas,

Ça va bien et toi ?

Pas de problème pour ajouter un bouton pour plier / déplier :

Code : Tout sélectionner

<script>
function auto_size(id) {
	var div_size = document.getElementById(id);
	if (div_size.style.height != 'auto') {
		div_size.style.height = 'auto';
		document.getElementById('span_test').innerHTML = 'Replier';
	}
	else {
		div_size.style.height = '20px';
		document.getElementById('span_test').innerHTML = 'Déplier';
	}
}
</script>

<span style="cursor: pointer" onclick="auto_size('div_test')" id="span_test">Déplier</span>
<div id="div_test" style="height: 20px; width: 300px; background-color: black; color: white; overflow: hidden">
un<br />
deux<br />
trois<br />
quatre<br />
cinq<br />
six<br />
sept
</div>

Évidemment, en utilisant jQuery on peut rendre le code un plus propre.
Pour info, n'ayant plus de projet personnels en cours pour la première fois depuis plusieurs années, je peux aider un peu à ma modeste échelle.