Interface Web rapide avec Webknife

Ce que vous allez créer

Le Web moderne exige des cycles de développement de plus en plus rapides. Face à cette demande accrue, des outils sont nécessaires pour aider à respecter ces délais. Webknife est un cadre de développement Web permettant de créer de jolies dispositions et conceptions avec le moins de code possible. Dans ce tutoriel, je crée une application Web pour aider les instructeurs de Tuts + à créer plus facilement leurs documents de cours dans Markdown..

Wireframing

Avant de coder, il est recommandé d’avoir une idée de la présentation de l’application et de la façon dont vous souhaitez que cela fonctionne. Cette application crée un document Markdown correctement formaté pour l'insertion d'un cours vidéo dans le CMS Envato. Par conséquent, il s'agira principalement de champs de saisie.

j'ai utilisé Concepteur d'affinité créer une structure filaire de l'application. Voici le principal Propriétés languette. C’est l’information principale nécessaire pour créer l’entrée CMS du cours..

Formulaire de propriétés de cours

Sélection du Cours onglet affiche ce formulaire. C'est ici que l'instructeur peut saisir les en-têtes de chapitre, les titres de leçons, les descriptions et les liens de leçons. La numérotation sera automatiquement calculée par le programme. Ce tutoriel montre seulement assez d'éléments de démonstration pour voir la mise en page.

Formulaire de cours

le Exportation L’onglet contient un seul élément: un bouton pour exporter le cours vers un Réduction document.

Formulaire d'exportation de cours

Débuter avec Webknife

Pour télécharger la bibliothèque, rendez-vous sur le site Web de Webknife et téléchargez la dernière version. Lors de la rédaction de ce tutoriel, la dernière version est la 1.4.0. Décompressez le fichier dans votre répertoire de travail.

Webknife est un groupe de feuilles de style et de fichiers JavaScript qui permettent de créer rapidement et facilement des sites HTML. Par conséquent, je commencerai par créer le code HTML, en montrerai le résultat, puis ajouterai juste assez de CSS pour que celui-ci se présente comme je le souhaite. La trousse à outils Webknife fait l'essentiel du travail.

Le haut du code HTML correspond à l'en-tête qui charge les feuilles de style et définit le titre. Créez le fichier index.html et ajoutez ce qui suit:

        Générateur de feuilles de cours Envato

C'est le début du fichier HTML du projet. Tout le reste se passe entre le

Mots clés.

Onglets

La première partie est les onglets. Ils auront des icônes et du texte décrivant ce que fait cet onglet. Placez ce morceau de code dans le principale div:

     Propriétés  
    Cours  
    Exportation

La liste non ordonnée a une classe de w-tab. Cette classe Webknife met en forme les éléments de la liste pour qu'ils soient des onglets. Le premier élément de la liste a la classe de w-actif. Webknife l'utilise pour changer la couleur de l'onglet en colorisation active. Tous les autres ne le font pas, ils seront donc inactifs.

Chaque élément de la liste a une ancre avec un sur clic une fonction. Ces fonctions que je vais créer pour prendre en charge le basculement du contenu du panneau de contenu.

À l'intérieur des pattes d'ancrage, il y a deux portées. La première travée a une classe de w-icon. Toutes les portées de cette classe ont un nom-donnée sélecteur avec le nom de l'icône à insérer à l'intérieur de cette étendue. La plage Propriétés a la nom-donnée = "presse-papiers". La durée des leçons a la nom-donnée = "composer". La durée d'exportation a la nom-donnée = "partage". Webknife propose un choix de 77 icônes svg. Reportez-vous au Guide de référence HTML pour plus de détails..

messages

Après le Panneau d'onglets, Placez ce code:

    Ok sauvé!
 
   Il y avait une erreur!

Cette section commence par un div qui contient tout le contenu du panneau pour les trois onglets. Ce div contient également deux zones de message: une pour l'achèvement de la sauvegarde et une autre pour les messages d'erreur.

Messages Webknife-avec ma mise en forme ajoutée

Webknife a le style CSS grand pour agrandir l’icône et le style CSS coloré pour le colorier en rouge. Dans les deux messages, j'utilise le nom-donnée: "alert_circled" pour un triangle arrondi avec une icône de point d'exclamation. Chaque message a la classe Webknife w-message avoir le style du message. Le message enregistré utilise w-information, et le message d'erreur utilise w-error.

Dans les fichiers source de ce tutoriel, ces lignes sont commentées. J'utiliserai JavaScript pour injecter ce code dans le DOM selon les besoins.

Panneau de propriétés

Pour le Panneau de propriétés, ajoutez ce code:

   Auteur:   
 Difficulté:   
 Sujet:   
 Catégories:   
 Logiciels / Langages / Frameworks:  
 Taux du cours:   
 Dû:   
 Nom du cours:   
 Description du cours:    
 Description de la source:

