Personalizando mi aplicación Ionic con Sass

Hola a todos.
Con este artículo vamos a terminar con una serie de posts sobre como crear una aplicación híbrida con Ionic y Firebase como tu backend en la que hemos visto cómo configurar nuestra aplicación con servicio de autenticación contra un servidor Firebase, y como personalizarla utilizando los estilos proporcionados por Ionic.

Si has leido mi artículo Personalizando mi aplicación Ionic, en él, comenzamos a modificar el estilo de la aplicación utilizando los estilos proporcionados por Ionic. Pero …

¿Qué pasa si quieres modificar tus propios estilos con tus colores corporativos, fuentes etc…?

Pues bien, si lo que queremos es crear nuestros propios estilos, debemos editarlos con Sass. Te dejo mi artículo sobre Cómo instalar Sass si aún no lo has instalado donde te doy unos primeros pasos para empezara a utilizarlo.

Para comenzar descárgate la aplicación en https://github.com/cookyourweb/Ionic-Firebase-Starter-App-Changed-Styles y sigue las instrucciones de instalación.Leer más

Personalizando mi aplicación Ionic

En éste artículo vamos a ver como empezar a cambiar nuestros estilos de la aplicación Ionic que creamos en el artículo anterior: Cómo crear una aplicación híbrida con Ionic y Firebase

Para comenzar vamos a descargarnos la aplicación. Si no la tienes creada aún.
Esta aplicación es una plantilla básica proporcionada por Ionic que cuenta con un sistema de pestañas y al que le hemos añadido un login que conecta con un servidor Restful Firebase. Puedes descargártela de mi cuenta de Github: https://github.com/cookyourweb/Ionic-Firebase-Starter-App

Sigue las instrucciones para poder instalártela:

Abre un terminal en modo administrador e instala el Ionic si aún no lo tienes instalado con la siguiente instrucción:
Sitúate en el directorio donde quieres instalarlo

npm install -g ionic cordova

ionic start myIonicFirebaseApp tabs

Leer más

Cómo crear una aplicación híbrida con Ionic y Firebase

Hola a todos, para empezar con ésta artículo os voy a decir que es esto de una aplicación híbrida.

Una aplicación híbrida es aquella que puede servir con la misma programación para fabricar aplicaciones con el mismo Look & Feel que una aplicación nativa(Android e Ios) pero que está programada al más estilo web (HTML5, CSS3, Angular).

Vamos a utilizar para este ejemplo dos plataformas muy punteras que están siendo utilizadas para éste fin y que con un poco de conocimientos web, puedes llegar a utilizar sin problemas para tu aplicación.

El Framework Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.Es un Front-end SDK para aplicaciones móviles.

El Firebase es la nueva y mejorada plataforma de desarrollo móvil en la nube de Google. Se trata de una plataforma disponible para diferentes plataformas (Android, iOS, web). Fue comprada por Google en el 2014 y han estado mejorándola desde entonces
firebase-ionic-ios-android
Firebase es una plataforma de backend para construir aplicaciones móviles y web. Entre sus características se incluye base de datos de tiempo real, autenticación de usuarios y almacenamiento (hosting) estático.

Con ésta breve introducción vamos a ponernos manos a la obra, para que podáis apreciar el poder de estas dos herramientas utilizadas juntas y como nos facilitan la vida a los desarrolladores.

¿Qué vamos a hacer en éste artículo? Vamos a crear una aplicación con autenticación

  1. Vamos a instalar el Ionic una vez tenemos configurado nuestro SDK en nuestro equipo.
  2. Nos vamos a dar de alta en Firebase y vamos a configurar nuestro acceso.
  3. Creamos nuestra aplicación con el Ionic.
  4. Conectamos el Ionic con el Firebase.

Leer más

Cómo instalar Sass

Hola a todos, en éste artículo os voy a explicar qué es y cómo instalar Sass con unos primeros pasos para empezar a utilizarlo.
Antes de nada os voy a dejar una pequeña definición de lo que és Sass.

¿Qué es Sass?

Sass es un lenguaje de precompilacion de Css. Sus siglas hablan por si mismas: Syntactically Awesome StyleSheets.
Es un lenguaje de extensión para el Css con el que se puede escribir Css de una manera limpia y evitar los típicos problemas de repetición de código y mantenimiento de nuestras páginas Css. Al ser un lenguaje de precompilación, no se puede interpretar por nuestro navegador directamente, hay que compilarlo primero. Al compilar lo que se hace es pasar el código de SCSS (Sass) a un nivel más bajo que es el Css, de tal forma que pueda ser interpretado por nuestro navegador y aparezcan los cambios de estilo en nuestra página Web.

¿Cómo instalar Sass?

Para instalar Sass, vamos a seguir las instrucciones que nos proporciona su página http://sass-lang.com/install
Cómo podeis ver hay dos formas de hacerlo. La primera utilizando un programa que precompile el código como Codekid, Compass, Koala…
La segunda es con linea de comandos.
En éste artículo vamos a hacerlo utilizando la linea de comandos.
Abre un terminal en modo administrador y sigue las instrucciones que te proporciona la página.

Instrucciones de instalación de Sass

Instrucciones de instalación de Sass

Leer más