Estoy seguro de que ha oído hablar de las aplicaciones híbridas, Córdoba, Ionic.... Y si no lo ha hecho, ¡debería hacerlo! ¿Son los buenos o los malos?

Pero después de todo, ¿qué son las aplicaciones híbridas?

Nos hemos puesto en contacto con Daniel Mardomingo, experto en programación de aplicaciones móviles híbridas y nos ha contado lo siguiente:

Las aplicaciones híbridas son las aplicaciones móviles construidas de forma alternativa a las nativas. Mientras que las aplicaciones nativas se construyen utilizando los lenguajes indicados de cada plataforma (Kotlin o Java para Android, Swift para iOS, C# o VB para Windows Phone), las aplicaciones híbridas se construyen, en general, utilizando HTML + CSS + Javascript.

Diferencias entre los ecosistemas de las aplicaciones

¿Y cómo las creamos?

La estructura creada por las tecnologías nativas es demasiado compleja para recrearla, por lo que utilizamos algunas librerías/frameworks para ayudarnos en este proceso. Entre estas libretas, las más famosas son: PhoneGap, Ionic, NativeScript y React Native. Excluyendo a React Native, todos ellos utilizan a Cordova en su núcleo.

Cordova - es un framework de código abierto, mantenido por Apache, que permite la comunicación entre las tecnologías web y los componentes, funciones y sistemas operativos de los dispositivos móviles.

PhoneGap - uno de los precursores, fue creado por Adobe y utiliza el concepto WebView para crear la aplicación. En su núcleo, utiliza HTML + CSS y JavaScript vainilla,. Sin embargo, puede utilizar procesadores pre/post CSS y otros marcos JS para crear sus controladores.

Ionic - open-source SDK, utiliza AngularJS en su núcleo. Para crear las vistas, Ionic ya incorpora Sass y también utiliza muchos componentes curados como tarjetas, listas, menús... Ionic también realiza la personalización visual automática de estos componentes utilizando las guías de estilo de cada plataforma (Android, iOS y/o Windows Phone). Ionic también ofrece una potente CLI junto con herramientas de pruebas A/B, análisis, construcciones e implementaciones automáticas.

NativeScript: marco de trabajo de código abierto centrado sólo en Android e iOS. Con él, puede usar AngularJS (con TypeScript) u otros marcos de trabajo JS, como Vue. Tiene una fácil integración con librerías de terceros en Cocoapads, Android Arsenal y Maven sin necesidad de abstracciones. También cuenta con una excelente CLI y herramientas de prueba.

React Native - Versión de React para aplicaciones móviles, utiliza toda la estructura y el ciclo de vida de los frameworks con algunas adicciones en herramientas de desarrollo. Con él, puedes combinar código nativo (Java, Objective-C, Swift) en tus componentes - la aplicación para móviles de Facebook se crea utilizando este método.

Con React Native, puedes escribir una aplicación nativa utilizando el ciclo de vida de los componentes de React, pero no es una aplicación híbrida, aunque utiliza jsx.

También podemos citar a Flutter.io que recientemente se ha convertido en beta. Funciona de manera similar a React Native - usted crea una aplicación nativa, pero usa Dart para escribir su código. Flutter también tiene grandes características para trabajar en métodos ágiles, como la recarga en caliente.

Y con esto, aun no hemos dicho si son los buenos o los malos. Y sin duda alguna, el mundo no es blanco o negro. Para muchos proyectos, una aplicación híbrida será más economica de realizar, multiplataforma y funcionará practicamente igual que una nativa. Por lo tanto, podemos decir que son los buenos. Aunque aquí un purista o defensor de lo nativo podría decirnos lo contrario.

Lo bueno es que es una nueva forma, una alternativa que viene a sumar. Y eso es bueno. Muy bueno.

En artículos anteriores aquí en tecnopin les hemos mencionado la importancia de los diferentes servicios webs que prevalecen a día de hoy desde distintos aspectos, esto aunque el usuario “común” no lo llegue a percibir es más que necesario para que desde una simple web o blog hasta una tienda online con una cantidad considerable de usuarios asiduos se llegue a mantener en online en optimas condiciones.

Esto lo mencionamos para dar una antesala al tema que nos concierne en esta nota el cual es referente a los servicios que pueden llegar a ofrecer nuestros amigos de muchomasquewebs a través de sus distintos servicios que en líneas generales son enfocados a las webs en general, pero más específicamente a satisfacer las diversas necesidades que se les pueden llegar a presentar a sus administradores en distintos aspectos como lo son el diseño, el mantenimiento, marketing a través del email, entre muchos otros apartados.

Indagando más en los mencionados servicios desde el punto de vista teórico-práctico podemos acotar que por ejemplo en primer lugar todo puede partir del branding tanto del sitio web como marca de determinado producto o servicio como de sus precursores que serian el equivalente a la imagen personal que se desea proyectar a cualquier usuario, visitante o comprador potencial.

En muchomasquewebs tienen como principales objetivos en cualquier servicio que ofrecen, tres pilares inquebrantables los cuales son: confianza, compromiso y visibilidad, posteriormente si se coloca esto desde el contexto del desarrollo web entendemos que ellos aplicaran esos objetivos específicos desde la creación de un sitio web profesional para una empresa o personal para un profesional de determinados oficios freelance en busca de ofrecer servicios de forma individual hasta que el trabajo se llega a materializar por completo, por supuesto procurando solucionar todas las necesidades previamente discutidas con el cliente.

La etiqueta HTML llamada title, es una de las más importantes de cara al SEO. Está ubicada dentro de las etiquetas head  y  contiene el título del sitio web.

Este título proporciona una breve descripción acerca de la temática que trata el sitio y es tenido muy en cuenta por los buscadores.

Es por ello que debemos ser muy cuidadosos al momento de crear esta etiqueta, ya que es quizás la más relevante de cara al posicionamiento.

Las etiquetas title no deben repetirse en las diferentes secciones de una web. Es decir, cada página que tengamos dentro de nuestro sitio web, debe poseer un título único y descriptivo de dicha sección.

Además, es importante destacar que el contenido de la etiqueta title no debe sobrepasar los 70 caracteres, por lo que debemos procurar crear un título corto, claro y bien elaborado.

O lo que es lo mismo, no crear títulos largos y robotizados que sean difíciles entender. Por el contrario, cuando mejor se entiendan estos títulos más efectividad tendrán de cara a nuestros usuarios en la página de resultados de un determinado buscador.

También es recomendable utilizar una combinación de palabras claves y frases, que le brinden, tanto al usuario como al buscador, la información necesaria para conocer la temática que se trata en el sitio. De esta forma, también se apoya en gran medida el SEO de la web.

Por último, resaltar que el contenido de las etiquetas title es utilizado tanto por los navegadores (que lo muestran en las distintas pestañas de navegación) como por buscadores como Google (que utilizan esta información para los Snippet´s).

Las etiquetas HTML llamadas Meta tienen una gran importancia en el desarrollo web, debido a que proporcionan información al buscador acerca del sitio, lo que es de mucha utilidad para que los robots o spiders obtengan los datos necesarios para la indexación de las páginas.

Existen diversas etiquetas Meta que podemos utilizar. Una de las más conocidas, y de la que vamos a hablar en esta ocasión, es la etiqueta Meta Description.

Esta etiqueta nos permite colocar una descripción breve acerca de la temática que trata nuestro sitio web. Es recomendable ser lo más claro y específico posible, ya que una descripción que sobrepase los 150 caracteres no será tenida en cuenta por el buscador o, al menos, no se mostrará en su totalidad en su página de resultados.

De hecho, este último punto constituye uno de los mayores atractivos de esta etiqueta, y es que algunos buscadores la utilizan para mostrar una descripción de nuestro sitio web en sus resultados.

En otras palabras, nosotros podremos decidir el texto de descripción que los distintos buscadores (no todos) muestren en sus resultados.

Asimismo, es recomendable utilizar palabras claves dentro de la descripción para mejorar el posicionamiento y visibilidad de las mismas en la descripción.

Por ejemplo, si estoy creando la descripción para una página web que habla acerca del lenguaje de programación PHP, podría ser una descripción: “Aprende paso a paso el lenguaje de programación PHP”.

Es recomendable crear una descripción diferente por cada página que tengamos en nuestro sitio web, ya que los robots o spiders al conseguir dos páginas con la misma descripción no pueden saber a priori cuál de ellas es más relevante para ese determinado tema, de forma que no estamos facilitando el trabajo de los buscadores y esto es algo que puede llegar a afectar al posicionamiento de nuestra web.

Hoy en dia cuando hablamos de diseño web también estamos hablando de algun nivel de programación o desarrollo de código para poder mostrar contenido, funciones especiales o hacer una pagina web mas dinámica. Cuando tu diseñas un sitio bajo wordpress como gestor de contenido para tu pagina, sabes que solo debes maquetar tu diseño web en HTML pasarlo a PHP que es un simple cambio de extensión a la hora de guardar y seguido de eso colocar las funciones que wordpress ya te da para llamar y mostrar el contenido. Dentro del sitio web con wordpress hay funciones al extremo simples que son se uso obligatorio como:

 <?php bloginfo('template_directory')?> que te coloca la ruta de tu plantilla. 

<?php wp_title(''); ?> que muestra el metatitulo de tu pagina.

 <?php wp_head(); ?> que llama todas las cabeceras de wordpress necesarias para que cosas como los plugin funcionenes y muchos mas, pero esta vez le dare 5 codigos para wordpress que harán que tu diseño web muestre información mas dinámica.