Bonne idée ça ! Je crois que je vais m'amuser à faire mon CV moi aussi.

J'ai regardé ton travail et le format "One Page" rend bien sur ton site, tu as essayé d'intégré le système qui fat défilé la page à une certaine vitesse quand tu clique sur une ancre ? Je ne me rappel plus le nom mais cela ajouterai une touche supplémentaire.

Beau boulot en tout cas.

Bonjour à tous/toutes.

J'ai les mêmes questions. J'ai inventé un cahier des charges avec une cliente fictive, toute fière de moi d'avoir une idée précise de ce à quoi devra ressembler ma page... puis en cherchant des PSD je me rend compte que je vais devoir BEAUCOUP trop modifier ces derniers pour coller au dit cahier des charges (dans la vraie vie c'est comme ça je suppose si on a pas le template fournit par le client) et ça me fait peur pour la correction...

"rédaction du cahier des charges à la livraison finale. [...]
Ensuite, trouvez une maquette qui correspond à ces besoins. [...]
Essayez de vous rapprocher le plus possible de la maquette, même si nous comprendrons si la ressemblance n'est pas parfaite."

C'est pas clair ni logique: comment trouver THE template qui corresponde à nos attentes?! Ça n'existe pas! On doit forcément le modifier un peu (beaucoup)... et c'est ce qui me fait peur car je ne veux pas pour la correction qu'on me dise que j'ai pas collée au template au pixel prés.

Car je comptais faire 1page qui ressemble à ça:

bannière

titre

articles X 6

présentation client

footer avec lien réseaux sociaux

J'ai trouvé un template sympa qui ressemble le + à ce que je veux (ci-dessous) mais le souci c'est que l'auteur fournit le HTML... donc si j'utilise celui-ci on va me dire que je pompe dessus. Si j'utilise les autres... on va me dire que j'ai bougée trop d'éléments! Et donc dans le 2ème cas non respect du découpage template. ARG!

https://freebiesbug.com/code-stuff/activebox-free-html-template/

Respect du cahier des charges et en même temps template qui soit reproduit au pixel près(idéalement)... je ne vois pas comment faire?!

Je crois ET C'EST BIEN DOMMAGE! que je vais devoir faire comme certains suggèrent: découper/intégrer un template random puis créer un cahier des charges avec...

Qu'en pensez-vous? Avec l'ordre demandé par l'exercice je crois que je vais me faire démolir à la correction... si je code selon mon cahier des charges qui pourtant décrit une page à la structure simple.

Merci d'avance pour vos réponses.

EDIT: C'est triste mais si le barème est aussi flou, je vais pas me casser la tête avec le cahier des charges: chercher un template qui colle à mon cahier des charges, ça n'existe pas de toute façon.

Je vais en faire un après coup et après avoir bien galéré sur ce cours très flou et mal expliqué: "Intégrer les règles CSS" j'ai pas compris d'où elle nous sort ses captures d'écrans (sans légendes en dessous! Super!), et où aller pour trouver son sélecteur. C'est sa page HTML... mais c'est pas clair ce qu'il faut faire dessus.

Merci pour tout vos liens. Ça va m'être d'une précieuse aide.

-
Edité par Raphaëlle_Just_Me 23 mars 2018 à 10:40:14

salut, ne te prend pas trop la tête avec le cahier des charge, ça reste qu'un tp, je te conseil de passé du temps sur l'intégration de ta maquette c'est vraiment ce qu'on veux voir à ce stade plutôt que savoir si tu est capable de respecter un cahier des charges

Julemane a écrit:

salut, ne te prend pas trop la tête avec le cahier des charge, ça reste qu'un tp, je te conseil de passé du temps sur l'intégration de ta maquette c'est vraiment ce qu'on veux voir à ce stade plutôt que savoir si tu est capable de respecter un cahier des charges

