Partage

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

Cahier des charges

18 mai 2017 à 7:46:00

Je reviens par ici, et j'avoue n'avoir toujours pas fait cette activité... !

Mais si ça intéresse du monde (dans ce cas manifestez-vous !), je pourrais toujours filmer la réalisation de cette activité de A à Z pour vous montrer comment faire. Je connais Bootstrap et Photoshop par coeur, donc de mon côté, ça devrait être facile et pas trop chronophage, tout en vous faisant gagner beaucoup de temps ;)

18 mai 2017 à 13:07:01

Je viens de trouver un site qui explique bien le truc :)

Lien externe

Bonne lecture

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
18 mai 2017 à 13:32:52

Je trouve aussi que ce cours est assez vague.

Merci pour ton lien stefde3 ;)

30 mai 2017 à 22:11:45

Valkried a écrit:

Je reviens par ici, et j'avoue n'avoir toujours pas fait cette activité... !

Mais si ça intéresse du monde (dans ce cas manifestez-vous !), je pourrais toujours filmer la réalisation de cette activité de A à Z pour vous montrer comment faire. Je connais Bootstrap et Photoshop par coeur, donc de mon côté, ça devrait être facile et pas trop chronophage, tout en vous faisant gagner beaucoup de temps ;)


Coucou

Ça m’intéresse :-)

Merci

31 mai 2017 à 22:09:40

Valkried a écrit:

Je reviens par ici, et j'avoue n'avoir toujours pas fait cette activité... !

Mais si ça intéresse du monde (dans ce cas manifestez-vous !), je pourrais toujours filmer la réalisation de cette activité de A à Z pour vous montrer comment faire. Je connais Bootstrap et Photoshop par coeur, donc de mon côté, ça devrait être facile et pas trop chronophage, tout en vous faisant gagner beaucoup de temps ;)


Bonsoir,

Je suis également intéressé. :)

8 juin 2017 à 11:21:43

Je suis à la phase finale , et j'ai franchement mal comprit le cour .

Il est dans la formation développeur web junior , et je suis pour m'entraîner toutes les leçons qui sont demandées.

Je me pose même la question de l'utilité de ce boostrap.

Normalement c'est censé facilité les choses , mais là je trouve ça beaucoup plus compliqué que de placer soit même dans un fichier style.css les différents blocs.

Les exemples donnés sont flou à mes yeux.

Personnellement je n'ai pas très bien compris l'histoire des rangés et colonnes. 

J'ai lu le lien vers la leçon de boostrap , et même si ça m'a éclairé un peu , ce n'est pas non plus l'illumination.

Dans le boostrap il n'y a pas l'air d'avoir d'indication précise qui indique de placer , ça dans telle rangée .

Je vais essayer de réussir cet exercice , mais je ne vous cache pas , que je suis pas vraiment convaincu de l'utilité de boostrap.

-
Edité par devmax 8 juin 2017 à 11:52:30

8 juin 2017 à 12:20:35

Bootstrap te servira surtout pour le traitement responsive, mais avant tout, on est tous d'accord ce cours n'explique pas bien Bootstrap et demande pourtant de l'utiliser. Un truc à devenir allergique !...
Le cours "Prenez en main Bootstrap" est bien fait et le suivre ne sera pas du temps de perdu !

Est-ce que tu suis le parcours en Premium plus ? Je cherche quelqu'un qui pourrait répondre à quelques questions avant de m'inscrire en Premium plus moi-même. Si toi ou quelqu'un de passage par là est prêt à me renseigner, vous pouvez me contacter en MP ce sera plus simple. 

Merci et bon courage.

8 juin 2017 à 15:22:48

Bonjour, non je ne suis pas le parcours premium plus , mais j'ai déjà posé les questions à ce sujet , en contactant openclassrooms.

Dans le menu navigation du bas, il y a "nous contacter" sous le titre openclassrooms , et ils te répondent aux questions.

