toggle

The process of create my first Mobile App with AngularJs & PhoneGap

meeting-time-cost_detail

March 1, 2014: Thinking about the new App

Lately I’m feeling a little bit outdated in my job, because some of the new company projects are based on technologies which I’ve never used before like:

That’s why I want to start a new personal project base on some of those technologies, to learn to use them and became a better front-end developer. After thinking some days about it, I’ve decided to create a Mobile App to check the money that a meeting is costing, based on the amount of people in the meeting and theirs salaries. I choose this app because:

  • Although this idea is no new at all on the markets, I didn’t found a nice app to do this task, at least on Android, all of them are ugly (in my opinion, of course), so I think I can create a better and nicer app.
  • It’s quite easy to develop, so I can focus on learning the new technologies, instead of wasting time in doing other kind of things.
  • I will use it, and I also  hope other people will do. My company, Paradigma Tecnológico,  it’s a fabulous company to work in , but like most of companies has a lot of meetings everyday. I know meetings are necessary, but I hate when a meeting take to long and people start talking about things not related with the meeting´s topic. I hope this app can make people try to finish earlier their meeting, saving money for the company, and time for their employees.

It will be an hybrid app (one app that can be install on IOS, Android, Windows Phone,… without the need to make a source code for each platform) compile with PhoneGap. I choose PhoneGap because:

  • It is easier and faster for me. I’m a front developer, so I feel very comfortable with HTML, JS & CSS.
  • I think  learn PhoneGap will be more useful for my job that learning native code (IOS or Android). My company is full of great developers that can code much better than me native apps.
  • This App is small and it doesn’t use phone specific capabilities, so I hope that it would be as efficient with PhoneGap that with native code.
  • Get more devices with less effort. I’ll create just one app, but almost everyone will be able to download it and use it.
  • I want that the app also can be accessible through the web browser. PhoneGap uses standard technologies like HTML, CSS and JavaScript, so the app must be able to run as a web page.  So people will be able to use it with out the need of download it and install it on their devices.

(más…)

Adaptar el alto y ancho al embeber un iframe de Youtube, Vimeo, …

Uno de los problemas que surgen al hacer una web responsible es el de querer mostrar un iframe de Youtube, Vimeo, etc… Los iframes que nos facilitan estos proveedores suelen tener asociado una anchura y altura fijas, por lo que difícilmente se van a adaptar a nuestro flamante diseño fluido. Lo bueno, es que ya hace tiempo alguien muy sesudo se encontró con este problema, y le dio una solución de lo más sencilla, para que al altura del iframe siempre sea relativa a su anchura.

video_responsive

<div class="responsiveContent">
    <iframe src="//www.youtube.com/embed/_veOIvMWazU" 
            allowfullscreen="" frameborder="0"></iframe>
</div>

 

.responsiveContent {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.2%;
  margin-bottom: 20px;
}
.responsiveContent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Como vemos en el código la solución pasa por:

  • Quitar toda referencia a width o height en la etiqueta del propio iframe
  • Crear un contenedor para el iframe con altura 0
  • La altura vendrá definida por el padding que le demos al contenedor. Al darle el padding en porcentage, la altura siempre sera el x% de la anchura del padre.

Podéis ver este ejemplo funcionando en mi querido framework paragridma.

Lo único que tendréis que tener en cuenta es el aspect ratio del vídeo que queráis mostrar. En caso de no coincidir se deberá de modificar el padding del contenedor.

Espero que este truqui os sea de utilidad.

Ajustar el tamaño de texto según su contenedor

En mi último proyecto necesito ajustar el tamaño de texto según el tamaño de su contenedor. Inicialmente opte por usar el plugin FitText.js, que aunque funciona muy bien no era lo que necesitaba, ya que yo desconozco el tamaño de la cadena de texto, y con fitText  necesitas saberlo para proceder a ajustarlo.

Por eso, y gracias a mi compañera Nerea, voy a usar esta función, que encaja mejor con lo que busco:

ACTUALIZACIÓN (Nov-13): La función que usaba tenía serios problemas de rendimiento, y la he actualizado mejorando bastante su comportamiento y funcionalidad. A parte de mejorar el rendimiento, tambien he añadido 2 parametros. El primero «set_max_size» es para decirle al plugin si quieres limitar el redimensionado a un tamaño máximo (el dado por el tamaño del texto en el CSS) y si quieres un tamaño mínimo «min_size»

