Frameworks para desarrollo de aplicaciones móviles híbridas

14/06/2019
Artículo original

El desarrollo de aplicaciones móviles mediante tecnologías web ha revolucionado el mercado del desarrollo móvil. Esto es debido a que este tipo de tecnología permite aprovechar las mejores características del desarrollo nativo, además de toda la potencia y facilidades que ofrece la tecnología web.

La tecnología híbrida nació para reducir los costes, los tiempos y facilitar el aprendizaje y desarrollo de aplicaciones móviles, aportando también la posibilidad de crear webs con estos desarrollos. Por ello podríamos decir que este tipo de aplicaciones son totalmente multiplataforma (Móvil, Tablet, Ordenador, TV…). Con el desarrollo de un código único podemos generar aplicaciones para las plataformas deseadas. En el caso de móvil, para Android e iOS.

El desarrollo de aplicaciones híbridas tiene una curva de aprendizaje mucho más suave que el desarrollo nativo. Para desarrollos nativos se requiere tener conocimientos en lenguajes de programación como son Java / Kotlin / XML para Android, y Swift / Objective-C para iOS, además de las herramientas y particularidades específicas de cada plataforma. Ello supone mayores costes al tener que contar con personal específico para Android e iOS, un aumento en el tiempo de desarrollo y tener que coordinar el diseño de modo que se asemeje lo máximo posible en ambas plataformas.

Imagen CC0 por Caspar Camille Rubin en Unsplash

Dependiendo del proyecto habrá que valorar la creación de un desarrollo nativo o híbrido, así como el tipo de tecnologías y los recursos que requiere el proyecto. El desarrollo nativo aporta una integración completa con el sistema operativo y, en cuanto a potencia, suele ser más potente a costa de más costes, tiempo, posibles errores, etc.

Para el caso de aplicaciones híbridas, será necesario disponer de ciertos conocimientos más específicos de framework o frameworks que lo componen, y esto dependerá del lenguaje en el que esté basado (JavaScript, ECMAScript, TypeScript, Dart…), además de otros conocimientos en HTML5, CSS3 (en muchos casos junto a SASS), JavaScript, así como las herramientas de Front-End utilizadas (Webpack, npm, Gulp, herramientas de testing…).

Tras esta pequeña introducción genérica a algunas de las diferencias entre aplicaciones nativas y aplicaciones híbridas, vamos ahora a repasar brevemente los frameworks más famosos para desarrollo de aplicaciones móviles híbridas; los que tienen mayor apoyo y desarrollo por parte de la comunidad. La mayoría de estos frameworks de aplicaciones híbridas que indicamos utilizan por debajo Cordova o PhoneGap para generar las aplicaciones.

PhoneGap / Apache Cordova

PhoneGap, que pertenece a Adobe Systems, permite desarrollar aplicaciones híbridas mediante tecnología web HTML5, CSS3 y JavaScript. Utiliza una API que permite acceder a elementos de hardware del sistema como la cámara, almacenamiento, acelerómetro, etc. Permite integrarse con otros frameworks como por ejemplo jQuery Mobile, etc. Apache Cordova es la versión de código abierto de PhoneGap, la principal diferencia entre estos dos frameworks es que PhoneGap tiene acceso al servicio de compilación en la nube Adobe Creative Cloud permitiendo compilar la aplicación para el sistema operativo deseado e independiente del sistema operativo donde se desarrolle. Consulta este artículo para más información sobre sus similitudes y diferencias.

Al contrario que otros frameworks mencionados más abajo que se ocupan de la parte de la interfaz, PhoneGap/Apache Cordova se encarga de la integración dentro del sistema operativo móvil y de dar acceso a los servicios de éste. Así que probablemente lo usarás junto a alguno de estos frameworks, que en muchos casos sólo ofrecen la parte de la interfaz de usuario en HTML, CSS y JavaScript.

jQuery Mobile

JQuery mobile dispone de una larga experiencia en este mundo de aplicaciones híbridas. Únicamente integra el framework jQuery basado en JavaScript. Su curva de aprendizaje es muy baja, sobre todo si ya se dispone de conocimientos de jQuery y JavaScript. Se ha quedado un poco atrás en cuanto a potencia y diseño si lo comparamos con el resto de nuevos frameworks que hay en el mercado, pero igualmente jQuery Mobile puede utilizarse en paralelo con otros frameworks de diseño como son Bootstrap, Materialize, etc.

Siempre es una buena opción para un desarrollo de la interfaz de aplicaciones híbridas, pero seguramente será necesario utilizar otra serie de librerías o plugins para mejorar su diseño o funcionalidades, dado que no contiene un diseño pensado en los estándares de diseño de las actuales plataformas móviles.

Ionic

Es uno de los frameworks más famosos para el desarrollo de aplicaciones híbridas. En sus inicios Ionic utilizaba el framework AngujarJS y PhoneGap para la parte de integración con plataformas móviles. Sin embargo, en sus últimas versiones (actualmente su última versión es Ionic 4) ha ido incorporando nuevos frameworks Front-End con los que poder desarrollar. Actualmente permite su desarrollo con los más famosos: Angular, React, Vue.JS.

Ionic integra una capa de diseño con estilos css y recursos como iconos, etc. Estos estilos pueden ser adaptados a los estándares de diseño de las plataformas Android e iOS. Otra de sus muchas ventajas es que Ionic tiene su propio IDE de desarrollo que nos facilitará el diseño y programación de aplicaciones.

React Native

React Native es un framework para crear aplicaciones híbridas que está basado en JavaScript y en un conjunto de componentes del framework ReactJS. Actualmente también es uno de los más famosos, y cuenta con una gran comunidad de desarrollo. Forma parte de aplicaciones muy potentes y conocidas, como Facebook, Pinterest, Skype o Instagram.

En el año 2018 la empresa Airbnb se vio obligada a cancelar un proyecto que estuvo desarrollando durante 2 años con React Native debido a que este framework no se encuentra maduro para proyectos de gran envergadura por muchos problemas en sus actualizaciones de versiones, fallos de inconsistencia, etc.

