Share
Je suis un grand fan des conceptions de sites photo-centriques? Aujourd'hui, je suis ravi de lancer un nouveau didacticiel "Site complet" destiné aux photographes, illustrateurs et autres créatifs visuels. Lors de la première journée, nous avons conçu le modèle dans Photoshop à l'aide de techniques et astuces spécifiques. Aujourd’hui, jour 2, nous passerons à la phase de conception finale, puis nous effectuerons une préparation "pré-vol" pour la phase de codage, que nous détaillerons au cours du jour 3. Au jour 4, nous montrerons: comment créer trois sites complètement différents en utilisant le même code HTML brut.
La séance d'aujourd'hui sera relativement rapide en termes de techniques. mais nous allons donner beaucoup de poids aux conseils de "flux de travail", alors faites attention si vous êtes curieux de la phase d'un projet qui survient après la conception et avant le début du codage..
Commençons la séance d'aujourd'hui avec quelques notes générales sur ce que "pré-vol"is: Lorsque vous avez terminé de concevoir un site Web, quelques étapes cruciales doivent idéalement avoir lieu avant de commencer le processus de codage. La première étape consiste à commencer à découper notre conception.
Le guide complet écrit, étape par étape, est présenté ci-dessous. Nous commencerons par le document Photoshop que nous avons créé le premier jour, mais vous pouvez également télécharger la démo PSD pour vérifier votre travail par rapport au mien..
Ok, avec nos objectifs maintenant clairement définis, commençons!
La première étape consiste à découper en tranches les images nécessaires dans le modèle codé. Dans notre cas, ce processus est assez simple: examinez attentivement le modèle et mettez en évidence tous les éléments de conception qui ne peuvent pas être dupliqués avec CSS ou d’autres astuces de codage. Voici notre liste:
Étiquetons où ils se trouvent sur notre conception (cliquez sur l'image pour l'agrandir):
">
Découper ces images n'est pas difficile, je n'entrerai donc pas dans les détails, mais avant de commencer, il est utile de considérer si certaines de ces images peuvent être combinées en une seule. Sprite CSS.
Qu'est-ce qu'un Sprite CSS? En termes simples, une image-objet est une méthode qui consiste à utiliser une seule image pour stocker plusieurs images plus petites. Par exemple, jetez un coup d'œil au sprite utilisé sur Webdesigntuts:
Lorsque nous commençons à coder, nous pouvons simplement utiliser le positionnement CSS et le rognage de l'image pour afficher le morceau du sprite que nous voulons..
Pourquoi utiliser un sprite CSS? La vitesse! L'utilisation d'images-objets pour stocker des images réduira le temps nécessaire au chargement d'une page Web entière? lorsque les images sont réutilisées maintes et maintes fois sur plusieurs pages, cela peut vous faire gagner beaucoup de temps..
Les sprites sont mieux utilisés avec des images plus petites qui sont utilisées encore et encore. Par exemple, la plupart des actifs décrits ci-dessus peuvent en réalité être réduits à ce sprite:
Dans un seul sprite, nous avons déjà préparé l'essentiel de notre conception pour le codage? et tout est sous 19kb! Pas mal droit?
Pour créer votre propre image-objet, créez simplement un document vierge (commencez par n’importe quelle taille, vous réduirez éventuellement ce texte de façon à ce qu’il ne corresponde quasiment pas à chaque élément de l’image-objet), puis ajoutez les éléments de conception avec une marge raisonnable élément. Voici quelques astuces supplémentaires:
Pour les images restantes, nous pouvons simplement créer nos propres tranches génériques. Je vais les énumérer ci-dessous et décrire chacun (et pourquoi ce n'est pas un sprite):
La superposition d'ombre intérieure pour le Slidedown. Ce n'est pas un sprite parce qu'il est grand (ce qui signifie que cela augmenterait inutilement la taille du sprite).
Les coins arrondis haut et bas: Ce ne sont pas des sprites pour plusieurs raisons: 1) comme dans l'exemple ci-dessus, ils sont grands et difficiles à manier; 2) celles-ci sont susceptibles d'être redéfinies ou redimensionnées ultérieurement, ce qui signifie que les charger dans un sprite représente un travail supplémentaire. 3) il est fort possible que nous décidions de supprimer ces images pour les méthodes CSS à l'avenir..
L'image de fond: Ce n'est pas un sprite car 1) il est susceptible d'être échangé avec une autre image de BG et 2) il doit être répété indéfiniment, les sprites ne font tout simplement pas bien.
Autres "non-sprites": Évidemment, nous ne chargerons pas nos vignettes ni d’autres images de contenu sous forme de sprites. La principale raison ici est la praticité? Les sprites sont destinés aux éléments de base de l’interface utilisateur et de la marque qui peuvent être chargés rapidement et accélérer un site? si nous chargions CHAQUE image dans un seul sprite, le temps de chargement serait très long, même s'il accélérait les choses une fois chargées. Pensez aux préchargeurs de ces énormes sites Web Flash il y a quelques années;)
L'autre raison évidente est que ces images de contenu changeront probablement chaque fois que quelqu'un met à jour le site. L’image Sprite est censée rester pratiquement inchangée tant que la conception du site reste la même..
Notes de découpage finales: Cela va probablement de soi, mais il existe d'autres moyens de découper ce modèle en particulier. Différentes approches peuvent avoir un sens pour votre propre variation de cette conception? alors ne vous limitez pas à utiliser les idées ci-dessus. Si vous souhaitez attaquer les coins arrondis et l'ombre de fond à l'aide de CSS3, de la propriété z-index et d'un fichier PNG transparent, ne vous gênez pas.!
Maintenant que nos ressources d'image sont toutes prêtes à fonctionner, il est temps de rassembler nos scripts au même endroit afin que, lorsque nous coderons correctement, nous soyons prêts à passer à l'action. En revoyant notre conception, identifions les zones clés qui nécessiteront des scripts ou des plugins supplémentaires:
Chaque bon modèle de photographe a besoin d’une lightbox? et il y en a peu qui valent mieux que prettyPhoto. Il est facile à installer / personnaliser et offrira de nombreuses fonctionnalités supplémentaires par rapport aux autres Lightboxes - telles que la navigation par vignettes, les modules de partage personnalisés, etc..
Ceci est un problème assez simple en utilisant quelques jQuery de base? Nous allons donc utiliser un script personnalisé et léger pour celui-ci. Revenez sur le jour 3 pour voir comment cela fonctionne!
jQuery Cycle va gérer le gros du travail pour nos curseurs d'image. C'est un plugin incroyablement bien documenté, ce qui signifie qu'il sera facile à configurer (et à personnaliser) pour répondre aux besoins de notre modèle.
J'ai utilisé la police Museo dans la conception, nous devrons donc trouver un moyen de l'utiliser dans la version codée. Le moyen le plus rapide de configurer ceci est avec @ font-face. Nous avons donc passé la police à travers Font Squirrel (http://www.fontsquirrel.com/fontface/generator) pour créer nos fichiers de polices que nous pourrons utiliser le troisième jour..
Assurez-vous de télécharger le plugin prettyPhoto et de copier les ressources nécessaires dans leurs dossiers respectifs (javascript dans le dossier "js", feuilles de style dans le dossier "css", etc.), le plugin cycle peut être lié à partir de Github et jQuery peut être lié depuis les API Google.
À ce stade, nous devrions maintenant être prêts à démarrer la conversion HTML / CSS. Nous avons conçu notre modèle de site, découpé en tranches les images que nous devrons utiliser et rassemblé tous les scripts tiers dont nous aurons besoin pour que le site fonctionne comme nous le souhaiterions. Dans la prochaine étape, nous allons faire le codage réel? alors préparez-vous pour le jour 3!
Accentsconagua