Mon premier site web

Posté par JorisProd le 15/09/2016 à 12h18

Mon premier site web

Le 15/09/2016 à 12h18

Le 25/11/2016 à 15h28

Salut, étant donné que je suis en BTS SIO (service informatique aux organisations) option SLAM, j'ai des projets et là en l’occurrence je dois faire un site web qui est pratiquement un site vitrine (pas tout hein).

Du coup on m'a filé un cahier des charges & co, j'ai réalisé en un premier temps un croquis pour avoir l'idée du site que je voulais, et j'ai réalisé un peu ce que je voulais malgré qu'il y ai plein de choses à rajouter que je n'ai pas fini.
Du genre sur le main-image où il y a écrit "RETROUVEZ TOUS LES MEILLEURS SPORTS", j'aimerai faire un slider et pour le header rajouter un menu déroulant.

Bref, en tous cas j'aimerais bien avoir vos avis sur mon premier site : http://www.m2l.behind-shop.fr

Je ne demande pas que des avis sur le site, mais si vous avez conseils/astuces sur la gestion d'un projet je suis preneur, merci!
Ah oui le footer, je l'ai pas fini normalement les liens à droites sont pas bon lol

21 commentaires

NOUVELLE REPONSE

Nombre de réponses par page

Ce paramètre s’applique automatiquement à l’ensemble des sujets.

Flux RSS des réponses

biiip

Le 15/09/2016 à 12h21

#1 Signaler
Aller, une petite pique.. Ecrire Accueil correctement, ca serait pas mal qd meme ;-) C'est le premier truc que j'ai vu..
JorisProd

Le 15/09/2016 à 12h24

#2 Signaler
Aller, une petite pique.. Ecrire Accueil correctement, ca serait pas mal qd meme ;-) C'est le premier truc que j'ai vu..

Je ne vois pas de quoi tu parle il est bien écrit xD

kapsozaure

Le 15/09/2016 à 12h26

#3 Signaler
Salut,

Voici quelques remarques (je gère une agence web).

Déjà quand on arrive sur ton site l'impression est bonne, ça charge vite, c'est plutôt clair.

- tu as un problème sur ton image de haut de page, elle ne prends pas tout l'espace. Rajoute dans ta CSS:

#main-image{background-size:cover}

- pense à mettre un espace avant le !

- il te faut faire la version reponsive pour ton menu.

- il te manque pas mal de meta pour le référencement : description, opengraph...

- tu utilises pour tes articles des images posées background css. Préfère la balise <img> avec l'attribut src bien renseigné.

Voilà qui devrait t'occuper un petit moment ;)


GiveMeMoreDeals

Le 15/09/2016 à 12h28

#4 Signaler
Déjà, à ta place, j'aurais essayé de me démarquer des autres.
Le sport, c'est bon pour les derniers de la classe |D
Attention aux droits d'auteurs sur les photos, utiliser des images libres de droits ( exemple : https://pixabay.com/ ) est recommandé.
nmp30

Le 15/09/2016 à 12h29

#5 Signaler
Ah que de souvenirs ce premier PPE ^^, dit toi que c'est le plus simple et pas besoin de trop se prendre la tete, je te conseil de rajouter un slider a la place de ton image centrale, cela rend le tout plus dynamique et les profs aiment bient en général ^^
readymade

Le 15/09/2016 à 12h31 (Modifié le 15/09/2016 à 12h33)

#6 Signaler
pas de responsive dans le cahier des charges?
pas de CMS? peut etre (je dis bien peut etre) que ça intéressera ton prof que tu es pensé à donner les moyens aux admin du site d'administrer (je ne parle pas que du contenu rédactionnel) ton site. En plus tu veux faire une boutique en ligne? (il y a shop dans le nom de domaine)
nmp30

Le 15/09/2016 à 12h36

#7 Signaler
C'est pour le second PPE, la mise en place d'un systéme d'authentification, d'admin etc, pour le premier c'est seulement un site vitrine sans grand intérêt,le but est de montrer l'apprentissage des cours HTML et CSS dont les CMS sont un peu hors sujet, a la limite tu peux mettre un template et le modif ;)
oligograph

Le 15/09/2016 à 12h37