A pesar de todos estos problemas, React Native es una buena elección ya que tiene un potente equipo de desarrollo detrás: un equipo dentro de Facebook. Ello aporta una garantía soporte y desarrollo a largo plazo. Además, cada mes se realizan revisiones de React Native corrigiendo errores o aportando nuevas funcionalidades y mejoras.

Framework 7

Framework 7 no es uno de los más conocidos, pero tiene la ventaja de que es completamente independiente y por lo tanto no tiene dependencias externas en frameworks como Angular o React. En su apartado de diseño se asemeja a Ionic, aportando un diseño ajustado a los estándares de diseño de Android e iOS dependiendo de la plataforma en la que se ejecute.

Este framework tiene una curva de aprendizaje más baja que React Native e Ionic gracias a que se pueden realizar aplicaciones híbridas utilizando simplemente HTML5, CSS3 y JavaScript. No obstante Framework 7 permite su desarrollo también con Vue.JS o React si nos interesa. Para la emulación y ejecución requiere la combinación con Cordova o PhoneGap.

NativeScript

NativeScript permite el desarrollo de aplicaciones nativas mediante JavaScript y TypeScript. También permite el desarrollo mediante el Framework Angular, y en su última versión se ha incorporado también la posibilidad de desarrollar mediante el Framework Vue.js. NativeScript genera aplicaciones verdaderamente nativas, utilizando las mismas APIS que tendrías disponibles desde Android Studio (entorno de desarrollo nativo para Android) y XCode (IDE de Apple para desarrollo nativo en iOS). Incluso permite el acceso a bibliotecas nativas de terceros, aportando así mayores capacidades respecto al rendimiento y capacidades de las aplicaciones. Su mayor inconveniente es que el desarrollo de las interfaces de usuario es más complejo (es XML, no HTML), así como las abstracciones necesarias para acceder al código nativo de manera independiente del sistema. Con NativeScript no necesitarás a PhoneGap/Apache Cordova.

Conclusión

La principal ventaja que aportan las aplicaciones híbridas es que permiten, con un mismo framework, crear una aplicación para las distintas plataformas móviles. Esto permite desarrollar un mismo código para ambas plataformas, cosa que en proyectos nativos no es posible debido a que cada plataforma tiene que ser desarrollada en su propio lenguaje y con sus propias herramientas. Por lo tanto los proyectos híbridos suponen costes menores y menor tiempo.

En realidad cualquiera de los mencionados es una buena elección. Sin embargo, aunque se domine HTML/CSS/JavaScript y algún framework Front-End, mi consejo sería que tuvieses también algunos conocimientos sobre cómo trabajan las aplicaciones nativas y sus lenguajes, ya que te vendrán bien a la hora de compilar las aplicaciones, realizar ciertas tareas como configurar el controlador de versiones o la información requerida por las plataformas de publicación (Play Store, App Store), realizar integraciones con servicios de terceros o hardware, o efectuar modificaciones más avanzadas.

Actualmente uno de los frameworks que se están abriendo mucho hueco es Vue.js, ya que facilita mucho el trabajo y dispone de una curva de aprendizaje baja si se conoce bien JavaScript y jQuery. Por lo tanto, si tengo que elegir, personalmente me decantaría por una tecnología de las anterioremente citadas que permita desarrollar con Vue.js, es decir: Ionic o Framework 7.

Expresiones regulares en JavaScript (y otros lenguajes): búsquedas anticipadas y retrasadas

07/06/2019
Artículo original

Como ya he dicho en muchas otras ocasiones, en mi opinión las expresiones regulares son una de las herramientas más potentes que puede aprender un programador, y no solo para programar ya que sirven también en muchos entornos y herramientas.

Hoy me voy a detener a explicar con detalle el funcionamiento de una característica potente e infrautilizada de las expresiones regulares y que muchos programadores no entienden bien por lo que he podido comprobar. Se trata de las búsquedas anticipadas (lookahead asssertions en inglés) y las búsquedas retrasadas (lookbehind asssertions en inglés), que colectivamente se suelen denominar "Búsquedas alrededor" (del inglés lookaround asssertions).

Nota: la traducción al español de asssertion sería "afirmación" o "aserción", pero en mi humilde opinión se entiende mucho mejor "búsqueda" en este contexto y es por eso que siempre he usado esta palabra en mis libros, artículos y cursos y por eso la verás usada aquí también así.

Vamos a ver en qué consisten y cómo funcionan.

Búsquedas anticipadas

Desde que se presentaron las expresiones regulares en JavaScript hace 20 años, en 1999, se soportaban ya las búsquedas anticipadas tanto positivas como negativas. Vamos a ver en qué consisten.

Búsquedas anticipadas positivas

Una búsqueda anticipada positiva se define mediante el uso de la expresión (?=...), siendo los puntos suspensivos el valor a buscar. Permiten localizar un patrón que vaya justo a continuación de otro, pero solamente captura al primero.

Por ejemplo, la expresión regular /Windows\s(?=7|8|10)/ coincide con el primer "Windows" en la frase "Windows 8 fue muy polémico, más incluso que Windows Vista", pero no coincide con el de "Windows Vista" del final de la frase. Solamente devuelve "Windows" como resultado de la búsqueda, obviando el "8". Este es su aspecto visual si la analizamos con RegExper:

Representación visual de la expresión regular con búsqueda anticipada

Si lo probamos en Regex101 con una frase como la anterior que haga mención a varias versiones de Windows, vemos que solamente captura la palabra "Windows " (con el espacio incluído) cuando va seguido de 7, 8 o 10, pero no en otros casos, que es justo lo que queremos:

Probando nuestra búsqueda anticipada

Otro detalle sutil pero importante a tener en cuenta es que estas búsquedas anticipadas no consumen caracteres, es decir, después de que se produce una coincidencia, la búsqueda de la siguiente coincidencia comienza inmediatamente después de la anterior, no después de los caracteres que componen la cadena de búsqueda anticipada. Un ejemplo tonto de esto para entenderlo... Si tenemos la expresión regular /[abcd](?=ab|cd)/ lo que quiere decir es que va a buscar cualquiera de las letras a, b, c o d que vayan seguidas de las dos letras ab o dos letras cd. O sea:

Visualización de la expresión regular

