witola.com

Ce qui suit est un article que j'ai lu sur un blog à propos de développeurs front-end et les pratiques de codage et pensé que je pourrais lui transmettre. Il est par Doug Neiner, un rédacteur en chef à alimenter vos Codage et est président de Design Studio graphique pixel . Il est accro aux nouvelles technologies, et aime particulièrement passer du temps avec WordPress, Ruby on Rails et jQuery.

Ce qui suit est une série de 10 choses à retenir et à pratiquer sur chaque projet de développement web. Je les ai énumérés ici par ordre d'importance que la plupart des étapes se renforcent mutuellement. Si vous ne prenez rien d'autre loin de la lecture, s'il vous plaît prendre Règles # 1 et # 2 à coeur et de les pratiquer. Je pense que la résolution de ces deux problèmes conduira à une meilleure conception et une meilleure mise en œuvre dans les sites Web à travers l'Internet.

1. Une charge suffisante, et puis certains

Surtout dans les périodes économiques difficiles, les entreprises et les particuliers cherchent à réduire les coûts et maintenir les projets à un minimum. En raison de cette connaissance, nous en tant que développeurs web essayez de déplacer à travers chaque phase le plus rapidement possible. De développement de bout avant, cependant, prendre une quantité importante de temps si c'est fait correctement. Pas suffisamment de charge pour que le temps nous mène en tant que développeurs de sauter sur les choses que nous connaissons sont importants juste pour garder le projet dans le budget. La règle est simple ... vous n'aurez normalement pas prendre le temps de bien faire les choses si vous n'avez pas le temps de prendre. La seule façon d'obtenir plus de «temps» en tant que développeur, est de garantir le temps nous faisons des dépenses est correctement indemnisés. À ce moment-là seul peut nos cœurs et les esprits être complètement insérée dans nos projets ... et alors seulement, pouvons-nous prendre le temps de suivre les 9 autres règles.

2. Éduquer Le Designer

Pour ceux qui sont un concepteur / développeur tout-en-une machine, celle-ci devrait être facile. Toutefois, les codeurs qui travaillent avec ou pour un designer ont une responsabilité unique. Comme de nombreux créateurs issus d'un milieu d'impression, il est à vous, le développeur, pour les renseigner sur les possibilités qui s'offrent à leurs desseins. Non ... Je n'ai pas dit de leur faire connaître les plugins jQuery 150 + que vous utilisez, ou vos pensées sur l'utilisation d'un combo UL / LI vs une série de balises A. Je l'ai dit de les éduquer sur les possibilités. Aidez-les à comprendre comment leur conception peut afficher sur différents appareils. Aidez-les à comprendre comment tirer parti des milieux répétitifs et les modèles de tuiles pour réaliser de grands desseins avec la taille de fichier minimale.

Ne laissez pas la créativité uniquement pour le concepteur ou l'autre! Ceci est votre chance de prouver que vous êtes créatif et en trouvant les solutions technologiques parfaits pour répondre aux besoins du concepteur. En leur disant «qu'il ne se fait pas de cette façon» pour chaque demande est un moyen sûr-le-feu pour causer des frustrations des deux côtés. Mettez votre esprit de travailler à trouver des moyens autour des obstacles.

Note: les règles 3 à 10 construire à partir de ces deux premières règles. Certaines des règles suivantes besoin de graphiques supplémentaires à partir du concepteur, et toutes les règles de prendre le temps de suivre. Prendre un engagement à des règles 1 et 2, et les règles restantes seront à la fois du sens et faire de votre produit fini beaucoup mieux.

3. Pensez en couches, non en tranches

Même aujourd'hui, nous utilisons encore l'expression «couper la conception» pour décrire le processus de déplacement d'un dessin à partir d'Illustrator ou Photoshop dans le produit fini HTML / CSS mise en page. Bien que ce soit encore largement précise, son nom dément l'ancien concept de trancher un design en morceaux et le remontage (habituellement dans un tableau) de retour sur la page HTML.

C'était l'ancienne bande. Le nouveau site Web utilise le concept de stratification, d'empilage, et z-index pour réaliser des conceptions avec la profondeur. En tant que codeur, être sûr d'obtenir des fichiers PSD en couches ou couches fichiers AI à partir du concepteur par rapport à un design plat. Cela vous permettra d'avoir une plus grande flexibilité dans la façon dont vous mettez sur pied un site web. Rappelez-vous, lorsque vous travaillez en couches, examiner les éléments HTML qui sont essentiels à la structure avant de recourir à l'ajout de divs supplémentaires et des portées. Vous pouvez utiliser un motif répétitif verticale sur le html élément, et un fond de répéter horizontale sur le body l'élément sans mettre le redoutable div#wrapper pour résoudre vos problèmes de fond.