Coucou. Merci pour ta réponse. En effet c'est ce que j'ai fini par me dire: qu'on est noté sur la maquette parce que c'est le sujet du cours, autant se concentrer dessus. Et je devrais moins me prendre la tête en effet , j'y vois un peu plus clair sur l'exercice maintenant. Merci à toi et ceux qui on participé à la discussion.

Le cahier des charges je ne vais pas le faire, j'en voit pas l’intérêt a ce niveau là du parcourt et pour ce qui ai de l’intégration de la maquette il y aurai du avoir une maquette a disposition, là même pour tout le monde comme dans les autres cours et heureusement qu'il y a d'autre tuto ailleurs sur le net car se cours ne fait que survoler le sujet.

NicolasSantiago a écrit:

Le cahier des charges je ne vais pas le faire, j'en voit pas l’intérêt a ce niveau là du parcourt et pour ce qui ai de l’intégration de la maquette il y aurai du avoir une maquette a disposition, là même pour tout le monde comme dans les autres cours et heureusement qu'il y a d'autre tuto ailleurs sur le net car se cours ne fait que survoler le sujet.

Je te conseil de faire un cahier des charge même succin car sur la note totale il doit y avoir 3 pts sur le cahier des charges de mémoire.

Pour le reste je suis tout a fait d'accord avec toi

D'une certaines manière, je suis d'accord avec vous, mais d'un autre côté, sans cette exercice, je n'aurai toujours pas jeter un œil sur ce qu'est un cahier des charges donc je pense que c'est pas si mal que ça de nous "obliger" à faire des recherches à ce sujet et ensuite de mettre ce document en rapport avec le site qu'on va faire.

Après, il y a deux approches, ceux qui vont écrire le cahier des charges après avoir fait le site pour l'exercice et ceux qui vont jouer le jeu à fond en mettant sur "papier" ce qu'ils veulent faire comme si c'était eux les clients, et ensuite tenter de faire coller au mieux leur création avec les spécificités décrites dans le cahier des charges.

J'avais choisi la seconde option et quand j'en ai été à rechercher un thème correspondant, j'ai dû me rabattre sur un thème WordPress et donc entièrement le convertir pour Bootstrap et le résultat a été la note maxi obtenue avec de super commentaire de félicitation de mes correcteurs et ça fait vraiment plaisir et on se dit qu'on a pas bosser pour rien ....

Tout dépend de si tu suis un parcours ou non, si tu suis un parcours autant se focaliser sur les projets étant donné que c'est le plus important, après c'est clair que sinon rien n’empêche de faire le truc à fond

ben oui, je suis un parcours mais je pars du principe que pour bien apprendre, le cours n'est que 10% du travail et n'apporte que des bases, et qu'il faut un max d'implication personnel, faire des recherches et aller bien au delà de ce qui est demander pour commencer à maîtriser un peu le sujet.

Et être capable de "voler de ses propres ailes" est le but final au fond.

A moins que certains pensent que c'est sur la rapidité à terminer un cours pour passer au suivant mais ce n'est pas mon concept de l'apprentissage ...

Oui, après en général, quand tu fais de l'intégration, tu te bases sur une maquette adaptée, et tu ne vas pas choper à droite à gauche ce qui a déjà été fait pour le recopier Pour moi, il aurait été plus pertinent de demander à faire un cahier des charges, pour ensuite créer nous-même le zoning, les wireframes et les maquettes graphiques, et les adapter en code pour le web. Même si on n'est pas graphiste et que le résultat n'est pas incroyable, c'est toujours mieux que d'être limité par ce qu'on peut trouver sur internet de déjà tout fait

Perso j'ai aussi commencé ce cours, mais la plupart des manips à faire avec photoshop je n'arrive pas à les faire, soit je ne trouve pas l'option, soit je trouve l'option et je n'arrive quand même pas à faire l'exo.. Je pense qu'on utilise pas la même version non plus. Pour moi il manque les étapes comme "clic ici" "fais comme ci", etc.. du coup j'ai laissé tomber pour le moment car ça m'énervais de rien réussir à faire..