Si buscamos con esa expresión regular dentro de en la cadena "aabcd" esto es lo que se encuentra:

Se localizan la primera a y la b

Se localizan tanto la primera a como la b. El motivo es el explicado: la parte de la búsqueda anticipada no se cuenta para el avance de la búsqueda, reanudándose ésta a partir de la parte encontrada que vaya delante de los paréntesis. Así, en la primera coincidencia (que son las tres primeras letras aab), se reanuda la búsqueda no después de estas 3 letras, sino después de la primera de ellas (la a) que es la coincidencia que se captura. Por lo tanto puede encontrarse la segunda coincidencia bcd, que de otro modo no se encontraría.

Si te preguntas cómo hacer para que se haga la captura de la cadena completa, es decir, en este ejemplo tonto que se capture aab y no solo la a y por lo tanto se continúe a partir de estos tres caracteres, la expresión correcta sería: /[abcd](ab|cd)/:

La representación visual de la expresión anterior

que solo obtendría como resultado aab, pero ya no bcd puesto que seguiría buscando a partir del cuarto carácter puesto que captura todos. ¿Ves la diferencia con el anterior?

Suena lioso pero no lo es si te paras un poco a pensarlo y lo pruebas con las herramientas que te estoy referenciando.

Búsquedas anticipadas negativas

Las búsqueda anticipadas negativas funcionan de manera idéntica a las anteriores pero a la inversa. Es decir, en lugar de considerar las coincidencias consideran las no-coincidencias.

Se denotan con una expresión como esta: (?!...), o sea, con una admiración final en lugar de un igual, siendo los puntos suspensivos el modelo con el que no queremos coincidir.

Por ejemplo, la expresión regular /Windows\s(?!7|8|10)/ haría justo la búsqueda inversa a la que hicimos antes, evitando las menciones a Windows 7, 8 o 10:

Representación visual de la búsqueda anticipada negativa

Si ahora la ejecutamos para ver cóm actúa, veremos que localiza el "Windows " de "Windows Vista", pero no lo hace con ninguno de los otros:

Resultado de ejecutar la expresión regular

Al igual que las anteriores, la captura no incluye la expresión dentro del paréntesis, por eso es anticipada, con los mismos efectos que en el caso anterior.

Búsquedas retrasadas

Una de las novedades de ECMAScript 2018 o ES9, presentado en junio de 2018, fue la introducción de este tipo de búsqueda que antes no estaban soportadas.

Importante: en el momento de escribir esto solo están soportadas por Chrome 75 o posterior (incluyendo en móviles Android) y los navegadores que comparten su motor, es decir, Opera, las nuevas versiones de Edge y otros menos conocidos como Brave o Vivaldi. Firefox no le da soporte todavía (aunque están en ello) , ni tampoco Safari. Por lo tanto conocerlas está muy bien pero no conviene usarlas todavía en aplicaciones abiertas en Internet donde no controlemos los navegadores que se van a utilizar. Las anteriores, sin embargo, funcionan en todos los navegadores, incluso versiones muy antiguas de Internet Explorer.

Las búsquedas retrasadas son similares a las que acabamos de ver pero se colocan delante del patrón que queremos localizar, no detrás.

Se denotan con una expresión del tipo (?<=...) en el caso de las positivas y (?<!...) en el caso e las negativas. O sea, como las anteriores pero añaden un símbolo de menor delante del igual o de la admiración.

Por ejemplo, por poner un ejemplo "geek", supongamos que queremos localizar en una lista de nombres todos los apellidos de personas que se llamen "Steve", desechando los apellidos de otras personas de la lista. Esto es muy fácil de conseguir con una expresión de búsqueda retrasada positiva como esta: (?<=Steve )\w+ que se representaría visualmente así:

Representación visual de la búsqueda retrasada

Nota: por desgracia Regexper no soporta todavía las búsquedas retrasadas, así que en este caso he tenido que simular el gráfico a mano, pero esto sería lo que mostraría en caso de soportarlas.

Y si la ejecutamos en Regex101 con una lista veremos cómo identifica rápidamente todos los apellidos ilustres de los Steve que hemos metido en la lista (en este caso hay 2):

Resultados de la ejecución en una lista

Lo mismo se puede hacer a la inversa con una búsqueda retrasada negativa, de modo que en nuestro ejemplo localice todos los apellidos de la lista de gente que no se llame Steve. Lograr esto es un poco más complicado ya que ahora debemos indicar más condiciones o nos localizará cosas que no son apellidos, ya que si solo ponemos (?<!Steve )\w+, cualquier palabra que no lleve delante Steve nos valdrá, y eso incluye los propios nombres. Por lo tanto la expresión sería: (?<!Steve )\b\w+$ que nuevamente he simulado en Regexper para que se vea claro su significado:

Representación visual de la expresión regular

Se busca cualquier fragmento de texto que esté al final de una línea, que sea una palabra entera y que no esté precedida por "Steve ". Otra opción similar habría sido quitar el espacio de "Steve " y ponerlo en el patrón a buscar, así: (?<!Steve)\s\w+$ pero nos localizaría los apellidos con el espacio delante (podríamos obtener solo el apellido rodeándolo con un paréntesis para luego poder extraerlo como una subcaptura/subgrupo).

Bien, usando esta expresión podemos ver que localiza perfectamente los apellidos de los no llamados Steve:

Resultado de la ejecución

consiguiendo lo que esperábamos.

Nota: cabe destacar que tanto en el caso de las búsquedas anticipadas com en el de las retrasadas podemos usar varias seguidas, una tras otra, para combinar varias condiciones. NO es tan frecuente verlo pero funciona perfectamente.

En resumen

Las expresiones regulares son una herramienta súper-potente a la que deberíamos aprender a sacar partido a fondo. Si vamos más allá de lo básico pueden llegar a ser muy complejas y bastante crípticas, pero pueden ahorrarnos horas de trabajo en muchas tareas.

En esta ocasión hemos estudiado cómo funcionan las búsquedas adelantadas y retrasadas, de las que no todo el mundo tiene claro su funcionamiento, con algunos ejemplos prácticos. Aunque me he enfocado en JavaScript, en realidad todo lo explicado sirve para casi cualquier otro lenguaje de programación que soporte expresiones regulares, como Java, .NET/C#, Ruby, PHP... así que, como cualquier cosa que aprendas sobre expresiones regulares, te servirá igualmente en cualquier lenguaje o entorno.

