Partage

Activité "Découper et intégrer une maquette"

Cahier des charges

11 septembre 2016 à 19:14:48

Bonjour,

J'en suis à l'activité du cours Découper et intégrer une maquette, et il y a quelque chose que je ne comprends pas. L'auteur demande à ce qu'on fasse un cahier des charges dans un fichier .txt, alors que :
1) On n'a pas appris la moindre chose sur le cahier des charges dans ce cours
2) Le cahier des charges d'un projet web peut faire plusieurs centaines de pages

En plus de trouver anormal le fait qu'on nous demande des choses qui ne sont pas enseignées dans le cours, je ne vois pas ce qu'il est attendu concernant ce cahier des charges. Planning ? Budget ? Spécifications fonctionnelles et techniques ? Note de cadrage ? Plan de charge ? Wireframes ? Arborescence ? Charte graphique ?

Sérieusement, je ne vois pas ce que l'auteur entend par "cahier des charges à rendre dans un fichier .txt".

Des avis/idées ?

12 septembre 2016 à 11:46:58

Bonjour, Au début de l'énoncé il est dit : "Dans cet exercice, vous vous entraînerez à gérer un projet avec un client dans sa totalité, c'est-à-dire de la rédaction du cahier des charges à la livraison finale. Commencez par identifier votre client. Qui est-il ? Où est-il ? Que cherche-il ? Rédigez un bon cahier de charges qui détaille tout cela." Le voila ton cahier des charges. Je t'accorde quand même que le fait de réaliser un cahier des charges pour un simple exercice de découpage html, c'est ridicule. Mais n'ayant pas lu le cours, je sais pas, peut être que c'est utile du genre : "Le client a fait une demande explicite dans son cahier des charges qui est à prendre en compte dans le découpage." De plus je lis : "À partir de cette maquette, créez une structure de base en HTML et utilisez la grille Bootstrap pour organiser les éléments en colonnes. Notez bien que vous devez utiliser Bootstrap !" C'est également ridicule que de vous diriger systématiquement vers Bootstrap alors que bon nombre d'entre vous ne savent déjà pas utiliser les bases de l'intégration. Encore plus lors qu'il s'agit de vous apprendre à intégrer...
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
12 septembre 2016 à 11:54:44

Bonjour, J'avais bien lu ça, mais bon perso, ce n'est pas vraiment ce que j'appelle un "cahier des charges", plutôt une note de cadrage extrêmement succincte... Je suis tout à fait d'accord quant à ton commentaire sur Bootstrap, d'autant plus que ce cours d'intégration s'inscrit dans le parcours Développeur Intégrateur Web à la 4ème place seulement ! Et que ce cours n'apprend pas du tout Bootstrap. Ni l'intégration, en fait... Bref, nous demander un tel travail juste après avoir appris le HTML et CSS, c'est vraiment hard pour des débutants, je ne trouve pas ça normal. De mon côté, j'ai réussi à bien intégrer ma maquette avec un mix de Bootstrap, de marges et de positionnement relatif, mais j'ai bien l'intention de refaire cette intégration sans Bootstrap, histoire de me faire la main. Après tout, mieux vaut d'abord apprendre le compliqué avant de passer à la simplicité.
1 octobre 2016 à 18:53:43

Personnellement, avant d'attaquer ce cours pour le parcours "intégrateur", j'ai fait un détour productif par jQuery, Less et Bootstrap...

Mais je trouve ce cours sur le découpage de la maquette très vague. ça manque de détail, mériterai d'éclaircir la démarche de visualisation de la maquette par exemple...
3 octobre 2016 à 12:27:39

De mon coté, j'ai essayé de suivre le cours en reproduisant la maquette de test  "take" en PSD et personnellement je trouve que le cours ne détaille pas vraiment certaines manips à utiliser pour bien intégrer la maquette.. Le cours est très vague et résultat je me retrouve avec quelques erreurs d'intégration.

Par exemple, pour la 1ère grande image qui se trouve en en-tête ? Comment l'insérer ? En background ou directement en <img/> ? 

