por Oscar de Dios | 27 Jul, 2016 | Angular, 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...
por Oscar de Dios | 21 Jul, 2015 | Extensiones Chrome, Javascript
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",...
por Oscar de Dios | 10 Mar, 2015 | Extensiones Chrome, Herramientas, Javascript
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...
por Oscar de Dios | 6 Nov, 2014 | Extensiones Chrome, Javascript
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...
por Oscar de Dios | 17 Jun, 2014 | CSS
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 *...
Comentarios recientes