-
Edité par Laurent Cipicchia 29 mars 2018 à 19:48:18

Laurent Cipicchia a écrit:

Perso j'ai aussi commencé ce cours, mais la plupart des manips à faire avec photoshop je n'arrive pas à les faire, soit je ne trouve pas l'option, soit je trouve l'option et je n'arrive quand même pas à faire l'exo.. Je pense qu'on utilise pas la même version non plus. Pour moi il manque les étapes comme "clic ici" "fais comme ci", etc.. du coup j'ai laissé tomber pour le moment car ça m'énervais de rien réussir à faire..

-
Edité par Laurent Cipicchia hier à 19:48

Bonsoir,

Lire le cours sur Bootstrap t'aidera pas mal à avancer et surtout comprendre comment l'intégrer au projet... comme répété maintes fois dans la discussion, mais ça fait pas de mal d'insister dessus.

Il y a quelques liens dans la discussion du forum qui peuvent t'aider pour comprendre/prendre en main Photoshop:

https://medium.com/@Hypaepa/comment-pr%C3%A9parer-un-fichier-photoshop-id%C3%A9al-pour-l-int%C3%A9gration-css-4ec0d97e293e

Celui-ci permet de voir comment faire/refaire les règles-les 12 colonnes Bootstrap. Très utile car certains PSD les placent n'importe comment, ou pas par 12.

Ensuite c'est long et chronophage: c'est de la recherche! Google le meilleur ami de tout ceux qui codent!

Voici quelques réponses aux questions qu'on se pose (moi en tout cas) et qui peuvent aider à prendre en main Photoshop:

• Comment trouver l'outil règle?

Cliquez 1 fois sur la pipette de façon prolongée (outils sur la rangée de gauche) et elle propose la règle pour prendre les mesures! Bingo!

• Comment afficher les réglettes sur les côtés?

Affichage → Règles.

• Comment revenir en arrière? Très important quand on bidouille et fait efface quelque chose!

Cliquez sur l'icône à gauche représentant une flèche pointant vers le haut et 3carrés: 2 vides et 1 grisé.

cf: capture d'écran ci-dessous: entouré en rouge.

• Comment trouver les polices?

