Framework7 | Tutorial Español | Parte 1

25 enero, 2017

 

 

 

 

 

Hola a todos, los frameworks cada vez se utilizan más para proyectos que requieren de un desarrollo más rápido, ya sabemos todos lo que es hacer una app a codigo sin utilizar ningún framework lleva mucho tiempo hacerla para que quede perfecta, pero y si utilizamos un framework que nos de las opciones más básicas (y las no tan basicas) para construir nuestra app.

Siguientes Partes de este tutorial

Pues ahí es donde entra Framework7, uno de muchos, pero bajo mi punto de vista uno de los mejores que hay es muy fácil implementar y los resultados son muy buenos Este Framework nos provee de las utilidades básicas de la aplicación, Notificaciones, chat, animaciones, sliders, menús, etc.

En esta primera parte voy a explicar como empezar y como realizar una estructura básica para empezar a trabajar sobre ella, muchos de vosotros me preguntáis como se prepara un proyecto para Framework7 ya que puede generar dolores de cabeza sobre todo la primera vez.

En primer lugar descargamos de la web oficial el zip que contiene tanto las librerías necesarias como ejemplos, pero en este caso vamos a generar un ejemplo propio, este tutorial quiero seguirlo para repasar todos los componentes disponibles en Framework7.

Go!

Puedes descargar el zip desde esta dirección, al hacer este post la versión actual es la 1.5.2

Una vez que tenemos el contenido descargado y descomprimido vamos a crear un proyecto Phonegap

Ahora entramos en nuestro directorio de proyecto y nos dirigimos a la carpeta js copiamos la librería framework7.min.js situada en el zip que descargamos anteriormente en la carpeta dist/js/ lo copiamos y lo pegamos en nuestra carpeta js.

Haremos lo mismo con las hojas de estilo, tenemos dos opciones, utilizar Material de Android o Diseño de iOS, yo suelo trabajar con el material de Android para las dos plataformas ya que da más color y queda mucho mejor que el diseño de iOS, que ya sabemos todos como es.

Para la hojas de estilos copiaremos de la carpeta dist/css los archivos framework7.material.min.css y framework7.material.colors.min.css, a la carpeta css de nuestro proyecto.

Ya tenemos lo necesario para empezar a trabajar en nuestra aplicación, pero falta lo más importante, agregar al index.html las referencias de css y js que anteriormente hemos copiado, así.

Ahora el js

Yeah! Ya podemos empezar a codear…

La estructura básica de Framework7 la podemos encontrar aquí aunque os dejo el index.html como quedaría

Ya tenemos la estructura básica, lo siguiente es borrar el contenido del index.css que tenemos ya que tiene estilos de la app hello-world de Phonegap que no necesitaremos. Luego podremos añadir estilos para modificar los de Framework7

Esto lo editaremos más adelante. Ahora lo que tenemos que modificar es el archivo index.js que eliminaremos algunas cosas que no necesitaremos ya que vienen al igual que el archivo css de la aplicación hello-world. Debería quedar así.

Nuestra App está lista, mostrará la estructura básica, un header con el nombre de nuestra aplicación, por defecto el color de la aplicación es azul, podemos cambiar el tema añadiendo una clase a la etiqueta body, class=”theme-COLOR” los colores disponibles los encontramos en esta dirección (red, green, orange, black, white, etc.).

En la siguiente parte agregaremos un menú lateral con apertura con haciendo slide y agregaremos páginas hijas a nuestra aplicación, espero que se entienda todo, podéis utilizar los comentarios para cualquier duda, recordad que estoy en Twitter seguidme para futuras actualizaciones de este tutorial o nuevos post relacionados.

Saludos y Happy Code!