馃殌 Ionic: Conceptos B谩sicos del Framework

4 minuto(s) de lectura

驴Cu谩l es el concepto del framework Ionic?

Para aquellos completamente nuevos en el desarrollo de aplicaciones de Ionic, puede ser 煤til obtener una comprensi贸n de alto nivel de la filosof铆a, los conceptos y las herramientas principales detr谩s del proyecto. Antes de sumergirnos en temas complejos, cubriremos los conceptos b谩sicos de lo que es Ionic y c贸mo funciona.

Componentes IU Estilo adaptativo Navegaci贸n Acceso nativo Tem谩tica

Componentes de la Interfaz de Usuario

Ionic Framework es una biblioteca de componentes de la interfaz de usuario, que son elementos reutilizables que sirven como bloques de construcci贸n para una aplicaci贸n. Los componentes i贸nicos est谩n construidos sobre est谩ndares web usando HTML, CSS y JavaScript. Aunque los componentes est谩n preconstruidos, est谩n dise帽ados desde cero para ser altamente personalizables para que las aplicaciones puedan hacer que cada componente sea propio, permitiendo que cada aplicaci贸n tenga su propia apariencia. M谩s espec铆ficamente, los componentes i贸nicos pueden ser f谩cilmente tem谩ticos para cambiar globalmente la apariencia en toda una aplicaci贸n. Para obtener m谩s informaci贸n sobre c贸mo personalizar el aspecto, consulteTem谩tica.

Estilo adaptativo

Adaptive Styling es una caracter铆stica incorporada de Ionic Framework que permite a los desarrolladores de aplicaciones usar la misma base de c贸digo para m煤ltiples plataformas. Cada componente i贸nico adapta su aspecto a la plataforma en la que se ejecuta la aplicaci贸n. Por ejemplo, los dispositivos de Apple, como el iPhone y el iPad, usan el lenguaje de dise帽o iOS de Apple . Del mismo modo, los dispositivos Android utilizan el lenguaje de dise帽o de Google llamado Material Design .

Al realizar sutiles cambios de dise帽o entre las plataformas, los usuarios reciben una experiencia de aplicaci贸n familiar. Una aplicaci贸n Ionic descargada de la App Store de Apple obtendr谩 el tema iOS, mientras que una aplicaci贸n Ionic descargada de la Play Store de Android obtendr谩 el tema Material Design. Para las aplicaciones que se ven como una aplicaci贸n web progresiva (PWA) desde un navegador, Ionic usar谩 de manera predeterminada el tema Dise帽o de materiales. Adem谩s, decidir qu茅 plataforma usar en ciertos escenarios es completamente configurable. Se puede encontrar m谩s informaci贸n sobre el estilo adaptativo enTem谩tica.

Las aplicaciones web tradicionales usan un historial lineal, lo que significa que el usuario navega hacia adelante a una p谩gina y puede presionar el bot贸n Atr谩s para navegar hacia atr谩s. Un ejemplo de esto es hacer clic en Wikipedia donde el usuario avanza y retrocede en la pila de historial lineal del navegador.

En contraste, las aplicaciones m贸viles a menudo utilizan navegaci贸n paralela 鈥渘o lineal鈥. Por ejemplo, una interfaz con pesta帽as puede tener pilas de navegaci贸n separadas para cada pesta帽a, asegur谩ndose de que el usuario nunca pierda su lugar mientras navega y cambia entre pesta帽as.

Las aplicaciones i贸nicas adoptan este enfoque de navegaci贸n m贸vil, soportando historiales de navegaci贸n paralelos que tambi茅n pueden anidarse, todo mientras mantienen los conceptos de navegaci贸n de estilo de navegador con los que los desarrolladores web est谩n familiarizados.

Para las aplicaciones que est谩n construidas con Angular y @ionic/angular, recomendamos usar el Enrutador Angular que viene de f谩brica para cada nueva aplicaci贸n Ionic 4 Angular. Las versiones anteriores de Ionic se enviaron con nuestro propio enrutador personalizado, pero con el fin de proporcionar la mejor experiencia de herramientas y desarrollador, hemos pasado a utilizar el enrutador recomendado por el marco.

Acceso nativo

Una caracter铆stica sorprendente de las aplicaciones creadas con tecnolog铆as web (como las aplicaciones Ionic) es que puede ejecutarse en pr谩cticamente cualquier plataforma: computadoras de escritorio, tel茅fonos, tabletas, autom贸viles, refrigeradores y mucho m谩s. La misma base de c贸digo para las aplicaciones Ionic puede funcionar en muchas plataformas porque se basa en est谩ndares web y API comunes que se comparten en estas plataformas.

Uno de los casos de uso m谩s comunes para Ionic es crear una aplicaci贸n que se pueda descargar desde App Store y Play Store . Los kits de desarrollo de software (SDK) de iOS y Android proporcionanVistas webque procesan cualquier aplicaci贸n Ionic, mientras permiten el acceso completo al SDK nativo.

Los proyectos como Capacitor y Cordova se usan com煤nmente para dar a las aplicaciones Ionic este acceso a los SDK nativos. Esto significa que los desarrolladores pueden crear r谩pidamente una aplicaci贸n utilizando herramientas de desarrollo web comunes y a煤n tener acceso a funciones nativas como el aceler贸metro, la c谩mara, el GPS y m谩s del dispositivo.

Tem谩tica

En esencia, Ionic Framework se construye utilizando CSS, lo que nos permite aprovechar la flexibilidad que proporcionan las propiedades (variables) de CSS . Esto hace que sea incre铆blemente f谩cil dise帽ar una aplicaci贸n que se vea genial mientras sigue el est谩ndar web. Proporcionamos un conjunto de colores para que los desarrolladores puedan tener algunos valores predeterminados excelentes, pero recomendamos anularlos para crear dise帽os que coincidan con una marca, empresa o una paleta de colores deseada. Todo, desde el color de fondo de una aplicaci贸n hasta el color del texto, es totalmente personalizable. Puede encontrar m谩s informaci贸n sobre la tem谩tica de aplicaciones enTem谩tica.

馃憠 Conceptos B谩sicos de Ionic 馃憠 Introducci贸n a Ionic

Fuente: Doc. Ionic