Download - Kube
![Page 1: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/1.jpg)
Marco Web de Trabajo con Kube por ImperaviDJV
Dailos Sabina
Jesús Marín
Vanessa Marín
![Page 2: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/2.jpg)
Índice
• Introducción
• CSS
• Javascript
• Otros
DJV
Marco Web de Trabajo con Kube
![Page 3: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/3.jpg)
• 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
![Page 4: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/4.jpg)
• 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
![Page 5: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/5.jpg)
• 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
![Page 6: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/6.jpg)
• 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
![Page 7: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/7.jpg)
• 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
![Page 8: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/8.jpg)
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
![Page 9: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/9.jpg)
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
![Page 10: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/10.jpg)
Basado en:
• Componentes CSS
• Herramientas JavaScript
• Plantillas IOS
DJVMarco Web de Trabajo
con Kube
![Page 11: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/11.jpg)
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
![Page 12: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/12.jpg)
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
![Page 13: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/13.jpg)
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
![Page 14: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/14.jpg)
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
![Page 15: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/15.jpg)
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
![Page 16: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/16.jpg)
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
![Page 17: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/17.jpg)
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
![Page 18: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/18.jpg)
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
![Page 19: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/19.jpg)
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
![Page 20: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/20.jpg)
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
![Page 21: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/21.jpg)
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
![Page 22: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/22.jpg)
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
![Page 23: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/23.jpg)
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
![Page 24: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/24.jpg)
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
![Page 25: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/25.jpg)
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
![Page 26: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/26.jpg)
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
![Page 27: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/27.jpg)
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
![Page 28: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/28.jpg)
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
![Page 29: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/29.jpg)
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
![Page 30: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/30.jpg)
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
![Page 31: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/31.jpg)
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
![Page 32: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/32.jpg)
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
![Page 33: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/33.jpg)
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
![Page 34: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/34.jpg)
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
![Page 35: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/35.jpg)
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
![Page 36: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/36.jpg)
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
![Page 37: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/37.jpg)
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
![Page 38: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/38.jpg)
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
![Page 39: Kube](https://reader034.vdocumento.com/reader034/viewer/2022042716/55b40838bb61ebeb258b45cd/html5/thumbnails/39.jpg)
• 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