Si vous n'êtes pas un développeur Web chevronné, il peut s'avérer très intimidant d'aborder un projet où votre client recherche quelque chose de tendance et d'interactif, tel qu'un diaporama centré sur Apple.
Aujourd'hui, nous allons vous apprendre à créer un tel projet en quelques minutes à l'aide de superbes ressources gratuites disponibles partout sur le Web. Nous vous guiderons à travers dix étapes très simples. Ainsi, même si vous n’avez que peu ou pas d’expérience Web, ce projet devrait être simple comme bonjour!
Ce que nous construisons
Le but de ce tutoriel est de vous montrer à quel point il est facile de créer une page Web interactive extrêmement animée à l’aide de ressources entièrement gratuites et de très peu d’efforts pour les regrouper. Nous utiliserons jQuery, une image iPad gratuite et un plug-in de curseur d'image gratuit pour obtenir l'effet suivant.
- Page de démonstration
- Telecharger des fichiers
Étape 1: Commencez le HTML
La première chose que nous voulons faire est d’obtenir une structure de base pour notre code HTML. Collez simplement dans votre document de démarrage HTML typique. J'ai utilisé HTML5 ci-dessous, mais vous pouvez utiliser quelque chose de plus ancien si vous estimez que cela convient.
Notez qu'à ce stade, j'ai inclus deux liens: l'un vers une feuille de style et l'autre vers jQuery. Assurez-vous d'inclure les deux. De nombreux développeurs recommandent également d'inclure une version locale de jQuery au cas où la version liée échouerait pour une raison quelconque.
Le seul véritable balisage dont nous disposons à ce stade est un conteneur div. Nous en ajouterons plus tard, mais pour l'instant, c'est parfait.
Étape 2: Téléchargez l'iPad
De toute évidence, nous aurons besoin d'une image iPad. L'iPad est assez simple pour que vous puissiez probablement créer le vôtre assez rapidement, mais nous allons simplement en prendre une version pré-construite pour accélérer le processus.
Si vous Google? IPad PSD ,? La première option qui apparaît est un fichier gratuit étonnant de Teehan + Lax, avec non seulement l'iPad, mais également un ensemble d'éléments d'interface utilisateur.
Téléchargez cette image pour iPad et lancez-la dans Photoshop pour préparer l'étape suivante.
Étape 3: préparer le PSD
Saisissez les calques ne contenant que l'iPad vierge et insérez-les dans un nouveau document dont les dimensions sont définies à 883 pixels par 535 pixels. Définissez la couleur d'arrière-plan sur # 1b1a1b et dimensionner l'iPad de sorte que l'écran mesure environ 460 pixels de large.
Pour ajouter un intérêt visuel, j’ai jeté dans une ombre et une réflexion aussi. Notez que la réflexion s'estompe avant de frapper la partie écran. Cela simplifie beaucoup les choses en supprimant le besoin d'une réflexion en direct qui se met à jour avec chaque diapositive.
Étape 4: Démarrer le CSS
Maintenant que nous avons l'image de fond iPad, démarrez un fichier style.css et définissez l'image iPad comme arrière-plan.
Comme toujours, j'ai effectué une réinitialisation CSS de base pour m'assurer que tous les navigateurs sont sur la même page avec des marges et un remplissage. J'ai également défini la couleur de fond sur la même couleur que celle que nous avions dans notre PSD. Enfin, j'ai ajouté l'image iPad et je l'ai centrée sur la page en définissant une largeur et en utilisant? Auto? pour les marges.
Aperçu de la progression
À ce stade, votre aperçu en direct devrait ressembler à l’image ci-dessous. Pour l'instant, il n'y a qu'un iPad centré sur un fond solide, mais il commence déjà à être très joli!
Étape 5: Ajouter une image
Avant d'importer le diaporama, nous souhaitons que notre positionnement soit défini avec une seule image statique. Faire cela maintenant nous facilite simplement les choses, nous évitant ainsi de positionner un élément actif qui peut ou peut ne pas fonctionner correctement.
D'abord, vous voudrez évidemment créer ou récupérer une image quelque part. Je viens d'utiliser une photo de mon mug mug réglé à 460 x 345. Jetez votre image dans un curseur? div à l'intérieur du conteneur.
Étape 7: Ajouter plus d'images
Maintenant que nous avons notre diaporama, nous voudrons ajouter quelques images supplémentaires. Nivo saisira automatiquement toutes les images contenues dans votre curseur afin que nous n'ayons rien à faire de spécial ici, mais les déposons dedans.
Étape 10: Découvrez le produit final!
Comme vous pouvez le voir ci-dessous, cet ensemble final de styles a vraiment bien fini le diaporama. Nous avons maintenant des flèches qui nous font avancer et reculer, ainsi qu'une liste horizontale de puces pour naviguer et suivre la progression du diaporama.
Assurez-vous de regarder la démo en direct pour la voir en action. Passez également du temps sur le site Nivo Slider et parcourez les différentes améliorations disponibles.
Qu'aimeriez-vous voir d'autre?
Ce tutoriel est né de la recherche de bonnes ressources sur le Web et de mon désir de les partager avec nos lecteurs. Laissez un commentaire ci-dessous et laissez-moi savoir s'il existe d'autres plug-ins jQuery ou des cadeaux Web que vous voudriez voir illustrés ici et je verrai si je peux vous concocter un didacticiel rapide pour vous aider à démarrer.
Voulez-vous partager l'article? Voici une URL raccourcie que vous pouvez coller dans Twitter ou Facebook: http://ow.ly/2xtcZ