Ratchet es un nuevo e impresionante marco que te permite crear diseños prototipo de aplicaciones de iPhone de forma rápida y sencilla utilizando solo HTML, CSS y JavaScript. Simplemente cree un contenedor div en su HTML, agregue algunos elementos con clases preestablecidas y estará listo para comenzar.
Sigue a lo largo de saltar a Ratchet para ver cómo funciona. Patearemos los neumáticos, probaremos algunas características y decidiremos si vale la pena descargarlo o no. (Alerta de spoiler: es.)
¿Qué es el trinquete?
El trinquete es muy simple en concepto. Es un marco de UI basado principalmente en CSS (y un poco de JavaScript) que se implementa a través de HTML simple. En realidad es muy similar a Twitter Bootstrap, solo que está diseñado específicamente para parecerse a la interfaz nativa de iPhone.
¿Realmente puedo hacer esto?
Ratchet no es un marco super complicado solo para desarrolladores de alto nivel. Puedes ponerte en marcha en tan solo unos minutos. Requiere cero conocimiento de cualquier programación de iOS y en realidad solo un poquito de JavaScript.
Para ver cómo funciona, construyamos una página de muestra desde cero.
Empezando
Para comenzar, dirígete a la página de Ratchet GitHub y descarga la descarga gratuita. Dentro de esa descarga encontrarás una plantilla de inicio, agrégala a tu editor de texto favorito.
En la parte principal del HTML, hay un montón de cosas. Dejaremos esto solo para nuestros propósitos, ya que proporciona una configuración de prueba decente. Siéntase libre de ajustar los íconos táctiles, el título de la página, etc., según le parezca.
Desde aquí, todo lo que tenemos que hacer es desplazarnos por la documentación, capturar los elementos que deseamos y incluirlos en nuestro HTML. ¡Realmente es así de fácil!
Barra de título
Lo primero que vamos a incluir es una barra de título azul que se encuentra en la parte superior de la pantalla. Hacer esto es fácil. Para comenzar, coloque el siguiente código dentro de la etiqueta del cuerpo en su HTML.
Este elemento de encabezado sirve como contenedor para nuestra barra de título. Ahora vamos a lanzar en un h1 con un título? clase asignada
Ahora, si cargamos esta página en un iPhone, veremos una bonita barra de título de estilo iOS en la parte superior de la página. Bastante simple, verdad?
Vamos a hacer ese bar un poco más interesante, ¿vale? Usando una etiqueta de anclaje con el botón? Prev? y? boton siguiente? Clases, podemos tomar nuestra barra de título de puramente estética a funcional.
Una vez más, estamos viendo el poder de este marco en el trabajo. iOS hace no Estilo de estos elementos HTML como este por defecto, Ratchet está haciendo todo el trabajo pesado aquí.
Deslizador
El paso anterior describe bastante bien el proceso básico de creación de un prototipo de su aplicación o página web. Desplácese por la documentación, encuentre un elemento que desee usar, luego pegue y modifique el código. A continuación, incluiremos algo un poco más impresionante: un control deslizante de imagen.
El contenido div
Antes de lanzarnos al control deslizante, hay algo más que debemos incluir. Aparte de la barra de título, todo en Ratchet debe ser lanzado dentro de un div con una clase de "contenido".
Puede crear múltiples divs de contenido o simplemente puede juntar todo lo que necesita en uno. Más adelante veremos cómo usar una división de contenido acolchada para agregar una pequeña separación entre el contenido y el borde de la pantalla.
Código deslizante
El control deslizante de trinquete se compone de un control deslizante? div, que contiene una lista desordenada. Una vez más, asegúrese de que todo esto vaya dentro de su div contenido.
Cada elemento de la lista aquí se convierte en una diapositiva. Puede incluir una imagen y un intervalo para una superposición de texto.
Esto servirá como un solo elemento en nuestro formulario. ¿Cualquier otro elemento necesitará su propio? Grupo de entrada? div. Dentro del grupo de entrada, agregue una etiqueta y un campo de texto con algún texto de marcador de posición.
Esto nos dará un campo para que el usuario escriba un nombre. Ahora repitamos este proceso y agregue dos campos más: correo electrónico y nombre de usuario.
Ratchet activará y manejará todo el estilo de forma complicada para nosotros, lo que nos brinda una forma bonita y hermosa sin ningún esfuerzo serio.
Botón
Nuestra página de aplicaciones se ve bastante bien! A estas alturas ya deberías tener una idea bastante sólida de cómo elegir y correr con Ratchet por tu cuenta, así que vamos a terminar este reto con un elemento más: un botón de envío.
Ratchet tiene estos bonitos botones grandes, pero por defecto, se extienden a todo el ancho del contenedor, lo que no se ve bien en este ejemplo. Como resultado, desearemos implementar el? Contenido rellenado? clase que mencioné antes
Inserta este div justo al final de tu formulario así:
Esto nos dará algunos píxeles de relleno para que nuestro botón tenga algo de espacio para respirar. Ahora solo necesitamos colocar una etiqueta de anclaje dentro de dos clases: button-main y button-block.
Con eso, nuestra página está terminada! ¡Es un prototipo de aspecto bastante nítido teniendo en cuenta que todo lo que hicimos fue copiar, pegar y personalizar algunos fragmentos de HTML!
Demo en vivo: Haga clic aquí para iniciar (debe verse en un dispositivo móvil).
¡Mucho más!
Tenga en cuenta que apenas hemos arañado la superficie de lo que se incluye con Ratchet.Hay muchos más estilos de botones, opciones de barra de título, otras formas; lo suficiente para tener un buen comienzo con un prototipo funcional.
Páginas de enlaces
Ningún prototipo de aplicación de iPhone en funcionamiento valdría la pena sin esa famosa pequeña transición de página de iPhone. Afortunadamente, el archivo Push.js incluido se encarga de esto cuando vinculas páginas. Incluso puede configurar diferentes transiciones: sin escribir ningún JavaScript.
¿Qué pienso del trinquete?
Tres palabras: Ratchet es impresionante. Definitivamente me gustaría ver más documentación completa e incluso algunos elementos más, pero eso es simplemente lo que quiero más de algo bueno.
No tuve casi ningún problema para ponerme en marcha con este framework. A los pocos minutos de su primera descarga, está construyendo grandes prototipos de trabajo. ¿Qué más se puede pedir?
El único problema que encontré es con los títulos de control deslizante. No estoy seguro de lo que estoy haciendo mal, pero no puedo hacer que el texto aparezca en la diapositiva si simplemente sigo las instrucciones en el sitio de Ratchet (algunas modificaciones manuales corrigen los problemas). Aparte de eso, todo funciona perfectamente.
¡Inténtalo!
Ahora que has visto lo que es Ratchet, lo que puede hacer y escuché mi opinión al respecto, toma tu descarga gratuita. Juegue con él durante unos minutos, luego deje un comentario a continuación y háganos saber lo que piensa. ¿Has encontrado otros marcos similares? ¿Cómo se comparan con Ratchet?