#8 Signaler
pas de responsive dans le cahier des charges?
pas de CMS? peut etre (je dis bien peut etre) que ça intéressera ton prof que tu es pensé à donner les moyens aux admin du site d'administrer (je ne parle pas que du contenu rédactionnel) ton site. En plus tu veux faire une boutique en ligne? (il y a shop dans le nom de domaine)

Euh je pense que c'est un site vitrine uniquement qu'il doit faire, sans administration (qui lui demanderai beaucoup de taff en + alors que c'est pas dans son projet) :D
JorisProd

Le 15/09/2016 à 12h37 (Modifié le 15/09/2016 à 12h40)

#9 Signaler
Salut,

Voici quelques remarques (je gère une agence web).

Déjà quand on arrive sur ton site l'impression est bonne, ça charge vite, c'est plutôt clair.

- tu as un problème sur ton image de haut de page, elle ne prends pas tout l'espace. Rajoute dans ta CSS:

#main-image{background-size:cover}

- pense à mettre un espace avant le !

- il te faut faire la version reponsive pour ton menu.

- il te manque pas mal de meta pour le référencement : description, opengraph...

- tu utilises pour tes articles des images posées background css. Préfère la balise <img> avec l'attribut src bien renseigné.

Voilà qui devrait t'occuper un petit moment ;)



Merci pour tes commentaires c'est sympa, je prends note et j'édit tout ça cet aprèm!
Par contre pour le responsive je m'y connais pas trop, il faut juste mettre des %?


GiveMeMoreDeals a écritAfficher l'intégralité de la citation

Déjà, à ta place, j'aurais essayé de me démarquer des autres.
Le sport, c'est bon pour les derniers de la classe |D
Attention aux droits d'auteurs sur les photos, utiliser des images libres de droits ( exemple : https://pixabay.com/ ) est recommandé.

Haha merci! Ba le projet c'est la Maison des Ligues de la Lorraine, un site basique qu'un élève a fait (pas chez nous hein) http://m2l.michaelelbaz.com/
Sinon merci beaucoup pour les images!


Ah que de souvenirs ce premier PPE ^^, dit toi que c'est le plus simple et pas besoin de trop se prendre la tete, je te conseil de rajouter un slider a la place de ton image centrale, cela rend le tout plus dynamique et les profs aiment bient en général ^^

Oui c'est ce que je comptais faire, et tfaçon ce PPE on devait le faire à plusieurs mais comme ils foutent rien mdr

pas de responsive dans le cahier des charges?
pas de CMS? peut etre (je dis bien peut etre) que ça intéressera ton prof que tu es pensé à donner les moyens aux admin du site d'administrer (je ne parle pas que du contenu rédactionnel) ton site. En plus tu veux faire une boutique en ligne? (il y a shop dans le nom de domaine)

Pas de CMS on doit le faire à la main, il est vrai que je dois faire un accès intranet mais à la main aussi -_-'
Sinon pas de responsive dans le CDC mais je compte le faire!
Pour le nom de domaine, c'est un projet, plus tard surement mais je compte utiliser Prestashop xD

C'est pour le second PPE, la mise en place d'un systéme d'authentification, d'admin etc, pour le premier c'est seulement un site vitrine sans grand intérêt,le but est de montrer l'apprentissage des cours HTML et CSS dont les CMS sont un peu hors sujet, a la limite tu peux mettre un template et le modif ;)

Ouais c'est ça, comme je suis en deuxième année ils demandent maintenant de rajouter un accès intranet, blog & autre, si vous voulez je peux upload le CDC

pas de responsive dans le cahier des charges?
pas de CMS? peut etre (je dis bien peut etre) que ça intéressera ton prof que tu es pensé à donner les moyens aux admin du site d'administrer (je ne parle pas que du contenu rédactionnel) ton site. En plus tu veux faire une boutique en ligne? (il y a shop dans le nom de domaine)

