Design & Développement web - Le topic des canards qui mangent des cookies

[aggelon]

Salut les loulous,

Quelqu'un pourrait jeter un oeil à ça http://forum.canardpc.com/threads/61...=1#post8387129 et critiquer mon travail de webmaster artisanal néophyte ?

Merci d'avance

[tenshu]

Warning


Je vais être cash, pas par méchanceté mais par ce que j'aime que ce boulot ne soit pas corporatiste, donc je vais le juger comme je le ferais avec un site sur lequel on me balance pour de la maintenance.

Splash:

Aucun intérêt de coller une splash page, c'est une mauvaise pratique.
Et le code, sérieusement ?

<TITLE>Annartbra - le design au service du bois</TITLE>
<div align=center><a href='index.php'><img src='annartbra.jpg' border=0></a></div>

dafuq?

La page d'accueil de la boutique :

Perso je comprend pas que je suis sur une boutique.
Y'a qu'un indice avec le panier en haut, mais si je surf normalement je pense me trouver sur un site plaquette d'une société.
En général sur un accueil e-commerce tu va trouver des remonté de produit, ce genre de chose qui vont valoriser ton catalogue.

Elle pèse 7,6MB c'est tout simplement inacceptable, la page à mis 53s à charger sur mon poste de boulot.
L'utilisation d'un slider est inutile, seul 10% des utilisateurs cliquent dessus en moyenne, voir : http://shouldiuseacarousel.com/

Le titre est défini comme ceci :

<p style="text-align: center;"><strong><span style="font-family: helvetica; font-size: 36pt; color: #008000;"><br /></span></strong></p>
<p style="text-align: center;"><strong><span style="font-family: helvetica; font-size: 36pt; color: #008000;"><br /></span></strong></p>
<p style="text-align: center;"><strong><span style="font-family: helvetica; font-size: 36pt; color: #008000;">LE DESIGN</span></strong></p>
<p style="text-align: center;"><strong><span style="font-family: helvetica; font-size: 36pt; color: #008000;">AU SERVICE</span></strong></p>
<p style="text-align: center;"><strong><span style="font-family: helvetica; font-size: 36pt; color: #008000;">DU BOIS<br /></span></strong></p>

RIEN ne va :
un <p> désigne un paragraphe de texte
On ne défini pas de style en ligne (style="")
Pas besoin d'utiliser <strong>
Tout ça devrait se trouver dans une feuille de style.

WTF le code sous ?!

<!--[if gte mso 9]>

La page ne défini pas de titre (<h1>)


Pages intérieures:

Elles ne définissent pas de titre.

Même remarque sur les style en ligne.
On ne justifie PAS le texte sur le web.

Le style des textes varie d'une page a une autre.

Certaines images sont trop lourdes d'autre en résolution cracra.

Le texte sur les images n'est pas lisible par les moteurs de recherche, en conséquence une page comme "notre philosophie" ne contient rien pour google.
Les internautes ne sauront rien de votre philosophie, ni des essences de bois.

Boutique:

Pas trop a redire, c'est pas très joli mais bon prestashop fait son taff.
Les images sont toujours trop lourdes.

Vinum:

Je comprend que vous voulez vraiment vendre des blocs de chêne à 2500 euroballes, mais je suis pas certains que répéter l'entrée de menu plusieurs fois soit utile (menu principal; menu coté maison, plus un/des renvois genre dans essences).

Technique:

Les js ça se compresse et ça se place en bas de page
Les css sont compressés.

Remarques:

C'est dommage de pas exploiter les photos qui sont très belles à la base pour faire un truc qui claque.

Maintenant le truc qui fache, pour 69$ sur themeforest voici les démos des 2 thèmes les plus vendus :

- http://themeforest.net/item/warehous...review/3178575
- http://themeforest.net/item/transfor...review/5095795

Je sais pas combien de temps tu as passé sur le thème mais je pense que même au salaire minimum horaire, ça fait plus que 55€.

---------- Post added at 14h02 ---------- Previous post was at 13h53 ----------



Annexes:

Ca serait trop long de donner une documentation sur tout les principes qu'il faudrait savoir pour faire un site web avec les bonnes pratiques.
Tout simplement par ce que ce sont même pas un mais des métiers qui demande de la formation et l'expérience.

Quelques base:
Il faut comprendre la sémantique de l'html (quelle balise sert a signifier quoi) : http://www.w3schools.com/html/default.asp
Il faut maitriser des rudiments de css pour mettre en forme le html : http://www.w3schools.com/css/default.asp