Même chose pour l'image du téléphone qui se trouve apparemment entre 2 sections... ??

Une idée ?

Et pour finir, je suis complètement d'accord avec l'avis de Luneral concernant  le cahier des charges et le fait de faire des choses que nous n'avons effectivement pas encore faites... . En plus, comparé à d'autres cours que j'ai pu suivre jusque ici, il n'y a aucune indication sur les critères sur lesquelles nous serons corrigés... Le cahier des charges en fait partie??  

Enfin bref, je pense que le cours devrait faire quelques chapitres de +

Merci de votre retour ;)

3 octobre 2016 à 15:34:38

Perso, pour les deux grandes images, j'ai fait simple :

- mon body contient un "container-fluid"

- les grandes images ont un "background: url('imgdefond.png');" et un "background-size: cover;"

Je me suis attardé moi aussi sur cette intégration mais il est vrai que le chapitre manque de longueur et de détail...

pour le téléphone entre deux sections, je l'ai coupé en deux. une partie s'affiche dans le header avec un padding top pour l'ajuster en hauteur et l'autre dans la section en dessous...

-
Edité par grégoryblémand 3 octobre 2016 à 15:46:15

4 octobre 2016 à 13:37:42

Bonjour, je confirme, lorsque l'on débute, c'est un calvaire de comprendre tous les mécanismes présent dans ce cours. Limite ça me donne envie de mettre en standby et de passer à autre chose.

Pour l'exercice final, je suis bloqué dès le départ avec les images, je suppose que c'est parce que je n'ai aucune connaissance sur bootstrap. Mais dans ce cas là, pourquoi

Ce serait bien de trouver un modèle du contenu à rendre.

Enfin, pour un cours d'une durée de 6h, ils y sont allé fort :(

Besoin grandement de motivation!!

4 octobre 2016 à 18:45:41

Pour ma part, je suis sur le point de commencer l'activité.
Mais je ne comprends pas bien du tout.

Est-ce que je dois m'inventer un client fictif et intégrer une maquette correspondant à ses attentes fictives ou je cherche un psd, je l'intègre et j'invente le client correspondant ?? 

4 octobre 2016 à 19:37:41

grégoryblémand a écrit:

Pour ma part, je suis sur le point de commencer l'activité.
Mais je ne comprends pas bien du tout.

Est-ce que je dois m'inventer un client fictif et intégrer une maquette correspondant à ses attentes fictives ou je cherche un psd, je l'intègre et j'invente le client correspondant ?? 


Je suis dans le même doute que toi... c'est vraiment mal expliqué.
D'après ce que je peux comprendre, on doit, je pense, trouver une maquette en PSD puis faire l'intégration, vu que c'est le sujet du cours...non? o_O

Le pire c'est pour la correction, on ne sait même pas quelles seront les critères notées  et on risque alors de ne pas avoir une note justifiée :'( 

DonJah a écrit:

Bonjour, je confirme, lorsque l'on débute, c'est un calvaire de comprendre tous les mécanismes présent dans ce cours. Limite ça me donne envie de mettre en standby et de passer à autre chose.

Pour l'exercice final, je suis bloqué dès le départ avec les images, je suppose que c'est parce que je n'ai aucune connaissance sur bootstrap. Mais dans ce cas là, pourquoi

Ce serait bien de trouver un modèle du contenu à rendre.

Enfin, pour un cours d'une durée de 6h, ils y sont allé fort :(

Besoin grandement de motivation!!

Effectivement, au départ je n'avais pas fait attention à la durée du cours, puis au bout de plusieurs jours, je me suis aperçu que c’était 6h :waw:???
Ok  si on lit seulement le cours mais moi j'essayais de reproduire et ça m'a bien pris plus de 6h...  :-° ..

Si seulement l'auteur pouvait donner un peu plus d'explications, ce serait le Top !!!! :soleil:



9 octobre 2016 à 20:24:11

Hello tout le monde,

Pour ma part, je n'ai même pas compris mettre en place Bootstrap !

Ce cours est pour moi pas assez détaillé pour les débutants venant tout juste d'apprendre le HTML5 et CSS3.

Si quelqu'un peut m'aider sur la mise en place de Bootstrap ?

Merci et bonne continuation à vous tous.

9 octobre 2016 à 23:41:19

Beta_Meche a écrit:

Hello tout le monde,

Pour ma part, je n'ai même pas compris mettre en place Bootstrap !

Bonjour,

j'ai suivi ce cours https://openclassrooms.com/courses/prenez-en-main-bootstrap qui m'a bien aidé pour la suite.

Il est très bien fait et bien explicite. Je le recommande :o)

