Kube
40
Marco Web de Trabajo con Kube por Imperavi DJV Dailos Sabina Jesús Marín Vanessa Marín
Transcript of Kube
Marco Web de Trabajo con Kube por ImperaviDJV
Dailos Sabina
Jesús Marín
Vanessa Marín
Índice
• Introducción
• CSS
• Javascript
• Otros
DJV
Marco Web de Trabajo con Kube
• Es uno de los marcos de trabajo más avanzados y flexibles del mundo
• Marco de trabajo minimalista para desarrolladores y diseñadores profesionales
• Ayuda a gastar menos tiempo en tareas rutinarias y más tiempo creando productos sorprendentes
• Enfóquense en el éxito, Kube cubrirá la tecnología subyacente
DJV
Marco Web de Trabajo con Kube
• Kube no te obliga a un estilo específico
• Kube no requiere volver a escribir código; deja todas las decisiones importantes para usted y su genio creativo
• Piensa en Kube como si fuera tu ayudante más fiable, que haría su trabajo de rutina con una sonrisa en su rostro, de modo que usted pueda concentrarse realmente en algo grande y maravilloso
DJVMarco Web de Trabajo
con Kube
• Kube está construido pensando en integridad y tecnología. Los desarrolladores profesionales y diseñadores no suelen utilizar plantillas pre-existentes y otros elementos predefinidos de otros marcos de trabajo, por lo que Kube no las utiliza: Kube da todo el poder de elección, creatividad y belleza, mientras que él se encarga de manejar todo la tecnología que se encuentra detrás
DJVMarco Web de Trabajo
con Kube
• Kube dispone de rejillas sensibles, tipografía flexible, sin compromiso, formularios limpios, tablas y, básicamente, todo lo necesario para construir una estructura super rápida, un portal web o una aplicación móvil (sí, Kube abarca desarrollo móvil también)
DJVMarco Web de Trabajo
con Kube
• Kube funciona en todos los navegadores modernos, en equipos de escritorio y dispositivos móviles:– El último Chrome– El último Firefox– El último Safari– El último Opera– IE9+– Navegadores móviles
DJVMarco Web de Trabajo
con Kube
Plantilla Base:<!DOCTYPE html>
<html>
<head>
<title>Kube Web Framework</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"href="css/kube.min.css" />
<link rel="stylesheet" href="css/your-styles.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="js/kube.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
DJVMarco Web de Trabajo
con Kube
Bajo licencia MIT:
• El marco de trabajo Kube es totalmente gratuito para uso personal o comercial y se puede utilizar en cualquier proyecto de código abierto
• Usted puede bifurcar Kube en Github para cualquier necesidad
• Usted puede vender y redistribuir cualquier modificación de Kube e incluso cambiar el nombre a MuBE, si te gusta ...
DJVMarco Web de Trabajo
con Kube
Basado en:
• Componentes CSS
• Herramientas JavaScript
• Plantillas IOS
DJVMarco Web de Trabajo
con Kube
Marco Web de Trabajo con KubeComponentes Css
Visión del conjunto (1):
Altura de la línea
• A todo el texto y los elementos se les aplica una altura de línea de 1.618 em. Este valor es perfecto y general porque no importa qué tamaño de fuente se utiliza
DJV
Visión del conjunto (2):
Dimensionamiento de caja
• Todos los elementos en Kube tienen dimensionamiento de caja: borde de caja; conjunto de propiedades. Por decirlo de alguna forma rápida los rellenos adicionales no añaden ancho extra a los elementos
DJVMarco Web de Trabajo con Kube
Componentes Css
Visión del conjunto (3a):
variables.less
• Si se descarga Kube con LESS, usted encontrará archivos variables.less. Este archivo contiene todos los ajustes para Kube, como la familia fuente, tamaño de la fuente, el tamaño de las cabeceras, los colores, ...
• Por supuesto, puede cambiar cualquier configuración que le guste y reconstruir completamente Kube para sus necesidades y de acuerdo a su gusto
DJVMarco Web de Trabajo con Kube
Componentes Css
Visión del conjunto (3b):
less
• Less es un pre-procesador CSS, lo que significa que se extiende el lenguaje CSS, añadiendo características a las variables, mixins, funciones y otras muchas técnicas que permiten hacer que el CSS sea más fácil de mantener, adaptable a temas y extensible
DJVMarco Web de Trabajo con Kube
Componentes Css
Visión del conjunto(4):
Grid (1)
• Investigando e investigando todas las rejillas que hay en el mercado, Kube es el resultado de volver a pensar las mejores prácticas mundiales y añadirles nuestra propia experiencia con rejillas
DJVMarco Web de Trabajo con Kube
Componentes Css
Visión del conjunto (5):
Grid (2)
• La rejilla detrás de un marco de trabajo debe ser simple y universal, no importa lo que usted está trabajando
• No creemos que las matemáticas en las rejillas o que las rejillas estáticas sean una buena idea para la Web
DJVMarco Web de Trabajo con Kube
Componentes Css
Visión del conjunto (6):
Grid (3)
• Esto es por lo que la rejilla en Kube es fluida y está compuesta de porcentajes de bloque. El sistema de rejillas Kube le permite pensar, desarrollar y proyectar en un alto nivel de abstracción, sin perder el tiempo en acostumbrarse a las unidades artificiales y mediciones ...
DJVMarco Web de Trabajo con Kube
Componentes Css
Tipografía
Cabeceras, listas, párrafos, citas de bloque y otros elementos necesarios
• La tipografía es con mucho de lo más visible en la Web. Kube introduce medidas precisas, elementos de tipografía visualmente y gráficamente atractivos de todos los tipos posibles
DJVMarco Web de Trabajo con Kube
Componentes Css
Bloques
Elementos rápidos de un bloque
• Es muy fácil de agregar, modificar, reorganizar o dar estilo a todo tipo de bloques en una página
DJVMarco Web de Trabajo con Kube
Componentes Css
Tablas
Todos los tipos de tablas
• Las tablas pueden o no gustar, es totalmente a su gusto. Fronteras, márgenes, títulos, totalmente sensibles y completamente personalizables
DJVMarco Web de Trabajo con Kube
Componentes Css
Tabla por defecto
DJV
First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Total points 223
1.<table>2.<thead>3.<tr>4.<th>...</th>5.</tr>6.</thead>7.<tbody>8.<tr>9.<td>...</td>10.</tr>11.</tbody>12.<tfoot>13.<tr>14.<td>...</td>15.</tr>16.</tfoot>17.</table>
Marco Web de Trabajo con KubeComponentes Css
Formularios
Formularios de aspecto bonito
• Kube ofrece un control completo sobre el aspecto y la sensación de un formulario, ya sea si necesitas el fondo negro, búsqueda en vivo o autocompletar
• Un conjunto completo de tipos de entrada hace más fácil crear formularios de cualquier tipo. Sólo hay que utilizar etiquetas nativas sin dejar de ser más flexible en la construcción de formularios más complicados
DJVMarco Web de Trabajo con Kube
Componentes Css
Navegación
Vertical u horizontal, es mucho más que sólo Barras de Navegación
• Crear, personalizar y mejorar la navegación en cuestión de segundos. De anchura completa, verticales, camino de hormigas, la paginación... ¡¡¡Lo que sea!!!
DJVMarco Web de Trabajo con Kube
Componentes Css
Botones
Grandes, pequeños, planos o redondos. Cualquier ancho, cualquier color
• Kube ofrece amplia variedad de botones totalmente personalizables. Añada un botón a un campo de entrada, o haga un botón de ancho completo, o deje que un botón enriquezca su diseño plano. Las posibilidades son infinitas
DJVMarco Web de Trabajo con Kube
Componentes Css
Etiquetas
E insignias
• Elegir entre las etiquetas e insignias de colores. Cualquiera que sea el que mejor funciona para usted
DJVMarco Web de Trabajo con Kube
Componentes Css
Búsqueda
Averiguar cualquier cosa
• Incorporar formularios de búsqueda a cualquier diseño que haga falta. Funciona mejor con búsqueda en vivo, autocompletar y navegación
DJVMarco Web de Trabajo con Kube
Componentes Css
Notificaciones
Notificar con estilo, cualquier estilo
• Elegir un estilo perfecto para las notificaciones. Deja que los usuarios sepan lo que es urgente, está completo o necesita atención utilizando varios colores
DJVMarco Web de Trabajo con Kube
Componentes Css
Colores
Brillantes o pasteles, base o gradientes, y todo en el medio
• Seis colores básicos y cuidadosamente medidos con tres variaciones de cada uno
DJVMarco Web de Trabajo con Kube
Componentes Css
Ayudantes
Herramientas útiles nativas
• Utilizar el idioma inglés para aplicar propiedades. Si se quiere que sea “ligero”, poner .light, si se quiere “más pequeño”, .smaller
DJVMarco Web de Trabajo con Kube
Componentes Css
Mixins
Marcas más inteligentes, más pequeñas y más rápidas
• Con mixins, se ahorra mucho tiempo en la aplicación de propiedades comunes. Escriba menos y consiga más
DJVMarco Web de Trabajo con Kube
Componentes Css
Iconos
Usar iconos con facilidad
• Añadir y usar fácilmente iconos. Con fuentes especiales o fuentes personalizables, es tan fácil como
<button class="btn"><i class="fa facog"></i> Button</button>
DJVMarco Web de Trabajo con Kube
Componentes Css
DJV
Mensaje
Mostrar notificacionesen una página: Una notificación aparece enuna página siempre que sea necesario
Consejo sobre laherramienta
Pequeños consejos:Información útilacerca de unelemento en unapágina se muestracon el cursor del ratón
Siempre barra de menús
visibles. Hacer un elemento
en la parte superior de
desplazamiento. Funciona
mejor con la navegación,
pero se puede utilizar para
cualquier cosa.
Marco Web de Trabajo con Kube Herramientas JavaScript
DJV
Fichas de control con la API y devoluciones de llamada. Pestañas seleccionadas se activan a través de la API o ejecutar código personalizado cuando se llama a openCallback.
Pestañas
Botones segmentados de conmutación y
cambio potenciados mediante JS
Botones
Seleccione de una
lista o escriba su
propio valor. Opción
autocompletar +
opción de introducir
texto personalizado.
Caja de Filtro
Marco Web de Trabajo con Kube Herramientas JavaScript
DJV
Datos plegables o desplegables con un
solo click.
Acordeón
Para obtener una lista de las capas con
sólo texto o capas enteras
Persiana
Mostrar resultados de
búsqueda al instante
cuando los usuarios
digitan una cualquiera
Búsqueda en vivo
Marco Web de Trabajo con Kube Herramientas JavaScript
DJV
Activar o desactivar casillas de marca a
la vez
Marcar todo Escribir algunas
letras para ver las
opciones
Autocompletar
Marco Web de Trabajo con Kube Herramientas JavaScript
Arrestre y suelte de forma fácil para
cargar ficheros con entrada simple
Carga
DJV
Cambio de
navegación
Marco Web de Trabajo con Kube Herramientas JavaScript
El bueno y viejo model con mejor
manejo de eventos
Modal
Para aquellos que no les guste la paginación
Desplazamiento Infinito
DJV
Mostrar barra de progreso en la parte superior. Funciona mejor con la carga
de ficheros
Progreso
Marco Web de Trabajo con Kube Herramientas JavaScript
Redimensionado automágico de texto
Adecuación de texto
Actualizaciones
Version 4.0.2 24 de septiembre de 2014
• Añadido .unit-role-right and .unit-role-left en grid.less
• Añadido .hide-on-mobile en helpers.less
• Solucionado estado desactivado de botones
• Solucionado cambio de navegación en JS
• Solucionado ocultar mensaje de JS mediante ESC
DJVMarco Web de Trabajo con Kube
Actualizaciones
• Conjunto de elementos para hacer marcos entrelazados en OmniGraffle 6/5 en Mac OS X. Se trata de una serie de elementos simples y claros para crear prototipos rápidos y marcos entrelazados de sitios web
• Con las plantillas Kube es todo lo que se necesita para hacer un limpio y bonito marco entrelazado que se busca
DJVMarco Web de Trabajo con Kube
Plantillas