Le panneau de propriétés div contient deux classes: forme-w et w-actif. forme-w définit le style d'un formulaire et w-actif le désigne comme étant activement affiché. Puisque l'application doit démarrer sur ce panneau, elle est définie depuis le début..

À l'intérieur de cette div, il y a divs avec la classe groupe de forme w. Cette classe conserve tout ce qui est à l'intérieur sur une seule ligne. Chacun de ces divs contient une étiquette et une entrée ou une zone de texte. Chaque entrée a un identifiant unique pour obtenir facilement les informations à partir de JavaScript. Il y a un groupe de forme w dev pour chacune des entrées sur ce panneau.

Panneau de leçons

Après le div pour le Panneau de propriétés, Placez ce code:

  1    1.1      Liens connexes:
     
   
 
 
   
 
 
  2    2.1      Liens connexes:

La structure du panneau de leçons est la même pour le panneau de propriétés. Les étiquettes indiquent différents numéros de section et de cours. Les entrées sont des entrées de texte pour les en-têtes et les titres, et sont zone de textes pour les descriptions.

Chaque en-tête, titre de cours et lien a un envergure élément avec le nom-donnée de close_circled. Cela place un cercle avec un «x» au milieu pour supprimer ces éléments.

Chaque entrée de lien a un envergure élément avec le nom-donnée de Terre. Cela place une icône qui ressemble à un globe.

Tous les boutons ont les classes Webknife w-petit et couleur w. le addButton la classe sert à ajouter un style spécifique dans le fichier CSS.

le identifiants ne sont pas les derniers, mais le code JavaScript les créera au besoin. Ceux-ci montrent juste le format de base.

Exportation de panneaux et importation JavaScript

Après le div pour le panneau des leçons, placez ce code:

Le panneau d'exportation a un bouton simple. Les classes de Webknife de w-large et couleur w faire le bouton plus grand et un bleu plus foncé.

Après la fermeture divs pour les panneaux, les trois scénario Les balises chargent les fichiers JavaScript de Webknife et mon fichier JavaScript. Mon fichier JavaScript contient les fonctions nécessaires pour changer d'onglet et afficher le sélecteur de date, ainsi que la boîte de dialogue modale permettant d'ajouter un lien..

Code JavaScript

Dans le fichier js / basic.js, ajoutez ce code:

function onLoadFunctions () // // WebKnife: instancie un injecteur svg pour afficher les icônes SVG // ou utilise injector.inject ('# foo') pour n'injecter que dans les // éléments correspondants // var injector = new svgInject () ; injector.inject (); // // Configure le sélecteur de date pour la date d'échéance. // var dateDue = $ ('# datée'). pikaday (firstDay: 1, minDate: new Date ('01 - 01-2015 '), maxDate: new Date ('12 - 31-2015'), format: 'MM / JJ / AAAA', yearRange: [2015,2099]);  window.onload = onLoadFunctions; // // Ces variables et fonctions globales permettent de changer rapidement les // états des onglets et leur contenu. // var propPan = $ ("# propertiesPanel"); var lessPan = $ ("# lessonsPanel"); var expPan = $ ("# exportPanel"); var propTab = $ ("# propertiesTab"); var lessTab = $ ("# lessonsTab"); var expTab = $ ("# exportTab"); propriétés de la fonction TabClick () propPan.addClass ("w-active"); lessPan.removeClass ("w-active"); expPan.removeClass ("w-active"); propTab.addClass ("w-active"); lessTab.removeClass ("w-active"); expTab.removeClass ("w-active");  function lessonsTabClick () propPan.removeClass ("w-active"); lessPan.addClass ("w-active"); expPan.removeClass ("w-active"); propTab.removeClass ("w-active"); lessTab.addClass ("w-active"); expTab.removeClass ("w-active");  function exportTabClick () propPan.removeClass ("w-active"); lessPan.removeClass ("w-active"); expPan.addClass ("w-active"); propTab.removeClass ("w-active"); lessTab.removeClass ("w-active"); expTab.addClass ("w-active");  function getLink (addButton) // // Crée la boîte de dialogue modale pour la saisie de l'adresse Web. // var modalOptions = 'width': 600, 'height': 220, 'title': 'Entrez le titre et l'adresse Web du lien', 'html': '[] ()
'; $ (addButton) .modal (modalOptions);

La première fonction est un en charge une fonction. Il sera exécuté à la fin du chargement de la page. Cette fonction configure l'injecteur d'icônes svg avec le framework Webknife. Après cela, il configure le sélecteur de date, également de Webknife, pour la date d'échéance du cours..