[tompalmer]

L'utilisation d'un slider est inutile, seul 10% des utilisateurs cliquent dessus en moyenne, voir : http://shouldiuseacarousel.com/

Si je ne m'abuse, l'intérêt c'est pas que les gens cliquent dessus, mais ça fait du remplissage quand tu sais pas quoi mettre sur ta home.

[tenshu]

Si je ne m'abuse, l'intérêt c'est pas que les gens cliquent dessus, mais ça fait du remplissage quand tu sais pas quoi mettre sur ta home.

Monsieur le web c'est sérieux et on a tellement de sites à lire et si peu de temps à vivre que je me ferais un plaisirs de coller au bucher les créas qui "font du remplissage".

[tompalmer]

Le problème c'est que les contenus intéressants sont jamais sur la page d'accueil, sauf si t'as des news, un blog.

[tenshu]

Je comprends pas.
Les contenus intéressant c'est toi qui les défini, les remontées en HP aussi.

Donc dire qu'ils n'y sont jamais...

[tompalmer]

Si on parle de site vitrine, ta page d'accueil c'est bien souvent "bienvenue sur mon site, ma philosophie c'est ci et ça, et ce que je dis n'a aucun intérêt informatif".
D'où l'idée des contenus dynamiques ce qui donne :

Slider, petite liste des pages présentée horizontalement (ce qui est la même chose que le slider bien souvent mais en texte)
Et le footer.

La Home c'est dur a faire

[tenshu]

[tompalmer]

Bah vas-y, on va illustrer ça, file nous une home

[aggelon]

Merci pour vos remarques et critiques. Merci tenshu d'avoir pris le temps de ce compte-rendu détaillé.

C'est tout à fait ce genre de remarques dont nous avions besoin et effectivement il a manifestement des choses qui nous ont échappées

Nous allons travailler dessus.

Encore merci


EDIT: par contre, les remarques sur le code, on peut remercier Prestashop
(sauf la prépage qui n'est visiblement pas gérée automatiquement)

[Sekigo Le Magnifique]

Vu que je commence à avoir pas mal de bordel en JS, j'ai un gros besoin d'un équivalent à pip+virtualenv (python). En gros, encapsuler un projet, et prévoir le développement via git à plusieurs de manière plus ou moins standard. C'est pas du tout les mêmes contraintes, j'en suis conscient.

Pour un équivalent à pip, c'est rapide à trouver, c'est bower. Et ça s'utilise à peu près de la même façon : un bower install mon_paquet, ça télécharge le paquet, ça le met sur le disque et roule ma poule. Après, y a pas vraiment de notion de chemin ou de bibliothèque centrale, mais c'est logique pour du JS. Bref, pas trop de problème de ce coté là, si ce n'est la gestion du bordel en prod. Est-ce que je dois avoir UN seul repertoire contenant toutes mes bibliothèques JS ? Est-ce que je dois avoir les bibliothèques clonés projet par projet ? Et comment on gère les versions ? D'où mon intérêt d'aller voir du coté d'un truc qui se rapproche plus ou moins de virtualenv.

Le truc sur lequel je tombe et qui a une relative bonne page de quickstart, c'est yeoman. Alors, malgré un bug chaque fois que je crée un projet (faut que j'installer npm install grunt --with-dev ou un machin dans le genre), ça fonctionne. Mais qu'est-ce que c'est leeent pour mettre en place le projet, trois ou quatres minutes en utilisant le machin pour angularjs. Et que c'est verbeux... Ça te raconte un tas de trucs avec une tonne de warnings sans que je sache vraiment pourquoi.
Et c'est hallucinant la place que ça prend. Mon projet, qui est encore en prototype, pèse dans les 1Mo tout mouillés. Après avoir fait le truc avec yeoman, je me retrouve avec un dossier de 205Mo. Ça calme, je ne m'attendais absolument pas à avoir un boeing sous les pieds.
Après, j'imagine que pour les développeurs front-end ou qui développe en nodejs, ça doit être super utile. Y a des tas de machins intégrés et qui se mette en place tout seul. La minification, les préprocesseurs css (que perso, je n'aime pas du tout, bien que je reconnaisse leurs utilités pour d'autres personnes) et plein d'autres gadgets plus ou moins utile pour moi.
Y a aussi un truc intégré qui permet de recharger automatiquement la page à la moindre modif' d'un fichier dans le projet.Ça a l'air cool, mais en fait non. Parce que c'est un poil lent, ça met 2 ou 3 secondes à se recharger. Et c'est bête parce que c'est plus de temps que de le faire manuellement avec alt+tab > F5 (je suis en mono-écran). Je crains que si le truc commence à devenir un peu plus lourd, le linter intégré pour JS va se mettre à ralentir de plus en plus (vu que d'après ce que je vois, c'est ce qui bouffe le plus).

