Tutoriel HTML5 Comment créer une seule page de produit

Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédié à vous aider à faire de vous un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

Dans cet article, nous allons travailler sur un projet fictif, en créant une seule page de produit pour offrir l'iPhone 4S. Dans ce projet, nous allons également mettre en œuvre les méthodes dont nous avons discuté dans les articles précédents; la

élément et sélecteur de négation.

Commençons.

Le balisage HTML5

Premièrement, nous devons créer un html document avec le balisage suivant:

    Apple iPhone 4 - 16 Go
 L'iPhone le plus incroyable à ce jour.
  
   
  La puce dual-core A5 plus rapide. La caméra 8MP dotée de toutes nouvelles optiques réalise également des vidéos HD 1080p. Et introduisant Siri. C'est l'iPhone le plus incroyable à ce jour.
  caractéristiques du produit
  Appareil photo 8 mégapixels avec enregistrement vidéo 1080p complet
 Siri voix assistante
 iCloud
 Impression aérienne
 Affichage de la rétine
 Géolocalisation de photos et de vidéos

Nous utilisons plusieurs nouvelles balises de la spécification HTML5, comme la entête, hgroup, figure, section, et un dont nous avons discuté auparavant; la détails et résumé étiquette.

Cependant, nous n'allons pas creuser dans ces balises, pas parce que nous ne le souhaitons pas, mais plutôt des sujets de base que vous pouvez trouver facilement ailleurs. Donc, si vous êtes vraiment nouveau dans HTML5, je vous recommanderais de lire les références suivantes de ces balises; ils les ont expliqués en détail:

Parlons de la sémantique
L'élément d'en-tête HTML5
L'élément hgroup
Référence de balise HTML5

Voyons maintenant la première apparition de notre page.

Eh bien, cela semble raisonnable sans aucun style. Tout en haut se trouve l'en-tête, puis vient la section pour l'image, la description et enfin le bouton "Acheter maintenant". Maintenant, améliorons cette page.

Les styles

Nous allons commencer par normaliser tous les styles par défaut en utilisant cette feuille de style et ajouter un arrière-plan dégradé à la html étiquette.

 html hauteur: 100%; arrière-plan: # f3f3f3; arrière-plan: -moz-linear-gradient (haut, # f3f3f3 0%, #ffffff 50%); arrière-plan: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, stop de couleur (0%, # f3f3f3), stop de couleur (50%, # ffffff)); arrière-plan: -webkit-linear-gradient (haut, # f3f3f3 0%, # ffffff 50%); arrière-plan: -o-linear-gradient (haut, # f3f3f3 0%, # ffffff 50%); arrière-plan: -ms-linear-gradient (haut, # f3f3f3 0%, # ffffff 50%); arrière-plan: dégradé linéaire (haut, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0);

Rappelez-vous que nos éléments de produit sont tous emballés dans un div avec la classe de produit. Donc, ici, nous voudrions centrer l’emballage et régler la largeur sur environ 650px.

 .wrapper width: 650px; marge: auto; remplissage: 25px 0px;

La section d'en-tête

Dans la section en-tête, nous avons deux en-têtes h1 et h4, alors appelons ces éléments.

 h1, h4 font-family: Helvetica Neue, Arial, sans serif; poids de la police: normal; marge: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; couleur: #aaa;

Et puis ajoutez un peu d’espace au bas de la entête avec une marge.

 en-tête margin-bottom: 20px;

Si vous regardez à l'extrême droite de l'en-tête, il y aurait beaucoup d'espaces blancs dans ce côté..

Alors pourquoi ne pas y mettre le logo Apple?.

 en-tête margin-bottom: 20px; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-repeat centre droit;

L'image du produit

Ensuite, faites flotter l'image vers la gauche et définissez la largeur maximale de l'image sur 350px.

 figure float: left;  figure img max-width: 350px;

Puisque l'image a été poussée vers la gauche, nous allons faire flotter la section de description vers la droite et régler la largeur sur 300px.

 section font-family: Tahoma, Arial, sans serif; hauteur de ligne: 150%; Flotter à droite; largeur: 300px; couleur: # 333;

Voyons maintenant le résultat.

Cela commence à bien paraître, mais la balise de détails ne fonctionne toujours pas (sauf dans Chrome), alors appelons le bouton suivant.

Le bouton

