Critique de livre: de Photoshop au HTML
Si vous êtes novice dans la création de conceptions de sites Web à l'aide de Photoshop, apprendre à transformer ces fichiers .PSD en fichiers CSS et HTML sémantiques et conformes aux normes peut être un peu intimidant.
Après tout, de nombreux services géniaux vous permettent de classer et de coder vos fichiers. Mais il y a ces cas où vous préféreriez peut-être trancher ces dessins par vous-même.
C'est là que De Photoshop à HTML: comment découper vos designs comme un pro par Jeffrey Way, éditeur de Nettuts +, entre
Dans ce livre de 145 pages, l'ensemble du processus de conversion d'un fichier .PSD en un site Web fonctionnel est traité, en détail, avec des exemples de code.
Un site modèle est utilisé pour guider les lecteurs tout au long du processus, étape par étape, avec un seul exemple. Tout est couvert, du codage de base à la compatibilité de vos conceptions entre navigateurs.
Sur une base quotidienne, si vous écoutez attentivement, des codeurs tentent sans succès de forcer un dessin à se positionner. Il ne s'agit pas seulement d'apprendre la langue; la mémorisation est une tâche facile. Les points provoquant des cris se produisent lorsque vous visualisez votre site dans dix navigateurs différents, qui rendent tous votre site à différents niveaux de cohérence.
Le livre suppose que vous avez une connaissance de base de CSS et HTML, ainsi qu'un design déjà créé dans Photoshop. Le design utilisé dans le livre est simple, mais les concepts utilisés pour créer le design peuvent facilement être appliqués à des conceptions plus complexes.
Le livre commence par une section sur la façon de regarder une conception avant de plonger dans le processus de création du code HTML.
Bien qu'il puisse sembler naturel de commencer immédiatement à travailler sur les visuels de notre site Web, cela ne pouvait en fait être plus éloigné de la vérité. Au lieu de cela, nous devons d'abord construire notre base, ou la majoration, et seulement une fois qu'elle est terminée, nous pouvons passer aux éléments visuels.
En sélectionnant les trois sections de base, la plupart des sites Web contiennent un en-tête, la zone de contenu principale et un pied de page, puis le livre saute directement au processus de configuration de votre fichier HTML de base. Encore une fois, toute personne ayant des connaissances de base en HTML n'aura aucun problème avec cette pièce.
Une fois que votre code HTML de base est terminé, de Photoshop à HTML explique comment découper vos fichiers .PSD.
Prenez un moment pour regarder le design dans Photoshop. Essayez de repérer chaque image qui sera nécessaire. N'oubliez pas que les fonctionnalités peuvent être recréées avec CSS. alors soyez créatif.
Bien que les deux méthodes de découpage de vos fichiers soient mentionnées, le livre utilise une combinaison de recadrage, de découpe et de collage pour récupérer les images dont vous avez besoin, plutôt que d'utiliser l'outil de découpage.
Les deux méthodes sont parfaitement valables. Je vous recommande d'essayer les deux et de choisir celui qui s'avère le plus rapide ... pour vous.
Les raccourcis clavier pour accélérer ce processus sont couverts en profondeur. L'enregistrement de ces images pour le Web, y compris tous les paramètres que vous devez utiliser et le type de fichier image à utiliser pour quels types d'images, est également largement discuté, tout comme les sprites CSS. Last but not least dans cette section, quelques remarques sur les ajustements à apporter au fichier HTML en fonction des images de fond utilisées.
Une fois que votre HTML et vos images sont prêtes, il est temps de plonger dans le CSS de votre site. Les réinitialisations du navigateur sont stressées et couvertes en profondeur, ainsi que la manière de reconstruire un fichier CSS standard par défaut.
Chaque navigateur utilise un peu de "CSS par défaut" pour styliser automatiquement votre balisage. À première vue, vous pourriez penser que cela est extrêmement utile ... Si tous les navigateurs les utilisaient de manière identique, cela ne poserait aucun problème. Malheureusement, ce n'est pas le cas.
Il existe un certain nombre de principes CSS, y compris le positionnement relatif, le positionnement absolu et les formes CSS, couverts d'une manière pratique et utilisable. Pour ceux qui ne sont pas des experts de CSS, ces sections seront particulièrement instructives, tandis que celles qui le souhaitent peuvent sauter ces parties. Un autre bon bout de code CSS est de savoir comment créer des pieds de page, ce qui peut être frustrant pour les nouveaux concepteurs de CSS.
Le codage de pages supplémentaires au-delà de notre page d'accueil est couvert, y compris la façon de modifier légèrement la mise en page et le contenu, et ce que vous devez ajouter à vos fichiers CSS. Au moment où vous avez terminé avec cette section, vous aurez tous les modèles de page nécessaires pour un site Web de portefeuille entièrement fonctionnel.
Le dernier chapitre de l'ouvrage traite de la manière de rendre votre conception compatible avec tous les navigateurs, en particulier pour les navigateurs plus anciens tels qu'Internet Explorer 6 et 7. L'un des problèmes majeurs est le manque de transparence dans les images dans IE6. , avec une variété de solutions pour le surmonter.
Afficher pour la première fois votre site Web dans Internet Explorer 7 et les versions antérieures vous fera grincer des dents. Vous pourriez avoir de la chance, mais la plupart du temps, vous trouverez de nombreux problèmes à résoudre.
Un chapitre bonus à la fin vous montre comment créer des effets de transition jQuery incorporés dans la conception du site. Pour tous ceux qui découvrent JavaScript et jQuery, c'est un projet intéressant qui enseigne certaines techniques de base.
Dans l'ensemble, si vous avez externalisé la conversion de vos fichiers .PSD au format HTML, ou si vous souhaitez essayer de concevoir des sites Web dans Photoshop, ce livre vaut vraiment la peine d'être lu.
Avec des instructions complètes, étape par étape, facilement applicables à de nombreux projets et à des tonnes de code d'exemple, De Photoshop au HTML est sûr de vous aider à convertir vos propres designs. Avec un peu de pratique, les concepts couverts pourraient être utilisés sur pratiquement n'importe quel design!
Le livre est également livré avec les fichiers source du site créé, que vous pouvez utiliser dans vos propres projets comme vous le souhaitez.
Télécharger le chapitre exemple
Écrit exclusivement pour WDD par Cameron Chapman .
Que penses-tu de ce livre? S'il vous plaît laissez-nous savoir dans la zone de commentaires ...