¡Espero que te resulte útil!

Cómo hacer un sencillo slider con HTML y CSS (y sin tocar JavaScript)

06/06/2019
Artículo original

Probablemente ya sabes que, cuando el atributo href de un enlace consiste en una almohadilla o hash (#) seguida de una palabra, el navegador hará scroll hasta el elemento cuyo id coincida con dicha palabra. De hecho, esto ya lo vimos en un post anterior.

Esta técnica no sirve sólo para enlaces internos, sino que puedes apuntar con un enlace a un elemento concreto de una página externa para que, al hacer clic, el navegador no solo cargue la página, sino que haga scroll hasta donde quieras.

Por ejemplo, si haces clic en este enlace irás al final de la ficha de nuestro curso de maquetación responsive con HTML y CSS en nuestro catálogo.

Esto más o menos lo conoce todo el mundo que maneja HTML, pero lo que no todo el mundo sabe es que existe un pseudoelemento de CSS para identificar ese elemento al que estamos apuntando. Estamos hablando de :target

Gracias a esto podemos crear un slideshow, un carrusel, una galería de imágenes o simplemente una pequeña presentación sin necesidad de echar mano de JavaScript o jQuery.

El slider paso a paso

En primer lugar preparamos una lista de elementos que queremos mostrar. Dentro de cada <li> pondremos lo que queramos. Yo he puesto texto que forma un mensaje al ir viendo cada diapositiva, pero podrían ser imágenes, audios, vídeos...

<ul class="slider">
    <li id="slide1">En campusMVP</ li>
    <li id="slide2">encontrarás los mejores</ li>
    <li id="slide3">cursos online de programación</ li>
    <li id="slide4">y aprenderás de la mano</ li>
    <li id="slide5">de los mejores profesionales</ li>
 </ul>

Y por otro lado tenemos los enlaces que vamos a usar para mostrar el contenido:

<nav>
    <ul class="menu">
        <li><a href="#slide1">Diapositiva 1<//a></ li>
        <li><a href="#slide2">Diapositiva 2<//a></ li>
        <li><a href="#slide3">Diapositiva 3<//a></ li>
        <li><a href="#slide4">Diapositiva 4<//a></ li>
        <li><a href="#slide5">Diapositiva 5<//a></ li>
</ul>
</nav>

Tampoco tienen por qué ser enlaces de texto. Por ejemplo, si estamos creando una galería de imágenes, aquí podríamos poner los thumbnails (vamos, las imágenes en pequeñito).

El CSS de nuestra galería

Ahora pasamos a aplicarle algo de estilos a nuestra galería para que sea funcional.

Básicamente, lo que vamos a hacer es lo siguiente:

  • Posicionamos de forma absoluta los <li> dentro dentro del <ul> que tiene position:relative;. De esta forma se apilan todos en el mismo sitio por orden de llegada (debajo de todo estará el primero). Si no conoces esta técnica, échale un vistazo a este post sobre posicionamiento absoluto.
  • Todos los elementos <li> de nuestra lista se ocultan con opacidad 0
  • Mostramos el primer <li> dándole una opacidad igual a 1
  • Cada vez que se hace clic en un enlace que apunta a un elemento de nuestra lista, haremos que este elemento pase a tener opacidad 1 gracias a que lo podemos identificar con la pseudoclase :target.
  • Como el primer elemento queda abajo de todo, será tapado por los elementos que vamos haciendo visibles al hacer clic, a pesar de que es el único que siempre tiene opacity:1;

¡Manos a la obra! Para hacer todo esto nuestro CSS podría ser este:

ul, li {
    padding: 0;
    margin: 0;
    list-style: none inside;
}
ul.slider {
    position:relative; /*Necesitamos que el ul sea relativo*/
}
ul.slider li {
    opacity: 0; /*Ocultamos todos los <li>*/
    transition: opacity .5s;
    position: absolute; /*Posicionamos en absoluto los <li>*/
    left: 0px;
    top: 0px;
    margin:50px;
    padding:50px;
    border:2px solid red;
    background:#fff;
}
ul.slider li:first-child {
    opacity: 1; /*Mostramos el primer <li>*/
}
ul.slider li:target {
    opacity: 1; /*Mostramos el <li> al que apunta el enlace*/
}
nav {
    position:relative;
    top:200px;
    left:50px;
}

Y el resultado sería este otro, un poco espartano, pero funcional:

Ahora que ya lo tenemos funcionando, ya solo nos queda aplicarle más CSS con el diseño que queramos, para que sea más bonito.

Yo le he añadido este bloque de CSS:

body, html {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
}

ul, li {
    box-sizing: border-box;
}

ul.slider {
    padding: 30px;
}

ul.slider li {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: gray;
    opacity: 0; 
    transition: opacity .5s;
    padding-top: 30vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: calc( 1.5rem + 1vw );
    text-align: center;
}

#slide1 {
    background-color: #00324b;
    color: #fff;
}

#slide2 {
    background-color: #65bce8;
    color: #00324b;
}

#slide3 {
    background-color: #f90;
    color: #00324b;
}

#slide4 {
    background-color: #00324b;
    color: #65bce8;
}

#slide5 {
    background-color: #65bce8;
    color: #00324b;
}

nav {
    width: 100vw;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    background: #f1f2f3;
}

nav ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

nav ul li {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    box-sizing: border:box;
}

nav a {
    font-size: calc( 1.2rem + 1vw );
    text-decoration: none;
    font-weight: bold;
    color: #00324b;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
    flex-grow: 1;
    text-align: center;
    border-top: 5px solid #00324b;
    border-right: 1px solid #00324b;
    flex-wrap: wrap;
    position: relative;
}

nav li:last-child a {
    border-right: 0;
}

nav a:hover {
    background-color: #00324b;
    color: #fff;
    border-top-color: #65bce8;
}

nav a:active {
    border-top-color: #f90;
    background: #f90;
    color: #00324b;
}

