HTML/CSS3 , c'est moi ou bien ...?

Bonjour pour créer un site, il te faut :

1) Pensez au contenu que tu va mettre, le nombre de pages
2) faire un tit croquis avec ton beau crayon à papier
3) faire ta maquette toshop/gimp
4) découper ton template
5) intégrer ton template (html/css)

Il est en effet beau de rêver.

a+ ;)

PS : si tu code et ensuite tu te mets à faire ta maquette, tu seras bloqué par les restrictions que tu te seras donné en codant... Ur free !

Bonsoir James-Lee ,

En effet les étapes que signale coloo , sont les étapes idéals pour réaliser efficacement un projet et te permettra par la suite d'avancer au mieux sur ton projet, tout en évitant de perdre du temps.
Ce sont des étapes qui sont également appliqué au niveau professionnel.

Un petit truc si suivre des tutos ça peut être barbant ou frustrant, c'est de partir sur un projet, comme tu fais pour ton portfolio, et de chercher des ressources ou infos en fonction des questions ou des éléments que tu dois réaliser durant ton projet. Ça te permet de cibler ton apprentissage qui se fera, à mon avis, plus efficacement ainsi.

C'est en tout cas ce que j'ai fait car comme toi je 'bidouillais' comme tu dis, à l'heure actuel c'est devenu mon métier et même une passion.

Le monde du web est constamment en évolution et il existe des ressources énorme pour réaliser des projets web qu'il est impossible de tout connaitre rapidement mais il est possible d'avoir facilement et rapidement dans un premier temps les parties qui te sont demandés pour tes différents projets au fur et à mesure.

Alors il existe effectivement des logiciels qui te permet de ne pas toucher à du code et de faire tout visuellement mais le code derrière n'est jamais super propre et tu seras toujours un peu limité dans les fonctionnalités éventuellement plus poussées que tu souhaites pour tes projets. Perso, j'interdisais mes webdesigners d'utiliser ce genre de logiciel car c'est du 'bidouillage' pour moi.

Tu as Adobe Muse -> http://www.adobe.com/products/muse.html
Et Adobe Dreamweaver -> http://www.adobe.com/fr/products/dreamweaver.html

Et les éditeurs de code sans le coté visuel tu en as des tonnes et dont la majorité (qui sont très bon) sont gratuit, contrairement aux produits d'Adobe.

Je te souhaite de trouver ta voie sur le web et que tu y prenne réellement un plaisir.

hachbé

Si tu souhaites réellement te perfectionner et commencer a appréhender le web de façon professionnel, je te conseille de lire quelques ouvrages sur le sujet. Ci-dessous une selection des plus aboutis sur le sujet. **HTML5, une référence pour le développeur web** . *Rodolphe Rimelé* . Edition Eyrolles **CSS avancées vers HTML5/CSS3** . *Raphael Goetter* . Edition Eyrolles **CSS maintenables** . *Kaelig Deloumeau-Prigent* . Edition Eyrolles **CSS3, le design web moderne** . *Vincent de Oliveira - Cédric Esnault* . Edition Dunod**