Pour ça, je me souviens plus trop comment analyser un élément (j'ai réussi une fois...), quand on charge la page Photoshop, une fenêtre "Polices manquantes" nous propose de synchroniser nos polices avec Typekit. Je recopie sur un bout de papier les noms et je recherche les polices sur FontSquirrel ou google. (En fonction du visuel on arrive à savoir quelle police est utilisé pour quel élément).

• Un dernier conseil utile: paramétrer Photoshop pour le travail Web.

Cliquer sur la flèche menu déroulant puis sélectionner "Graphique et Web".

cf image ci-dessus: entouré en bleu.

Une fois qu'on a réussi à régler tout ça, on avance pas mal. On ne passe pas trop de temps sur le PSD à part pour prendre quelques mesures de toutes façons, la grille et vérifier où sont placé les éléments si on ne se souvient plus. =)

En espérant avoir aidée.

-
Edité par Raphaëlle_Just_Me 30 mars 2018 à 20:22:15

florianboy01 a écrit:

ben oui, je suis un parcours mais je pars du principe que pour bien apprendre, le cours n'est que 10% du travail et n'apporte que des bases, et qu'il faut un max d'implication personnel, faire des recherches et aller bien au delà de ce qui est demander pour commencer à maîtriser un peu le sujet.

Et être capable de "voler de ses propres ailes" est le but final au fond.

A moins que certains pensent que c'est sur la rapidité à terminer un cours pour passer au suivant mais ce n'est pas mon concept de l'apprentissage ...

Encore une fois ça depend de chaque étudiant personnellement je n’ai que 6 mois pour faire la formation je doit donc me concentrer sur l’essentiel après si tu a du temps tant mieux pour toi c’est du plus

@Raphaëlle_Just_Me: Je suis tout à fait d'accord avec ce que tu dis, le soucis c'est que j'intègre une école mardi et que je voulais prendre de l'avance sur les cours que j'aurais. Du coup je voulais déjà voir :

- comment intégrer une maquette,

- apprendre html/css,

- commencer php/mysql,

- voir les bases de javascript,

- et d'autres petites choses

Et du coup j'ai décidé aussi de ne pas perdre de temps sur un truc où j'estime qu'il manque des explications alors que je manque de temps pour faire les recherches nécessaires.

Donc google est mon meilleur ami, et il l'est déjà depuis un bon moment, mais là je n'ai pas de temps à consacré à cet ami, j'apprendrai à lécole cette partie pour intégrer une maquette sans passer 15 jours à faire des recherches, je préfère me concentrer sur des cours plus explicite ;-)

-
Edité par Laurent Cipicchia 30 mars 2018 à 23:36:57

Julemane a écrit:

NicolasSantiago a écrit:

Le cahier des charges je ne vais pas le faire, j'en voit pas l’intérêt a ce niveau là du parcourt et pour ce qui ai de l’intégration de la maquette il y aurai du avoir une maquette a disposition, là même pour tout le monde comme dans les autres cours et heureusement qu'il y a d'autre tuto ailleurs sur le net car se cours ne fait que survoler le sujet.

Je te conseil de faire un cahier des charge même succin car sur la note totale il doit y avoir 3 pts sur le cahier des charges de mémoire.

Pour le reste je suis tout a fait d'accord avec toi

Trois point sur un truc qui n'est pas du tout l'objet du cours c'est pas génial je trouve. C'est comme le cours "Introduction à jQuery" Tu à 2 points si tu fait une capture d'écran de la page et 2 points pour le texte explicatif de ta démarche. Deux choses qui n'on rien a voir avec jQuery.

Erreur désolée...

-
Edité par Kerna 10 avril 2018 à 11:04:23

Bonjour,

moi ce que je n'ai pas compris, c'est si je dois reproduire le psd à l'identique, ou si je dois adapter les textes en fonction du client que j'ai inventé et du cahier der charges? Qu'en pensez-vous? Je trouve que l'énoncé de l'activité n'est pas trés clair... 

Intégrer une maquette c'est la reproduire à l'identique.

-
Edité par NicolasLoh 23 mai 2018 à 18:20:28

@NicolasLoh: idéalement oui, dans le monde du travail en tout cas.

@KeylaZah: ici le but est de reproduire l'apparence de la maquette que tu as choisi à l'aide de Bootstrap.

Quand au contenu, disons que c'est un peu compliqué d'inventer un client et de trouver LA maquette qui colle! Donc le mieux c'est encore de choisir une maquette qui te plait et de faire correspondre le contenu à ton client: si tu prend un maquette avec des images de PC etc tu vas inventer un client informaticien, si c'est des altères/mat de yoga ect. un client prof de gym... et ainsi de suite.

Après bien entendu tu peux remplacer certains éléments/images pour te simplifier la vie et coller au type de client que tu as imaginé (si tu passe d'une profession à une autre qui n'ont aucun rapport comme un boulanger et une fleuriste): juste précise le dans le cahier des charges comme une volonté du client. Il est là pour spécifier les besoins du clients et modif qu'il veut à sa maquette ou encore de dire quelleS maquetteS tu as prit si tu en combiné plusieurs (ce qui est noté comme possible dans les consignes).

Tu n'es pas noté sur le contenu en lui-même mais certains élèves qui te noteront pourront être un peu "trop pointilleux", et ne pas voir la partie "adapter la maquette" de la consigne qui n'est d'ailleurs pas reprit dans les points de notations.

Ne te casse pas trop la tête là dessus. Le plus simple reste d'adapter ton client à ta maquette (même si dans l'autre sens c'est mieux normalement, mais difficilement faisable à moins de tomber sur THE maquette ou que tu souhaitais faire un client dév. web/informaticien comme c'est le thème de nombreuses maquettes).