Así queda como una presentación que ocupa toda la ventana del navegador:

Pero no te limites solo a esto, porque puedes darle muchos usos: un portafolio, una pequeña galería de fotos o de productos, navegación por pestañas, diferentes apartados de una web de una sola página...

Puedes descargarte aquí el código de ejemplo.

Espero que este pequeño truco te haya sido útil. Recuerda que, si te quieres aprender bien las entrañas de la maquetación y el desarrollo web front end, tenemos una completísima colección de cursos online creados y tutorizados por profesionales de primer nivel para cubrir todas las necesidades, tanto las de aquel que empieza desde cero en el mundo web hasta las de el que necesita dominar las técnicas más avanzadas de JavaScript y ECMAscript.

Las nubes de Microsoft Azure y Oracle Cloud se unen para ir a por la de Amazon

05/06/2019
Artículo original

Las nubes de Microsoft Azure y Oracle Cloud se unen para ir a por la de Amazon

Microsoft y Oracle acaban de anunciar que están trabajando juntos para ofrecer interoperaibilidad de sus servicios. Los dos gigantes que hasta ahora competían en el negocio de las grandes infraestructuras empresariales en la nube, han decidido unir fuerzas y además ofrecerán nuevas capacidades para sus clientes cortesía de esta asociación.

Gracias a este acuerdo, Microsoft Azure y Oracle Cloud podrán interconectarse, y sus clientes podrán migrar y ejecutar cargas de trabajo empresariales de misión crítica en ambos servicios. Los clientes podrán ejecutar una parte de la carga de trabajo dentro de Azure y otra parte de carga de trabajo dentro de Oracle Cloud.

Ambas plataformas permitirán el uso sin problemas de herramienta de Azure como Analytics y AI junto a servicios de Oracle Cloud como Antunomous Database. La idea es ofrecer a los clientes un único punto de venta para todos los servicios y aplicaciones en la nube que necesiten para ejecutar su negocio.

La batalla de las nubes

Azure Vs Aws Blog

El negocio de la nube está ampliamente dominado por Amazon Web Services, que tiene casi el doble de cuota de mercado que Microsoft Azure, su competidor más cercano. Este acuerdo con Oracle sin duda los hará más competitivos frente a otros rivales como las nubes de Google, IBM o Alibaba, pero especialmente, contra Amazon.

Mientras veteranos de la industria como IMB y Oracle se han quedaron un poco atrás a pesar de llevar décadas de experiencia, Amazon con su plataforma en la nube que lanzó en 2006, se terminó convirtiendo en el ente dominante del mercado.

El crecimiento de esta industria es una de las que tiene mayor potencial actualmente, no por nada Microsoft ha venido apostando más fuerte por Azure que por cualquier otro de sus productos, y de hecho ha sido el causante de que se estén plantando actualmente como una de las empresas más valiosas de todo el mundo, logrando alcanzar incluso el billón de dólares de cotización en bolsa.

La alianza con Oracle les trae a su plataforma todo el conjunto de aplicaciones para ventas, servicios, marketing, recursos humanos, finanzas, cadena de suministro, fabricación e infraestructura de la empresa. Es un acuerdo estratégico para empujar a más clientes empresariales a migrar a la nube, y como explica Don Johnson, Vicepresidente ejecutivo de Oracle Cloud Infrastructure, "podrán hacerlo sin tener que rediseñar nada, y preservando las grandes inversiones que hayan realizado".

macOS Catalina utilizará zsh en lugar de bash como la shell por defecto

04/06/2019
Artículo original

macOS Catalina utilizará zsh en lugar de bash como la shell por defecto

El pasado 3 de junio durante la WWDC 2019, Apple anunció la próxima versión de su sistema operativo de escritorio macOS Catalina, una que llegará con varias novedades como la posibilidad de usar el iPad como segunda pantalla de tu Mac, y la división en tres apps de iTunes.

Sin embargo, entre las muchas cosas que no se comentan en la presentación, están novedades interesantes para los desarrolladores, y una bastante importante es el cambio de shell que sufrirá macOS próximamente: bash va de salida y a partir de Catalina, zsh será la shell por defecto.

Bash va de salida y también puedes cambiar a zsh en versiones anteriores de macOS

Empezando con la beta de macOS Catalina que ya está disponible a través del programa para desarrolladores de Apple, tu Mac usará zsh como la shell por defecto para iniciar sesión y también como shell interactiva. Aunque, también es posible utilizar zsh como la shell por defecto en versiones anteriores de macOS.

Con Catalina, todas las cuentas de usuarios recién creadas utilizarán Z shell por defecto. Si deseas cambiar la shell que usa tu sistema puede hacerlo desde el menú de Usuarios y grupos, y tras ingresar tus credenciales y desbloquear el candado para realizar cambios, podrás seleccionar entre zsh o bash en las opciones avanzadas:

Zsh Bash Macos

Aunque Apple no ha explicado por qué han decidido hacer este cambio, probablemente tiene que ver con finalmente implementar una shell más moderna a la versión de bash que usan actualmente, y también está el detalle de la licencia GPLv3 que usan las versiones más modernas de bash y a la que "Apple es alérgica".

Zsh es muy compatible con sh y bastante compatible con bash. Los comandos y la interacción en general de bash y zsh son casi idénticos, pero zsh incluye bastantes funciones útiles, tanto para usuarios avanzados como novatos que no están disponibles en bash, como por ejemplo, es mejor para autocompletar rutas de archivos y aplicaciones.

Más información | Apple

Por qué debes aprender más lenguajes de programación (incluso si no los vas a utilizar)

04/06/2019
Artículo original

Este artículo es una traducción del artículo "Learn more programming languages, even if you won't use them" de Thorsten Ball en su blog personal, con su permiso expreso. El énfasis en negrita es nuestro.

Imagina que te han entregado una tarea y eres libre de elegir el lenguaje de programación. La asignación implica todo tipo de manipulación de cadenas: leer cadenas, dividir cadenas, recortar, unir y ejecutar expresiones regulares sobre cadenas, todo en UTF-8 y, por supuesto, los emojis deben funcionar. ¿Qué lenguaje elegirías? ¿C? Oh, por favor no.