Un truc aussi qui risque de m'empêcher de l'utiliser à mon boulot, si malgré tout, les avantages dépassent les inconvénients, c'est le coup des CDN automatique chez google pour la prod. Je ne sais pas vraiment si google peut nous tracker comme ça, et de toute manière, si mes boss voient ça, c'est mort parce qu'il y a quelques soucis entre l'entreprise où je bosse et google (à cause du secteur un peu tendu en ce moment), et que tous les programmes qui font une requête chez eux pour récupérer un machin sont bannis (les interfaces web via le navigateur sont l'exception, c'est pas super logique mais c'est pas moi qui fixe les règles). En plus de ça, je ne fais que des outils interne et y a une chance non négligeable pour que ce soit bloqué vers internet.

J'ai été regardé vite fait pour grunt (vu que yeoman l'utilise) ou gulp, mais je pige que dalle et je ne vois pas à quoi ça pourrait me servir concrètement et si ça répond à mon besoin. Je vais continuer à tester yeoman durant deux ou trois semaines, parce qu'il est noob-friendly et que peut-être je découvrirais d'autres trucs qui peuvent m'être utile par la suite dans mes développements perso/pro. Mais je ne pars pas sur un super bon à-priori.
Si vous avez des alternatives, n'hésitez surtout pas.

Edit: pour les bibliothèques, à la limite, peut-être mettre en place mon propre CDN. Je ne sais pas vraiment ce que c'est et comment ça marche, mais ça vaut peut-être le coup. Y a aussi le problème de comment faire quand on est sur une machine qui n'a pas accès à l'éventuel CDN central. Ça résoudrait une partie de mon besoin. Pour l'autre, avoir un truc plus ou moins standardisé pour le déploiement, je recherche encore.

Edit 2: lol non. Je viens d'aller voir ce que c'est un CDN. Je pensais que c'était un serveur central (et je ne comprenais pas pourquoi ça avait un autre nom que "serveur", hormis la hype).

[tenshu]

Alors je suis pas un spécialiste du sujet mais je parle souvent avec mes collègues qui font du angular.

Bower, tu définis un package.json et il installe toutes les dépendances que tu auras défini.Regarde dans leur doc ils expliquent comment définir les versions et tout.

Sinon tu as tout bêtement npm comme gestionnaire de paquets.

Grunt ça sert à définir des "tâches" utiles pendant la phase de développement: compresser les assets, valider les fichiers, lancer les tests etc.

