Dans le passé, j'ai fait du codage HTML, CSS et PHP, mais je n'ai travaillé que sur des choses qui étaient déjà "terminées" et je n'ai jamais commencé un site Web à partir de zéro. Cependant, j'ai récemment acheté un domaine et un hébergement pour pas cher, et j'espère améliorer mes compétences HTML, CSS et Javascript afin de devenir un peu plus commercialisable en tant que développeur / webmaster web.

En règle générale, quel processus utilisez-vous pour démarrer un site Web? Dessinez-vous la mise en page sur papier, puis faites-vous le code? Ou commencez-vous simplement à coder et à modifier la sortie à votre guise?

Mon processus ressemble généralement à ceci:

1. Caractéristiques . Au crayon et au papier, exposez les caractéristiques / pages distinctes qui composeront le site. Cela permet de répondre aux questions générales sur les accidents vasculaires cérébraux - créez-vous un site d'information et graphique simple pour votre maman? une solution de commerce électronique pour une petite entreprise? un blog / galerie pour un ami photographe? Votre réponse déterminera beaucoup sur le chemin de construction que vous devrez suivre. Cette étape peut également impliquer une discussion considérable avec un client ou celui qui conduit le bateau (si ce n'est pas vous).

2. Filaire . Avec toutes les fonctionnalités nécessaires présentées, élaborez un filaire. Soit sur papier, soit avec un outil comme un feu d'artifice qui vous permettra d'intégrer des fonctionnalités de navigation très simples. Si vous travaillez avec un CMS comme wordpress, comment votre contenu statique sera-t-il géré? Cela pourrait également être un bon moment pour commencer à réfléchir à la structure des fichiers. Si votre projet a besoin d'une base de données personnalisée, il est également temps de commencer à planifier sa conception et sa mise en œuvre. Il s'agit d'une étape critique, car une planification intelligente permettra d'économiser beaucoup de retours en arrière et de retouches, si des erreurs se produisent ou si le projet se déroule.

3. Technologie . Une fois la phase de planification relativement élaborée, choisissez vos technologies. Faites-vous du HTML direct? un php cms dans un environnement de lampe? devanture de magasin .net mvc? Ces questions peuvent influencer l'environnement d'hébergement requis, ainsi que les coûts de fonctionnement de la chose. Si vous faites une vitrine, la sécurité est une préoccupation principale ici (SSL et conformité PCI, par exemple). Assurez-vous que vous disposez d'un excellent environnement de test (localhost ou autre).

4. Conception / mise en page . Lorsque votre liste de fonctionnalités et votre filaire sont assez bien déterminés, vous pouvez commencer à penser à la conception du site. Savoir ce qui va remplir les pages est évidemment une condition préalable. J'aime travailler dans Photoshop et faire un usage intensif des dossiers comme analogue à votre structure de balisage. Je vais jusqu'à les nommer avec les identifiants de balisage et css prévus. Bien qu'il soit probablement sage de faire du dessin sous forme libre avant d'être vraiment détaillé. J'ai tendance à utiliser des fichiers de "mise en page" dont je vais extraire des éléments et à les placer dans des fichiers de "processus" - des fichiers que j'utilise pour produire des graphiques de production.

5. Balisage / CSS . Une fois qu'un design assez propre est élaboré (étant donné qu'il fléchira certainement un peu, lorsque vous passerez en mode production), vous pouvez commencer à écrire du balisage. J'aime généralement avoir une mise en page standard qui pourra accueillir tout le contenu du site. Donc - propre et flexible devrait être le point clé ici. Le balisage de mise en page devrait être assez complet avant de commencer à écrire CSS, mais je trouve qu'ils font beaucoup pour s'informer mutuellement. Vous ferez également beaucoup d'optimisation SEO à cette étape (dénomination correcte des images ou des balises A, méta-informations, doctypes etc ...) Soyez minutieux.

5.1 Gestion des thèmes . Si vous travaillez avec un CMS et que votre conception sera utilisée en tant que thème personnalisé, trouvez des didacticiels sur la façon exacte de le faire pour votre application prévue. Franchement, cela peut être intimidant;) Je créerai toujours une disposition de balisage statique avec un CSS assez complet avant de le découper en éléments de thème.

6. Comportement . Lorsque votre balisage et vos CSS semblent assez complets, et que votre thème est peut-être en place, vous pouvez commencer à développer des comportements (survols, etc.) Le javascript discret est important, sauf si vous utilisez des fonctionnalités qui en ont absolument besoin galerie, ou contenu flash piloté par les données). La règle générale est la suivante: si quelqu'un visite votre site sans Javascript, que verra-t-il? Je supprime parfois des éléments statiques et les remplace par des versions interactives lors de l'exécution.

7. Contenu . À moins que la conception ne dépende du contenu (les images sont parfois du contenu, par exemple) = J'utilise généralement du texte / des graphiques d'espace réservé jusqu'à ce que la conception et le comportement soient assez bien établis. Évitez de travailler plus d'une fois. Si vous remplissez les données du produit, une vérification et un test minutieux des erreurs seront nécessaires.