10 octobre 2016 à 17:26:14

Bonjour tout le monde,

Je suis en parcours Développeur / Intégrateur.

Je suis sur cette activité également depuis hier, et je suis complètement choqué devant l'absurdité de ce qu'on nous demande.

On sort d'un cours débutant "pur" sur HTML / CSS, et nous voilà quasiment chef de projet.

J'avais senti la pilule arriver en voyant le contenu du cours qui n'est effectivement pas clair du tout.

Le plus fort : Réalisez un cahier des charges. Je veux bien, avec plaisir, mais dans ce cours il a été abordé avec une simple ligne.

Donc me voilà sur des cours qui ne font pas partie du parcours : "Découvrez Photoshop", "Qu'est ce qu'un cahier des charges?", "Découvrez la gestion de projet", et surtout j'ai bien peur de prendre du retard sur mon planning formation, je n'ai pas un an devant moi pour terminer !

Et encore j'ai la chance d'avoir entrevu Bootstrap par le passé, je me rends compte que le cours Bootstrap ne fait pas partie du parcours non plus.

Le parcours devrait inclure ces cours, ou peut être revoir cette activité ...

11 octobre 2016 à 18:25:56

levste a écrit:

j'ai suivi ce cours https://openclassrooms.com/courses/prenez-en-main-bootstrap qui m'a bien aidé pour la suite.

Il est très bien fait et bien explicite. Je le recommande :o)

Bonjour,

Merci je l'ai commencé aussi mais je rejoins manuelvercucque sur ces propos !

-
Edité par Beta_Meche 11 octobre 2016 à 18:27:44

11 octobre 2016 à 20:35:59

Beta_Meche a écrit:

levste a écrit:

j'ai suivi ce cours https://openclassrooms.com/courses/prenez-en-main-bootstrap qui m'a bien aidé pour la suite.

Il est très bien fait et bien explicite. Je le recommande :o)

Bonjour,

Merci je l'ai commencé aussi mais je rejoins manuelvercucque sur ces propos !

-
Edité par Beta_Meche il y a environ 1 heure

Oui effectivement, Bootstrap devrait être intégré au parcours bien avant l'intégration... Mais je vous rassure, je suis sur un autre cours réalisé également par Emily Reese et surprise..... rien compris non plus à la fin !!

 Dommage que Mathieu Nebra n'ai pas écrit tous les cours, les siens sont tellement top... :o)

Allez, bon courage pour la suite ;)

5 novembre 2016 à 9:28:27

Bonjour,

Que doit on faire alors?

Prendre une maquette en PSD sur un des sites donnés et le reproduire ou quoi?

Merci pour votre aide.

9 novembre 2016 à 10:33:26

Nelf a écrit:

Bonjour,

Que doit on faire alors?

Prendre une maquette en PSD sur un des sites donnés et le reproduire ou quoi?

Merci pour votre aide.


On peut prendre n'importe quelle maquette même si celle-ci ne se  trouve pas sur les sites donnés. Le but est construire le design du site conformément à cette maquette (html et css)

-
Edité par H@sy 9 novembre 2016 à 10:38:47

H@sy
19 novembre 2016 à 11:24:06

Merci H@sy pour cette réponse. Ce sera très utile
1 décembre 2016 à 13:58:29

Bonjour à tous et à toutes,

ce cours est un véritable cauchemar....

Ce cours est sensé se réaliser en 6h avec un difficulté moyenne...Déjà là ça commence mal, j'en suis à environ 12h. Pourquoi?

