Ejecutar una aplicación Angular en Cordova

Ejecutar una aplicación Angular en Cordova

Últimamente me he dedicado a encapsular una aplicación Web hecha en Angularjs (versión 1) en una app Cordova para los tres principales sistemas operativos: Android, iOS y Windows Phone. Algo que a priori parecía que no me iba a dar mucho trabajo porque ya tengo experiencia en Cordova ha sido un pequeño via crucis de errores y de patearme páginas de ayuda y posts de Stackoverflow.  En este post resumo lo que he aprendido estos dias de momentos de desesperación y de tirarme de los pelos. A tener en cuenta en todas las plataformas   1 – HTML5 mode En versión web es habitual poner el modo HTML5 del locationProvider a true para tener las URL’s sin las dichosas #. Queda mucho más limpio y hace que no se parezca más a una web de toda la vida. Pero en Cordova no funciona, ni falta que hace ya que la URL no se ve, pero si no lo sabes te puedes volver loco ya que el enrutamiento no funciona y al intentar ir a otra página desde el móvil se te queda cara de tonto. En mi caso he querido tener el mismo código para la web que para la aplicación Cordova ya que así evidentemente el mantenimiento es más sencillo. Para diferenciar código no común simplemente miro si en el objecto window está el objeto cordova que se carga sólo en el index.html de Cordova que es el único elemento no común en mi proyecto. Con una tarea gulp construyo el build para web o Cordova y es la tarea la que coje el index correcto. Por tanto para asignar...
Tutorial desarrollo de extensiones Chrome (2ª parte)

Tutorial desarrollo de extensiones Chrome (2ª parte)