Otro trabajo, esta vez en una institución financiera. Necesitas realizar decenas de miles de cálculos concurrentes. Tener alto rendimiento es un requisito irrenunciable. ¿Deberías usar... Ruby? Venga. A continuación te cae: crear un script único que cambie el nombre de un grupo de archivos ... ¿lo escribirías en Java? ¿Hacer un descargador de datos de la web... en Python? Programar un controlador para un dispositivo médico con... ¿C#? ¿Swift? ¿Lua? ¿Ves por dónde voy?.

Los diferentes lenguajes de programación son buenos para algunas cosas y malos para otras. Cada uno hace ciertas cosas más fáciles y, a su vez, otras más difíciles. Dependiendo de lo que queramos hacer, podemos ahorrar mucho trabajo si elegimos el lenguaje de programación apropiado, el que hace que resolver el tipo de problema al cual nos enfrentamos sea más sencillo.

Ese es uno de los beneficios tangibles y sensatos de aprender varios lenguajes: añades otra herramienta a tu caja de herramientas y, cuando llegue el momento, podrás elegir la mejor. Pero yo iría un paso más allá.

Creo que es valioso aprender nuevos lenguajes de programación incluso si -aquí viene el golpe- nunca los sacas de la caja.

Imagen ornamental por Tim Mossholder en UnSplash

Las lenguas moldean nuestra forma de pensar*, y cada una lo hace de su propia forma. Eso es cierto también para los lenguajes de programación. Cada lenguaje contiene un modelo mental diferente, una perspectiva distinta sobre cómo pensar acerca de la computación y sobre cómo escribir programas.

Toma el lenguaje SQL, por ejemplo, y piensa cómo moldea tus pensamientos sobre el flujo y la forma de los datos en tu programa. Ahora considera cómo se vería en un lenguaje imperativo y orientado a objetos como Java, o en un lenguaje funcional como Haskell. O en C. Imagina cómo sería un servidor de juegos multijugador si lo programases en Python, en Haskell o en Erlang. O la transmisión y el procesamiento de terabytes de datos en C, en Go, en Clojure. O una interfaz de usuario en Tcl, en Lua, o en JavaScript.

Cada lenguaje de programación es una lente a través de la cual podemos ver el problema que intentamos resolver. A través de algunos de ellos el problema parece complicado, agotador. A través de otros, ni siquiera parece un problema en absoluto, apenas se ve la diferencia con cualquier otra cosa mundana que uno pueda hacer en este lenguaje.

Al aprender un nuevo lenguaje, incluso si lo dejas en tu caja de herramientas para toda la eternidad, obtienes una nueva perspectiva y una manera diferente de pensar en los problemas. Una vez que hayas implementado un servidor de juegos en Erlang, verás los servidores de juegos desde otra perspectiva. Después de haber procesado datos con Lisp, al aprender a pensar en los datos como un conjunto de listas que puedes moldear enviándolas a través de una serie de pequeñas funciones que se pueden componer para formar tuberías de funciones, verás como aparecen por todas partes sombras de este patrón. En cuanto hayas probado por primera vez la administración de la memoria en C, empezarás a apreciar lo que Python, Ruby y Go están haciendo por ti, mientras valoras el esfuerzo de su trabajo. Y si alguna vez has construido una interfaz de usuario en JavaScript con React.js, sabes que estás pensando en usar componentes para la UI, cambiando el modelo de manera fundamental.

Estas nuevas perspectivas, estas ideas y patrones, persisten, permanecen contigo, incluso si terminas por escoger otro lenguaje. Y eso es algo lo suficientemente poderoso como para seguir aprendiendo nuevos lenguajes, porque una de las mejores cosas que pueden sucederte cuando intentas resolver un problema es un cambio de perspectiva.

*Esto es lo que se conoce como relatividad lingüística o hipótesis de Sapir-Whorf. En el contexto de este artículo apoyo la tesis en cierto modo, pero debes saber que entre la comunidad científica su validez aún está muy abierta al debate. Lee este artículo para una introducción a los problemas con esta tesis.

Fundación Teléfonica presenta 42, una escuela gratuita para programadores, sin clases, ni horarios, ni profesores

03/06/2019
Artículo original

Fundación Teléfonica presenta 42, una escuela gratuita para programadores, sin clases, ni horarios, ni profesores

Fundación Telefónica acaba de anunciar 42 Madrid, un concepto de escuela que llega por primera vez a España y que es 100% gratuita, colaborativa, está disponible todo el año las 24 horas del día, y a la que cualquier persona mayor de 18 años puede inscribirse desde ya, sin necesidad de conocimientos previos ni titulaciones.

Lo más interesante de todo es quizás la promesa de inserción laboral para sus participantes, pues aseguran que en las escuelas de este tipo que ya están funcionando en otros países, hay casi dos ofertas de trabajo para cada estudiante.

A diferencia de una escuela tradicional, con 42 no hay libros, ni profesores, ni horarios. En su lugar, los estudiantes aprenden de forma colaborativa entre ellos, utilizando lo que llaman "evaluación peer-to-peer", es decir, cuando cualquier equipo termine un proyecto debe someterlo a la revisión de otros estudiantes.

La escuela, que abrirá sus puertas el 2 de septiembre, estará ubicada en el Distrito Teléfonica en Las Tablas, tendrá capacidad para 900 alumnos de manera simultánea y sus instalaciones estarán abiertas todo el día, todos los días, además dispondrán de espacios diáfanos para los ordenadores, un auditorio para 150 personas, salas de descanso y de ocio, cafetería, una sala de e-Sports y salas de trabajo para reuniones.

Un plan de estudios gamificado diseñado para durar unos tres años y medio

La idea es que los estudiantes busquen por sí mismos el conocimiento y lo compartan. Pero 42 sí tiene un plan de estudios, solo que está gamificado. Cada estudiante tiene un perl y un “nivel de experiencia”, y la finalización de un proyecto se recompensa con puntos que mejoran el nivel de experiencia. Los proyectos disponibles se presentan en forma de árbol, ofreciendo diferentes caminos hacia diferentes temas de informática y programación. Cuando se alcanza un nuevo nivel, se abren nuevas opciones del plan de estudios. Cuando no se supera un proyecto, se puede empezar de nuevo.