Moi concernant la maquette Ps à faire en premier je suis pas d'accord, tout simplement parce que je maîtrise peut-être mieux le CSS que Ps. J'ai d'abord lu pratiquement en entier le tuto du sdz, juste en sautant quelques passages qui ne m’intéressais pas (pour le moment du moins). Ensuite j'ai essayer de créer un template web très basique, avec des gros blocs au background flashi ([url=http://dl.dropbox.com/u/17205493/SIte/index.html]ici[/url]) C'est moche, mais le plus important pour moi en css et peut-être le plus difficile au début, le **positionnement** des blocs! Il faut bien différencié les valeurs de "display" (block, inline-block, inline ...) et "position" (relative, absolute, fixed...), comprendre comment fonctionnent les margin et padding. Ensuite j'expérimente le css en créant un template **un peu** plus complexe ([url=http://dl.dropbox.com/u/17205493/Site/Portfolio/index.html]ici[/url]). Parfois je trouve un site sympa, alors je le recopie à partir de rien (je le recopie juste pour m'entraîner, en usage personnel pas professionnel). Ensuite un bon moyen de voir et de comprendre des erreurs à ne pas commettre, c'est de visité les forums ( celui [url=http://forum.alsacreations.com/list-18-Critiques-de-vos-sites-code-et-design.html]d'alsacréation[/url] par exemple ou on peut se faire démonter en moins de deux). Ensuite on apprend au fur et à mesure, avec des tutos qu'on trouve par-ci par-là. Bien sur il ne s'agit là que du témoignage d'un amateur autodidacte, je ne peux pas affirmer que c'est LA bonne méthode. Par ailleurs, c'est normale que ça te saoule au bout de 3H. C'est pas parce que tu lis 3H et que tu arrêtes sans même t'exercer que ça ne sert à rien, surtout pour les premiers chapitres pas forcément palpitant. Si ce que tu souhaite c'est apprendre par toi même et sans délai précis, alors prend ton temps! perso j'ai du mettre 2-3 ans avant de pouvoir en faire ce que je voulais en html/css, mais je ne mis intéressais que par "phase" ^^ (un coup html/css, un coup photoshop, un coup c4d... je touche à tout). Pour résumer: - Ne t'imposes pas la partie "maquette sur photoshop" - Lis le tuto par étape, surtout pas tout d'un coup - Hésite pas à expérimenté, faire simplement un bout de site, on créer pas un site "entier" comme ça - Recopis des sites web existent si tu n'as pas d'idée de design - Faire un thème wordpress à partir de rien c'est pas mal, et ça fait une initiation au php

Bonsoir,

La partie création graphique à son importance, à mon sens, si on souhaite faire des créations personnalisées et des montages graphiques.
Pour des sites plus complexes ou ayant pas mal de contenu, réaliser une analyse ergonomique et de structures à son importance.

Effectivement, pour bien appréhender le design/ergonomie ainsi que pour prendre en main les possibilités techniques qu'offre les codes orientés web, c'est bien de commencer directement en mettant les mains dedans comme le conseil ull.
Mais je reste sur ma position que par la suite il faudra passer par l'étape sous un logiciel de création graphique si tu souhaites créer des designs plus poussée/graphique.

hachbé

+1 pour hachbe
Quand j'ai commencé je me suis dit, ba photoshop c'est chiant, j'y connais rien, sa me fait perdre du temps, etc...
Mais avec le temps, il s'est imposé à moi (et sera de toute manière obligatoire si tu veux être pro afin de produire une maquette du site et l'étudier/valider avec le client). J'ajouterai qu'en règle générale, passer par un logiciel de graphisme sa te permet de laisser libre court a ton imagination, car aujourd'hui on n'est plus vraiment de limite niveau code ;).

Donc pour répondre a ta question, le parcourt général de chaque projet chez moi est :

réflexion sur l'érgonomie/utilisation/cible -> maquette -> HTML/CSS -> Javascript -> puis code geek sur la technologie de ton choix :)

Je ne souhaitais pas utiliser photoshop, maintenant il me fait gagner du tps...

ps : tu peux toujours essayer dans un premier temps certains plug-in sur photoshop pour aider ton travail d'intégration. Par contre je ne les aient jamais essayés, donc ne prend pas sa comme un conseil, mais plus comme une info -> Css Hat

bon courage pour la suite !

Bonjour à tous et merci à tous pour vos réponse .

En effet , depuis mon premier essai sur le sdz , je n'ai plus eu envie de continuer ( fenéant moi ?)

Bref , je vais m'y remettre c'est sur .

En attendant , j'ai créer déjà ma maquette , je vous met le psd histoire de voir si c'est deja un bon début ? J'attend vos critiques ...MErci bien à tous le monde

Psd : http://www.partage-facile.com/BT4CXHM6OZ/maquette\_site1.rar.html

Illustration : http://img109.imageshack.us/img109/8852/maquettesite1.jpg