Je suis juste les cours pour ne pas être dépasser si jamais j'ai le financement pour devenir premium plus.

Comme quoi c'est utile de prendre de l'avance , pour ne pas bloquer plusieurs heures voir jours sur un sujet durant normalement 6 heures .

J'ai regardé la vidéo qui est donné en lien plus haut et j'ai mieux compris encore.

Il y a 83% de moyenne sur ce cours , je me demande si des personnes ne prennent pas carrément des kits , et les envois , pour ne pas s'embêter , car bloquant aux consignes, c'est plus facile de faire comme ça ^^.

Là j'ai trouvé une page en psd à faire , je ne vais pas la faire entièrement , une partie suffira je pense , tant que le principe est compris .

8 juin 2017 à 15:52:13

Le barème ne concerne pas vraiment le rendu en plus... à partir du moment qu'il y a bien une utilisation de bootstrap dans le code et que tu fournis bien tout ce qui est demandé ce sera bon ! je ne me souviens plus exactement mais ça m'avait fait bouillir d'avoir passé du temps pour cette petite activité en découvrant le barème.

ne te casse pas trop la tête pour cette activité, après c'est bien de le connaître pour des projets plus complexes en responsive je trouve. Au passage, elle a fait aussi le cours introduction à Jquery, ce n'est pas plus clair...donc j'ai suivi là aussi un autre cours en plus!

J'espère que tu auras le feu vert pour le Premium, bonne formation à toi!

8 juin 2017 à 16:41:00

Bonjour à tous,

A mon avis ce cours est surtout fait pour vous apprendre les manipulations simple de photoshop.

Le framework n'a que peut d'importance.

Compos sui.
8 juin 2017 à 18:01:43

lovcode : D'accord , là j'essaye de reproduire du mieux que je peu un psd , le hic , c'est qu'il fait 1500px , du coup il prend plus que la page , mais bon.

Je prend ce que j'ai et sur photoshop l'image fait 1500 px .

ça faisait un moment que je n'avais plus fais de html et css , j'ai du rechercher les balises --" , mais bon, temps que je sais ce qu'il faut faire ce n'est pas un problème.

En tout cas, le display: inline-block est important pour ce que je fais .

Le plus embêtant qui me reste à faire va être l'intégration des images, car il y a une galerie dans le psd. 

C'est pour ça je vais pas faire toute la page , ça m'a pris suffisamment de temps .

Le jquery je vais avoir à le faire , mais pas maintenant.

Merci , et toi aussi si tu compte devenir premium et faire la formation.

Exen : je dirais que c'est le framework qui a de l'importance dans le sujet , car bien qu'il y a quelque infos sur photoshop , il faut retranscrire les infos , en html et css.

Et si la leçon est flou , et bien c'est difficile . à comprendre.

Mais bon j'y arrive là , maintenant que j'ai compris ^^.

8 juin 2017 à 18:30:29

Retranscrire,

Si mes souvenirs sont bon, pour cette activité, on donne un template déjà prés mâché.

Compos sui.
8 juin 2017 à 22:03:35

exen a écrit:

Retranscrire,

Si mes souvenirs sont bon, pour cette activité, on donne un template déjà prés mâché.


Je n'ai pas de template donné, ils donnes justes des liens vers des sites pour télécharger des templates.

Par contre je ne sais pour quelle raison j'ai une image de fond qui était placée pour une section , et elle n'y es plus maintenant .

Je l'ai changé d'emplacement , et tout mais rien à faire .

Sans faire exprès j'ai changé backround-image du header , au lieu de la section maintenant , j'ai remis ensuite background image , mais ça ne fonctionne plus alors que pour les deux ça fonctionnait très bien avant .

J'y comprend rien .

Edit1: J'ai trouvé pour le header , il me manquait les '' dans url() mais pour la section, c'est un mystère.

