Mon premier site web

21
15 septembre 2016
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 : 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

  1. Blabla
Groupes
  1. Blabla
21 commentaires

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

Posteur

biiip

Aller, une petite pique.. Ecrire Accueil correctement, ca serait pas mal … 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

Spoiler

Merci j'avais même pas fait gaffe lol

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 avec l'attribut src bien renseigné.

Voilà qui devrait t'occuper un petit moment

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

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 ^^

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)

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

readymade

pas de responsive dans le cahier des charges?pas de CMS? peut etre (je … 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)

Posteur

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 %?




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) m2l.michaelelbaz.com/
Sinon merci beaucoup pour les images!




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 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



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

kapsozaure

Salut,Voici quelques remarques (je gère une agence web). Déjà quand on ar … 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 avec l'attribut src bien renseigné. Voilà qui devrait t'occuper un petit moment

GiveMeMoreDeals

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

nmp30

Ah que de souvenirs ce premier PPE ^^, dit toi que c'est le plus simple … 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

pas de responsive dans le cahier des charges?pas de CMS? peut etre (je … 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

C'est pour le second PPE, la mise en place d'un systéme … 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

readymade

pas de responsive dans le cahier des charges?pas de CMS? peut etre (je … 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)



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.

JorisProd

Merci pour tes commentaires c'est sympa, je prends note et j'édit tout ça … 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



Pour le responsive c'est avec les media queries dans le css que tu dois voir (genre si ton écran
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 ?

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 : validator.w3.org/nu/…%2F il te remonte les points noirs

Exemple:




  • Présentation M2L
  • Nos sports
  • Notre équipe
  • Nos locaux
  • Nos services






Ton /div se ferme avant le /nav

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

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

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 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

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).

Posteur

Y a tellement de messages que je ne peux pas tout répondre
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:

Spoiler



Bloc bienvenue après:
Spoiler



Newsletter avant:
Spoiler



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

Spoiler



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 & 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!

Pas compatible IE5 --> -1

Spoiler

True fact des clients de nos jours..

JorisProd

Le lien découvrir du menu en haut je l'ai caché, j'arrive pas à faire le m … 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é

Banni

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

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

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 :(.

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 un commentaire
Avatar
@
    Texte
    Top sujets
    1. [Cdiscount] Gagner des bons d'achat (100€, 50€, etc..)116014270
    2. Aspirateur dyson11
    3. [Topic Officiel] Crypto-monnaie2201917
    4. Le topic des demandes de parrainage35675532

    Voir plus de discussions