Premièrement, ce cours est très mal rédigé...

Dans la globalité il n'est pas clair. Lorsque l'on prend chapitre par chapitre il y a tellement de cours, sites, infos annexes que l'on passe plus de temps sur d'autres supports que le cours en lui même.

Alors je suis d'accord qu'il faille fournir des infos annexes pour mieux comprendre certaines notions, mais de là à ce que l'auteur constitue son cours avec les cours des autres professeurs du site et avec des infos répertoriées sur le net, je ne suis pas d'accord. Surtout lorsque le peu de contenu propre à l'auteur est incompréhensible...

Deuxièmement, 90% des liens fournis sont rédigés en anglais.

D'accord, on sait que lorsqu'on se lance dans le parcours de Développeur Web Junior, il est nécessaire d'avoir un niveau d'anglais intermédiaire au minimum.

Il est normal d'avoir une langue universelle pour le codage mais il y a une différence entre comprendre et apprendre les termes directement lié à la rédaction d'un code et aller lire des multiples pages toutes rédigées en anglais pour comprendre les dits outils pour coder.

Et troisièmement, le point le plus important.

Il faut prendre pas mal de temps pour comprendre le fonctionnement de Bootstrap, lié directement à un autre cours.

Alors d’accord, mais dans ce cas là pourquoi ne pas l'avoir directement intégré à la formation?

Car à la fin de ce cours je n'ai pas l'impression d'avoir appris Bootstrap (juste que c'est composé de colonne que en gros je peux retranscrire dans mon code HTML), donc je me sens bonne pour aller faire ce cours en plus.

Il faut aussi prendre un certain temps pour comprendre les bases de photoshop, histoire de pouvoir manipuler et lire un minimum les informations que l'on souhaite traiter avec ce programme. (Au passage, à ce jour le programme Photoshop n'est plus disponible à l'essaie pour une durée de 30 jours mais pour une durée de 7 jours.)

Cela m'a pris du temps supplémentaire pour au final ne pas comprendre comment récupérer les images par exemple de la maquette. Images qui me sont indispensable si je veux organiser mon HTML et CSS et par la suite intégrer les règles css...donc je n'ai pas pu organiser mon CSS et encore moins l'intégrer.

Je comprends bien la demande de base mais sans avoir les éléments qui constituent la maquette (images, icônes...) je ne vois pas comment faire....

A aucun moment dans le cours l'auteur n'indique comment récupérer ces éléments. Ou alors je ne l'ai pas vu, dû à l'énervement et l'incompréhension que j'ai pu développer en lisant ce cours et en tentant de mettre en application les exemples.

Pour finir, je suis quand même aller voir "Activité de fin de cours".

Et là même réflexion que Luneral. A quel moment du cours on nous apprend à faire un cahier des charges? Qu'est ce que l'auteur attend réellement de nous?

Début de l'énoncer de l'exercice:

"Dans cet exercice, vous vous entraînerez à gérer un projet avec un client dans sa totalité, c'est-à-dire de la rédaction du cahier des charges à la livraison finale."

Je débute seulement dans le codage du HTML et CSS et on me demande de gérer un projet? Donc là, je fais comment ? Je vais suivre le parcours "Chef de projet multimédia"?

Conclusion, (oui car je vais pas continuer à vous donner mal aux yeux avec mon roman lol) ce cours m'a complètement perdue, et je ne sais plus trop par où continuer.

Je me sens un peu démotivée, car je déteste ne pas comprendre quelque chose et je peux donc passer beaucoup de temps à tenter de chercher à comprendre.

Sauf que dans le cadre d'une formation, on n'a pas 1 ans devant nous comme disait manuelvercucque. 

Donc que dois-je faire? Laisser ce cours de coté? Aller faire le cours sur Bootstrap et revenir sur le cours d'intégration de maquette pour voir si j'arrive à plus de chose après?

Merci à tous de m'avoir lu et pour vos éventuelles réponses et encore désolée pour le pâté :p.