À ce stade, il semble toujours y avoir une période de retouche, de fixation et de polissage. Mais, essentiellement, il est temps de le faire vivre. Ensuite, allez prendre une collation.

Hmmm. Je suppose que c'est plus que juste "comment commencer". Mais peut-être que ça aide, de toute façon. Bonne chance!

Lors de la conception d'un site Web, je commence par demander pourquoi?

La première partie de mon flux de travail demande POURQUOI? Si je travaille avec un client, je dois m'assurer qu'il a une vision clairement définie de ce qu'il souhaite que le site Web accomplisse.

1. Les questions pourquoi.

• Parlez-moi un peu de vous et pourquoi vous faites cela.

• Qui sont les clients? Quels sont leurs besoins / douleurs spécifiques? Veuillez me fournir - avec quelques exemples spécifiques de différents types de clients, ce dont ils ont besoin, ce que le site Web fera pour eux.

• Parlez-moi de l'entreprise. Qu'est-ce que tu fais exactement?

• Qu'est-ce qui vous rend meilleur que le prochain?

• Si vous recherchiez le service fourni par votre entreprise, que saisiriez-vous dans Google pour le trouver?

Si vous construisez le site pour vous-même, vous feriez mieux de savoir déjà quelles sont ces réponses.

Si vous déterminez, sur la base des réponses aux questions ci-dessus, que ces personnes sont sérieuses et ont en fait une bonne idée. Ensuite, continuez (rappelez-vous que vous n'êtes pas encore payé, mais vous feriez mieux de retirer leurs chaussettes si vous voulez qu'ils vous embauchent.)

2. La recherche.

Passez un peu de temps à rechercher le client et son entreprise. Découvrez leurs succès passés et tous les problèmes qu'ils ont rencontrés. Êtes-vous le troisième développeur qu'ils ont embauché? Qu'est-il arrivé aux 2 autres gars?

Découvrez ce dont le client a besoin. Pour qui construirez-vous ce site? Le client est-il un vétéran à la retraite de 60 ans ou un gamin de 16 ans au visage de bouton qui joue à Farmville sur Facebook toute la journée?

Découvrez qui sont les concurrents. Ils ne le savent peut-être même pas. Faites une analyse concurrentielle de 5 à 10 concurrents et découvrez de qui nous avons besoin pour lancer les Serps. C'est l'étape dont vous avez besoin pour savoir quels sont les mots clés ciblés. Plus tard et votre déjà échoué.

2b La proposition

Soufflez-les avec votre connaissance de leur entreprise et trouvez un accord / une proposition de site Web et soyez prêt avec votre contrat une fois qu'ils sont d'accord. Obtenez le contrat signé et un acompte de 50%, puis passez à l'étape 3.

3. La mission - en avoir un

Il y a un thème commun ici: dans tous ces cas, la mission ne concerne pas le produit en tant que tel. La mission est «juste» quelque chose qui, si vous êtes vraiment sérieux, exige que le produit devienne absolument incroyable, alors vous y arriverez. Si vous préférez: ces missions sont toutes la réponse à, pourquoi avons-nous simplement ajouté cette nouvelle fonctionnalité?, Non, quelle nouvelle fonctionnalité ajoutons-nous? - Benjamin Pollack.

Le calendrier doit être établi afin que chacun ait ses attentes en perspective.

4. Le flux de travail

C'est là que la plupart des gens commencent donc je vais expliquer mon processus mais vous devrez décider quel flux de travail est le meilleur pour votre situation, votre équipe, votre client, etc.

1. Pour moi, le contenu vient en premier. Je m'assure que le client en a fait la majorité avant qu'un code ne soit écrit. Nous ne parlons pas de l'édition finale de l'épreuve mais plutôt des mots du texte qui seront sur les pages. Si une équipe marketing est impliquée, cela peut prendre un certain temps.

2. Vous devriez déjà avoir une idée de l'apparence du site. Vous devriez avoir le contenu. Vous devez maintenant travailler sur la mise en page et les principes généraux de conception qui permettront d'atteindre l'objectif que vous avez défini à l'étape 3.

   Je déteste les wireframes mais je comprends qu'ils sont nécessaires. Tout simplement parce que vous savez à quoi ressemble le site, il se peut que votre client ne le sache pas. C'est pour votre protection et les clients. Lorsque tout le monde est content, faites-leur signer quelque chose qui dit "C'est ce que nous vous payons pour construire".

3. Développement frontend et UI - HTML, CSS et DESIGNING IN THE BROWSER , la technique Hardboiled d'Andy Clarke. Je suis fatigué de perdre autant de temps dans Photoshop alors que je sais pouvoir démontrer une maquette plus rapide et plus réaliste qui me donne également une longueur d'avance sur le développement.

4b. La base de code

