Pages :
Bonjour, voila je suis en pleine phase de création de ma petite boite de développement web, et j'ai mis en ligne le site il y a peu... J'ai trouvé cette rubrique intéressante, et je vous demande donc votre avis sur mon site pro :
http://lampservices.fr

Merci au site alsacreation, je m'y rends régulièrement.

A bientot sur le forum !
Modifié par lampservices (09 Nov 2012 - 14:38)
Sinon, le nuage de tag qui met en gros "accessibilité" alors que 1. le nuage est tout sauf accessible (liens vides, super difficile à manipuler à la souris, même sans handicap !) et que 2. le site est tout sauf accessible (rien que dans la page tarif, impossible d'avoir des infos sur les prestations sans utiliser de souris... et avec une souris, ça demande une très bonne dextérité... Ton site viens de me montrer que je ne l'avais pas...).


Visuellement, c'est pas terrible, c'est plat et sans grand intérêt. Il manque définitivement une charte graphique à ce site.


Conceptuellement, j'ai un peu de mal avec les auto-entrepreneurs qui se présentent comme une entreprise et parlent de nous. Parles de "Je", tu sera bien plus proche de ton public et plus abordables.

Pour le code :

* 20 erreurs de code (surtout liées à une confusion entre XHTML et HTML).

* L'attribut xml:lang est inutile sur html, puisque tu es en HTML.

* Les meta rights et author n'apportent rien et n'ont aucune valeur ; elles prennent juste de la place dans ton code.