Aunque no hay horario, se espera que alcances metas específicas dentro de un tiempo asignado, es decir, hay una fecha límite para los proyectos, pero la gestión del tiempo hasta la misma, la decide cada alumno. El plan de estudios está diseñado para durar unos tres años y medio, pero eso depende de cada uno, puede durar más o menos.

El plan de estudios ofrece más de cien proyectos y actividades sobre programación y ciencias de la computación, incluyendo programación de Unix, programación en C, programación 3D, desarrollo web y más. Puedes revisar el curriculum entero para más detalles.

En total, actualmente hay más de 250 proyectos que se organizan en un árbol de programación con 21 niveles. Esos 21 niveles se dividen a su vez en dos círculos: materias comunes en torno a la programación como algoritmos, sistemas y gráficos por un lado, y por otro, contenidos específicos como inteligencia artificial, ciberseguridad, videojuegos o diseño gráfico, que va eligiendo cada alumno en función de sus intereses.

En Teléfonica dicen que esta metodología cuenta con una eficacia del 100% de inserción laboral entre los alumnos de de todos los países en donde está presente 42, y que durante su paso por la escuela, los alumnos reciben una media de ocho ofertas de empleo.

Cómo me inscribo

42 madrid

Solo tienes que acceder a la web de 42 Madrid y rellenar el formulario con tus datos básicos. Después deberás pasar dos pruebas online: un ejercicio de memoria de 10 minutos de duración y un test de lógica de 2 horas y media.

Los que superen esta fase podrán inscribirse hasta completar el aforo en las denominadas “piscinas”, que son las pruebas decisivas de acceso a 42. Aquí entrarán en contacto con el mundo de la programación a través de proyectos, audiovisuales y del conocimiento colectivo de los compañeros.

Esta fase de acceso es la más dura y la más exigente ya que los aspirantes deberán realizar un total de 13 proyectos y estarán una media de 12-14 horas diarias en la escuela durante un mes. La piscina se realizará en septiembre.

Más información | 42 Madrid - Preguntas Frecuentes

Rendering por todos lados

31/05/2019
Artículo original

Si creaste el contador con Hooks que revisamos con anterioridad, te habras dado cuenta que el contador se incrementa cada segundo, pero no usamos un interval estamos usando setTimeout; esto sucede porque estamos inicializando el setTimeout cada vez que renderizamos el componente y en React esto sucede cada vez que actualizas el estado de un componente, pero si tienes mas de 100000 componentes hijos (tal vez con un poco menos), notaras que empiezas a tener performance issues, antes de hooks la unica forma de solucionarlo es usar uno de las funciones del ciclo de vida de React shouldComponentUpdate pero eso nos obliga a que ese componente sea una Clase (y no queremos clases con Hooks, de hecho no queremos clases del todo :P, OOP is evil).

Para solucionar este posible problema, desde la version 16.6 de React tenemos React.memo que nos ayuda a mostar una version memoizada del componente que queremos, reduciendo drasticamente el numero de repintados en los hijos.

Codigo

