{"id":17914,"date":"2021-01-19T09:53:45","date_gmt":"2021-01-19T12:53:45","guid":{"rendered":"https:\/\/fx2.com.uy\/es\/?p=17914"},"modified":"2021-10-22T09:23:36","modified_gmt":"2021-10-22T12:23:36","slug":"ionic-framework-para-el-desarrollo-de-aplicaciones-moviles-hibridas","status":"publish","type":"post","link":"https:\/\/fx2.com.uy\/es\/blog\/ionic-framework-para-el-desarrollo-de-aplicaciones-moviles-hibridas\/","title":{"rendered":"Ionic: framework para el desarrollo de aplicaciones m\u00f3viles h\u00edbridas"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"17914\" class=\"elementor elementor-17914\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d8bb651 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d8bb651\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9a4785f\" data-id=\"9a4785f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-48da1a1 elementor-widget elementor-widget-text-editor\" data-id=\"48da1a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><p>En este post hablamos de\u00a0<strong>Ionic<\/strong>, uno de los frameworks m\u00e1s utilizados para la creaci\u00f3n de aplicaciones m\u00f3viles. Desgranamos las ventajas de utilizarlo frente a otros SDKs de desarrollo mobile.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69a1c97 elementor-widget elementor-widget-text-editor\" data-id=\"69a1c97\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><h2>\u00bfQu\u00e9 es Ionic y para qu\u00e9 sirve?<\/h2><p>Ionic Framework es un\u00a0<strong>SDK de frontend de c\u00f3digo abierto para\u00a0<a href=\"https:\/\/profile.es\/creamos-soluciones-digitales\/mobile-thinking\/\">desarrollar aplicaciones h\u00edbridas<\/a><\/strong>\u00a0basado en tecnolog\u00edas web (HTML, CSS y JS). Es decir, un framework que nos permite desarrollar aplicaciones para iOS nativo, Android y la web, desde una \u00fanica base de c\u00f3digo. Su compatibilidad y, gracias a la implementaci\u00f3n de Cordova e Ionic Native, hacen posible trabajar con componentes h\u00edbridos. Se integra con los principales frameworks de frontend, como Angular,\u00a0<a href=\"https:\/\/profile.es\/blog\/librerias-react\/\">React<\/a>\u00a0y Vue, aunque tambi\u00e9n se puede usar Vanilla JavaScript. Este framework fue creado en 2013 por Drifty Co. y hasta la llegada de React Native ha sido\u00a0<strong>una de las tecnolog\u00edas l\u00edderes para el desarrollo de aplicaciones m\u00f3viles h\u00edbridas.<\/strong><\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d3012fe elementor-widget elementor-widget-image\" data-id=\"d3012fe\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"800\" height=\"500\" src=\"https:\/\/fx2.com.uy\/es\/wp-content\/uploads\/2021\/10\/desarrollo-de-aplicaciones-mC3B3viles-con-ionic.jpg\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/fx2.com.uy\/es\/wp-content\/uploads\/2021\/10\/desarrollo-de-aplicaciones-mC3B3viles-con-ionic.jpg 800w, https:\/\/fx2.com.uy\/es\/wp-content\/uploads\/2021\/10\/desarrollo-de-aplicaciones-mC3B3viles-con-ionic-300x188.jpg 300w, https:\/\/fx2.com.uy\/es\/wp-content\/uploads\/2021\/10\/desarrollo-de-aplicaciones-mC3B3viles-con-ionic-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f06ff05 elementor-widget elementor-widget-text-editor\" data-id=\"f06ff05\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><h2>\u00a0<\/h2><h2>Caracter\u00edsticas de Ionic Framework<\/h2><p>Ionic se caracteriza por ser un framework que:<\/p><ul><li>Permite\u00a0<strong>desarrollar y desplegar\u00a0<a href=\"https:\/\/profile.es\/blog\/aplicaciones-moviles-hibridas-la-solucion-mas-eficiente-para-el-desarrollo-multiplataforma\/\">aplicaciones h\u00edbridas<\/a><\/strong>, que funcionan en m\u00faltiples plataformas, como iOS nativo, Android, escritorio y la web (como una aplicaci\u00f3n web progresiva), todo ello\u00a0<strong>con una \u00fanica base de c\u00f3digo.<\/strong><\/li><li>Ofrece un\u00a0<strong>dise\u00f1o limpio, sencillo y funcional.<\/strong><\/li><li>Emplea\u00a0<strong>Capacitor (o Cordova)<\/strong>\u00a0para implementar de forma nativa o se ejecuta en el navegador como una aplicaci\u00f3n web progresiva.<\/li><li>Est\u00e1 construido sobre tecnolog\u00edas web:\u00a0<strong>HTML, CSS y JavaScript.<\/strong><\/li><li>Se puede usar con los frameworks frontend m\u00e1s populares, como\u00a0<strong>Angular, React y Vue.<\/strong><\/li><\/ul><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9c9d78 elementor-widget elementor-widget-text-editor\" data-id=\"d9c9d78\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><h2>Componentes UI de Ionic<\/h2><p>La facilidad que Ionic ofrece para el\u00a0<a href=\"https:\/\/profile.es\/blog\/cursos-gratuitos-diseno-web\/\">dise\u00f1o de interfaces<\/a>\u00a0es uno de sus puntos fuertes y lo consigue gracias a sus componentes. Los\u00a0<strong>Componentes de Ionic<\/strong>\u00a0son bloques de construcci\u00f3n de alto nivel que nos ayudan a\u00a0<strong>construir de forma r\u00e1pida la interfaz de usuario<\/strong>\u00a0de nuestra aplicaci\u00f3n. Algunos de sus componentes UI principales son:<\/p><ul><li><strong>Tarjetas (<em>ion-cards<\/em>).<\/strong>\u00a0Uno de los componentes est\u00e1ndar de la interfaz de usuario. Sirve como punto de entrada a informaci\u00f3n m\u00e1s detallada. Suele formarse por encabezado, t\u00edtulo, subt\u00edtulo y contenido.<\/li><li><strong>Listas (<em>ion-lists<\/em>).<\/strong>\u00a0Compuestas de varias filas de elementos, que pueden incluir texto, botones, iconos y miniaturas, entre otros. Las listas de Ionic admiten interacciones diversas como deslizar para revelar opciones o arrastrar para reordenar o eliminar elementos.<\/li><li><strong>Pesta\u00f1as (<em>ion-tabs<\/em>).<\/strong>\u00a0Normalmente se utilizan junto a barras de pesta\u00f1as (<em>ion-tab-bars<\/em>) para implementar una navegaci\u00f3n basada en pesta\u00f1as que se comporte de forma similar a una aplicaci\u00f3n nativa.<\/li><\/ul><figure id=\"attachment_15567\" class=\"wp-caption aligncenter\" aria-describedby=\"caption-attachment-15567\"><img loading=\"lazy\" class=\"size-full wp-image-15567\" src=\"https:\/\/profile.es\/wp-content\/media\/Componente-UI-Ionic-min.png\" sizes=\"(max-width: 638px) 100vw, 638px\" srcset=\"https:\/\/profile.es\/wp-content\/media\/Componente-UI-Ionic-min.png 638w, https:\/\/profile.es\/wp-content\/media\/Componente-UI-Ionic-min-300x185.png 300w\" alt=\"Componentes UI Ionic\" width=\"638\" height=\"394\" \/><\/figure><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47d772d elementor-widget elementor-widget-text-editor\" data-id=\"47d772d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><h2>\u00a0<\/h2><h2>Ventajas de utilizar Ionic para desarrollar apps h\u00edbridas<\/h2><p>Estas son algunas razones por las que decantarte por Ionic framework a la hora de desarrollar aplicaciones m\u00f3viles h\u00edbridas:<\/p><h5>Es f\u00e1cil de aprender y utilizar<\/h5><p>Al basarse en tecnolog\u00edas web (<strong>HTML, CSS\u00a0<\/strong>y\u00a0<strong>JavaScript)<\/strong>, los desarrolladores<strong>\u00a0no tienen que aprender una nueva tecnolog\u00eda<\/strong>\u00a0para utilizar Ionic.<\/p><h5>Numerosas integraciones y plugins<\/h5><p>Ionic se integra con los frameworks con los que habitualmente se trabaja,\u00a0<strong>Angular, React y Vue<\/strong>. Adem\u00e1s, se integra tambi\u00e9n con numerosas herramientas y dispone de numerosos plugins.<\/p><h5>M\u00e1s productividad y menos costes<\/h5><p>Ionic favorece una mayor productividad de los desarrolladores y reduce los costes de desarrollo de la aplicaci\u00f3n. Desarrollar aplicaciones h\u00edbridas en un \u00fanico c\u00f3digo propicia un menor tiempo de desarrollo y hace que su mantenimiento y escalado sea m\u00e1s sencillo. El desarrollo de una sola aplicaci\u00f3n con un \u00fanico c\u00f3digo para distintas plataformas resulta menos costoso que el desarrollo de una aplicaci\u00f3n nativa.<\/p><h5>Dise\u00f1o de interfaces sencillo<\/h5><p>Ionic hace m\u00e1s sencillo y r\u00e1pido el dise\u00f1o de interfaces de usuario para los desarrolladores. Pueden ir eligiendo\u00a0<strong>elementos UI predeterminados de su librer\u00eda de componentes<\/strong>\u00a0en vez de tener que ir codificando uno a uno.<\/p><h5>Buena documentaci\u00f3n y respaldo de la comunidad<\/h5><p>ionic Framework es un proyecto de\u00a0<strong>c\u00f3digo abierto<\/strong>, muy bien documentado y con una comunidad muy activa.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7428e9d elementor-widget elementor-widget-text-editor\" data-id=\"7428e9d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><h2>Nuestra experiencia<\/h2><p>Desde Fx2 hemos trabajado con esta herramienta en diferentes proyectos. Algunos de ellos fueron <a href=\"https:\/\/fx2.com.uy\/es\/noticias\/impulsando-la-transformacion-digital-de-nuestro-clientes\/\"><strong>AQVA Online<\/strong><\/a>, una app m\u00f3vil desarrollada para la multinacional AQVA, <b> que permite a sus clientes conocer el estado de sus finanzas en tiempo real.\u00a0<\/b><span style=\"background-color: initial; letter-spacing: 0px;\">El sistema les permite estar al tanto en todo momento de c\u00f3mo est\u00e1 su inversi\u00f3n. Con diferentes gr\u00e1ficas muy intuitivas, se muestra el rendimiento del capital: cu\u00e1nto es la ganancia mes a mes,\u00a0 c\u00f3mo se va realizando la inversi\u00f3n, etc.<\/span><\/p><div class=\"elementor-element elementor-element-ff48a27 elementor-widget elementor-widget-text-editor\" data-id=\"ff48a27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\"><div class=\"elementor-widget-container\"><div class=\"elementor-text-editor elementor-clearfix\"><p>Otro proyecto en el que a\u00fan nos encontramos trabajando y que tambi\u00e9n usamos el Ionic Framework fue en la <b>aplicaci\u00f3n m\u00f3vil de +Cinemateca<\/b>. Una app que a\u00fan no se encuentra disponible, pero que pronto lo estar\u00e1. Es un cliente con el que ya hemos estado trabajando para su\u00a0<a href=\"https:\/\/fx2.com.uy\/es\/noticias\/cinemateca-cultura-cinematografica-a-la-carta\/\">portal web +Cinemateca<\/a>\u00a0y que ahora quiere tener su contenido disponible dentro de una app.<\/p><\/div><\/div><\/div><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4982d1c elementor-widget elementor-widget-text-editor\" data-id=\"4982d1c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><h3><strong>\u00bfTe gustar\u00eda llevar a cabo una gran idea?<\/strong>\u00a0<a href=\"https:\/\/fx2.com.uy\/proyectos\/mobile-development\/\">Desarrollamos apps m\u00f3viles<\/a>\u00a0para impulsar el negocio de nuestros clientes.\u00a0<a href=\"https:\/\/fx2.com.uy\/contact\/\">Contacta con nosotros<\/a>\u00a0y cu\u00e9ntanos.<\/h3><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adce673 elementor-widget elementor-widget-text-editor\" data-id=\"adce673\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\"><p>Fuente: <a href=\"https:\/\/profile.es\/blog\/que-es-ionic\/\">Profile.es<\/a><\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>En este post hablamos de Ionic, uno de los frameworks m\u00e1s utilizados para la creaci\u00f3n de aplicaciones m\u00f3viles. Desgranamos las ventajas y desventajas de utilizarlo frente a otros SDKs de desarrollo mobile.<\/p>\n","protected":false},"author":4,"featured_media":17917,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[96],"tags":[311,310],"_links":{"self":[{"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/posts\/17914"}],"collection":[{"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/comments?post=17914"}],"version-history":[{"count":8,"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/posts\/17914\/revisions"}],"predecessor-version":[{"id":17925,"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/posts\/17914\/revisions\/17925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/media\/17917"}],"wp:attachment":[{"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/media?parent=17914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/categories?post=17914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fx2.com.uy\/es\/wp-json\/wp\/v2\/tags?post=17914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}