adjustTextSize

 

(más…)

Prueba tu web en diferentes dispositivos con Chrome

Hoy, gracias al articulo de Setup to Build Responsive Websites de Eric Wendelin he descubierto que con el inspector de código de Google Chrome, se puede cambiar el user agent y el tamaño de la pantalla, para comprobar cualquier web en varios dispositivos móviles (iPhone, Android, Blackberry,…), o diferentes navegadores (Internet Explorer 7, 8 y 9, Firefox).

(más…)

Llego la hora del responsive design

Ya era hora. Tanto hablar de responsive design, de internet en el móvil, etc, etc… y luego en casa del herrero… diseño fijo no adaptado para móviles.

He retomado el diseño del nuevo responsive vissit, que podéis ver a tamaño completo aquí.

De momento doy el diseño por cerrado, aunque cualquier comentario que me hagáis será muy tenido en cuenta. Ahora el siguiente paso es comenzar con la maquetación, y después de varios test lo subiré a producción para que podaís jugar con él.

El principal cambio de esta nueva versión será lo fluido de su maquetación, pero también hay ligeros cambios en el diseño: nuevo logotipo, y tipografía de los titulares y botones. He optado por una imagen más redondeada, que creo encaja más con el resto del diseño. También añadiré un par de slider en la home, uno con mis últimas imágenes  subidas a Instagram y otro con el portfolio, así como acortar la parte a mostrar de los post en la home, y añadir una navegación para recorrer las diferentes paginas de posts (no se como no me había dado cuenta hasta ahora que no lo tenía).

¿Os gusta? Hablar ahora o callar para siempre 😉

iosSlider: Responsive and touchable Carousel

Después de llevar todo el día buscando un buen carrusel para usar en mis proyectos he conseguido encontrar lo que buscaba:

  • Un carrusel que se adapte en tamaño, para poder ser usado en los proyectos de responsive design.
  • Válido tanto para ordenadores de escritorio como para terminales táctiles (móviles y tablets)
  • Que las animaciones se hicieran con el acelerador hardware de CSS3 para que funcione de una manera más fluida.
  • Opensource

Finalmente me he decantado por iosSlider . Tiene muy buena pinta, y está muy bien documentado.

Todavía no me he «peleado» con el, pero ya me muero de ganas por meterle mano.

Otra alternativa también muy atractiva era TouchCarousel, pero el hecho de que sea un plugin de pago (aunque tan solo son 10$) me ha hecho decantarme por iosSlider.

Trucos para mejorar resolución de imágenes en móviles iPhone y Android

No sabíamos muy bien por que las imágenes de nuestras aplicaciones web no se veian 100% nitidas en nuestros terminales móviles, pero gracias al buen artículo publicado en thesedays.com hemos mejorado la resolución de las imágenes en móviles iPhone y Android.

Por defecto, iPhone 4 muestra las imágenes al 200% de su tamaño, ya que su resolución es mucho mayor que la de su hermano pequeño. La solución es duplicar las imágenes de la aplicación al doble de su tamaño y usar una media querie en nuestro CSS que haga referencia a dicha imagen para este tipo de dispositivos.

.myImage {
 height: 40px;
 width: 100px;
 -webkit-background-size: 100px 40px;
 background: url(&quot;images/myImage.jpg&quot;);
}

@media screen and(-webkit-device-pixel-ratio: 2) {
 .myImage {
 background: url(&quot;images/myImage@2x.jpg&quot;);
 }
}

Debemos de tener en cuenta dos lineas de este CSS:

  • -webkit-background-size: fuerza al navegador a mostrar la imagen de fondo al tamaño deseado. Aquí pondremos el tamaño de la copia «pequeña». Así la copia grande de la imagen se repesentará al tamaño de la pequeña
  • @media screen and (-webkit-device-pixel-ratio: 2):  Media querie para iPhone 4. Lo que esté desde de las llaves solo lo ejecutara iPhone 4 (o futuros terminaes que tengan un pixel ratio de 2)

¿Y que pasa con los móviles Android?

Vale, haciendo esto todo nos va a ir mucho mejor en iPhone 4, pero que pasa con los Android. Yo tengo un Samsung Galaxy S II, y tenía el mismo problema. También veía las imágenes poco nítidas.

