Accentsconagua
C'est le contenu principal bien
Ceci est un court paragraphe pour souligner où le contenu général ira.
Share
Le design Web est un métier en évolution. Même si un sens aigu de la couleur, de la typographie et de la mise en page sera toujours important, ces compétences sont dépassées par le besoin de comprendre les motivations des utilisateurs. Il ne suffit pas de créer un site et d’attendre le trafic, il faut que les sites aident les utilisateurs à atteindre leurs objectifs, avec un minimum de frictions cognitives. Bootstrap peut aider les professionnels du Web à définir ces objectifs et à créer une expérience meurtrière.
nous ne faisons pas de pages, nous faisons des films
J'aime dire que nous ne faisons pas de pages, nous faisons des films. Les utilisateurs s'attendent à ce que les sites se chargent rapidement, fournissent un contenu attrayant et une interactivité intelligente. Tout comme les films dépendent des coupes rapides, de l'éclairage et de l'ambiance pour attirer les utilisateurs, les sites Web reposent sur les transitions, l'interactivité et le minutage. Ces détails sont souvent perdus lors de la phase de conception - ou pire, ne sont jamais pris en compte. Alors qu'une transition qui prend 0,5 seconde alors qu'elle devrait durer 0,25 seconde ne coule généralement pas une application, c'est ce niveau de détail.
Je vais vous montrer comment Bootstrap peut remplacer les structures filaires statiques et mettre ces détails au premier plan plus tôt et avec moins d'effort..
La première étape consiste à télécharger les dernières versions stables de Bootstrap et de jQuery..
Bien que jQuery soit hébergé par un certain nombre de CDN, je préfère inclure tous les fichiers localement afin de pouvoir travailler avec ou sans accès Web. Allez-y, configurez une structure de répertoires similaire à celle ci-dessous et copiez les fichiers Bootstrap CSS, Bootstrap Responsive CSS et Javascript non terminés. Modifiez les noms et les emplacements selon vos besoins, mais en utilisant cette structure, vous pourrez également utiliser mon modèle HTML à l'étape suivante..
Ce serait le bon moment pour créer une troisième feuille de style, que j'appellerai utilisateur.css. Ce fichier sera utilisé pour remplacer les styles Bootstrap si nécessaire.
C'est la seule autre configuration requise pour commencer à construire une structure filaire interactive. Créez un fichier dans la racine du répertoire de votre projet et nommez-le. index.html. Après avoir créé le fichier, copiez ce code et enregistrez-le..
Wireframes Bootstrap interactives Votre mise en page ira ici.
Ouvrez un navigateur Web et faites-y glisser le fichier index.html enregistré. Si tous les inclus sont correctement chargés, vous devriez voir quelque chose de similaire à la capture d'écran ci-dessous. Si le message d'alerte ne s'affiche pas, ouvrez la console ou Web Inspector et vérifiez si le chargement d'un fichier a échoué. Après le dépannage, supprimez ou commentez la ligne d’alerte dans la $ (document) .ready fonctionne au bas de la page et préparez-vous à construire des images filaires Bootstrap.
Avec tous les fichiers nécessaires en place, nous pouvons commencer à brouiller les blocs de contenu principaux. La plupart des sites (applications) contiennent un en-tête, une navigation principale, un contenu principal, une barre latérale et un pied de page. Je garde délibérément la mise en page simple pour illustrer rapidement la puissance du système de grille de Bootstrap.
La seule balise structurelle sur la page à ce jour est notre div avec la classe «conteneur».
Remarque: Ce div est un bloc contenant obligatoire pour Bootstrap; nous construirons toute notre application filaire à l'intérieur.
Bootstrap requiert également le nouveau doctype HTML et génère ses règles de style avec des classes, au lieu de noms de balises. Ces décisions nous permettent d’utiliser de nouveaux éléments HTML5: en-tête, navigation, section, article, apartement et pied de page. Il vaut la peine de mentionner que si vous prévoyez de tester votre mise en page dans Internet Explorer, vous devrez télécharger et inclure soit Modernizr, soit le shim HTML5. Les versions modernes de Firefox, Chrome et Safari supportent nativement le standard HTML5.
Bootstrap est construit sur une grille de 12 colonnes. Il utilise deux classes, rangée et envergure pour créer des conteneurs de niveau bloc. En appliquant la classe row à un conteneur tel qu'un div ou un en-tête, il s'étend automatiquement sur toute la largeur de 940px. En ajoutant des conteneurs avec classe spanN (N étant un espace réservé pour le nombre de colonnes), vous pouvez facilement créer des puits de contenu, des barres latérales et d’autres blocs de présentation sans avoir à gérer des flottants ou d’autres bizarreries..
Pour être opérationnel rapidement, je vais créer un en-tête de base, une barre de navigation, un puits principal, un côté et un pied de page. Remplacez le "Votre mise en page ira ici" avec le code suivant.
Mon application géniale
C'est le contenu principal bien
Ceci est un court paragraphe pour souligner où le contenu général ira.
J'ai également ajouté quelques règles de base à utilisateur.css, pour faciliter l'identification des blocs de contenu. Si tout va bien, vous devriez voir un certain nombre de blocs gris avec un texte descriptif noir à l'intérieur.
/ * Règle de style de base pour définir et espacer les éléments de niveau bloc * / [class * = "span"] background: #eee; marge inférieure: 10px;
Les mises en page fixes et fluides existent depuis longtemps. Les mises en page réactives sont relativement nouvelles et combinent les meilleures parties des deux. Il fournit aux concepteurs les outils nécessaires pour optimiser leurs conceptions en fonction de la taille des périphériques (smartphones, tablettes, écrans étroits et larges) sans avoir à gérer une base de code distincte pour chacun. Redimensionnez la fenêtre de votre navigateur pour voir la feuille de style adaptative de Bootstrap en action et ressentez l’impressionnante capacité d’écriture unique et de test de structures filaires dans plusieurs environnements..
Les navigateurs utilisent les points de rupture CSS pour décider du rendu d'une page, en fonction des mesures de largeur minimale et maximale. Les points de rupture par rapport à la largeur du navigateur commencent toujours par @media (argument de largeur) et sont très faciles à lire. Ils peuvent également contenir un deuxième argument entre parenthèses, ce qui permet une grande flexibilité pour plusieurs appareils..
Dans l'exemple de code ci-dessous, j'ai créé plusieurs règles qui définissent les couleurs d'arrière-plan pour quatre points de rupture réactifs Bootstrap communs, légèrement modifiés pour afficher une transition en douceur d'une couleur à l'autre..
/ * Couleurs d'arrière-plan de base pour les points d'arrêt réactifs * / / * Téléphone au format paysage 480px et largeur max * * / @media (largeur max: 480px) .container background: # f1ea81; .container: after content: "Téléphone de paysage d'une largeur maximale de 480 pixels et moins"; / * Mini-largeur 481px et max-largeur 767px téléphone panoramique sur tablette portrait * / @media (largeur minimale: 481px) et (largeur maximale: 767px) .container background: # a7f7e5; .container: after content: "Téléphone paysage à largeur minimale 481px et 767px à tablette portrait"; / * Tablette de portrait min-largeur 768px et max-largeur 979px en mode paysage * / @media (min-width: 768px) et (max-width: 979px) .container background: # c4deff; .container: after content: "Min-width 768px et max-width 979px, tablette portrait en paysage"; / * Écran large 980px de largeur minimale * / @media (largeur minimale: 980px) et (largeur maximale: 1199px) .container background: # fde3ff; .container: after content: "Largeur minimale 980px, largeur maximale 1199px, format de bureau"; / * Ecran large 1200px mini-largeur * / @media (largeur-min: 1200px) .container background: # ffc4c4; .container: after content: "Largeur minimale 1200px, format écran large";
Nous avons construit une mise en page entièrement réactive, mais nous manquons toujours les bonnes choses. La suite de ce didacticiel vous montrera comment ajouter un intérêt visuel au contenu et à l'interactivité..
Maintenant que l'échafaudage est en place, nous pouvons commencer à ajouter du contenu. Je garde délibérément ces vues génériques, des boîtes grises avec des styles minimaux, ce qui incite les utilisateurs de la version bêta à se concentrer sur l’interaction et à ne pas trop s’accrocher au style visuel..
L'unité Hero est conçue pour créer un appel à l'action au centre de l'action. Les téléchargements de code, les nouvelles applications ou les dernières nouvelles sont de bons candidats. Pour nos besoins, je l’utiliserai pour annoncer une mise à niveau majeure du logiciel. Remplacer l'existant h2 et p balises dans le contenu principal avec le code ci-dessous et actualisez votre navigateur pour voir le héros en action.
La version 2.0 est là!
Toutes les nouvelles fonctionnalités, beaucoup d'améliorations
Un paquet plus parfait vous’ne sont pas susceptibles de trouver
Notre équipe a été occupée l’année dernière à réorganiser complètement le fonctionnement interne de notre application. Chargement de page plus rapide, meilleure recherche et intégration mobile.
Télécharger maintenant
L’unité des héros est un bon début, mais les gens veulent savoir où leur temps et leur argent vont aller. Une galerie d'images est un suivi fort et constitue un jeu d'enfant à mettre en œuvre. Les images sont disposées de la même manière spanN grille qui définit les blocs de présentation et peut facilement être étendue pour inclure des titres, des balises, des légendes ou des microdonnées. Pour le moment, nous allons utiliser Placehold.it pour générer trois zones grises sous notre unité héros..
Je suis un grand partisan du balisage sémantique, nous allons donc utiliser le HTML5 figure et figcaption balises pour un contexte accru. Même si aucun de vos utilisateurs ne navigue avec un lecteur d'écran ou un autre périphérique d'assistance, le balisage descriptif est une pratique recommandée pour le développement frontal et UX..
Ajoutez une liste non ordonnée et quelques images à l’intérieur du contenu principal, sous votre élément hero comme ceci:
Ceci est une courte légende.
Ceci est une courte légende.
Ceci est une courte légende.
Une autre actualisation du navigateur devrait donner une présentation similaire à celle-ci, lorsqu’elle est affichée en grand écran..
L’unité héros et les images ajoutent beaucoup d’intérêt visuel, mais soulignent notre prochain défi: les liens ponctuels qui constituent un élément de navigation adéquat..
Bootstrap possède plusieurs styles de navigation intégrés. Nous vous encourageons donc à expérimenter. Je vais mettre en évidence la navigation par onglets ici. Notre premier objectif est de remplacer la liste de navigation de base:
Ensuite, supprimons le fond gris de notre entête et nav éléments. Ajoutez les quatre lignes suivantes à la fin de votre utilisateur.css fichier.
en-tête [classe * = "span"], nav [classe * = "span"] background: #fff;
Nous devons également bien mettre à jour le contenu principal. J'ai ajouté une classe de contenu de l'onglet au section élément, et enveloppé le héros et les images dans un div avec class = "volet actif" et id = "tab1". J'ai ajouté trois autres div éléments ci-dessous, avec ID correspondant aux balises de lien de navigation. Ces trois blocs sont des fiches à remplir plus tard, mais seront utiles pour les tests. Mettre à jour le section annotez et actualisez le navigateur. Si tout se passe bien, vous devriez être en mesure de naviguer entre les onglets et d'afficher le contenu abrégé..
Les onglets sont cool, mais ils ne sont aussi qu'un début. Bien que l'Internet soit en train de devenir rapidement segmenté et semblable à une application, il est toujours alimenté par des liens d'une ressource à une autre. Les liens servent à relier des pages, à fournir un contexte supplémentaire et parfois à héberger des fonctions secondaires. Les info-bulles et les popovers sont de bons exemples de fonctions secondaires. ils sont facilement implémentés avec des attributs de données personnalisés.
Que sont les attributs de données? Selon John Resig, qui a écrit à propos de ces dispositifs en 2008:
Simplement, la spécification pour les attributs de données personnalisés stipule que tout attribut commençant par "data-" sera traité comme une zone de stockage pour les données privées (privé en ce sens que l'utilisateur final ne peut pas le voir - cela n'affecte pas la présentation ou présentation).
Cela signifie que nous pouvons ajouter des données personnalisées à nos balises de lien, et Bootstrap les gérera en conséquence..
Supposons que notre galerie d'images soit composée d'informations techniques. Les descriptions peuvent inclure une terminologie peu claire pour l'utilisateur moyen. Activer les info-bulles en remplaçant le HTML de la galerie d'images, en commençant par la liste non ordonnée, et en ajoutant un jQuery $ (document) .ready fonction et la fonction info-bulle de Bootstrap au bas de la page.
Ceci est une courte légende. Il contient des termes techniques, tels que des termes spécifiques à un domaine, tels que HTML.
Ceci est une courte légende. Il contient des termes techniques, tels que des termes spécifiques à un domaine, tels que CSS.
Ceci est une courte légende. Il contient des termes techniques, tels que des termes spécifiques à un domaine, tels que JS.
// Ajouter juste au-dessus de la balise de fermeture // Activer les info-bulles
Avec le HTML et le Javascript en place, actualisez le navigateur et survolez les liens de la galerie pour afficher vos info-bulles..
Nous allons maintenant ajouter du partage à notre galerie d'images (au moins de manière filaire) avec des popovers. Les popovers sont activés en incluant des attributs de données dans votre balisage et un autre extrait de JavaScript..
Premièrement, ajoutons un bouton de partage à chacune de nos légendes d’image. Ajoutez le bloc de code juste en dessous de la balise de paragraphe de fermeture dans chaque figcaption.
Gazouillement
Tumblr
Flickr
"data-title =" Partager cette image "> Partager
Cela peut sembler étrange de mettre chaque élément sur sa propre ligne, mais j’ai trouvé que Bootstrap est assez difficile en ce qui concerne le balisage bien formé et qu’il est plus facile de détecter les erreurs une ligne à la fois. Nous devons écrire quelques lignes de JavaScript et les popovers seront prêts.
// Empêche les actions de liens par défaut et les sauts de page var links = $ ('a'); links.on ('click', fonction (e) e.preventDefault ();); // Activer le popovers var popovers = $ ('a.popover-link'); popovers.popover (); Cette fois, nous avons ajouté une fonction de liens généraux pour empêcher notre écran de sauter lorsque les utilisateurs cliquent sur le bouton Partager. Sans aller trop loin dans les détails, chaque action sur une page Web enregistre un événement, que nous capturons ici en tant qu'argument de fonction 'e'. En interceptant cet événement et en le remplaçant par notre JavaScript personnalisé, la page reste là où elle devrait et notre popover apparaît comme prévu..
Ouf. Après tout cela, les fenêtres modales vont être une véritable promenade. Bootstrap rend les fenêtres modales disponibles en ajoutant un bloc HTML en haut de votre conteneur et un bouton ou un lien avec un href correspondant à l'ID de la fenêtre modale. Tout d'abord, le HTML modal.
La seule autre chose à faire est d'ajouter notre déclencheur. Puisqu'il s'agit d'une application, nous aurions raison de supposer qu'il y aura une séquence de connexion. J'ai modifié le entête pour raccourcir la zone de la bannière et ajouter notre bouton de connexion à côté du champ de recherche. Modifiez le code HTML suivant et ajoutez le code CSS à la fin de votre utilisateur.css fichier.
Mon application géniale
S'identifier
/ * Zone de recherche * / header header margin-top: 20px; largeur: 70%; float: gauche; / * Bouton de connexion * / header a float: right; marge: 20px 0 0 20px;
Actualisez et cliquez sur le bouton Connexion. Vous devriez être récompensé par une animation rapide, et la fenêtre modale présentant avant et le centre.
Ce fil de fer interactif avance bien. Nous avons une navigation qui fonctionne, beaucoup de blocs pour ajouter du contenu, de l'interactivité et une mise en page réactive. Ce que nous n’avons pas, c’est un moyen de rechercher des objets, même dans le sens de tester l’utilisateur. Encore une fois, Bootstrap nous a couverts.
Les utilisateurs sont habitués à ce que le champ de recherche soit affiché en évidence dans le coin supérieur droit des écrans de bureau et juste en dessous du titre sur des écrans plus étroits. Nous allons commencer par briser le entête élément en deux blocs et en ajoutant une seule entrée au plus petit:
Mon application géniale
Nous allons également ajouter quelques lignes de CSS à la utilisateur.css file, pour pousser le champ de recherche en haut de la page.
/ * Zone de recherche * / header header margin-top: 20px; largeur: 90%;
Nous allons également écrire une quantité légèrement supérieure de JavaScript pour que la police de caractères fonctionne correctement. Je vais le garder au minimum et expliquer ce que chaque script fait.
J'imagine que certains d'entre vous pensent "Je suis un web designer, pas un développeur. Bon point, mais nous devons au moins tester les eaux JavaScript pour débloquer toute la puissance de Bootstrap. Et de plus: les clients sont impressionnés quand une zone de saisie commence à renvoyer les résultats de la première lettre tapée.
Ajoutez l'extrait de code JavaScript ci-dessous à votre balise de script existante, puis cliquez sur Actualiser. Si cela fonctionne correctement, vous devriez voir un menu déroulant avec les résultats suggérés après avoir tapé une ou plusieurs lettres dans le champ de recherche..
var search = $ ('input # search'); $ (recherche) .typeahead (source: ['Dave Mustaine', 'Tom Morello', 'Jim Root', 'Kirk Hammett', 'Joe Perry', 'Jimi Hendrix', 'Eric Clapton', 'Billy Duffy' "Johnny Hickman", "Eddie Van Halen", "Dimebag Darrell", "Noel Gallagher"], articles: 5); Ok, voici ce que le code fait. le var search = $ ('input # search') indique à jQuery de stocker une référence au champ de recherche dans la variable nommée chercher. Ensuite, nous appelons ou appelons la fonction jQuery sur notre variable de recherche, ainsi que la méthode Bootstrap typeahead. À l'intérieur de la parenthèse, vous remarquerez une parenthèse ondulée qui s'ouvre et qui se ferme . Ces crochets sont utilisés pour créer un objet JavaScript et stocker des informations sur notre champ de recherche..
La première information est la la source tableau. Dans sa forme la plus simple, un tableau est une liste ordonnée de choses. Ici c'est une liste de guitaristes. Chaque joueur de guitare ajouté au tableau sera disponible comme résultat de notre entrée de recherche. La deuxième partie de l'objet, articles: 5 indique au champ de recherche le nombre maximum de résultats à afficher.
Ce ne sont que deux des nombreuses options disponibles. Je vous encourage à consulter la documentation sur le typeahead Bootstrap et à expérimenter différentes configurations. L'écran final de cette étape devrait ressembler à ceci:
Bootstrap est devenu un élément essentiel de mon flux de travail frontal. Cela me permet de tester lorsque les itérations sont relativement peu douloureuses et d’essayer simultanément plusieurs approches différentes. Ces découvertes aident à orienter les décisions de conception finales et à éviter les modifications qui prennent du temps au cours du cycle de développement complet. En considérant les structures filaires comme une partie essentielle de l'expérience utilisateur, je peux créer des outils plus naturels et plus gratifiants..
Je viens de gratter la surface de Bootstrap, et ce qui est possible avec son kit de pièces. Les structures filaires sont un excellent endroit pour commencer à apprendre les tenants et les aboutissants - elles sont censées être des modèles à tester de manière lointaine et précoce pour les applications complètes à venir. Les clients et les collègues peuvent tester nos hypothèses et nous aider à affiner rapidement avec un minimum de temps perdu.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