Euh je pense que c'est un site vitrine uniquement qu'il doit faire, sans administration (qui lui demanderai beaucoup de taff en + alors que c'est pas dans son projet) :D

Oui à la base c'est qu'un site vitrine, mais le prof nous a demandé maintenant de rajouter un espace intranet, blog, forum etc mais pour ce qui est forum/blog on peut utiliser un CMS par contre l'espace intranet je pense pas.
oligograph

Le 15/09/2016 à 12h41 (Modifié le 15/09/2016 à 12h45)

#10 Signaler
Merci pour tes commentaires c'est sympa, je prends note et j'édit tout ça cet aprèm!
Par contre pour le responsive je m'y connais pas trop, il faut juste mettre des %?

Pour le nom de domaine, c'est un projet, plus tard surement mais je compte utiliser Prestashop xD

Pour le responsive c'est avec les media queries dans le css que tu dois voir (genre si ton écran < xxx pixels alors ça affiche ça ou ça ou la taille de ce texte change, etc) ^^

Pour beaucoup + de simplicité tu peux apprendre un framework tel que bootstrap pour gérer facilement le responsive à l'aide d'une "grille" (les éléments se gèrent par colonne)

Et sinon pourquoi pas utiliser Woocommerce (c'est un plugin Wordpress pour créer des boutiques en ligne) plutôt que prestashop ? ^^

Par espace intranet tu entends quoi ? Un espace d'échange interne ? Du coup un forum++ ne peut pas faire office d'espace intranet ?
joes80

Le 15/09/2016 à 12h45

#11 Signaler
C'est plutôt pas mal pour un premier site, même s'il me fait penser à un thème pompé sur themeforest etc.

Après quelques détails pour pinailler:

- Pas de balises styles dans le code
- 1 seule balise H1 par page, et celle ci doit être le titre de la page au mieux, c'est pour le seo
- Penser à checker ta page sur le w3c validator : https://validator.w3.org/nu/?doc=http%3A%2F%2Fhttp://www.m2l.behind-shop.fr%2F il te remonte les points noirs :)

Exemple:

<div class="copyright">
<nav class="footer-menu">
<ul>
<li>Présentation M2L</li>
<li>Nos sports</li>
<li>Notre équipe</li>
<li>Nos locaux</li>
<li>Nos services</li>

</ul>
</div>

</nav>

Ton /div se ferme avant le /nav :)
Kaldoran

Le 15/09/2016 à 12h48

#12 Signaler
Petites remarques comme celles précédentes : Pas responsiv comme site ?
Attention tu as des balises inversé dans ton HTML et la valise </img> n'existe pas

Sinon le site est joli :p Et est vraiment pas mal foutu.
Et comme dis précédemment également il manque pas mal de balise meta
Webdev33

Le 15/09/2016 à 23h10

#13 Signaler
Pas trop mal pour un début.

Même remarque pour le responsive : media queries, il doit y avoir de bons tuto / articles sur alsacréations ou open classroom. Ah apparemment t'as commencé d'après la feuille de style.

Sinon pense à bien fermer tes éléments orphelin genre <link ... /> avec un espace et />

mailto: attention à pas te faire spammer l'adresse mail par les bots

h3 direct => pas bon hiérarchise ton contenu h1 => h2 => h3

style="background-image:url('images/taize-une-rencontre-franco-allemande-58505.jpg')" => sale utilises la balise img avec alt desciptif sinon si tu le veux pas dans la balise img utilise la feuille de style css

NixPhoe

Le 15/09/2016 à 23h26

#14 Signaler
Bon alors si je peux me permettre (et je peux te donner des exemples de notre boulot), c'est franchement pas mal du tout pour une première fois et en se servant des remarques tout à fait juste des commentaires précédant, ça serait encore mieux.

Pour moi les défauts (si tu veux aller plus loin en production web) :
- Non responsive pour ça il faut du JS (avec mdeiaquerries) c'est le plus simple.
- Ta page ressemble à un template du fait de l'ajustement des images, objects ect. Mets plutôt une taille en pourcentage qu'en fixe, ça rend mieux ;)
- Légalement tu dois avoir le tant apprécier message sur les cookies ;)
- Rajoute un logo sur l'encart onglet de ton site
- Sur le bas de page, les liens ne sont pas cliquables et il manque les réseaux sociaux (important je pense pour un site de ce type)
- Tu n'as pas assez de couleurs complémentaires
- Pour le formulaire SQL + PHP et ça passe crème
- Bouton inscrivez-vous non voyant car ton sur ton
- Si tu fais un changement de couleur des boutons au passage de la souris, rajoute le sur tous ou au moins un événement pour être raccord.
- Bon le reste je suis pose que c'est parce que ce n'est pas créé ^^

Bon ça fait une grosse liste désolé, mais je suis plutôt pointilleux et comme je l'ai dit, et la plupart te l'ont dit aussi, pour une première fois chapeau ;)