4. Utilisez le meilleur format de l'image

Quel est le "meilleur format d'image" demandez-vous? C'est celui qui est le mieux adapté à la tâche à accomplir. PNG, GIF et JPEG ont toutes des avantages différents. Quand il n'ya pas de transparence dans une image, tester ce qui la taille du fichier / qualité d'image est le meilleur entre PNG, GIF et JPEG. Pour de grandes images, JPEG sera presque toujours gagner de la taille vs qualité. Pour de petites images sans transparence, voir qui a une meilleure taille du fichier PNG ou GIF. Si vous décidez sur un GIF, n'oubliez pas de jouer avec les options de tramage et les options en lossy (Avez-vous savent même pas Photoshop a une "perte" option pour GIF?). Souvent, vous pouvez presser même les fichiers plus petits sur Photoshop grâce à l'adaptation des paramètres de sortie encore plus loin.

Pour les images qui ont besoin d'avoir de la transparence, prendre des décisions éclairées sur la façon dont ils seront utilisés. Si ils seront superposés sur un fond complexe, vous devrez peut-être envisager d'utiliser un fichier PNG. Si le fond est assez cohérent que le cache de couleur d'une image GIF ne se distinguent mal, voir si le fichier GIF est plus petit. GIF a l'avantage de ne pas nécessiter de programmation supplémentaire pour le faire fonctionner dans IE6.

En ce qui concerne l'utilisation JPEG: Si vous utilisez le format JPEG dans le cadre de votre interface utilisateur (et pas seulement pour afficher une photo, etc) n'oubliez pas de laisser hors des profils ICC lors de l'enregistrement pour le web. Certains navigateurs honorera le profil et de produire une différence de couleur entre le GIF / PNG et JPEG de la même couleur. Il s'agit d'un problème simple d'éviter simplement en éteignant les profils ICC.

Que faire si c'est une situation perdant-perdant? Il ya eu des moments où j'ai besoin de toute la transparence d'un PNG avec la complexité de l'image mieux adapté pour un JPEG. Dans ces cas j'ai souvent empiler (rappelez-vous, pensez à couches) deux images: un PNG pour la transparence, et une image GIF pour l'aspect complexe de l'image. Il est résolution créative de problèmes de ce genre qui assurera que vos pages se chargent rapidement, et que la conception conserve son intégrité.

5. Savoir quand utiliser les classes vs Ids

Je pensais que c'était juste du bon sens, mais apparemment ce n'est pas que je vois de nombreux codeurs utilisant des noms de classe où ils devraient utiliser des ID. Il peut ne pas sembler un gros problème, mais il sera quand vous essayez de cibler un élément en utilisant Javascript.

Le concept est simple, s'il n'y aura qu'un seul élément sur une page donnée, utilisez un id. Si il y aura plusieurs instances sur une page donnée, utilisez des noms de classe. Chaque fois qu'un élément est un-de-un-aimable, utilisez un id. Son simple que cela! Des choses comme ul.navigation pour la barre de navigation principale ou div.site-logo n'a pas de sens. Chacun de ces éléments sont distincts et doivent avoir et id.

Au lieu d'ajouter une autre règle à notre liste, laissez-moi quelque chose d'autre forfaitaire ici: ne pas utiliser trop de classes! Prenez le code suivant pour un exemple extrême (Notez que les classes sont six fois):

Pour ceux qui codent fréquemment, vous réalisez que c'est un exemple ridicule, mais il montre la fausseté de la sur-utilisant les classes. Utilisez uniquement ce que vous devez correctement du style et améliorer (via Javascript) le code HTML, rien de plus.

6. De rendre vos pages Responsive

Il est important que la page répond correctement en tant que l'utilisateur final navigue à travers elle. En utilisant les conventions comme des effets de survol d'image ainsi que: hover,: active et: focus Etats ne peuvent pas être assez souligné. Vous ne voulez pas à l'assaut de l'utilisateur avec des interactions trop grand nombre de styles ou mais la plupart des gens réagissent bien à la rétroaction visuelle. Voici un facile pour vous: les liens doivent changer d'état lorsque la souris passe sur eux ... d'époque! Il ne suffit pas que le navigateur affiche une petite main qui indique un lien. Je ne peux pas vous dire combien il est frustrant de chercher dans une page avec du texte noir à la recherche des liens gris foncé et en espérant et en priant pour que la main s'affiche me le faire savoir j'en ai trouvé un!