Yeoman est costaud par ce que ça permet (si j'ai pigé) de définir des squelettes d'applications, j'imagine que ça facilite l'industrialisation de solutions.
A priori c'est ce que tu recherches non ?

[blueray]

Salut les canards,

Je poste ici vu que c'est le topac des canards qui s'y connaissent un peu sur le web. Mais je peux bouger ma requête si nécessaire !

Bref, je cherche à monter un ptit site référencant des bars, sur le modèle d'un airbnb ou tripadvisor et consorts. J'imagine partir sur un wordpress vu que je connais pas trop mal (le setup et la maintenance, pas le dev). Du coup je cherche un thème qui serait à même de répondre à cette problèmatique, mais je n'en trouve point (de gratuit :3 ).
Les fonctionnalités que je cherche :
- création d'une fiche par bar (avec photos, descriptions, le classique quoi) éventuellement dans un répertoire ville.
- possibilité de noter les bars (par le webmaster, mais aussi une note par les utilisateurs)
- sobre !
- carte gmaps pour repérer le bar (mais ca je devrais pouvoir trouver un moyen de le faire via un plugin)

Auriez vous une idée d'où je pourrais trouver cela ?

Merci d'avance !

[deathdigger]

Je ne comprends pas cette propension qu'ont les gens à utiliser un tournevis pour planter un clou.

[tenshu]

Je ne comprends pas cette propension qu'ont les gens à utiliser un tournevis pour planter un clou.

Tu fais référence à quoi exactement ?

[blueray]

Que l'on utilise wordpress pour faire autre chose que du blog peut être ?

[tenshu]

Mouai, on peut faire pleins de choses avec WP.

Pour tes questions, je sais pas trop comment répondre, faut que tu fouilles les thème gratuits et les extensions pour essayer de remplir ton ptit cahier des charges.

[blueray]

Je pense aussi que WP est bien plus qu'une simple plateforme de blogs. J'ai pas mal fouillé, mais pour l'instant je trouve soit des thèmes payant (bon, pas trop cher, ca serait jouable), mais qui font beaucoup trop pour le coup ).
Je vais continuer à chercher !

[deathdigger]

Mouai, on peut faire pleins de choses avec WP.

Oui, et on peut développer un site web en COBOL.

[tenshu]

Oui, et on peut développer un site web en COBOL.

Oui, et donc ?

[Sekigo Le Magnifique]

Oui, et on peut développer utiliser et s'amuser avec un site web en Wordpress.

Fixed.
On parle d'un mec qui apparemment se débrouille pas trop pour le dev.

J'aime pas wordpress en tant que développeur, mais je le recommande pour qu'on ne me casse pas les couilles les personnes qui ne sont pas dev et qui ne veulent/peuvent pas acquérir des compétences là-dedans.

[blueray]

Yep, c'est bien résumé.
L'idée est d'utiliser wp pour tester rapidement le projet.

[Sekigo Le Magnifique]

Mon Dieu, je travaille avec des guignols. Je le savais mais là, j'ai creusé encore plus loin dans le puits sans fin de la connerie.

D'habitude, je n'interviens quasi-jamais sur du code php. Je n'aime pas la techno, mais surtout, je n'aime pas les gens de mon boulot qui utilise cette techno.
Et mes collègues non-développeurs me signalent un bug sur un script php qui plante régulièrement et qui fait perdre pas mal de temps. Vu que je n'avais pas grand chose à faire, je décide de regarder ça et de le réécrire en php pour le fun (chaque fois que j'interviens sur un code d'un autre développeur de mon boulot, je perds moins de temps à le réécrire qu'à le corriger, c'est une routine que j'ai malheureusement intégré). Évidemment, pas de doc, pas de commentaire, c'est ma bite et mon couteau.
Le script fait ~500 lignes, ça va. Passe la phase d'analyse.
Ok, c'est un truc qui va chercher des zips sur un ftp, récupère des données dans une BDD et dézippe le tout pour déplacer dans un dossier en renommant les fichiers selon les données issus de la BDD. Il écrit aussi un petit xml pour lister les fichiers. 500 lignes pour ça, j'ai l'habitude maintenant mais ça me semble toujours aussi con.
Dans les anecdotes idiotes, la requête SQL est un simple SELECT MACHIN FROM TRUC WHERE BIDULE=? sans jointure, sans rien. Sur ça, le développeur à réussi à se foirer en lançant la même requête plusieurs fois dans un foreach de fetchall. Au lieu d'avoir une requête, on en a n*n (il y a deux foreach imbriqués, je ne sais même pas pourquoi). Et j'ai mis un point d'interrogation plus haut, mais en fait, il balance direct $_GET dans la requête, sinon, c'est pas funky.
Aussi, selon toute vraisemblance, le dev ne connait pas le mot "array". Pour récupérer les données du SELECT, il les écrit dans un fichier, qu'il relit quand il en a besoin. Apparemment, il n'a pas compris la corrélation entre fetchall, foreach et array.
C'est des trucs que je vois au quotidien.