Pour les styles de boutons, nous imiterons celui du magasin Apple.com. Et voici toute la syntaxe que vous devez mettre dans votre feuille de style pour le bouton.

 button background: # 36a9ea; arrière-plan: -moz-linear-gradient (haut, # 36a9ea 0%, # 127fd2 100%); arrière-plan: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0%, # 36a9ea), couleur-stop (100%, # 127fd2)); arrière-plan: -webkit-linear-gradient (haut, # 36a9ea 0%, # 127fd2 100%); arrière-plan: -o-linear-gradient (haut, # 36a9ea 0%, # 127fd2 100%); arrière-plan: -ms-linear-gradient (haut, # 36a9ea 0%, # 127fd2 100%); arrière-plan: gradient linéaire (haut, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); bordure: solide 1px # 00599d; couleur: #fff; rembourrage: 8px 20px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), encart 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), en médaillon 0px 1px 0px 0px rgba (250, 250, 250, .3); ombre du texte: 0px 1px 1px # 156cc4; filtre: ombrage (couleur = # 156cc4, offx = 0, offy = 1); taille de la police: 10 pt;  bouton: survoler background: # 2f90d5; arrière-plan: -moz-linear-gradient (haut, # 2f90d5 0%, # 0351b7 100%); arrière-plan: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0%, # 2f90d5), couleur-stop (100%, # 0351b7)); arrière-plan: -webkit-linear-gradient (haut, # 2f90d5 0%, # 0351b7 100%); arrière-plan: -o-linear-gradient (haut, # 2f90d5 0%, # 0351b7 100%); arrière-plan: -ms-linear-gradient (haut, # 2f90d5 0%, # 0351b7 100%); fond: gradient linéaire (haut, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0); bouton: actif background: # 127fd2; -webkit-box-shadow: incrément 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: incrément 0px 2px 1px 0px rgba (0, 47, 117, 0,5), 0px 1px 1px 0px rgba (0, 0, 0, 0);

Maintenant, le bouton devrait être mieux.

Problème dans Internet Explorer

Comme d'habitude, IE (Internet Explorer) cause toujours des problèmes. si vous ouvrez ceci dans un IE inférieur à 9, la page restera sans style.

En effet, Internet Explorer ne reconnaît pas les nouveaux éléments (section, entête, etc.) donc les styles que nous avons spécifiés ne peuvent pas être appliqués. Ainsi, dans la prochaine étape, nous travaillerons sur la résolution de ce problème.

Test de la prise en charge du navigateur

Dans notre précédent article, nous avons abordé le support du navigateur pour l’élément details utilisant ce polyfill; afin que cela puisse fonctionner dans les navigateurs non pris en charge. Cependant, cette fois, nous allons essayer différentes façons de le faire avec Modernizr.

De son site officiel, "Modernizr est une bibliothèque JavaScript open source qui vous aide à créer la prochaine génération de HTML5 et CSS3-sites Web alimentés". Techniquement, Modernizr testera la prise en charge du navigateur pour certains nouveaux éléments et fonctionnalités. Si l’appui n’est pas fourni, nous devons alors prévoir un recours, que ce soit en donnant différents styles ou en fournissant polyfill. Dans ce cas, nous utiliserons Modernizr pour nous aider à tester les détails et l’élément de résumé.

Allez à Modernizr et allez à sa page de téléchargement.
Dans la page de téléchargement, Modernizr fournit certaines options pour configurer la bibliothèque. Vous n'avez donc qu'à sélectionner certaines fonctionnalités dont vous avez réellement besoin pour votre site Web. Dans ce cas, nous avons besoin de:
- HTML5Shiv 3.4
- Ajouter des classes CSS, cette fonctionnalité va automatiquement insérer des classes dans la balise html.
- la Moderniser,
- allez dans la boîte de add-ons de la communauté et sélectionnez elem-details,
- Dans la section Extensibility, sélectionnez Modernizr.addTest.
Générer et télécharger le fichier.
Liez-le à votre code HTML et rechargez la page dans Internet Explorer. La page aurait dû être stylée car Internet Explorer peut maintenant reconnaître les balises..

Et, si vous affichez l'élément source ou inspect, vous constaterez que la classe sans détails a été insérée dans la balise html; indiquant que le navigateur sur lequel nous prévisualisons la page; ne prend actuellement pas en charge l'élément de détails. @@@@ [Je ne comprends pas cette phrase. ]

Nous pouvons ensuite créer un repli en utilisant cette classe comme crochet, ce que nous ferons à l'étape suivante.

Le repli