Bonne continuation à tous et à toutes :).

NB : Cette dernière note s'adresse directement aux professeurs d'Openclassrooms si jamais ils passent par là.

Je pense que ce cours devrait, soit être totalement réécrit et revalorisé au niveau du temps et de la difficulté, s'il est vraiment indispensable au parcours de Développeurs Web Junior .

Soit totalement enlevé du parcours car, à ce stade on est encore sensé être des débutants et cela donne juste envie de fuir...


-
Edité par Jénova 1 décembre 2016 à 18:08:52

No Pain, No Gain !
3 décembre 2016 à 19:55:37

Bonjour Jénova,

Je pense qu'avant d'aller plus loin (si ce n'est déjà fait), il est absolument indispensable de lire les cours du premier chapitre sur Bootstrap. D'une part parce qu'ils sont très intéressants, et d'autre part parce que cela vous permettra enfin de réaliser l'exercice principal du cours sur l'intégration (c'est à dire : passer d'une maquette PSD à un site web en HTML & CSS avec Bootstrap). 

Si vous avez des difficultés à récupérer une image "exploitable" et lisible sans Photoshop à partir d'un fichier .psd, et que vous avez terminé votre période d'essai de 7 jours, je vous inviter à m'envoyer par MP le lien vers la (ou les) maquette(s) qui vous intéresse(nt). Comme j'ai Photoshop, je pourrai vous les exporter en PNG afin que vous puissiez travailler dessus ;)

Enfin, concernant ce "fameux" cahier des charges, je n'ai à ce jour toujours pas de précision... Je pense donc qu'il s'agit simplement d'une petite note de cadrage présentant le client, ses besoins et le projet en question. Je pense qu'en y ajoutant certaines spécificités fonctionnelles, cela rajoutera du poids à votre "cahier des charges".

Mais comme je pense que chacun va galérer sur ces exercices, j'espère que personne n'aura la main lourde sur la notation envers ses camarades...

Bon courage à tous !

5 décembre 2016 à 10:29:40

Bonjour Valkried,

c'est également le choix que j'ai fait. J'ai commencer a lire les 1er chapitre sur Bootstrap et je vais les finir auj. ca sera toujours ca de pris comme on dit ^^. De plsu j'ai trouver un tuto explicatif d'un youtuber qui explique plutôt bien le fonctionnement de Bootstrap. (https://www.youtube.com/watch?v=gm2RCfjXS3s)

Je vous remercie pour votre proposition pour les images mais j'ai réussi a me débrouiller autrement :).

Pour ce qui est du cahier des charges je m'en occuperai après réalisation de mon tp, je préfère faire la pratique en premier lieu. Je suis d'accord avec vous pour la notation. Je pense d'ailleurs ne pas vraiment prendre en compte cette parti lors de ma future correction et m'attarder seulement sur la réalisation de l'intégration de la maquette.

Merci pour ta réponse et bon courage a tous! ;)

No Pain, No Gain !
7 décembre 2016 à 20:21:31

Complètement d'accord avec tous les commentaires que j'ai pu lire. Le cours est très mal fait et c'est démotivant.

On nous dit quoi faire, mais sans jamais expliquer comment. Au début je me suis senti vraiment très con, car je pensais que j'avais mal suivi les cours précédents. Mais en fait non.

Merci pour vos commentaires qui donnent quelques bonnes pistes pour poursuivre et qui me déculpabilisent à l'idée d'être un peu plus laxiste que pour les autres cours.

6h pour ce cours... euhhh 

3 février 2017 à 18:54:53

Bonsoir,

J'ai suivi le cours Découper et intégrer une maquette et j'en suis au dernier exercice: Intègrer une maquette en HTML et CSS.

Je lis ici que vous vous êtes posé les mêmes questions que moi: qu'attend on de nous ?

Est-ce que je dois prendre une maquette en PSD et m'inventer mon cahier des charges ?

Merci de votre aide.

Virgi
7 février 2017 à 9:05:17

Bonjour,