Le nouveau truc pour moi dans ce script, c'est qu'il y avait les fameux zips. Je ne comprenais pas pourquoi il n'utilisait pas les fonctions zip de php, et qu'il utilisait une commande système pour ça (en l'écrivant dans un fichier et en lançant sh, parce qu'il n'y avait pas encore assez de trous de sécurité). En réécrivant le script, j'utilise ces fameuses fonctions et j'ai un message d'erreur "unzip not found blablabla" ou un machin comme ça. Bizarre, on a une vieille version de php, mais quand même, zip, ça existe depuis la nuit des temps.
Et je me souviens que j'en avais parlé une fois en demandant pourquoi ils n'utilisaient pas les fonctions built-in, et les devs me disaient que c'était impossible, la version de php est trop ancienne, et qu'ils ne voient pas le problème avec leur façon de faire.
Je regarde quand même sur la doc, il faut installer une extension pecl, un coup de google avec "php install zip pecl debian 3" et les premiers résultats me donnent tous "yum install php-pecl-zip" (ou un truc dans le genre). Temps de l'opération entre la lecture du code et la résolution du problème : 10 minutes. Et ça fait 10 ans qu'ils font comme ça parce qu'ils n'ont pas lu la doc. La doc du langage qu'ils utilisent EXCLUSIVEMENT tous les jours (ils ne connaissent rien d'autre, attention, il ne faudrait surtout pas se former ou découvrir autre chose. Y a AUCUNE bibliothèque php externe, la fois où j'ai mis une bibliothèque JSON, ils étaient paumés et ils ont modifié le code source de la bibliothèque en y introduisant des bugs...).

J'ai l'impression de travailler au milieu de singes qui tapent au hasard sur leur clavier. C'est hallucinant et fascinant à la fois, je découvre des nouvelles conneries à peu près tous les jours.

[gros_bidule]

Tu n'as pas peur d'avoir des soucis en critiquant ainsi ton employeur ?

[moimadmax]

La je crois que ça devient ridicule*. Par pitié n'utilisez pas ce genre de popup, c'est la grosse plaie sur mobile. Et impossible a quitter car quand on clic sur la croix de fermeture, ca zoom et la croix devient hors cadre. Du coup ca devient un rage quit. Tant pis un lecteur de perdu.

Je pense qu'il faut éradiquer ces pratiques.
Je vais la proposer a jamais le premier soir
* ridicule car il y a un popup d'invit a la nwsletter en dessous d'un popup de pub.
RRAAAaaahhh.

[gros_bidule]

Adblock ne lui fait pas sa fête ?

[tenshu]

Soutine Sekigo, la violence du truc
Déjà php 5.1 dois avoir plus de 10 piges, je sais même pas si je pourrais faire du code correct la dessus.
C'est triste mais c'est ce genre de boote et de dev qui font que le php est considéré comme un truc de bricolo.

Moi ca fais 3 mois que je redevenu dev Symfony.
Aucun regret je me fais plus kiffé qu'en 2 ans de Drupal.
Pas contre j'ai un direct technique hyper zarbi.

Le mec n'aime rien : git, phpstorm, Symfony, les bundle, les services, la pattern MVC, l'agile, les mac, les BDD relationnelles, vagrant, composer, capistrano...
Je sais plus comment aborder ce mec vu qu'il n'écoute rien de ce qu'on lui dit
A croire que son idéal c'est du plain php, cvs, ftp, méthode larache ISO 1664.

[Sekigo Le Magnifique]

Ouaip, j'ai modifié un peu le message pour les trucs qu'on pourrait recouper, on ne sait jamais. Je n'avais aucun nom ni rien, mais bon. Prudence est mère de sureté.
Après, faut pas croire que je suis au bord de la dépression ou un truc dans le genre. En fait, l'anecdote sur les zips m'a fait rigoler. C'est tellement représentatif du délabrement technique de là où je suis, pour des bêtises finalement.

Après, y a quand même des trucs qui me font rester, hormis l'aspect technique à la ramasse. Je ne suis pas masochiste non plus.
Et j'ai espoir de faire remonter la pente petit à petit. Mais je me rend aussi compte depuis quelques temps que le jour où je me barre, c'est le bordel. Et que je porte un peu trop de choses au niveau qualitatif qui font illusion que tout va bien, ce qui n'est pas très sain pour moi et pour les autres. Alors que je ne suis pas un génie, je ne suis pas un dieu de la prog', j'essaye juste de bien faire mon job et d'anticiper les choses au maximum.
Mais je suis en train de me tater pour commencer à écrire des scripts cgi en haskell pour les mettre dans la même situation que celle où je suis
Autant y aller à fond dans l'aspect non maintenable des choses. Et au moins, je tirerai un peu de fun de tout ça.

[Teocali]

je ne suis pas un génie, je ne suis pas un dieu de la prog', j'essaye juste de bien faire mon job et d'anticiper les choses au maximum.

Ce qui fait de toi un dieu, non pas de la prog, mais du management...

[tenshu]

Ce qui fait de toi un dieu, non pas de la prog, mais du management...

Non, juste un bon développeur.
Un bon développeur devrait faire 50% d'analyse et 50% de dev, pas plus.

Pour le management il faut être à l'aise socialement pour interagir avec les autres équipes et côté client, ménager les susceptibilités, motiver les gens, planifier, ...
Et surtout contrairement à 98% des managers et ce qu'on leur enseigne, avoir une grosse dose d'empathie.