Dans cette étape, nous fournirons des informations similaires. détails fonctionnalité élément pour les autres navigateurs (sauf Chrome). Dans le post précédent, cette étape a été effectuée automatiquement à l'aide de ce script, mais cette fois nous le créerons nous-mêmes..

Remarque: Juste en train de relire un peu de notre post précédent; L'élément details n'est actuellement pris en charge que par le navigateur Chrome..

Commençons donc par travailler sur le CSS.

Sur la balise récapitulative, nous modifions son mode de curseur en pointeur, de sorte que l'utilisateur remarquera qu'il est cliquable.

 summary curseur: pointeur; taille de police: 12 pt; contour: 0;

Pour donner plus d'espaces en haut et en bas de l'élément de détails avec une marge.

 détails margin: 20px 0px;

Par défaut, la balise récapitulative aura une flèche. Mais ici nous voudrions le remplacer par une icône plus-moins.

Remarque: Avant de commencer, j’ai précédemment téléchargé les icônes de cette collection de Fugue, les télécharger et les répartir dans un seul fichier..

Ajoutons un pseudo-élément avant et attachons l'icône en arrière-plan. Notez qu’à ce stade, la position de l’arrière-plan est en haut, ce qui indique l’icône Plus.

 détails> résumé: before width: 16px; hauteur: 16px; affichage: inline-block; content: "! important; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repeat centre top; margin-right: 5px; position: relative; haut: 2px;

Ensuite, lorsque l’élément details est ouvert, la position de l’arrière-plan sera déplacée vers le bas, ce qui affichera l’icône moins.

 détails [ouvrir]> résumé: avant, détails.open> résumé: avant background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) pas de répétition centre bas;

le [ouvrir] le signe est un sélecteur. Dans ce cas, il sélectionnera l'attribut details open dans le navigateur pris en charge..

Enfin, nous devrions masquer la flèche qui est affichée par défaut dans Chrome..

 détails> résumé :: - webkit-details-marker display: none;

Ensuite, voyons le résultat dans un navigateur pendant un moment.

La flèche par défaut a maintenant été remplacée par notre icône. Si vous la voyez dans Chrome, vous aurez déjà un effet de basculement lorsque vous cliquez dessus. l'icône changera en conséquence. Mais, dans d'autres navigateurs, rien ne se passera encore. Donc, dans la prochaine étape, nous allons essayer de reproduire l’effet avec jQuery.

L'effet de basculement avec jQuery

Avant de commencer par la partie jQuery, je voudrais remercier Ian Devlin pour son inspiration, le script ci-dessous est en fait une légère modification de sa.

Très bien, créons une variable pour stocker la balise récapitulative.

 var summary = $ ('details summary');

Ensuite, nous encapsulons tous les éléments frères du résumé avec un div.

summary.siblings (). wrapAll ('
');

Et cacher cette div quand l'élément details n'a pas la classe open.

$ ('details: not summary (non détaillé.)'). frères et soeurs ('div'). hide ();

Lorsque le résumé est cliqué, nous voulons que la div masquée soit affichée, et inversement, lorsque la div est initialement ouverte, elle sera masquée..

 summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open'););

Pour nous assurer que ces fonctions ne seront exécutées que dans les navigateurs non pris en charge, nous les envelopperons dans cette instruction conditionnelle..

 if ($ ('html'). hasClass ('no-details')) // le code va ici

Et ci-dessous est le code que nous avons:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('details summary'); summary.siblings (). wrapAll ('
'); $ ('details: not summary (non détaillé.)'). frères et soeurs ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open'););

Maintenant, testons-le dans le navigateur. l'effet de bascule aurait dû fonctionner sur tous les navigateurs, j'ai personnellement vérifié (jusqu'à Internet Explorer 7).

Démo
Source de téléchargement

Conseils: Sinon, vous pouvez changer le .basculer() avec .slideToggle () pour créer un effet de diapositive. De plus, si vous voulez que le détail soit ouvert initialement, vous pouvez ajouter une classe ouverte dans l'élément details.

Conclusion

Nous avons suivi toutes les étapes de la création d'une seule page de produit à l'aide de HTML5, du débogage pour les navigateurs non pris en charge, ainsi que de la réplication de l'effet de bascule pour l'élément de détail par nous-mêmes..

Cependant, je suis conscient que je n'ai pas tout expliqué en détail dans cet article. Si vous souhaitez clarifier quelque chose, n'hésitez pas à poster la question dans la zone de commentaire ci-dessous..