Vous pouvez enfin vous amuser. Pour le vôtre et pour les clients, configurez VERSION CONTROL avant de commencer. Depuis votre contrôle de version, vous devez continuer et configurer le suivi des bogues pendant que vous y êtes .

4c. Edition de copie

Rappelez-vous ce contenu que nous avons? C'est maintenant qu'il doit être modifié. J'aspire à cela, alors j'essaie d'embaucher quelqu'un d'autre ou de m'assurer que beaucoup de gens le lisent. Vérifiez et assurez-vous que les mots clés dont nous avons parlé à l'étape 2 sont optimisés pour le référencement. Si notre contenu est génial et porte sur ces mots clés, cela devrait venir naturellement.

5. Test bêta et interface utilisateur

Faites en sorte que de véritables êtres humains qui respirent puissent s'asseoir devant votre site et commencer à l'utiliser. J'aime enrôler ma mère qui appelle parfois et veut savoir pourquoi son imprimante n'imprime pas (la prise maman, il faut d'abord la brancher). Ces types d'utilisateurs doivent pouvoir naviguer sur votre site, à moins bien sûr d'utiliser l'exemple d'enfant à face de bouton de 16 ans ci-dessus.

6. Plan de maintenance et de référencement

Assurez-vous que tout le monde sait qui est chargé de combattre les bêtes du serveur .

Dans un mois, référez-vous à l'analyse concurrentielle que nous avons faite et comparez notre site à ceux que nous avons analysés. Utilisez ces données pour créer votre plan de référencement et NON, je ne parle pas du référencement de l'huile de serpent, je parle de m'assurer que vous générez toujours du contenu pertinent, les sites sont naturellement liés à vous (parce que vous êtes tellement génial) et à vos balises de titre correspondre au corps du texte. Le référencement est un long processus à moins que votre Stack Overflow et dispose d'une armée de 14,1 millions d'utilisateurs pour générer du contenu de qualité pour vous.

Il y a une grande différence entre un contenu de qualité et ce que vous trouvez sur "le site avec trait d'union", que je ne lierai pas. (Pour éviter que le jus sans suivi ne coule sur eux).

7. Lancement

Tout fonctionne? La mission de construire la génialité a été accomplie? Ayez un plan de lancement et exécutez-le.

Si vous avez tout fait correctement dans les étapes 1 à 6, votre lancement sera un jeu d'enfant et vous aurez peut-être des problèmes. Soyez juste prêt pour eux et corrigez les erreurs.

Envoyez la facture, rincez et recommencez.

J'aime commencer <!DOCTYPE html>

Mais sérieusement ... premières priorités:

1. Découvrez ce que le client veut. Dessinez un croquis pour la mise en page de base, créez un jeu de couleurs, etc.
2. Faites une maquette de navigation et de mise en page de base (statique) et travaillez avec le client pour l'affiner.
3. Production réelle. Mettez en place du contenu CMS et / ou statique. Conférez à nouveau avec le client pour vous assurer que c'est ce qu'il recherche et qu'il peut gérer le CMS / le CMS peut gérer leurs besoins.
4. Affinez et répétez 3 jusqu'à ce que le client soit satisfait.
5. ????
6. Profit!

Tout d'abord, je dessinais la disposition de base et la concevais sur papier avant de commencer le codage. Après avoir terminé la conception de base sur papier, il est facile de la coder de manière modulaire.Phc & css en cours de cours serait la meilleure façon de la personnaliser.

J'aime toujours commencer par faire une maquette en utilisant une sorte de logiciel Photoshop pour qu'il puisse incorporer toutes les images dans votre site.

La plupart des réponses vont déjà en profondeur, permettez-moi d'ajouter que vous devez utiliser un cadre ou des modèles afin de ne pas perdre de temps à réécrire les bases.

Il existe de nombreux framework PHP disponibles ( Kohana est mon préféré) ou beaucoup de gens utilisent Wordpress comme base. Vous pouvez également utiliser un framework CSS, encore une fois il y en a beaucoup, l'un des plus populaires est le système de grille 960

Lors de la conception d'un site Web, comment commencez-vous habituellement ?

Comme vous, j'ai trouvé la nécessité de me vendre en tant que développeur / concepteur Web il y a quelques années. J'ai trouvé que mon point de départ était de comprendre dans mon esprit, quelles informations, image et message puis-je offrir aux visiteurs qui visitent mon site Web? et ce que je voulais que l'utilisateur accomplisse / fasse en visitant mon site Web .

Une fois que j'ai acquis cette compréhension, le processus de conception est devenu beaucoup plus clair. Cela m'a permis d'écrire les éléments de ma page d'accueil et des pages suivantes qui communiqueraient ces éléments.

Par exemple, j'étais très désireux de rendre mon CV facilement trouvable et téléchargeable. Ainsi, lors de la conception de mon site, j'ai veillé à ce que les informations sur mon CV et où les trouver soient facilement disponibles.

La morale de l'histoire doit être pertinente. Tout ce qui se trouve sur votre site Web doit avoir un but, sinon son bruit juste inutile.