Edit2 : Réussi à régler le problème , sur section ça ne fonctionnait pas, je l'ai mis en id sur une div et là ça a fonctionner , enfin.

-
Edité par devmax 8 juin 2017 à 22:30:17

8 juin 2017 à 22:56:24

Bonjour à tous,

Pour ceux que ça intéresse il y a un tuto sur le site Grafikart : https://www.grafikart.fr/tutoriels/html-css/integration-front-end-497

Le tuto est très bien fait (c'est une vidéo, du coup on voit bien toutes les étapes =) ), même si il demande un peu de bagage (il utilise Sass, un préprocesseur css mais en se documentant un peu dessus avant on peut suivre le tuto - et il peut se faire aussi sans utiliser sass).

La video est totalement gratuite, par contre si vous voulez télécharger les sources c'est payant (je viens de prendre un abonnement de 3 mois, j'ai payer 12e et on peut télécharger les vidéos et les sources de tous les tutos, c'est plutôt rentable)

En tout cas, même si vous ne le faites pas, juste visualiser certaines parties pourra vous être utile pour le cours d'OpenClassrooms et perso, rien qu'avec ce tuto j'arrive à me débrouiller pour intégrer des maquettes toute seule - ça me prend un temps fou mais j'y arrive =D

Bon courage à tous!

8 juin 2017 à 23:37:34

Bonjour,

Moi après avoir fait le cours html5/css3, je me suis entraîné à partir d'une maquette,j'ai à peu prés réussi,ensuite j'ai voulu faire la suite du parcours web junior "découper et intégrer une maquette" et dés le départ il est bien stipulé d'avoir un pré-requis bootstrap :

Pré-requis : le chapitre de notre cours “Prenez en main Bootstrap” intitulé Une grille.

dû coup j'ai commencé le cours mais entièrement, j'en suis à 56%, de plus dans le cours bootstrap il est dit d'avoir des connaissance en jquery et javascript donc j'ai fait les deux sur codecademy (c'est en anglais mais bon ça passe!), leur interface est vraiment bien pour apprendre.

La partie de bootstrap " mise en forme avancée" faut tout de même avoir des connaissances jquery et java( comme il est bien stipuler au début du cours) sinon on comprends rien!

Durée du cours bootstrap 10h j'en suis déjà à 60h!!

Pour moi perso,faire jquery et javascript ensuite attaquer le cours bootstrap et ensuite reprendre le parcours et commencer le cours découper et integrer une maquette.

De toute façon le js et jquery sera utile pour le projet 3 , j'aurai pris de l'avance.

9 juin 2017 à 2:16:52

devmax a écrit:


Je n'ai pas de template donné, ils donnes justes des liens vers des sites pour télécharger des templates.


Autant pour moi je me suis completement trompé, j'ai confondu avec celui-ci, encore dsl.

https://openclassrooms.com/courses/maquettez-votre-site-responsive-avec-photoshop

Compos sui.
9 juin 2017 à 9:44:21

exen a écrit:

devmax a écrit:

Je n'ai pas de template donné, ils donnes justes des liens vers des sites pour télécharger des templates.


Autant pour moi je me suis completement trompé, j'ai confondu avec celui-ci, encore dsl.

https://openclassrooms.com/courses/maquettez-votre-site-responsive-avec-photoshop </p>

Ce n'est pas grave , de s'être trompé , mais en tout cas , la leçon n'est pas très clair, et comme l'ont dit certain , le barème n'est pas super.

html,css,screenshot,cahier des charges, voilà les points du barème.

Il n' y a rien sur

Ttlp : Merci pour le lien, ça aidera les personnes qui seront bloquées .

Personnellement je peu télécharger la vidéo , j'ai une extension pour ça  downloadhelper sur firefox :ange:, par contre ça ne télécharge pas tout les formats.

Gilles Gasse: Moi c'est cette leçon https://openclassrooms.com/courses/decouper-et-integrer-une-maquette/decouvrir-le-concept-de-maquette et ils mettent 6 heures de cours en moyenne.

Après ça nous renvois vers d'autres sources, également.



-
Edité par devmax 9 juin 2017 à 9:45:17

9 juin 2017 à 10:48:57

Gilles GASSE a écrit:

Bonjour,

Moi après avoir fait le cours html5/css3, je me suis entraîné à partir d'une maquette,j'ai à peu prés réussi,ensuite j'ai voulu faire la suite du parcours web junior "découper et intégrer une maquette" et dés le départ il est bien stipulé d'avoir un pré-requis bootstrap :

Pré-requis : le chapitre de notre cours “Prenez en main Bootstrap” intitulé Une grille.

dû coup j'ai commencé le cours mais entièrement, j'en suis à 56%, de plus dans le cours bootstrap il est dit d'avoir des connaissance en jquery et javascript donc j'ai fait les deux sur codecademy (c'est en anglais mais bon ça passe!), leur interface est vraiment bien pour apprendre.

La partie de bootstrap " mise en forme avancée" faut tout de même avoir des connaissances jquery et java( comme il est bien stipuler au début du cours) sinon on comprends rien!

Durée du cours bootstrap 10h j'en suis déjà à 60h!!

Pour moi perso,faire jquery et javascript ensuite attaquer le cours bootstrap et ensuite reprendre le parcours et commencer le cours découper et integrer une maquette.

De toute façon le js et jquery sera utile pour le projet 3 , j'aurai pris de l'avance.

Hello!

Franchement ça fait plaisir de se rendre sur le fofo et de voir qu'on est tous dans la galère avec ce cours :)

Je suis exactement comme toi;

Apres quelques recherches j'ai remarqué que pour les parcours Développeur(se) d’application Frontend et Développeur(se) d’application Php / Symfony le fameux cours "Découper et intégrer une maquette" apparaît après les cours suivants:

  • Comprendre le Web
  • Apprenez à créer votre site web avec HTML5 et CSS3
  • Réalisez des sites modernes et beaux grâce à WordPress.
  • Gérez votre projet informatique facilement !
  • Prenez en main Bootstrap

Du coup, pour ceux qui suivent le parcours "Développeur Web Junior" c'est tout à fait normal d’être largué. Avant d'attaquer le cours "Découper et intégrer une maquette" mon conseil serait de bien approfondir la liste des cours ci-dessus (en particulier "Prenez en main Bootstrap" en entier).

PS:

Je trouve ca un peu vache de la part d'Openclassrooms de faire un parcours (soi-disant de 6 mois) qui contient ce type de cours "Découper et intégrer une maquette" infaisable pour un débutant.

Peut être qu'ils ont voulu proposer un parcours allégé et abordable (6 mois au lieu de 12 en moyenne), mais preuve en est que ce n'est pas si simple et qu'au final pas mal de mecs ont du s'en tirer les cheveux...

-
Edité par ArthurOllivier2 9 juin 2017 à 10:49:37

9 juin 2017 à 11:14:46

ArthurOlivier2: D'après les commentaire, c'est également parce-que l'auteur de ce cours l'a mal fait.

Il est dit que c'est cette même personne qui a fait également le cours sur le jquery , et que ce cours n'est également pas claire.

Je pense que pour les débutants comme moi , il aurait du y avoir des informations plu clair.

Même des phrases toutes bêtes , comme pour expliquer comment ça ce faisait que tel choses passait en rangée inférieure par exemple.

Comment ça ce faisait que certain block étaient plus gros.

Je ne savais pas si c'était à la grosseur du contenu , ou si c'était plusieurs row à faire .

C'est peut-être tout bête, mais quand on débute , on se pose ce genre de question.

C'est grâce au lien vidéo que j'ai mieux compris l'utilisation. 

Franchement pour moi qui n'avais rien compris , flexbox était plus simple.

9 juin 2017 à 11:30:08

Je confirme que ce cours est d'une opacité redoutable. merci pour les conseils des autres cours à faire avant. Je suis en parcours web dev junior et je dois dire aussi que c'est beaucoup plus long et complexe qu'indiqué ... 6 mois? je commence à avoir de sérieux doutes... et je n'en suis qu'au projet 1. A voir pour la suite mais j'avoue avoir quelques appréhensions que je n'avais pas forcément au début. Je pensais que ce serait difficile mais pas à ce point. Mais bon c'est la vie et FORZA à TOUS! On lâche rien et on reste en Open ...
9 juin 2017 à 14:08:26

MurielG a écrit:

Je confirme que ce cours est d'une opacité redoutable. merci pour les conseils des autres cours à faire avant. Je suis en parcours web dev junior et je dois dire aussi que c'est beaucoup plus long et complexe qu'indiqué ... 6 mois? je commence à avoir de sérieux doutes... et je n'en suis qu'au projet 1. A voir pour la suite mais j'avoue avoir quelques appréhensions que je n'avais pas forcément au début. Je pensais que ce serait difficile mais pas à ce point. Mais bon c'est la vie et FORZA à TOUS! On lâche rien et on reste en Open ...

Une personne avait donné ce lien vidéo, https://www.youtube.com/watch?v=gm2RCfjXS3s&t=1074s , ça permet de mieux comprendre bootstrap.

Bootstrap est un framework donc c'est censé simplifier les choses , mais avec un cous vague, c'est plus difficile .

En tout cas, il vous faut télécharger bootstrap , et comme pour une feuille de style css, le mettre en lien dans votre html.

Je n'ai utilisé qu'une row , je ne sais pas si j'ai bien fais , mais ce n'est pas grave.

Prenez en compte qu'il y a 12 colonnes , et qu'ensuite vous devez donner un nombre de colonnes à votre bloc . 

Si deux blocs égaux prennent toute la largeur de la page , c'est que chacun fait col-md-6 ou col-lg-6 et c'est à mettre dans une class entre "" .



9 juin 2017 à 15:56:13

Pour ma part je trouve aussi que ce cours est bâclé comparé au cours sur Bootstrap qui est pour le coup complet. 

Pour la demande du cahier des charges, je ne vois pas trop ce que cette demande vient faire ici sachant qu'on est concentré sur le découpage de maquette. L'idée doit surement être dans un premier temps trouver un template qui nous semble abordable, inventer un petite histoire d'un 10ène de lignes entre le client et nous même pour ensuite commencer le découpage. 

Il faut préciser aussi que pour faire cet exercice, les cours Html/css et bootstrap doivent être BIEN maitrisés.

Perso je suis graphiste Freelance depuis 5 ans du coup je connais Photoshop et avant d'attaquer ce TP, j'ai bien passé 1 mois à bidouiller HTML/CSS avec Bootstrap.

Cette étape est en quelque sorte une évaluation de toutes les connaissances vu depuis le début. 

Bon courage à tous et ne lâchez rien :) 

-
Edité par Martin Seguy de Raspide 9 juin 2017 à 15:56:27

9 juin 2017 à 19:22:12

Personnellement je n'ai pas fait entièrement le template , je n'ai fait qu'une partie , ce qui à mes yeux suffisait pour montrer la maîtrise de bootstrap.

J'ai corrigé des template avec moins de bootstrap que moi alors que la page était plus longue.

Le problème de l'évaluation, c'est qu'en gros on dois se débrouiller pour bien savoir comment fonctionne bootstrap , mais également trouver comment extraire les images du fichier psd.

J'ai réussi à trouver , mais bon normalement on devrais dire comment faire.

D'ailleurs certaines images je ne les ai pas trouvé dans la template , il n'y avais rien à extraire , alors que j'était dans le bon calque.

Je pense que je vais effectivement devoir me mettre à la leçon sur le bootstrap , parce-que sinon , je risque de galérer plus tard.

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