En utilisant les conventions telles que les "vous êtes ici» ou indicateurs descriptifs outil bouts tombent tous dans cette catégorie. La plus grande interaction et la rétroaction qui apparaît à l'utilisateur alors qu'ils naviguer à travers un site, mieux c'est.

7. Toujours utiliser des sprites CSS pour roulements

Si vous ne savez pas ce que CSS Sprites sont, consultez cet article à Smashing Magazine ou celle-ci à A List Apart pour plus de détails. Pour ceux qui ne savent pas ce qu'ils sont, pourquoi ne pas les utiliser!? Si vous me dites son dû à un manque de temps, je tiens à vous référer à la Règle n ° 1 dans cette liste. Passé l'argument du temps, je ne peux pas vraiment penser à un bénéfice plus important que d'utiliser CSS Sprites pour survols d'images. Consultez le Starter pour jQuery site. Presque tous les morceaux de l'interface utilisateur sont construites en utilisant un seul fichier PNG (photo ci-dessous). Les charges d'interface à la fois, et tous les états hover / active sont immédiatement disponibles. Aucun retard pour un: hover image à charger; Une requête vers le serveur, et non pas 10 +. Ceci est un outil fantastique dans le Front End de codage Toolkbox que les développeurs ont besoin d'utiliser plus fréquemment.

8. Comprendre la différence entre Flash et Javascript

Je pense que Javascript peut faire des choses étonnantes. J'aime aussi repousser les limites de ce qu'il peut faire. J'adore faire des widgets et plugins, tout autant que le gars à côté ... mais le Javascript ne peut pas résoudre tous les problèmes dans le développement web dynamique. Au lieu de dépenser 10 heures émuler une fonctionnalité de Flash qui prendrait 1 heure pour faire en Flash, faire le bon choix et choisissez Flash. D'autre part, si vous juste besoin d'un rotateur d'image ... ne vous avisez pas d'ouvrir Flash!

9. Testez votre site dans les navigateurs beaucoup (y compris IE6)

Celui-ci prend du temps, il ne fait aucun doute à ce sujet. Je développe sur un Mac, et disposer d'un PC (et de multiples environnements Virtual PC) qui me permettait de test est la plupart des gens normaux navigateurs utilisent aujourd'hui. Sauf si vous avez les rapports Google Analytics qui disent ne l'on utilise Internet Explorer ou tout le monde utilise Firefox, ne font pas une hypothèse sur la façon dont les gens vont parcourir votre site. Je ne dis pas rendre les sites semblent identiques, mais les faire fonctionner, la fonction et l'air agréable (et certainement même!) Dans la plupart des navigateurs.

Remarque: Je mentionne spécifiquement IE6 parce que mon plus gros client est une société qui utilise encore IE6. J'ai développé un style de codage qui me permet de construire rapidement pour les navigateurs modernes, et mettre en œuvre une feuille de style que quelques-uns et des corrections de javascript afin que le site ressemble à droite dans IE6. Je suis sûr que je perds un certain bord en faisant de cette façon, mais il me sauve de nombreux moments embarrassants.

10. Always Keep In Mind entretien

Comme vous êtes «découpage» une conception Photoshop, ou la préparation de votre CSS et Javascript, gardez à l'esprit de maintenance. Certains bidouille fou-cool CSS que vous utilisez aujourd'hui peut revenir vous hanter plus tard. Dumping des règles CSS, où que vous s'il vous plaît dans un fichier CSS peut sembler rapide en ce moment (Guilty!), mais fera changer et les mettre à jour plus tard, un cauchemar.

Une étape important de se rappeler survient après que vous avez préparée fichier d'un designer pour l'exportation à partir de Photoshop ou Illustrator: N'oubliez pas d'enregistrer une version du fichier, juste avant l'exportation. Ainsi, si vous avez besoin de ré-exporter plus tard, ajouter un autre bouton, changer une ligne de texte, etc, vous pourrez l'exporter à nouveau rapidement. Photoshop enregistre normalement choix de format d'image, les paramètres de compression, et les couleurs mates pour rendre votre travail encore plus facile.

Conclusion

Il ya un certain nombre d'autres choses qui sont importantes pour les codeurs frontaux à garder à l'esprit, mais je pense que ce sont quelques-unes des plus importantes. Beaucoup pourrait faire valoir que ces règles ne sont pas, mais je vous mets au défi de penser à eux en tant que telle. Peut-être vous serez moins susceptible de les briser dans l'intérêt de temps ou d'argent sur votre prochain projet.