Mi primera solución, ha sido el remplazar la media query del pixel ratio por otra para todos los navegadores webkit (practicamente todos los que se usan ahora en móviles y tablets):

@media screen and (-webkit-min-device-pixel-ratio:0) {
}

Con esto podremos hacer el «truquito» del redimensionado de imágenes en todos nos navegadores webkit.

El resto de navegadores seguirá viendo la imagen pequeña sin problemas.

Estoy empezando utilizar esta técnica, y puede que surjan muchos bugs. Si conocéis algún sistema mejor para resolver este problema contármelo, y lo publicaremos en la web.

Últimos consejos

Tampoco debemos de olvidarnos de otros trucos para mejorar nuestra maqueta en móviles como:

  • Usar la siguiente meta etiqueta:
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;
  • Forzar al navegador a no redimensionar el texto con la rotación de la pantalla
body {
-webkit-text-size-adjust: none;
}
  • definir un ancho minimo de 320 pixels
min-width: 320px

Media Queries en Internet Explorer 6-8

Surgen muchos problemas a la hora de hacer aplicaciones web fluidas con responsive design. Uno de ellos es que Internet Explorer (hasta su versión 9) no acepta nativamente las css media-queries (mostrar estilos diferentes según el tamaño del navegador).

Hay unos cuantos plugins javascript que solucionan este problema:

  • respond.js: quizás el más popular, pero yo no lo he usado por que la necesidad de tener que incluir varias llamadas a diferentes ficheros. El motivo de tener que hacer esto es que el plugin hace una petición por ajax de los CSS con cada redimensión.
  • css3-mediaqueries-js: Mi elegido por la simpleza, y por que simplemente funciona. Su alcance es más limitado, pero es mas que suficiente para el uso que yo hago de

Y vosotros, ¿Cual habéis usado?

Zepto.js, buena alternativa incluso para Internet Explorer

Como los que me sufrís todos los días ya sabéis, últimamente me esta dando muy fuerte por el desarrollo de aplicaciones web adaptadas tanto para PC como para móviles [Responsive design] y por los templates de Javascript.

En realidad no creo que haya alternativa a «pringarse» con estos dos temas, ya que el futuro (bueno, en realidad el presente) del desarrollo de front pasa por su dominio. Y si, ya que que mi propia web necesita un rediseño para adaptarse a los móviles, pero tranquilidad, todo llegará.

Hoy quiero hablar de Zepto.js, un viejo conocido que ya he use hace tiempo en algún proyecto móvil, y que ahora he querido recuperar para un nuevo proyecto que estamos desarrollando en Paradigma Tecnológico para una importante cadena hotelera.

Aunque es una aplicación pensada principalmente para dispositivos móviles, debe de ser también usable desde navegadores de escritorio (Chrome, Firefox, Explorer,…).

Este asunto del soporte para navegadores me ha echado atrás en alguna ocasión para optar por Zepto,js como framework Javascript, pero resulta, que las cosas han cambiado, y ahora Zepto.js no solo da soporte a navegadores webkit, si no que también soporta Firefox, Opera, Blackberry,…

Esto solo nos deja a nuestro «querido» Explorer como navegador no soportado. Es cierto que esto es un problema, pero como todo problema tiene una solución.

Ante este problema hay varias alternativas:

  • Descartar Zepto.js y optar por jQuery Mobile: El soporte de Navegadores y entornos que tiene jQuery Mobile es muy amplio, pero para mi es una mala alternativa, ya que el peso de jQuery + jQuery Mobile me parece un gran impedimento para el desarrollo de aplicaciones móviles que carguen rapido en los dispostivos con las velocidades de conexion que disfrutamos hoy en día.
  • Aprovecharse de que Zepto.js y jQuery usan la misma sintaxis para usar un «plan B» en el caso de navegadores no soportados por Zepto.js: Esta ha sido mi elegida. Es muy sencillo el cargar jQuery solo en los casos en los que zepto.js no sea soportado. De este modo solo el usuario que use un navegador no estándar deberá «sufrir» los tiempos de carga de la librería jQuery.

El código para cargar jQuery (o hacer lo que se quiera) en caso de no soportar Zepto.js es:

if ('__proto__' in {}) {
// IS NOT IE
} else {
// IS IE
}

Y vosotros ¿Qué tal vuestra experiencia con Zepto.js? ¿ Preferís algún otro framework Javascript para móviles?