* la meta keywords ne sert à rien (à part aider google a placer des pubs, mais tu n'en a pas).

* Ta meta description est tout sauf sexy. Cette meta, qui est une des rare a avoir un réel intérêt, permet d'afficher un contenu dans les page de résultats de Google et ses potes (si le contenu est jugé pertinent). Ce contenu est celui qui peut décider un clic, il est à bichonner !

* Tu as 6 scripts JS, c'est beaucoup. 1 seul fichier externe est bien suffisant. Il est d'ailleurs préférable de la placer en fin de document, histoire de ne pas ralentir le site (vu que tu vends de l'optimisation, ça fait tâche), sauf si le script a un chargement asynchrone.

* Lattribut alt est obligatoire sur img...

* Il est dommage d'avoir des styles en ligne alors que tu utilises des feuilles CSS externes.

* Si les images ne sont pas chargées ou vu, ton site perd beaucoup d'informations, notamment son titre... Toute image porteuse de contenu doit être inclue dans le code HTML et non en background CSS avec un alt correctement rempli...

* Tes "actus" n'ont strictement rien à faire dans ton bloc "nav".

* Des <p>aragraphes seraient plus appropriés que des divs pour des actus (ou même rien, puisque tu es dans des li.

* Ton site est très vide sans JavaScript... Ça risque de gêner un peu son indexation (même si Google gère un peu mieux le JS maintenant).



Personnellement, je pense que tu devrais revoir le champs de tes prestations : tu es surement un très bon développeur, mais tu n'es pas un bon intégrateur et tu n'es pas designer.
Ok, merci pour ces réponses hautement précises. C'est sympa de m'accorder un peu de temps !

Je prends note de toutes tes suggestions Laurie-Anne.

En revanche je tiens à te le confirmer, je suis ni intégrateur, ni graphiste, mais bien développeur Smiley cligne .
Je sais que alsacréations est plus orienter vers le graphisme que le dev, mais votre avis m'est tout aussi cher concernant le style de mon site et sa conception.


Pour le "nous auto-entrepreneur" merci de me préciser ou tu l'as vu, car j'ai bien fait attention à ne pas l'utiliser (pourquoi dire "nous" ? je bosse tout seul...). Mais je reste une entreprise par contre....

Pour le nuage de tag, c'est vrai que ça peut ne pas paraître commode. Il est pas spécialement fait pour faire joujou avec, mais je l'ai mis plus dans une optique de faire quelque chose d'original et qui aide un peu au référencement... Je trouve ça distingué et joli avant tout.

Concernant le champ de mes prestations, je ne vais pas me fermer des portes tout de suite vois tu. J'ai des objectifs clairement orientés dev, mais dans un soucis commercial, je peux pas occulter des choses que je suis capable de faire (certes moins bien qu'un graphiste, mais quand même).

En tout cas merci pour ces critiques constructives et argumentées !
Julien
Ah oui ! J'ai oublié...

Les meta keywords ne servent plus vraiment à rien de nos jours ??

Et concernant les balises title et meta description : doivent elles être appropriées pour chaque page, ou peut on faire un title et une description générique pour tout le site ??

Merci
Modifié par lampservices (09 Nov 2012 - 14:43)
Modérateur
Bonjour et bienvenue sur Alsacréations,

lampservices a écrit :

Je sais que alsacréations est plus orienter vers le graphisme que le dev


Pas vraiment orienté vers le graphisme. Lire la section À propos pour en savoir plus.
ok, la c'est carément plus clair !!! Smiley lol

En tout cas changez rien, alscréations est une vrai mine d'info précieuses !
Bon, j'ai appliqué quelques modifs...
Par simple curiosité, quelles site et/ou système utilisez vous pour "auditer" un site ? le w3c validator ?
Jai W3C Validator qui me sort àa comme erreur :

Line 5, Column 74: Using windows-1252 instead of the declared encoding iso-8859-1.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Kézako ? Smiley ohwell
Salut Voisin (je suis pas loin de Toulouse),

Bref, ton site est pour le moment "illisible", le div#content est en display none sous FF...

En fait, c'est le Javascript qui est intrusif. Je suis derrière un proxy au boulot, et je vois qu'il me bloque le chargement du JS, ce qui fait que je ne vois pas le contenu (sauf m'amuser à supprimer la règle display:none à chaque fois !).

Pour ton erreur, est-ce un problème d'encodage de ton fichier ? Car tu en déclare un, mais semble en utiliser un autre.

Pour les autres erreurs, une balise type in-line ne peut pas accepter de balise type block (li qui contient div).

De plus, une liste non ordonnée (UL) ne peut être formée ainsi :

 <ul class=actu>
News et liens intéressants :


Si tu veux titrer tes listes, tournes toi vers

<dl>
<dt>Titre</dt>
<dd>Ligne</dd>
</dl>


De plus, si je ne dis pas de bêtise, DT accepte les balises de type block ? (à corriger si je dis une boulette).

Voilà pour le premier jet Smiley cligne
Salut Voisin !

Ton proxy bloque le chargement du JS ?? Tu dois être pas mal embêter pour la navigation en général alors ?! Je comprends pas pourquoi il chargerai pas ça... J'avoue que j'ai mi une bonne de couche de JQuery au niveau "stylistique", et je suis prêt à couper quelques lignes de code, mais ça me parait tout de même bizarre que ton proxy ne charge pas les fichier JS nécessaires.

pour l'encodage, mais fichiers sont bien en latin-1, c'est peu etre les réglages d'apache...Je suis chez 1and1...pour l'instant... Smiley ohwell

Je vais refondre ma liste de news, c'est vrai que j'ai un peu fait le bourrin au moment du dev, et vu que le résultat ne pose pas de probleme, jai pas creuser plus loin Smiley lol ...

Merci pour ton coup d'oeil sur mon site en tout cas !
ok, bon, j'ai enlevé l'effet fadeOut/fadeIn sur les chargements des pages...

Etant donné que tu es le seul pour l'instant a pouvoir générer ce bug Super_baloo8, tu pourrai regarder si ça passe bien maintenant ? (quand tu as 2 sec bien évidement, rien ne presse...)
Pour l'encodage, il faudrait que j'y revienne dessus, mais je n'ai pas trop le temps ce soir.

Pour le proxy, en fait il bloque tout simplement car ça doit être un site pas "autorisé" par le proxy.

Et d'ailleurs ce ne sont pas forcément les scripts JS qui sont bloqués, mais les scripts JS + images (bizarre ce fonctionnement), mais je ne contrôle absolument pas le proxy !

"NetworkError: 403 Forbidden -  http://lampservices.fr/images/different.jpg"


Ensuite, le problème du conteneur invisible, est une règle CSS, donc sans JS qui enlève cette règle, je ne vois toujours rien Smiley cligne
lampservices
a écrit :
Jai W3C Validator qui me sort àa comme erreur :

Line 5, Column 74: Using windows-1252 instead of the declared encoding iso-8859-1.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Kézako ?

Bin, ça veut dire que ton fichier est encodé en windows-1252 alors que ta meta content-type déclare qu'il l'est en iso-8859-1.

L'encodage de tes pages doit correspondre à ta meta content-type ou le contraire.

Des éditeurs de code comme Notepad++ ou PSPad font ça très bien.

Le mieux est d'encoder tes pages en utf-8 : l'utf-8 supporte tous les caractères, ce qui permet de remplacer les HTML entities (&eactute;, &egrave;, etc.) par les caractères réels. Si tu utilises Windows, le Bloc-notes fait ça très bien.

En HTML5, la meta est :

<meta charset="utf-8" />

Bonne continuation.
Modifié par thierry (10 Nov 2012 - 19:14)
Depuis la maison, ça va déjà mieux Smiley cligne

C'est bizarre c'est effet d'apparition de la page, j'ai l'impression que le contenu arrive en et décale ma fenêtre (c'est du à la barre de défilement non présente qui arrive avec le déroulement du contenu) [Visible uniquement avec Chrome, sous Firefox, le chargement n'étant pas aussi rapide, ça ne se voit pas]

Au niveau du menu, je suis toujours gêné (de manière générale) lorsque je survole un texte et que ce dernier se met a bougé (changement de taille/grasse).
Je n'ai pas regardé plus que ça niveau technique utilisé, mais lorsque l'on survole le menu, si on ne touche pas le texte, pas d'arrière plan en blanc.
De deux, pourquoi ne pas mettre la même taille d'arrière plan blanc entre le survol et lien actif ? Ca me semblerai plus "logique".

Sur la page des tarifs, l'animation peut ... perturber (tout le bas du site qui bouge très/trop? vite). De plus, je vois qu'il n'y a pas de contrôle dans le déroulement de l'animation.
N'hésites pas à utiliser les callbacks de jQuery pour vérifier/attendre un état avant de lancer/continuer une animation.
Je m'explique, lors je fais mumuse avec mon mulot dessus, en faisant de large mouvement haut/bas de manière rapide (pendant 5 secondes), les animations continues pendant plusieurs secondes avant de s'arrêter alors que j'ai arrêter de tripoter mon mulot.

Sur la page des offres, je m'attendais à un peu plus d'informations en survolant les titres des deux offres, il y a un changement de fond (gris -> blanc), mais ça s'arrête là.
Peut être aurait-il été déjà un poil plus pertinent de gérer cet effet sur tout le bloc de l'offre plutôt que juste de le titre ?

Dans compétence et outils, les icônes aurait mérité un fond transparent pour mieux se marier à l'effet de survol qui change la couleur de fond.

Pages projets réalisés, elle est un peu longue à s'afficher, et comme aucun indicateur de chargement/boucle n'est visible, on ne s'est pas trop ce qui se passe.

Page contact, (désolé pour le spam), tu ne devrais pas te contenter de laisser la vérification côté serveur (avec html5). Ainsi j'ai pu mettre une adresse mail invalide, sans l'extension du nom de domaine.
Il faut toujours vérifier ses formulaires côtés serveur. Je n'ai pas tester l'injection SQL ou autre (ça prends plus de temps!).
De plus, si on veut mettre un téléphone au format international, ça ne passe pas (je ne connais pas le public que tu vises, mais au cas où, je préviens).
Ensuite, cliquer sur un bouton pour afficher le formulaire ... je ne suis pas fan.


Donc pour le résultat de manière générale, je vois que tu t'amuses bien avec jQuery, mais attention, les animations sont sympa quand elles sont discrètes, et là, il y en a un peu beaucoup (à mon goût, ça n'engage que moi).

Petit conseil sur jQuery, par rapport à ce bout de code:

function bienvenue(){
    $("#dtarifs").toggle(1000);
    $("#draf").toggle(1000);
    $("#dmaj").toggle(1000);
    $("#dopt").toggle(1000);
    $("#dmodclass").toggle(1000);
    $("#dnewpages").toggle(1000);
    $("#ddesign").toggle(1000);
    $("#dmodorig").toggle(1000);
    $("#dheber").toggle(1000);
    $("#dref").toggle(1000);
    $("#ddom").toggle(1000);
    $("#dmodperso").toggle(1000);
    $("#ddevapps").toggle(1000);
    $("#dtarifs").toggle(1000);
    $("#draf").toggle(1000);
    $("#dmaj").toggle(1000);
    $("#dopt").toggle(1000);
    $("#dmodclass").toggle(1000);
    $("#dnewpages").toggle(1000);
    $("#ddesign").toggle(1000);
    $("#dmodorig").toggle(1000);
    $("#dheber").toggle(1000);
    $("#dref").toggle(1000);
    $("#ddom").toggle(1000);
    $("#dmodperso").toggle(1000);
    $("#ddevapps").toggle(1000);
}


Tu peux soit, utiliser une class particulière pour tous les cacher en même temps, soit cumulé l'ensemble dans un seul sélecteur du style :

$("#dtarifs,#draf,#dmaj,#dopt,#dmodclass").toggle(1000);


Ou encore, générer tes ID pour qu'il contienne tgle (toggle) dans l'attribut ID pour tous les sélectionné d'un coup

$("*[id*=tgle]").toggle(1000);


Mais c'est peut être un enchainement pour créer une animation ? Du coup, le callback sera plus sympa :

var speed = 1000;
    $("#dtarifs").toggle(speed, function()
		{
		$("#draf").toggle(speed, function()
			{
			$("#dmaj").toggle(speed, function()
				{
				$("#dopt").toggle(speed);
				});
			});
		});

Bref, c'est un autre sujet, si tu veux de l'aide n'hésite pas en ouvrant un sujet là dessus dans la bonne partie du forum.

J'ai oublié quelque chose, tant que tu as jQuery, tu peux réduire cette fonction:

function effaceDivTarifs(){
    getId("dtarifs").style.display='none';
    getId("draf").style.display='none';
    getId("dmaj").style.display='none';
    getId("dopt").style.display='none'; 
    getId("dmodclass").style.display='none';
    getId("dnewpages").style.display='none'; 
    getId("ddesign").style.display='none'; 
    getId("dmodorig").style.display='none';
    getId("dref").style.display='none';     
    getId("dmodperso").style.display='none'; 
    getId("ddevapps").style.display='none';
}


Par
function effaceDivTarifs(){
	$('#dtarifs,#draf,#dmaj,#dopt,#dmodclass,#dnewpages,#ddesign,#dmodorig,#dref,#dmodperso,#ddevapps').hide();
}


Sur ceux, je te souhaite une bonne soirée, et un excellent week end !
Modifié par Super_baloo8 (09 Nov 2012 - 23:39)
thierry :
a écrit :
Bin, ça veut dire que ton fichier est encodé en windows-1252 alors que ta meta content-type déclare qu'il l'est en iso-8859-1.


C'est la que je comprends pas, mon fichier est bien encodé en latin-1/ISO-8859-1, et je travaille avec komodo edit, sous ubuntu... Je sais pas d'ou sort ce format "windows-1252"...


Super_Baloo8, merci pour tes conseils et suggestions ! Je regarde tout ça dans le weekend, quand j'arrive à me dégager un peu de temps ! Et oui, j'y suis peu être aller un peu fort avec certains effets jquery, je vais essayer d'être un peu plus subtil... Smiley lol (c'est la nature des toulousains ça.... Smiley cligne ).
Pour les vérif coté serveur, mea culpa, je voulais à tout prix tester les nouveaux input html5, et j'ai pas encore pris le temps de faire les procédures classiques...(merci pour ton devis, tu es mon premier faux client... Smiley ravi ). En revanche cote injection sql, pour l'instant rien à craindre, ya pas de bdd derriere...

Sur ce bon weekend a vous aussi, et encore merci les alsaciens !! Smiley ravi
Bye !
Modifié par lampservices (10 Nov 2012 - 13:31)
Bon, j'ai fait les quelques modifs nécessaires, enlever quelques effets jquery, et contrôle le form du devis coté serveur...

Je vais en rester la pour l'instant, car avoir un site, c'est bien, mais des clients, c'est mieux ! Smiley murf
Les deux prochaines semaines vont être dédiées à des démarches plus 'commerciales'...

Merci pour vos contributions !
Re bonjour tout le monde !

Je reviens faire un ti tour car j'ai apporté quelques modifs à mon site pro.
Selon les différents échanges que j'ai eu sur ce fil (et les conseils aussi), j'ai apporter pas mal de modifs à :
- la page d'accueil
- la page tarif
- une page supplémentaire 'bonus'
- et peut etre une ou deux page qui ont pu changer depuis...

J'ai virer quelques effets jquery **polémiquant** Smiley biggol et essayer de faire un truc un peu plus 'visuel' (images, vidéos,...).

Merci de me donner vos avis (surtout pour la page d'accueil) si vous avez deux secondes... Smiley lol
A+
D'après les précédents posts, ça n'a pas l'air d'avoir beaucoup changé Smiley ohwell

- Pas de (bonne) charte graphique.
- La bannière n'est pas jolie et très dégradée.
- Le nuage de tags est franchement inutilisable.
- La timeline pour Parcours est bien, mais ne serait-ce pas mieux de commencer par l'année la plus récente plutôt que par «1997/1998: Création de sites Internet thématiques avec un groupe d'amis.» Smiley cligne
- Les placeholder sont répétitifs des libellés dans le formulaire Devis gratuit (d'ailleurs, pourquoi ne pas utiliser des LABEL pour les libellés?)
- La page de coordonnées est bien.
- Par contre, la page Bonus (??) est un peu risible : «une suite de petites applications» (y'en a une), «fonctionannt», «stay alert !» (lol wut)

Au demeurant, c'est un site intéressant, même si le titre laisse penser qu'il s'agit d'une société dédiée à LAMP Smiley smile
Salut Muchos.
Merci pour ton point de vue, je suis d'accord sur quelques points (bannière,timeline,placeholder).

- Pour la charte graphique, j'ai fait le choix de faire mon site sans CMS, donc la partie theme est faite maison, et je ne suis pas webdesigner...(donc c'est chaud, je fais au mieux Smiley biggol )
- Pour le nuage de tags, il est juste la pour faire joli, et démontrer les possibilités (donc pas vraiment fait pour être cliqué)
- la page bonus est toute récente (oui, je n'ai qu'une seule appli pour l'instant), donc c'est normal...merci pour la faute de frappe en tout cas, j'l'avé pô vu ! Smiley eek Le "stay alert" te plait pas ? J'aurais penser que ça amener un peu de légereté... Smiley bawling

Juste une petite demande supplémentaire : la vidéo sur la page d'accueil ? Vous en pensez quoi en tant que spécialiste de l'intégration ? Ya bon ?

Merci du coup d'oeil en tout cas ! Bon weekend !
Pages :