Después de la primera parte del tutorial de extensiones Chrome voy a continuar añadiendo un poco más de funcionalidad a la extensión de la entrega anterior para mostrar más cosas que podemos hacer con la API de extensiones de chrome. El código completo de la extensión se puede consultar en mi github. Y también se puede instalar la extensión desde la Chrome Store.   En la entrega anterior expliqué cómo hacer una extensión para añadir un contador de letras en el Gmail. Ahora vamos a guardar estadísticas de las letras escritas cada dia y mostraremos en un popup una gráfica con esa información. Para guardar las estadísticas usaremos la API chrome.storage y para acceder a ella no podemos hacerlo desde código inyectado en gmail.com por lo que habrá que hacerlo desde un proceso asociado a la extensión. Para ello usaremos el “background” que es un proceso que se arranca con el navegador y se ejecuta en segundo plano controlando los eventos de la extensión. Para ello definiremos en el manifest el script que vamos a usar como background que será el background.js En el manifest también definiremos el popup de la extensión con “browser action”, aquí se declara el icono que aparecerá en la barra y el html que se ejecutará al hacer click en el icono.   manifest.json { "name": "Gmail Letter Counter", "manifest_version": 2, "version": "2.0.6", "short_name": "Gmail Letter Counter", "icons": { "48": "img/gmail.png", "128": "img/gmail128.png" }, "background": { "scripts": ["js/background.js"] }, "description": "Gmail Letter Counter by Oscapps", "content_scripts": [ { "matches": ["https://mail.google.com/*"], "js": ["jquery/jquery-2.0.3.min.js","js/inject.js"], "css": ["css/inject.css"] } ], "permissions": [ "storage" ], "browser_action": { "default_title": "Tutorial Chrome", "default_icon": "img/gmail.png",...
Nueva Extensión Chrome “New Tab Manager”

Nueva Extensión Chrome “New Tab Manager”

Recientemente publiqué una nueva extensión de Chrome que aprovecho para anunciar aquí junto a su código y una pequeña explicación por si a alguien le interesa. El código está en mi Github. Y la extensión se puede instalar desde la Chrome Store.   La extensión sirve para administrar extensiones de tipo “Nueva Página”. Al abrir una nueva pestaña en Chrome se muestra por defecto la siguiente página con accesos directos a las webs más visitadas y el buscador de google. Además se puede acceder a las aplicaciones de Chrome instaladas.   Hay muchas extensiones para modificar esta pestaña y usar otra con otras funcionalidades que nos guste más. Algunas son muy populares como Speed Dial o Earth View from Google Maps. El problema es que lógicamente sólo puedes usar una de estas extensiones a la vez y si quieres probar varias tienes que ir desactivando y activando extensiones con el administrador de extensiones. Y si estás atado a una extensión en concreto (como me pasa a mi con speed dial) no puedes usar ninguna más. La extensión New Tab Manager soluciona todo esto ya que en su página de configuración sirve para administrar extensiones de nueva pestaña, facilitando la prueba de este tipo de extensiones y además se puede asignar una de ellas al icono de la extensión para usar dos al mismo tiempo. En la página de configuración se muestran 128 extensiones (actualmente, se irán añadiendo más) permitiendo realizar las siguientes acciones: Se pueden instalar y desinstalar extensiones y activar y desactivar las instaladas. La nueva pestaña por defecto será una de las que esté activa mostrándose en color verde. Las...
Tutorial desarrollo de extensiones Chrome (1ª parte)

Tutorial desarrollo de extensiones Chrome (1ª parte)

En los últimos años las extensiones de navegador han ganado mucha popularidad, y  algunas incluso se han hecho imprescindibles en nuestro uso diario de internet. De echo a menudo nos hacen ser más fieles a un navegador por ser el que tiene las extensiones que más usamos. Aunque todos los navegadores modernos tienen extensiones, el navegador que a mi parecer tiene más y mejores es Chrome.  De cara al desarrollo de extensiones no tengo ninguna duda que el mejor es Chrome, tiene la mejor API y el mejor sistema de permisos y de publicación en la Store. El desarrollo para Firefox puede llegar a ser bastante más complicado  y la publicación en su store es una auténtica pesadilla de varias semanas sólo comparable a la de publicar una app de iOs en Itunes.   Comienzo pues una serie de tutoriales para introducirse en el apasionante mundo del desarrollo de extensiones de Chrome. Quizás más adelante haga la misma extensión de ejemplo para Firefox y también alguna app de chrome que tienen bastantes similitudes con las extensiones. Para hacer extensiones se usa la misma tecnologia que el frontend de cualquier web: HTML, CSS y javascript. Además tiene una gran ventaja que a mi personalmente me encanta: te olvidas totalmente del crossbrowsing, o sea que puedes concentrarte en programar para webkit  (además actualizado), y sobre todo ¡olvidarte del p%$& Explorer!. Olvidate de polyfills, modernizr y demás historias, aquí puedes usar todo lo que se te ocurra que te va a funcionar  (bueno o casi todo).   Y sobre todo, tienes la potente API de chrome que permite interactuar con el navegador para todo lo...
Cómo hacer un Iframe responsivo

Cómo hacer un Iframe responsivo

Uno de los problemas típicos al insertar un iframe en una página es la de darle un tamaño variable dependiendo del contenedor, o dicho de otro modo: que tenga un comportamiento “responsivo”. Un iframe tiene parámetros de width y height, por lo que podemos poner un porcentaje en width para que sea relativo al contendor, pero tenemos el problema que eso no lo podemos hacer en el height por lo que el aspect ratio variaria según el tamaño del contenedor lo que resulta muy molesto especialmente en un video. Para solucionar este problema usaremos un div que contendrá el iframe   <div class= "wrapper"> <iframe src="https://www.noteboardapp.com/oscardediosrodriguez?embed" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> 1234 <div class= "wrapper">  <iframe src="https://www.noteboardapp.com/oscardediosrodriguez?embed" frameborder="0"    allowfullscreen="allowfullscreen"></iframe></div>   Y el CSS necesario: .wrapper { position: relative; width: 80%; height: 0; padding-bottom: 75%; overflow: hidden; } .wrapper iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } 1234567891011121314 .wrapper {    position: relative;    width: 80%;    height: 0;    padding-bottom: 75%;    overflow: hidden;}.wrapper iframe {    position: absolute;    top:0;    left: 0;    width: 100%;    height: 100%;}   La capa en la que “envolvemos” el iframe la posicionamos con absolute para posteriormente poder posicionar el iframe relativamente al wrapper. El width lo pondremos con el porcentaje que nos interese respecto al contenedor de la página y el height a cero. En el padding-bottom está la parte más interesante del div exterior. La altura la ponemos a cero por no poder poner porcentaje porque es con el padding con lo que controlaremos la altura con el aspect ratio que deseemos. En el caso del ejemplo he querido un 75%. Por ejemplo para el aspect ratio de los videos a  16:9 pondriamos un padding-bottom de 9/16 *...
Animación con CSS del border radius

Animación con CSS del border radius

Hace un tiempo vi un video de una presentación de Lea Verou, uno de los cracks mundiales del CSS,  sobre la propiedad  border-radius. Al principio llama la atención que se pueda hablar mucho rato sobre esta propiedad, pero como tantas otras, sobre todo de CSS3, esconde en su interior mucha más potencia de lo que parece. Uno de los momentos estelares del video es cuando combina el border-radius con animación consiguiendo un efecto muy potente sólo con CSS y unas pocas líneas de código. El efecto es el siguiente:  (en el video de Lea es más espectacular porque anima un gráfico SVG más vistoso, la imagen de la cabecera de este post).   El video, muy recomendable, es este: http://vimeo.com/70171266 el ejemplo que menciono está en el min 34.   Voy a hacer una breve introducción a la animación CSS y al border-radius para explicar este ejemplo.   Animación CSS La ventaja principal de la animación CSS respecto a hacerla con javascript es que es más óptima y consume menos recursos. Es más fácil que ordenadores poco potentes la realicen con suavidad. Está disponible en todos los navegadores modernos desde hace unas bastantes versiones excepto, como no, nuestro amigo Internet Explorer que sólo la permite desde IE 10. A continuación, para simplificar, pondré la  sintaxis básica sin los prefijos de los diferentes navegadores: Primero hay que definir en el elemento a animar el nombre de la animación, el tiempo de cada iteración y las veces que se realizará la animación.  Con alternate conseguimos que la siguiente iteración sea en el orden contrario a la anterior: .elemento-a-animar { animation: nombre 1s infinite alternate; } 1234 .elemento-a-animar{  animation:...
Sublime Text vs Brackets

Sublime Text vs Brackets

Actualmente hay dos editores que podríamos decir que estan de moda entre los desarrolladores web especialmente de frontend (en backend los javeros dificilmente dejaran Netbeans o Eclipse por sus facilidades para compilar y debugar en Java y los que trabajen con tecnologias Microsoft igualmente estan atados a Visul Studio).  Estos editores son Sublime Text y Brackets. (A dia de hoy acaba de entrar con fuerza Atom de Github pero todavía no lo he probado porque sólo está disponible para OSx). Sublime Text Es uno de los editores más populares del momento.  Destaca por su velocidad y capacidad de personalización. Está disponible para Windows (incluida versión portable), Linux y OSx. No es gratis, la versión registrada cuesta 70 dólares, pero se puede usar gratis indefinidamente, aunque cada cierto tiempo se muestran ventanas pidiendo que te registres. Sublime está hecho con phyton y se puede personalizar con plugins echos con este mismo lenguaje.  Hay muchos plugins disponibles creados por la comunidad que hay alrededor del editor.  El primero que hay que instalar es Package Control que sirve precisamente para administrar plugins, desde su diálogo se pueden ver los plugins existentes. Actualmente el editor va por la versión 3 que está en beta desde hace meses. Yo llevo usando esta versión desde que salió y es totalmente estable, es más rápida que la 2 y tiene algo para mi imprescindible que es la poder ir a la definición de una función pulsando F12 en el nombre, aunque parezca increible esto no lo tenía la anterior. Por contra la versión 3 tiene el problema que los plugins de la 2 no son compatibles con la 3 y se...
Inauguración blog

Inauguración blog

Queda inaugurado el que dentro de un tiempo será uno de los blogs más populares sobre programación Web, herramientas de desarrollo e Informática en general. Bueno, supongo que no llegará a tanto pero al menos seguro que compartir lo que vaya aprendiendo me ayudará a consolidar más los conocimientos adquiridos (pedazo frase para la...

Warning: Parameter 1 to W3_Plugin_TotalCache::ob_callback() expected to be a reference, value given in /homepages/35/d513000899/htdocs/wp-includes/functions.php on line 3598