Personellement, j'ai ce même problème quand j'ai commencé le Sql... j'avais pas envie !

j'ai apris les base HTML5 sur SDZ, et le Css sur cette vidéo de graphikart

Vidéo

En recapitulant, HTML5 sur SDZ (quand j'ai commencé HTML, je conaisais pas tous a fait par coeur. mais avec l'expérience, sa viens :P)
et Css sur le lien plus haut. personellement, regarde jusqu'a les menu (compris), sa sufit je pense (pour les bordures, les ombres et les positionement, va bien lez voir SDZ, c'est important pour coder joliement et proprement)

Pour les sites complexes, qui ont un réel but autre que l'entraînement, je comprends tout a fait la nécessite d'une maquette (surtout si le travail d'intégration concerne plusieurs personne) mais dans le cas présent, on fait un peu comme on veux :).

Concernant ta maquette James-Lee, pour un début elle est très correcte! Rajoute des titres et un footer et intègre tout ça!
Une petite remarque cependant, tu pourrais rajouté un petit bloc à côté du contenu principale, histoire de compliqué un peu et bien comprendre les placements des bloc (pour moi c'est le plus dur au début!)

moi je suis nouveau ici et c'est un ami qui m'a donné se site que je trouve bien!J'apprends le html5 css3 sur le sdz depuis quelques jours,il est bien détaillé c'est vrai mais lent vu que tu dois être entrain de lire à chaque fois et ça devient ennuyeux quelques temps.Moi c'est là que j'apprends mon html et css et pour aller un peu vite alors mon ami m'a suggéré ici!mais y'a pas trop de détails comme sur le sdz(avec les balise,attributs....etc)comme pour un vrai débutant.(s'il y en a indiquer moi stp)
Mais je veux savoir une chose comment on copie un site pour en faire un pour soi(bidoullage)?et comment s'y prend pour arriver à en faire et en même temps apprendre le htlm et css plus rapidement?
merci

Salut salut, je sais que la dernière réponse date, mais je veux juste faire un petit retour de mon expérience de ces derniers mois sur le web,

Je pense que la façon de procéder décrite par Coloo est fondamentale pour obtenir un site internet un minimum professionnel.
En effet, je ne vous explique même pas le nombre de fois où j'ai codé un site qui me paraissait parfait, en passant des semaines entières penché sur mon éditeur de code, pour finalement me rendre compte que je ne pouvais plus avancer, dû à l’absence totale de "pré-réflexion" sur mon projet.

Il existe cependant des nuances. Plus précisément, si vous vous intéressez un minimum à l'avancé du web ces derniers temps, vous n'êtes pas sans savoir que le Flat Design est plutôt sur le devant de la scène. Si vous ne savez pas ce que c'est, je vous renvois à cette définition du blog Lunaweb : Lunaweb :

"Le flat design est une représentation symbolique d’objets qui n’admet aucune texture. Par conséquent, pour faire ressortir certains éléments, les designers graphiques s’appuieront sur une palette de couleurs, de formes et de typographies pour guider l'utilisateur. Ce mouvement prône les interfaces minimalistes et aux couleurs vives, pour améliorer la visibilité."

Par conséquent, et après de nombreuses recherches, je me suis rendu compte d'une chose, utiliser un logiciel comme photoshop pour des design Flat ne me parait pas obligatoire. Par contre, ça ne veux pas dire qu'il ne faut pas avoir de phase de réflexion. Seulement, se poser avec une feuille et un crayon devant son bureau pour réfléchir au projet est déjà très utile.

En effet, si vous avez bien compris l'utilité de cette nouvelle tendance, dérivée des interfaces mobiles, l’intérêt est de simplifier l'interface au maximum pour cibler directement ce qui est important, en utilisant au maximum le css, au détriment des images, qui surchargeront la page et son exécution.

Enfin, bref, voilà tout ce que je voulais dire, merci d'avoir lu tout ça =)

"Je pense que la façon de procéder décrite par Coloo est fondamentale"

J'ai un fan =)