PLEX UI/UX

PLEX UI/UX

¿QUE ES PLEX: UI/UX PARA ANDES? Plex es un conjunto de componentes de UI/UX para el proyecto ANDES.   ¿  QUE ES UI/UX EN PROGRAMACION? UI es un acrónimo que parte del anglicismo User interface (interface de usuario), y UX significa User Experience (Diseño de Experiencia de usuaro). Por lo tanto UI se refiere a la creación de la interfaz, ya sea gráfica o desarrollada con diversas tecnologías web como css, jQuery, jQuery UI, EXT JS, YUI, etc UX Design (User Experience Design) o “Diseño de Experiencia de Usuario” es una filosofía de diseño que tiene por objetivo la creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo.

PLEX UI/UX

INSTALACION Crear una nueva aplicación con angular-cli ng new my-app cd my-app Descargar desde npm npm install @andes/plex --save Crear un nuevo archivo src/styles.sass y editarlo para vincular al archivo .sass de Plex @import '~andes-plex/src/lib/styles.sass'; Registrar en angular-cli.json los siguiente archivos: ... "styles": [ "styles.sass", ], "scripts": [ "../node_modules/intro.js/intro.js" ], ... Modificar app.component.html con el siguiente contenido: <plex-app> </plex-app> Crear un componente home.component.ts con el siguiente contenido: import { Component } from '@angular/core'; @Component({ template: 'Hello World', }) export class HomeComponent { } Crear el archivo app.routing.ts y registrar el componente: import { Routes, RouterModule } from '@angular/router'; import { ModuleWithProviders } from '@angular/core'; import { HomeComponent } from './home.component'; const appRoutes: Routes = [ { path: '**', component: HomeComponent } ]; export const appRoutingProviders: any[] = []; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); En app.module.ts importar PlexModule y registrar los routings y el servicio Plex: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { Plex, PlexModule } from '@andes/plex'; import { routing, appRoutingProviders } from './app.routing'; // Components import { AppComponent } from './app.component'; import { HomeComponent } from './home.component'; @NgModule({ declarations: [ AppComponent, HomeComponent ], imports: [ BrowserModule, FormsModule, HttpModule, PlexModule, routing ], providers: [ Plex, appRoutingProviders ], bootstrap: [AppComponent] }) export class AppModule { } Correr la aplicacion ng serve ng serve

https://ui.andes.gob.ar/components

PLEX UI/UX