Oui vous avez tout compris. Vous devez vous trouvez une maquette, ou template en anglais ça peut aider à avoir plus de choix de site car bcp sont quand mm payant. Après l'avoir trouvez vous devez utiliser photoshop ou tout logiciel équivalent (comme gimp...) en extraire ce qui vous intéresse en photo et autres. Et ensuite reconstruire au mieux tout cela en html en suivant les règles de bootstrap.

Pour le cahier des charges vous devez vous inventer un client fictif et établir un cahier des charges. Respectez bien le fait qu'il faut le mettre dans un fichier texte, utilisé le bloc note pour cela. Ne faites pas comme moi, qui est utilisé world et me suis retrouvée avec un fichier corrompu que personne n'a pu lire alors que j’avais fait un cahier des charges de pro mdrr XD.

Voilà en espérant avoir pu être utile.

Bonne continuation.

No Pain, No Gain !
7 février 2017 à 14:04:02

Merci pour ces explications.

Effectivement beaucoup de PSD sont payants. Pas facile de trouver ce qui nous inspire. Je trouve que cet exercice est bien trop chronophage :-(

Bonne continuation

Virgi
17 mai 2017 à 13:05:09

Je viens de commencer ce cours et suis complètement perdue aussi. A la lecture de vos commentaires et astuces je vais faire au mieux mais effectivement je n'avais pas prévu cet impasse en terme de temps. Je suis déjà sous pression pour finir le parcours en moins de 6 mois si possible et donc cela risque d'être en effet plus chronophage que prévu.
17 mai 2017 à 13:35:05

y a des sites qui existent pour avoir des kit graphiques gratuit hein et plutôt bien fait :)

Exemple

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 14:07:37

Merci mais je ne sais absolument pas ce que je dois faire. Je ne sais même pas comment utiliser photoshop à savoir à quoi servent les calques ou comment les intégrer ensuite ... est ce que c'est ce que Bootstrap est censé faire? Bref! Suis à la ramasse et perdue.
17 mai 2017 à 15:19:46

Oui et non ^^

c'est un peu plus complexe que ça.

Le découpage avec photoshop génère un tableau avec des découpe de chaque image en background de ces cellules

Bootstrap lui génère quelque chose de beaucoup plus propre. il génère des grids (comme on appelle ça) et dedans tu y place des partie de ton désign fait sous ton logiciel de graphisme

Il génère aussi une sorte de tableau mais sans utiliser <table> si tu préfères ^^

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 15:31:26

Tu dois monter un exemple de site et essayer de le reproduire en utilisant les colonnes de Bootstrap pour agencer les éléments de la page.

Les calques de photoshop permettent de décomposer l'image en plusieurs couches. Chacun de ces calques comporte un ou plusieurs éléments sur un fond transparent. Cela te permet d'isoler facilement ces éléments, de les enregistrer pour pouvoir les inclure dans ta page web en utilisant bootstrap dans ton code HTML.

J'ai passé bcp de  temps sur cette activité mais le barême ne reflète pas le travail demandé...genre tu as moins de points si tu n'as pas bien mis le cahier des charges...si tu ne fournis pas les éléments demandés mais rien ne concerne la qualité du code par exemple.
Un des élèves que j'ai corrigé avait fait sa propre maquette vraiment light et le résultat était moyen mais avec le barème il a eu qd même eu plus de la moyenne car il avait tout fourni et effectivement utilisé bootstrap.

Pour ma part j'ai suivi l'autre cours sur bootstrap et je connaissais déjà photoshop.
Apprendre à utiliser photoshop me paraît important même si cela va te demander du temps en plus mais après tu seras plus à l'aise.

Et au passage, je n'arrive pratiquement jamais à être dans les estimations de temps données, étant vraiment débutante en dev. et prenant bcp de notes...

En espérant t'avoir un peu aidée, garde la motivation et complète tous les cours d'Emily Reese par d'autres cours/tutos si tu veux vraiment apprendre qqchse !

17 mai 2017 à 16:11:49

MERCI à tous pour vos conseils et votre aide.

Activité "Découper et intégrer une maquette"

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown