Interfaz de usuario rápida con webknife

Lo que vas a crear

La web moderna exige ciclos de desarrollo más rápidos y más rápidos. Con esta mayor demanda, hay una necesidad de herramientas que ayuden a cumplir con estos plazos. Webknife es un marco de desarrollo web para ayudar a crear diseños y diseños agradables con la menor cantidad de codificación. En este tutorial, estoy creando una aplicación basada en la web para ayudar a los instructores en Tuts + a crear su papeleo del curso en Markdown más fácilmente.

Wireframing

Antes de codificar, es una buena práctica tener una idea del diseño de la aplicación y cómo desea que funcione. Esta aplicación crea un documento Markdown con el formato correcto para colocar un curso de video en Envato CMS. Por lo tanto, consistirá principalmente en campos de entrada.

solía Diseñador de afinidad Para crear un alámbrico de la aplicación. Aquí está la principal Propiedades lengüeta. Esta es la información principal necesaria para crear la entrada de CMS para el curso.

Formulario de propiedades del curso

Seleccionando el Lecciones La pestaña muestra este formulario. Aquí es donde el instructor puede ingresar los títulos de los capítulos, los títulos de las lecciones, las descripciones de las lecciones y los enlaces de las lecciones. La numeración será calculada automáticamente por el programa. Este tutorial solo muestra suficientes elementos de demostración para ver el diseño.

Curso de lecciones

los Exportar La pestaña tiene un solo elemento: un botón para exportar el curso a un Reducción documento.

Curso de exportación de curso

Empezando con Webknife

Para descargar la biblioteca, vaya al sitio web de Navaja y descarga la última versión. Mientras escribes este tutorial, la última versión es 1.4.0. Descomprima el archivo en su directorio de trabajo..

Webknife es un grupo de hojas de estilo y algunos archivos JavaScript que hacen que la creación de sitios HTML sea rápida y fácil. Por lo tanto, primero recorreré la creación del HTML, mostraré su resultado y luego agregaré solo CSS suficiente para que se vea como lo quiero. El kit de herramientas de Webknife hace la mayor parte del trabajo.

La parte superior del HTML será el encabezado que carga las hojas de estilo y establece el título. Cree el archivo index.html y agregue lo siguiente:

        Generador de Hoja de Curso Envato

Ese es el comienzo del archivo HTML para el proyecto. Todo lo demás pasa entre el

etiquetas.

Pestañas

La primera parte son las pestañas. Tendrán íconos y algún texto que describa lo que hace esa pestaña. Coloque este pedazo de código en el principal div:

     Propiedades  
    Lecciones  
    Exportar

La lista desordenada tiene una clase de w-tab. Esta clase de Webknife formatea los elementos de la lista para que sean pestañas. El primer elemento de la lista tiene la clase de w-activo. Webknife usa esto para cambiar el color de la pestaña para que sea la colorización activa. Todo lo demás no, por lo que estarán inactivos..

Cada elemento de la lista tiene un ancla con un al hacer clic función. Estas funciones las crearé para admitir el cambio del contenido del panel de contenido..

Dentro de las pestañas de anclaje, hay dos vanos. El primer tramo tiene una clase de w-icon. Todos los tramos con esta clase tienen una nombre de datos Selector con el nombre del icono para insertar dentro de ese intervalo. El rango de propiedades tiene nombre-datos = "portapapeles". La duración de las lecciones tiene la nombre-datos = "componer". El lapso de exportación tiene la nombre-datos = "compartir". Webknife tiene 77 iconos svg para elegir. Consulte la Guía de referencia HTML para más detalles..

Mensajes

Después de la Panel de pestañas, coloque este código:

    Bien guardado!
 
   Hubo un error!

Esta sección comienza con una div que contiene todos los contenidos del panel para las tres pestañas. Esta div También contiene dos áreas de mensajes: una para guardar la finalización y otra para los mensajes de error.

Webknife Messages -con mi formato agregado

Webknife tiene el estilo CSS grande para hacer el icono más grande y el estilo CSS de colores para colorearlo de rojo. En ambos mensajes, estoy usando el nombre-datos: "alert_circled" para un triángulo redondeado con un icono de signo de exclamación. Cada mensaje tiene la clase Webknife. mensaje w Para tener el estilo de mensaje. El mensaje guardado utiliza w-información, y el mensaje de error utiliza w-error.

En los archivos de origen de este tutorial, he comentado estas líneas. Usaré JavaScript para inyectar este código en el DOM según sea necesario.

Panel de propiedades

Para el Panel de propiedades, añade este código:

   Autor:   
 Dificultad:   
 Tema:   
 Categorías:   
 Software / Idiomas / Frameworks:  
 Tarifa del curso:   
 Debido:   
 Nombre del curso:   
 Descripción del curso:    
 Descripción de la fuente:

El panel de propiedades div contiene dos clases: forma de W y w-activo. forma de W define el estilo para una forma y w-activo lo designa como se muestra activamente. Dado que la aplicación debe iniciarse en este panel, se establece desde el principio.

Dentro de este div, existen divs con la clase w-form-group. Esta clase mantiene todo dentro de una línea. Cada uno de estos divs contiene una etiqueta y una entrada o un área de texto. Cada entrada tiene un identificador único para obtener la información fácilmente desde JavaScript. Hay un w-form-group dev Para cada una de las entradas en este panel..

Panel de lecciones

Después de la div Para el Panel de propiedades, coloque este código:

  1    1.1      Enlaces relacionados:
     
   
 
 
   
 
 
  2    2.1      Enlaces relacionados:

La estructura del Panel de lecciones es la misma para el Panel de propiedades. Las etiquetas indican diferentes números de sección y lección. Las entradas son entradas de texto para los encabezados y títulos, y son textareas para las descripciones.

Cada encabezado, título de la lección y enlace tiene una lapso elemento con el nombre de datos de close_circled. Esto coloca un círculo con una 'x' en el centro para eliminar esos elementos..

Cada entrada de enlace tiene una lapso elemento con el nombre de datos de tierra. Esto coloca un ícono que parece un globo terráqueo..

Todos los botones tienen las clases de Webknife. w-pequeño y w-color. los addButton clase es para agregar un estilo específico en el archivo CSS.

los carné de identidads no son los últimos, pero el código de JavaScript los creará según sea necesario. Estos solo muestran el formato básico..

Panel de exportación y importación de JavaScript

Después de la div Para el Panel de Lecciones, coloque este código:

El Panel de Exportación tiene un simple botón. Las clases de webknife de w-large y w-color Haz el botón más grande y un azul más oscuro..

Despues del cierre divs para los paneles, los tres guión las etiquetas cargan archivos JavaScript de Webknife y mi archivo JavaScript. Mi archivo JavaScript contiene las funciones necesarias para cambiar las pestañas y mostrar el selector de fecha, y el cuadro de diálogo modal para agregar un enlace.

Código JavaScript

En el archivo js / basic.js, añade este código:

función onLoadFunctions () // // WebKnife: ejemplifica un inyector svg para mostrar los iconos SVG // o usa injector.inject ('# foo') para inyectar solo dentro de // los elementos correspondientes // var injector = new svgInject () ; injector.inject (); // // Configurar el selector de fecha para la fecha de vencimiento. // var dateDue = $ ('# datesue'). pikaday (firstDay: 1, minDate: new Date ('01 -01-2015 '), maxDate: new Date ('12 -31-2015'), formato: 'MM / DD / YYYY', rango de año: [2015,2099]);  window.onload = onLoadFunctions; // // Estas variables y funciones globales son para cambiar rápidamente los // estados de las pestañas y sus contenidos. // var propPan = $ ("# propertiesPanel"); var lessPan = $ ("# lessonsPanel"); var expPan = $ ("# exportPanel"); var propTab = $ ("# propertiesTab"); var lessTab = $ ("# lessonsTab"); var expTab = $ ("# exportTab"); function propertiesTabClick () 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) // // Crea el diálogo modal para ingresar la dirección web. // var modalOptions = 'width': 600, 'height': 220, 'title': 'Ingrese el título y la dirección web del enlace', 'html': 'El] ()
'; $ (addButton) .modal (modalOptions);

La primera función es una onload función. Se ejecutará cuando finalice la carga de la página. Esta función configura el inyector del icono svg con el marco de Webknife. Después de eso, configura el selector de fecha, también de Webknife, para la fecha de vencimiento del curso..

Las variables globales y las tres funciones siguientes realizan el cambio de pestaña. Utilizo las variables para mantener el contenedor jQuery para los diferentes elementos de las pestañas y los paneles. De esa manera, no se crean cada vez que se ejecutan las funciones..

La última función es para abrir el diálogo modal en el Añadir enlaces botón. Cuando el usuario hace clic en el botón, aparece el siguiente diálogo:

Cuadro de diálogo modal para agregar enlaces con mi formato

Se necesita escribir más código para que la aplicación sea completamente funcional, pero esto es suficiente para este tutorial.

CSS personalizado

Antes de agregar el CSS personalizado, la aplicación se ve así:

Aplicación con el estilo predeterminado de Webknife

Esto no parece tan malo, excepto que todos los paneles se muestran a la vez y los colores de fondo no son lo que yo quería. Pero esto es fácil de arreglar. En el archivo css / basic.css, coloque este código:

cuerpo overflow-x: oculto; color de fondo: azul claro;  #main background-color: lightblue; overflow-x: oculto; relleno-izquierda: 10px; relleno superior: 10px; margen: 0px; ancho: 720px;  sección relleno: 0px;  #panelContainer width: 700px; tamaño de caja: caja de borde; radio del borde: 5px; borde: 1px sólido #bbb; altura: 855px; desbordamiento-y: auto;  #propertiesPanel height: 0px;  #lessonsPanel height: 0px;  #exportPanel altura: 0px;  #exportPanel div top: 200px; posición: relativa;  .w-tab margen izquierdo: 5px;  .w-tab li background-color: # 86c5da;  .w-tab li.w-active background-color: # d4ebf2; borde inferior: 0px;  .w-tab-content background-color: # d4ebf2;  .w-form top: 0px; frontera: 0px; relleno: 0px; margen: 0px; visibilidad: oculta;  #propertiesPanel .w-form-group .w-file-input, #propertiesPanel .w-form-group input [tipo = texto], #propertiesPanel .w-form-group input [tipo = contraseña], #propertiesPanel .w -form-group select, #propertiesPanel .w-form-group textarea, #propertiesPanel .w-form-group label display: inline; ancho: 55% .w-form .w-form-group margen: 0;  #propertiesPanel .w-form-group label display: inline-table; ancho: 42%; text-align: right; derecho de relleno: 10px;  #lessonsPanel .w-form-group .w-file-input, #lessonsPanel .w-form-group input [tipo = texto], #lessonsPanel .w-form-group input [type = contraseña], #lessonsPanel .w -form-group select, #lessonsPanel .w-form-group textarea, #lessonsPanel .w-form-group label display: inline; ancho: 80% #lessonsPanel .w-form-group label display: inline-table; ancho: 5%; text-align: right; derecho de relleno: 10px;  .lessonGroup padding-left: 40px;  .lessonDescriptionGroup padding-left: 45px;  .linksGroup padding-left: 0px;  .closeIcon vertical-align: middle;  .closeIcon svg width: 15px; margen superior: 5px; alineación vertical: medio;  .linkIcon vertical-align: middle;  .linkIcon svg width: 15px; margen superior: 5px; alineación vertical: medio;  .addButton margin-top: 10px;  #message display: inline-flex; ancho: 600px; desbordamiento: oculto; Top 100;  #message p width: 550px; margen izquierdo: 20px;  #message span svg margin-top: 20px;  #message span altura: 45px;  #alert display: inline-flex; ancho: 600px; desbordamiento: oculto;  #alert p width: 550px; margen izquierdo: 20px;  #alert span svg margin-top: 20px;  #alert span altura: 45 px;  .w-active visibilidad: visible! importante; altura: auto;

Esto es todo el CSS necesario para obtener el aspecto que quería. La mayoría está colocando los iconos en la ubicación correcta, ocultando correctamente los paneles que no son visibles con la selección de la pestaña y configurando los colores de fondo.

Con el CSS en su lugar, el Propiedades pestaña se ve así:

Pestaña de propiedades

los Lecciones pestaña se ve así:

Pestaña lecciones

Y el Las exportaciones pestaña se ve así:

Pestaña Exportaciones

No son exactamente como la estructura alámbrica, pero me gusta la forma en que se ve.

Conclusión

En este tutorial, lo guié a través de la creación de una aplicación web básica para crear hojas de cursos en Markdown for Envato. Este proyecto solo muestra los gráficos frontales, pero muestra cómo usar Webknife para crear rápidamente la apariencia de su aplicación web o sitio web. Hay muchos más elementos para usar de los que pude utilizar en este proyecto. Depende de ti experimentar ahora. Entonces, ve a crear algo nuevo en Webknife.

Código