Si tu t'intéresse au Web je te conseille le Boostrap, c'est vraiment très sympa à utiliser et très performant (mais ça reste un avis perso).
JorisProd

Le 16/09/2016 à 11h38 (Modifié le 16/09/2016 à 11h38)

#15 Signaler
Y a tellement de messages que je ne peux pas tout répondre xD
Pour l'espace intranet je pense que vous gérer les offres/annonces d'emploi. Sinon pour mon futur projet j'ai déjà utilisé Prestashop sinon WooCommerce j'ai regardé ça à l'air d'être pas mal!

Merci pour tous vos messages, j'ai pas pu tout changer car je ne l'ai pas encore fait (ou je ne sais pas encore le faire :'( )
Mais déjà pris part de vos commentaires:
- Rajout de quelques balises meta (description par exemple pour og je sais pas comment le faire sur mon site)
- Validator W3C qui m'a bien aidé j'avais pas mal d'erreurs m'en reste qu'une concernant que j'utilise h4, il faut que sa fasse h1/h2/h3/h4 car j'ai fais h1/h2/h4?
- Validator CSS aussi, j'ai plus d'erreur
- J'ai changé quelques trucs en design:

Bloc bienvenue avant:

Bloc bienvenue après:

Newsletter avant:

Newsletter après (je suis content j'aime beaucoup mieux le design) :


Boutons en survol tous fait, j'ai changé le premier aussi qui n'était pas trop visible, j'ai changé aussi le main-image et rajouter un mini-footer avec un copyright (je me suis inspiré de Dealabs xD & rajout des icônes social network + favicon)

Le lien découvrir du menu en haut je l'ai caché, j'arrive pas à faire le menu déroulant ^^ mais bon je vais essayer
Ah oui et le responsive faut refaire tout le CSS en gros avec les @media c'est chiant mais je vais le faire aussi x)

Après pour les futures pages "vitrine" du genre présentation de l'équipe etc, je ne sais pas encore comment le faire mais je pense garder le header/footer et caler le bloc de bienvenue et tout mettre dedans lol.

En tous cas merci encore pour vos commentaires!
theobeaudenon

Le 16/09/2016 à 11h42

#16 Signaler
Pas compatible IE5 --> -1


silentauben

Le 16/09/2016 à 12h29

#17 Signaler
Le lien découvrir du menu en haut je l'ai caché, j'arrive pas à faire le menu déroulant ^^ mais bon je vais essayer

Qu'est ce qui t'embête dans le menu déroulant? Un :hover devrait suffire :

nav>ul>li { position: relative }
nav>ul>li ul { display: none;
position: absolute;
top: 100%;
left: 0 }
nav>ul>li:hover ul { display: block }

Par contre tu utilises trop de polices différentes, j'en ai compté 4 et j'ai arrêté
meh

Le 16/09/2016 à 12h36

#18 Signaler
putin il ont toujours pas changer leur maison des ligue :D :D :D
merci de m'avoir ramener 5 ans en arriere profite mec !! c’était de super belle année !!
Webdev33

Le 16/09/2016 à 12h48 (Modifié le 16/09/2016 à 12h49)

#19 Signaler
Bonjour.

Tu ne fermes pas tout à fait bien tes balises orphelines ...
Il te manque un espace avant le />

Tellement longtemps que j'ai pas fait de web ... ça me manque
baddye

Le 17/09/2016 à 20h38

#20 Signaler
Pas mal, comme plein de choses ont été dites, je vais juste te faire une remarque sur les titres. Utilise la même font pour "Bienvenue" et "Newsletter", là ca pique les yeux (la premiere est jolie, la seconde à tellement eu de succès qu'on la retrouve partout :(.
Kwqk

Le 17/09/2016 à 20h50

#21 Signaler
En terme de police de manière générale il y a des règles de bonne conduite à adopter : 2 ou 3 max. Au dessus ça fait confus, et incohérent.

Tu détermines celles que tu vas utiliser pour les titres, pour les paragraphes, et éventuellement une autre pour les autres forme de texte.
Ensuite, pour éviter la monotonie si le site est bien fourni en texte, tu peux jouer sur les graisses ou la taille des caractères, tout simplement :)

Laisser une réponse

Des champs obligatoires n’ont pas été remplis, ou l’ont été incorrectement.