Ahora veremos un ejemplo de contador usando React.memo

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Child = React.memo(props => {

leer más

¿Qué significa ir rápido?

27/05/2019
Artículo original

Uno de los temas más controvertidos es el de la velocidad de los equipos ágiles. Muchos no miden la velocidad y los que la miden se quedan en un número. Número adimensional que no se puede comparar con las medidas de otros equipos porque para empezar no sabemos si la base de medida es la misma. Y tampoco con nosotros mismos en el tiempo, porque quien nos dice que los criterios de puntuación no han variado. Quien no mide la velocidad puede no hacerlo por pereza, por desconocimiento o por el firme convencimiento de que no sirve para nada medir […]

Por qué Rust es el lenguaje más amado por muchos programadores aunque es un gran desconocido aún

26/05/2019
Artículo original

Por qué Rust es el lenguaje más amado por muchos programadores aunque es un gran desconocido aún

Una de las bases para ser feliz como programador es que el lenguaje que usamos a diario nos produzca la menor cantidad de dolores de cabeza. Si revisamos las últimas encuestas de stackoverflow sobre desarrolladores nos encontramos con que Rust es el lenguaje de programación más amado por los programadores. ¿Qué tiene este lenguaje que hace felices a los programadores que lo han probado? Todo ello, a pesar de seguir siendo un gran desconocido para muchos programadores.

Ser el lenguaje más amado y más popular, quizás siga estando reñido con otros factores. Ya hemos hablamos de la popularidad de Python y el hecho de no ser un lenguaje relativamente nuevo que está cogiendo un impulso imparable actualmente. Con Rust nos encontramos en el caso de ser prácticamente un recién llegado y un gran desconocido para muchos programadores. Vamos a descubrirlo en detalle y ver en qué casos de uso puede ayudarnos en nuestro trabajo diario como programadores.

Lenguajes Mas Amados Stackoverflow Rust

Mozilla necesitaba a Rust como la pieza fundamental de Servo en Firefox

Rust comenzó a evolucionar gracias al impulso de Firefox y la de un gran número de contribuidores de la comunidad, no sólo de Mozilla

Rust surgió en 2010 en Mozilla como un proyecto personal de Graydon Hoare en busca de un lenguaje que permitiera escribir un código extremadamente rápido al mismo nivel que C o C++ pero sin los problemas de gestión de memoria que había llevado históricamente a ser extremadamente meticuloso para no cometer graves bug en el acceso de memoria y condiciones de carrera en tiempo de ejecución.

Mozilla buscaba un lenguaje extremadamente seguro y capaz de soportar sus exigentes requisitos de rendimiento. Así Rust comenzó a evolucionar gracias al impulso de Firefox y la de un gran número de contribuidores de la comunidad, no sólo de Mozilla. A día de hoy, forma una parte importante de núcleo principal del motor del navegador Servo usado por Firefox, aprovechando las bondades en cuanto a paralelismo, concurrencia y gestión eficiente de la memoria.

Quatum Css Rust

Hace poco hablamos cómo Firefox Quatum CSS había conseguido increíbles tiempos de renderizados. Ello se lo debemos al rendimiento de Rust y su gestión de rápida y segura gestión de concurrencia. Y con un reducido número de bugs ocasionados por situaciones como race conditions o acceso ilegales de memoria.

Rust conduce a la programación de sistemas a la modernidad

Cuando hablamos sobre la programación de sistemas, lo primero que se nos viene a la cabeza es esa parte de la programación en la que los administradores de sistemas utilizan scripts o pequeñas aplicaciones para levantar máquinas. Pero más allá de eso la programación de sistema es mucho más amplia. Se define como el desarrollo de elementos software que otras aplicaciones software van a usar como base. Un buen ejemplo es el que mencionamos anteriormente con Firefox y su motor de Servo, y otro muy importante es el Kernel de Linux escrito principalmente en C/C++.

Rust trae herramientas modernas al mundo de las programación de sistemas:

  • Cargo. Su gestor de dependencias y sistema para la generación de build. Se encarga de la compilación y la gestión de elementos externos a nuestro código procedente del ecosistema de Rust. Así como la librerías de Rust, denominadas craters.
  • Rustfmt se encarga de asegurar la consistencia del coding style entre desarrolladores.
  • Rust Language Server facilita la integración con diferentes IDE para ayudar la compleción de código y la ayuda mostrando mostrando mensajes inline de error sobre el código.

Siempre hemos dependido de C o C++ cuando hemos necesitado tareas donde el rendimiento es importante. Por no decir vital, como en los sistema embebidos o los sistemas de alto rendimiento como la simulación. La búsqueda de un sustituto siempre ha llevado a alternativas más lentas, en cambio Rust asegura un excelente gestión de memoria como gran pilar fundamental junto a un sintaxis moderna.

Sus valores fundamentales es la gestión memoria segura garantizada en tiempo de compilación, utilizando los conceptos de ownership del dato y borrowing de memoria. Además de asegurar en tiempos de compilación no nos encontraremos con condiciones de carrera. Todo ello mediante abstracciones de alto nivel con inferencia de tipos, sin coste en tiempos de ejecución, muy cercanos a los valores que puede reflejar C/C++, incluso mejorados.

Rust es un excelente lenguaje para crear aplicaciones command-line donde podamos definir todas las dependencias y generar el binario para ser distribuido a través de cargo. Además de crear aplicaciones embebidas a un muy bajo coste de tamaño con una seguridad en tiempo de compilación de futuros errores. También cuenta con un buen sistema de error handling y de logging flexible a la hora de mantener el código.

Sus valores fundamentales es la gestión memoria segura garantizada en tiempo de compilación, utilizando los conceptos de ownership del dato y borrowing de memoria. Además de asegurar en tiempos de compilación no nos encontraremos con condiciones de carrera

Rust también sirve para Web, pasando por WebAssembly y mucho más

Lo más destacado de Rust en el mundo web es poder compilar a WebAssembly, lo cual permite ejecutar aplicaciones web en la mayor parte de navegadores con una velocidad muy cercana a las apps nativas. WebAssembly es, sin duda, una tecnología muy prometedora, aún sin explotar del todo, dónde Rust puede aumentar su impacto. También existen herramientas que permiten distribuir código en librerías npm o convertir código JavaScript desde Rust. Lo cual podría situar a Rust como uno de los lenguajes dentro del stack futuro de muchos desarrollos webs.

La comunidad de desarrollo lleva años pendiente de este hecho: que Rust consiguiera ser un lenguaje multipropósito y se adentrará también en el mundo del desarrollo web, más allá del desarrollo interno de un navegador. De este modo, y excelentemente documentado nos encontramos con la web “Are we web yet? con un directorio de todos los recursos a día de hoy disponibles para usar con Rust. Si aún no conocías, Rust es interesante saber como dispone de un excelente stack HTTP donde podemos utilizar web Framework como Rocket, incluso para capaces de sustituir a Rails/Django o Flask en un futuro.

También cuenta con distintas herramientas para crear APIs, conectores de bases de datos, clientes HTTP, CMS, sistemas de logging, etc..

Mozilla Rust

Proyectos usando Rust en producción: desde sistemas distribuidos a sistemas embebidos

Aparte de Mozilla y su desarrollo en Firefox. La comunidad de empresas que usan Rust en producción sigue aumentando. Así tenemos algunos ejemplos en distintos ámbitos como Dropbox, en el que Rust es una de la pieza claves en eficiencia de sus datacenters sirviendo contenido a más de 500 millones de usuarios.

Por otro lado, Yelp ha desarrollado su propio framework de A/B testing aprovechando la rapidez de de Rust (al mismo nivel de C) y más seguro que él, lo cual ayuda a su mantenimiento.

Recientemente Amazon se unió con el desarrollo de Firecracker un ligero sistema de virtualización para sistemas serveless en la nube de AWS.

También nos encontramos a Rust formando parte de algunas herramientas de Red Hat como su nuevo sistema de almacenamiento, a Microsoft usandolo como parte de la implementación de Azure para IoT, Reddit para el sistema de procesado de comentarios o a Twitter como parte de las herramientas internas del equipo de tooling.

Aquí podéis ver las empresas y proyectos que han llevado a producción desarrollos utilizando Rust.

Aprender Rust

Aunque Rust tiene un curva de aprendizaje un poco más áspera que otros lenguajes modernos de los que hemos hablado, cuenta con una excelente documentación en su web oficial con recursos totalmente guiados, además de diversos meetup. Aquí podéis ver un excelente video de la sesión de arranque de Rust del Meetup de Madrid, MadRust, dónde explican algunos de los principios fundamentales de Rust.

Podemos empezar por “el libro” de Rust, tal como se le conoce a The Rust Programming Language escrito por Carol Nichols y Steve Klabnik además de otras contribuciones de los comunidad Rust. También disponible en Amazon en versión papel.

Rust Social Wide

Existen una serie de ejercicios de ejemplo en el Github oficial de la comunidad de Rust. Decir también, que en el Roadmap de Rust está planeado crear más recursos para desarrolladores noveles e intermedios.

Quizás Rust sea el lenguaje que usemos a lo largo de los próximos 40 años sustituyendo a C/C++.

Más información | Rust

Página Siguiente