PS: le texte est bien souvent du "Lorem ipsum" donc tu peux et dois bien entendu le remplacer à ta guise par quelque chose de plus pertinent ;-) .

-
Edité par Raphaëlle_Just_Me 24 mai 2018 à 0:09:46

Je ne sais pas si ça déjà ete proposé comme idée mais je pense que le mieux est de faire sa maquette soit même avec un design très simple (positionnement textes et images non farfelus).

Concernant le cahier des charges, je pense que trois paragraphes suffisent pour simuler sa rédaction :

- une partie, renseignements client;

- une autre, attentes du client;

- et enfin, moyens utilisés (langages, logiciels, supports, etc...)

Puis compter sur la bonté de chaque correcteur 😉.

Je déterre un peu ce sujet, mais à la lecture du cours j'ai vraiment l'impression que ce-lui mériterai largement d'être revue par ses auteurs.

Je suis la formation développeur web junior et la différence de clarté entre ce cours et les précédents est flagrante. Certaines notions abordées s'imbriquent bien avec les précédentes comme les meta tags, découvrir une maquette sur photoshop et la traduire en HTML, mais d'autres comme bootstrap n'apportent que confusion parce-qu'elles ne sont pas abordées suffisament en profondeur.

Pourquoi est-ce qu'on nous parle de Boostrap qui est finalement un concept relativement similaire à Flexbox sans mentionner ce dernier à aucun moment ? Ca porte réellement à confusion et personnellement je me suis demandé si l'un était une alternative à l'autre, comment utiliser les deux en harmonies etc, bref ça mérite largement d'être abordé (même de façon théorique) plus en profondeur.

Ce cours essaie de faire des concessions sur les détails des notions abordées en essayant de se positionner en tant qu'accessible sans la lecture préalable du cours HTML/CSS, mais je pense que ça ne lui porte plus préjudice qu'autre chose. J'imagine qu'il est difficilement compréhensible sans ces notions de toute façon et du point de vu de quelqu'un qui suis la formation il ne va pas assez en profondeur dans ce qu'il aborde.

L'énoncé du TP de fin est bien trop vague, c'est d'ailleurs le seul TP que je ne vais malheuresement même pas commencer après avoir terminé un cours.

"Ajoutez du CSS si besoin pour personnaliser l'apparence et aller au-delà de ce que vous permet Bootstrap."

Est-ce qu'on attends de moi que j'utilises Bootstrap sur l'entiéreté de la page ? Si oui, il n'est même pas expliqué comment intégrer bootstrap à notre projet. Est-ce que je suis censé apprendre de moi même comment l'utiliser sachant que le cours sur bootstrap sera pour plus tard ?

Et jusqu'à quel point la page web dois t-elle ressembler à la maquette ? Parceque pour le coup je me met à la place de quelqu'un qui n'a pas lu le cours HTML/CSS: il ne risque pas de faire grand choses.

Les points requis sont encore une fois beaucoup trop vagues ! Il n'y a pas de "checks", c'est à dire d'éléments précis qu'on attends de nous pour valider le TP comme lors des précédents.

C'est dommage car ce cours a potentielement de l'intéret, mais je pense qu'il mérite d'être revue pour être réelement utile et efficace. En l'état il casse le rythme, apporte de la confusion et démotive un petit peut. 

-
Edité par SNBC 13 octobre 2019 à 4:43:58

Julemane a écrit:

florianboy01 a écrit:

ben oui, je suis un parcours mais je pars du principe que pour bien apprendre, le cours n'est que 10% du travail et n'apporte que des bases, et qu'il faut un max d'implication personnel, faire des recherches et aller bien au delà de ce qui est demander pour commencer à maîtriser un peu le sujet.

Et être capable de "voler de ses propres ailes" est le but final au fond.