Les variables globales et les trois fonctions suivantes effectuent le changement d’onglet. J'utilise les variables pour conserver le wrapper jQuery pour les différents éléments et panneaux de l'onglet. De cette façon, ils ne sont pas créés chaque fois que les fonctions sont exécutées.

La dernière fonction sert à afficher la boîte de dialogue modale sur le Ajouter des liens bouton. Lorsque l'utilisateur clique sur le bouton, la boîte de dialogue suivante s'affiche:

Boîte de dialogue modale pour l'ajout de liens avec ma mise en forme

Plus de code doit être écrit pour que l'application soit totalement fonctionnelle, mais cela suffit pour ce tutoriel..

CSS personnalisé

Avant d'ajouter le CSS personnalisé, l'application ressemble à ceci:

Application avec style Webknife par défaut

Cela n’a pas l’air mauvais, sauf que tous les panneaux sont affichés en même temps et que les couleurs de l’arrière-plan ne sont pas ce que je voulais. Mais c'est facile à résoudre. Dans le fichier css / basic.css, Placez ce code:

body overflow-x: hidden; couleur de fond: bleu clair;  #main background-color: lightblue; débordement-x: caché; padding-left: 10px; rembourrage en haut: 10px; marge: 0px; largeur: 720px;  section padding: 0px;  #panelContainer width: 700px; taille de la boîte: boîte-frontière; border-radius: 5px; bordure: 1px solide #bbb; hauteur: 855px; débordement-y: auto;  #propertiesPanel height: 0px;  #lessonsPanel height: 0px;  #exportPanel height: 0px;  #exportPanel div top: 200px; position: relative;  .w-tab marge gauche: 5px;  .w-tab li background-color: # 86c5da;  .w-tab li.w-active background-color: # d4ebf2; bordure inférieure: 0px;  .w-tab-content background-color: # d4ebf2;  .w-form top: 0px; bordure: 0px; remplissage: 0px; marge: 0px; visibilité: cachée;  #propertiesPanel .w-form-group .w-file-input, #propertiesPanel .w-form-group input [type = texte], #propertiesPanel .w-form-group input [type = mot de passe], #propertiesPanel .w -form-group select, #propertiesPanel .w-form-group textarea, #propertiesPanel .w-form-group label display: inline; largeur: 55% .w-form .w-form-group margin: 0;  #propertiesPanel .w-form-group label display: inline-table; largeur: 42%; text-align: right; padding-right: 10px;  #lessonsPanel .w-form-group .w-file-input, #lessonsPanel .w-form-group input [type = texte], #lessonsPanel .w-form-group input [type = mot de passe], #lessonsPanel .w -form-group select, #lessonsPanel .w-form-group textarea, #lessonsPanel .w-form-group label display: inline; width: 80% #lessonsPanel .w label-groupe-de-forme display: inline-table; largeur: 5%; text-align: right; padding-right: 10px;  .lessonGroup padding-left: 40px;  .lessonDescriptionGroup padding-left: 45px;  .linksGroup padding-left: 0px;  .closeIcon vertical-align: middle;  .closeIcon svg width: 15px; marge supérieure: 5px; alignement vertical: milieu;  .linkIcon vertical-align: middle;  .linkIcon svg width: 15px; marge supérieure: 5px; alignement vertical: milieu;  .addButton margin-top: 10px;  #message display: inline-flex; largeur: 600px; débordement caché; Top 100;  #message p width: 550px; marge gauche: 20px;  #message span svg margin-top: 20px;  #message span height: 45px;  #alert display: inline-flex; largeur: 600px; débordement caché;  #alert p width: 550px; marge gauche: 20px;  #alert span svg margin-top: 20px;  #alert span height: 45px;  .w-active visibilité: visible! important; hauteur: auto;

C'est tout le CSS nécessaire pour obtenir le look que je voulais. La plupart des tâches consistent à placer les icônes au bon endroit, à masquer correctement les panneaux non visibles avec la sélection de tabulation et à définir les couleurs d'arrière-plan..

Avec le CSS en place, le Propriétés L'onglet ressemble à ceci:

Onglet Propriétés

le Cours L'onglet ressemble à ceci:

Onglet Leçons

Et le Exportations L'onglet ressemble à ceci:

Onglet Exportations

Ils ne sont pas exactement comme le fil de fer, mais j'aime bien son apparence.

Conclusion

Dans ce tutoriel, je vous ai expliqué la création d'une application Web de base pour la création de feuilles de cours dans Markdown for Envato. Ce projet ne montre que les graphiques frontaux, mais montre comment utiliser Webknife pour créer rapidement l’apparence de votre application Web ou de votre site Web. Il y a beaucoup plus d'éléments à utiliser que ce que j'ai pu utiliser dans ce projet. C'est à vous d'expérimenter maintenant. Alors, allez créer quelque chose de nouveau dans Webknife.

Code