A moins que certains pensent que c'est sur la rapidité à terminer un cours pour passer au suivant mais ce n'est pas mon concept de l'apprentissage ...

Encore une fois ça depend de chaque étudiant personnellement je n’ai que 6 mois pour faire la formation je doit donc me concentrer sur l’essentiel après si tu a du temps tant mieux pour toi c’est du plus

Mais si tu ne comprends pas un truc maintenant, celui-ci fera boule de neige par la suite et au final de tes soi-disant 6 mois, ben tu ne feras que de la merde, excuse le terme, mais si tu étais devant une machine numérique, tu as compris comment placer un cube dans la machine mais tu n'as pas compris comment la programmer donc tu clique "au petit bonheur la chance" pour la mettre en action ... Pense tu vraiment que tu vas obtenir la pièce désiré ?

Dire "J'ai rien compris, je passe car je n'ai pas le temps.." n'est pas une solution.

Pas le temps ????? lol, tu iras expliquer au commanditaire de la pièce usiné dans ta machine numérique que tu n'as pas eu le temps d'apprendre comment la programmer et qu'il faut qu'il se contente de ce que tu lui a fais, lol, je suis sur qu'il sera satisfais !!!!

Les journées d’apprentissage ne se limite pas à 7-8 heures de travail mais plus du genre 16-20 heures ...., il me semble pas que nous voulions être fonctionnaire ....

No comment ...

-
Edité par florianboy01 18 octobre 2019 à 23:07:46

Bonjour à tous et à toutes ,

J'ai pris le temps de lire vos commentaires et je voulais juste partager avec vous un cours que je viens de trouver sur LinkedIn Learning :

créer une page web interactive depuis une maquette photoshop avec html5 et css

Ce cours est très complet, comme le cours de M Nebra sur le html et css . Normalement ce service (linkedIn Learning) est payant, mais vous avez un mois d'essai gratuit . 

Bon courage ! 

Re-bonjour,

Je reviens vers cette discussion pour partager quelques éléments que j'ai trouvés sur le sujet du "cahier de charges ": 
(En voici donc un exemple)…C'est en gros des informations que vous allez trouver ou déduire par vous mêmes du fichier Photoshop :
(Et en parlant de Photoshop, le délai d'essai est bien court, donc n'hésitez pas à utiliser les mails de vos proches/amis pour profiter de leur périodes d'essai à eux ;) 

Informations fournies par le designer :

(Cahier de charges)

1-la page web doit être responsive :
utilisation de 3 points d’arrêt

-768px fluide

-1024px fixe

-1480px fixe

2-les polices utilisées : (titres + corps de texte)
CabinSketch Regular
Lato Regular

3-les changements sur petit écran :
Le menu de navigation

-doit disparaître dans le point d’arrêt le plus étroit

-est remplacé par un menu vertical escamotable

-même mise en forme que le menu horizontal

4-les variantes de la page (points d’arrêt)

En espérant que ca va vous être utile !

Maya

Bonjour,

Après avoir passé beaucoup de temps à chercher des PSD templates sur internet, j'ai très vite compris que :

-les templates qui sont disponibles gratuitement ne contiennent pas d'images 

-Même si vous en acheter, ce n'est pas une garantie que vous allez obtenir les images avec le fichier téléchargé

Donc j'ai fini par en acheter 3 sur creative market ! Un seul des 3 dossiers acheté contenait des images ! 

C'est pour cela que j'ai décidé de le partager ici, vous pouvez le télécharger en copiant ce lien dans votre navigateur, ca serait bien d'avoir un répertoire de fichiers PSD à partager pour ce cours, comme ça au moins les gens perdront moins de temps à chercher un fichier sur lequel travailler et passeront plus vite à l'essentiel !

-- Modéré par Benzouye : Lien retiré, le partage de fichier propriétaire est illégal --

-
Edité par Benzouye 23 décembre 2019 à 15:55:14