Una introducción a AngularJS. Presentación base de una charla/curso para Intel, Costa Rica. Marzo del 2014. Presenta una introducción a los conceptos principales para empezar a utilizar AngularJS en el desarrollo de aplicaciones Web.
AngularJS es un framework de JavaScript creado por Google para desarrollar aplicaciones web dinámicas. Permite añadir funcionalidades de programación a páginas HTML5 mediante directivas y expresiones que enlazan datos y presentación. AngularJS define aplicaciones, enlaza datos de formularios y muestra resultados usando directivas como ng-app, ng-model y ng-bind.
Este documento describe AngularJS, un framework de desarrollo web front-end mantenido por Google. Explica que AngularJS utiliza la arquitectura MVC, permite una mayor interacción con el DOM, y separa el código en módulos mediante inyección de dependencias y ámbitos. También cubre directivas como ng-repeat, ng-select, ng-show y ng-hide, y cómo estas permiten filtrar datos, generar listas y selects dinámicos, y ocultar elementos del DOM.
Este documento presenta una introducción a AngularJS. Explica que AngularJS es un framework para construir aplicaciones web dinámicas basadas en JavaScript que aplica el patrón MVC. Describe los componentes clave de AngularJS como módulos, controladoras, vistas, directivas, filtros y servicios y cómo se usan para crear aplicaciones web ricas e interactivas. Finalmente, invita a los lectores a obtener más información sobre cursos de AngularJS.
Este documento presenta un curso sobre AngularJS. Incluye información sobre el instructor Carlos Azaustre, el temario del curso, la agenda, conceptos clave de AngularJS como MVC, data binding, directivas, y ejemplos de implementación de formularios, rutas, servicios, estructura de archivos y entorno de desarrollo. También se describe una aplicación de ejemplo para mostrar un listado de empleados.
Este documento describe cómo crear un sitio web simple con HTML, CSS y JavaScript y luego extender sus funcionalidades mediante frameworks como Angular en el frontend y Express en el backend. Explica conceptos como Single Page Applications, instalación de módulos con NPM, y uso de plantillas como Nunjucks con Express.
Este documento presenta una introducción a los conceptos básicos de AngularJS, incluyendo su filosofía, directivas comunes, controladores, servicios, routing y directivas. Explica que AngularJS es un framework para crear aplicaciones dinámicas que no requieren recargar la página, y cómo facilita el mantenimiento a través de enlaces de datos y manipulación del DOM.
Este documento presenta una introducción a conceptos avanzados de Angular como la arquitectura, routing, directivas y data binding. Explica que Angular usa módulos, controladoras y vistas para organizar el código. También cubre temas como inyección de dependencias, $scope, $watch y cómo crear directivas personalizadas. Finalmente, incluye ejemplos prácticos de routing, calculadoras y paneles de pestañas usando directivas.
AngularJS es un framework de JavaScript creado por Google para desarrollar aplicaciones web dinámicas. Permite añadir funcionalidades de programación a páginas HTML5 mediante directivas y expresiones que enlazan datos y presentación. AngularJS define aplicaciones, enlaza datos de formularios y muestra resultados usando directivas como ng-app, ng-model y ng-bind.
Este documento describe AngularJS, un framework de desarrollo web front-end mantenido por Google. Explica que AngularJS utiliza la arquitectura MVC, permite una mayor interacción con el DOM, y separa el código en módulos mediante inyección de dependencias y ámbitos. También cubre directivas como ng-repeat, ng-select, ng-show y ng-hide, y cómo estas permiten filtrar datos, generar listas y selects dinámicos, y ocultar elementos del DOM.
Este documento presenta una introducción a AngularJS. Explica que AngularJS es un framework para construir aplicaciones web dinámicas basadas en JavaScript que aplica el patrón MVC. Describe los componentes clave de AngularJS como módulos, controladoras, vistas, directivas, filtros y servicios y cómo se usan para crear aplicaciones web ricas e interactivas. Finalmente, invita a los lectores a obtener más información sobre cursos de AngularJS.
Este documento presenta un curso sobre AngularJS. Incluye información sobre el instructor Carlos Azaustre, el temario del curso, la agenda, conceptos clave de AngularJS como MVC, data binding, directivas, y ejemplos de implementación de formularios, rutas, servicios, estructura de archivos y entorno de desarrollo. También se describe una aplicación de ejemplo para mostrar un listado de empleados.
Este documento describe cómo crear un sitio web simple con HTML, CSS y JavaScript y luego extender sus funcionalidades mediante frameworks como Angular en el frontend y Express en el backend. Explica conceptos como Single Page Applications, instalación de módulos con NPM, y uso de plantillas como Nunjucks con Express.
Este documento presenta una introducción a los conceptos básicos de AngularJS, incluyendo su filosofía, directivas comunes, controladores, servicios, routing y directivas. Explica que AngularJS es un framework para crear aplicaciones dinámicas que no requieren recargar la página, y cómo facilita el mantenimiento a través de enlaces de datos y manipulación del DOM.
Este documento presenta una introducción a conceptos avanzados de Angular como la arquitectura, routing, directivas y data binding. Explica que Angular usa módulos, controladoras y vistas para organizar el código. También cubre temas como inyección de dependencias, $scope, $watch y cómo crear directivas personalizadas. Finalmente, incluye ejemplos prácticos de routing, calculadoras y paneles de pestañas usando directivas.
Cómo hacer llamadas AJAX correctamente en Wordpress y cómo llamar tus ficheros javascript en el template con ejemplos. Dentro de las sesiones de formación de Artvisual del 2012
El documento presenta una introducción a AngularJS, un framework de JavaScript para crear aplicaciones web dinámicas. Explica que AngularJS adopta el modelo MVC, extiende HTML y promueve el uso de pruebas unitarias. Luego describe brevemente los componentes clave de AngularJS como controladores, modelos, vistas, directivas, enrutamiento y recursos. Finalmente, incluye algunos consejos sobre el uso de AngularJS y agradece a la audiencia.
El documento presenta una introducción a AngularJS 2. Explica que AngularJS 2 usa componentes, enrutamiento y directivas para crear aplicaciones de página única. Los componentes controlan secciones del HTML y tienen propiedades y métodos. El enrutamiento muestra diferentes áreas dependiendo de la URL. Las directivas pueden modificar el DOM. AngularJS 2 también usa plantillas, enlace de datos e inyección de dependencias.
Este documento describe los layouts y vistas parciales en ASP.NET MVC. Los layouts permiten definir una estructura de página común que puede ser heredada por otras páginas, mientras que las vistas parciales permiten reutilizar contenido entre páginas. También explica cómo definir placeholders en los layouts y cómo cargar vistas parciales de forma asíncrona usando AJAX.
Este documento presenta una introducción a Razor y ASP.NET MVC 3. Explica que Razor es un nuevo motor de vistas que permite escribir menos código al mezclar código y marcado de forma natural. También describe cómo MVC 3 usa modelos, vistas y controladores, así como layouts, secciones y AJAX. Finalmente, incluye demostraciones para ilustrar conceptos como rutas, controladores, vistas y AJAX en ASP.NET MVC.
Este documento explica cómo implementar el login social con Node.js usando PassportJS. Describe los pasos para configurar PassportJS para autenticación con Twitter y Facebook, incluyendo la creación de un modelo de usuario, configuración de estrategias y rutas de autenticación. También cubre mantener las claves API de forma segura y controlar la vista principal después de iniciar sesión.
Este documento introduce ASP.NET MVC, comparando Web Forms y MVC. Explica cómo crear proyectos MVC en Visual Studio y describe conceptos como controladores, vistas, modelos, enrutamiento, validación y filtros de acción. También cubre Entity Framework Code First y Razor para generar vistas dinámicas.
El documento describe los nuevos componentes en AngularJS 1.5, los cuales proveen una sintaxis más simple para crear directivas estructurales aisladas con bindings unidireccionales. Los componentes definen valores por defecto seguros, facilitan la transición a Angular 2 y siguen permitiendo el uso completo de las directivas. El ciclo de vida de los componentes incluye $onInit para inicialización, y se pueden requerir componentes padres. Los componentes pueden ser unidades pequeñas o grandes páginas manejadas por el enrutador
El documento proporciona códigos HTML y JavaScript para agregar diferentes funciones a las páginas web, como impedir la selección de texto, agregar un reloj contador, enviar correos electrónicos con la dirección de la página, mostrar explicaciones al pasar el mouse sobre enlaces, y agregar la fecha de forma automática. También incluye códigos para cambiar el color de la barra de desplazamiento, saludar a los visitantes según la hora, mostrar imágenes aleatorias, y permitir la descarga de archivos.
Este documento proporciona una introducción a jQuery, incluyendo una descripción de lo que es jQuery y el DOM, las razones para usar jQuery, la referencia de la API de jQuery y plugins destacados. jQuery es un framework JavaScript que facilita la manipulación de documentos HTML y el manejo de eventos. Simplifica tareas como seleccionar elementos, agregar comportamiento interactivo y desarrollar aplicaciones AJAX. La API de jQuery ofrece selectores, eventos, efectos y funciones para manipular el DOM de manera fácil.
Este documento introduce el framework Web API de .NET, el cual permite crear APIs web RESTful mediante HTTP. Web API permite exponer servicios y datos para su consumo por cualquier cliente. También permite alojar servicios fuera de IIS mediante self hosting en una aplicación de consola. Los controladores heredan de ApiController y los métodos representan los verbos HTTP como GET y POST.
Este documento describe cómo realizar solicitudes AJAX con ASP.NET MVC utilizando jQuery. Explica cómo cargar vistas parciales, procesar formularios y devolver datos JSON a través de solicitudes AJAX, así como el uso de helpers de AJAX de ASP.NET MVC como Ajax.ActionLink y Ajax.BeginForm. También cubre cómo validar solicitudes AJAX y manejar casos cuando JavaScript no esté habilitado.
Este documento describe diferentes métodos para validar datos en el servidor en .NET, incluyendo atributos de Data Annotations para especificar reglas de validación, mostrar mensajes de error personalizados, y validación personalizada mediante la implementación de IValidatableObject.
Diapositivas correspondientes a la parte del framework Ruby On Rails del curso de extensión universitaria "Desarrollo Web Avanzado", celebrado en la Escuela Universitaria de Ingeniería Informática de Oviedo
Este documento describe la tecnología Java Server Faces (JSF). JSF es un framework para el desarrollo de interfaces de usuario del lado del servidor para aplicaciones web basadas en Java. El documento explica que JSF se basa en tecnologías como servlets, JavaBeans, JSP y XHTML. También cubre los conceptos clave de JSF como componentes de interfaz de usuario, eventos, beans administrados, validadores y navegación.
El documento describe las páginas Java Server Pages (JSP), que permiten mezclar código HTML con código Java y etiquetas específicas de JSP. Las JSP se almacenan como archivos con extensión .jsp y se compilan la primera vez que se acceden, generando un servlet Java. Incluyen directivas, comentarios, declaraciones, expresiones e inclusión de datos dinámicos mediante etiquetas.
Este documento describe una aplicación web de catálogo de cursos desarrollada con Spring, AngularJS y Mybatis. La aplicación permite el acceso al catálogo de cursos y la incorporación de nuevos cursos. Se explican brevemente las tecnologías y frameworks utilizados, así como los requisitos funcionales y la arquitectura propuesta. Finalmente, se mencionan algunos problemas surgidos durante el desarrollo.
Cómo hacer llamadas AJAX correctamente en Wordpress y cómo llamar tus ficheros javascript en el template con ejemplos. Dentro de las sesiones de formación de Artvisual del 2012
El documento presenta una introducción a AngularJS, un framework de JavaScript para crear aplicaciones web dinámicas. Explica que AngularJS adopta el modelo MVC, extiende HTML y promueve el uso de pruebas unitarias. Luego describe brevemente los componentes clave de AngularJS como controladores, modelos, vistas, directivas, enrutamiento y recursos. Finalmente, incluye algunos consejos sobre el uso de AngularJS y agradece a la audiencia.
El documento presenta una introducción a AngularJS 2. Explica que AngularJS 2 usa componentes, enrutamiento y directivas para crear aplicaciones de página única. Los componentes controlan secciones del HTML y tienen propiedades y métodos. El enrutamiento muestra diferentes áreas dependiendo de la URL. Las directivas pueden modificar el DOM. AngularJS 2 también usa plantillas, enlace de datos e inyección de dependencias.
Este documento describe los layouts y vistas parciales en ASP.NET MVC. Los layouts permiten definir una estructura de página común que puede ser heredada por otras páginas, mientras que las vistas parciales permiten reutilizar contenido entre páginas. También explica cómo definir placeholders en los layouts y cómo cargar vistas parciales de forma asíncrona usando AJAX.
Este documento presenta una introducción a Razor y ASP.NET MVC 3. Explica que Razor es un nuevo motor de vistas que permite escribir menos código al mezclar código y marcado de forma natural. También describe cómo MVC 3 usa modelos, vistas y controladores, así como layouts, secciones y AJAX. Finalmente, incluye demostraciones para ilustrar conceptos como rutas, controladores, vistas y AJAX en ASP.NET MVC.
Este documento explica cómo implementar el login social con Node.js usando PassportJS. Describe los pasos para configurar PassportJS para autenticación con Twitter y Facebook, incluyendo la creación de un modelo de usuario, configuración de estrategias y rutas de autenticación. También cubre mantener las claves API de forma segura y controlar la vista principal después de iniciar sesión.
Este documento introduce ASP.NET MVC, comparando Web Forms y MVC. Explica cómo crear proyectos MVC en Visual Studio y describe conceptos como controladores, vistas, modelos, enrutamiento, validación y filtros de acción. También cubre Entity Framework Code First y Razor para generar vistas dinámicas.
El documento describe los nuevos componentes en AngularJS 1.5, los cuales proveen una sintaxis más simple para crear directivas estructurales aisladas con bindings unidireccionales. Los componentes definen valores por defecto seguros, facilitan la transición a Angular 2 y siguen permitiendo el uso completo de las directivas. El ciclo de vida de los componentes incluye $onInit para inicialización, y se pueden requerir componentes padres. Los componentes pueden ser unidades pequeñas o grandes páginas manejadas por el enrutador
El documento proporciona códigos HTML y JavaScript para agregar diferentes funciones a las páginas web, como impedir la selección de texto, agregar un reloj contador, enviar correos electrónicos con la dirección de la página, mostrar explicaciones al pasar el mouse sobre enlaces, y agregar la fecha de forma automática. También incluye códigos para cambiar el color de la barra de desplazamiento, saludar a los visitantes según la hora, mostrar imágenes aleatorias, y permitir la descarga de archivos.
Este documento proporciona una introducción a jQuery, incluyendo una descripción de lo que es jQuery y el DOM, las razones para usar jQuery, la referencia de la API de jQuery y plugins destacados. jQuery es un framework JavaScript que facilita la manipulación de documentos HTML y el manejo de eventos. Simplifica tareas como seleccionar elementos, agregar comportamiento interactivo y desarrollar aplicaciones AJAX. La API de jQuery ofrece selectores, eventos, efectos y funciones para manipular el DOM de manera fácil.
Este documento introduce el framework Web API de .NET, el cual permite crear APIs web RESTful mediante HTTP. Web API permite exponer servicios y datos para su consumo por cualquier cliente. También permite alojar servicios fuera de IIS mediante self hosting en una aplicación de consola. Los controladores heredan de ApiController y los métodos representan los verbos HTTP como GET y POST.
Este documento describe cómo realizar solicitudes AJAX con ASP.NET MVC utilizando jQuery. Explica cómo cargar vistas parciales, procesar formularios y devolver datos JSON a través de solicitudes AJAX, así como el uso de helpers de AJAX de ASP.NET MVC como Ajax.ActionLink y Ajax.BeginForm. También cubre cómo validar solicitudes AJAX y manejar casos cuando JavaScript no esté habilitado.
Este documento describe diferentes métodos para validar datos en el servidor en .NET, incluyendo atributos de Data Annotations para especificar reglas de validación, mostrar mensajes de error personalizados, y validación personalizada mediante la implementación de IValidatableObject.
Diapositivas correspondientes a la parte del framework Ruby On Rails del curso de extensión universitaria "Desarrollo Web Avanzado", celebrado en la Escuela Universitaria de Ingeniería Informática de Oviedo
Este documento describe la tecnología Java Server Faces (JSF). JSF es un framework para el desarrollo de interfaces de usuario del lado del servidor para aplicaciones web basadas en Java. El documento explica que JSF se basa en tecnologías como servlets, JavaBeans, JSP y XHTML. También cubre los conceptos clave de JSF como componentes de interfaz de usuario, eventos, beans administrados, validadores y navegación.
El documento describe las páginas Java Server Pages (JSP), que permiten mezclar código HTML con código Java y etiquetas específicas de JSP. Las JSP se almacenan como archivos con extensión .jsp y se compilan la primera vez que se acceden, generando un servlet Java. Incluyen directivas, comentarios, declaraciones, expresiones e inclusión de datos dinámicos mediante etiquetas.
Este documento describe una aplicación web de catálogo de cursos desarrollada con Spring, AngularJS y Mybatis. La aplicación permite el acceso al catálogo de cursos y la incorporación de nuevos cursos. Se explican brevemente las tecnologías y frameworks utilizados, así como los requisitos funcionales y la arquitectura propuesta. Finalmente, se mencionan algunos problemas surgidos durante el desarrollo.
Este documento presenta información sobre aplicaciones multiplataforma y tecnologías relacionadas. Se discuten conceptos como aplicaciones de página única, frameworks como AngularJS, herramientas como Ionic y características de AngularJS como directivas, filtros y servicios. El documento también incluye ejemplos de código para ilustrar estos conceptos.
Este documento introduce AngularJS, incluyendo herramientas recomendadas como Chrome y la extensión Batarang, cómo incluir el archivo JS de Angular, cómo declarar módulos y aplicaciones, la arquitectura MVC, controladores, enlace de datos, filtros, valores, fábricas, servicios y proveedores, y enlaces de datos unidireccionales y bidireccionales. También proporciona enlaces a ejemplos y documentación adicional.
El documento proporciona información sobre jQuery, una librería JavaScript ligera que simplifica el desarrollo de aplicaciones web del lado del cliente. jQuery simplifica la interacción con documentos HTML, el manejo de eventos, la animación y las interacciones AJAX. Fue creado por John Resig en 2006 y es ampliamente utilizado por sitios como Google, Amazon, IBM y Microsoft.
Este documento presenta una aplicación de ejemplo en Java Server Faces (JSF) que permite personalizar los colores de un currículum vitae. La aplicación incluye páginas para personalizar los colores, mostrar mensajes de error si los colores seleccionados son iguales, y previsualizar el CV con los colores y datos seleccionados. El documento explica cada archivo JSP que compone la aplicación y muestra fragmentos de código para ilustrar el uso de etiquetas JSF.
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)lenny
El documento presenta Ruby on Rails como un framework ágil para el desarrollo de aplicaciones web. Explica conceptos clave como MVC, ORM, migraciones de base de datos y convención sobre configuración. También muestra ejemplos prácticos de código en Ruby on Rails para crear modelos, controladores y vistas.
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)INSIGNIA4U
El documento presenta Ruby on Rails como un framework ágil para el desarrollo de aplicaciones web. Explica conceptos clave como MVC, ORM, migraciones de base de datos y convención sobre configuración. También muestra ejemplos básicos de código para crear modelos, controladores y vistas en Rails.
Este documento describe cómo integrar AngularJS con Drupal para crear aplicaciones híbridas. Explica conceptos básicos de AngularJS como directivas, controladores y servicios, y proporciona razones para usar AngularJS como mejorar el rendimiento y crear una estructura desacoplada. A continuación, detalla los pasos para exponer datos de Drupal a través de servicios y crear un punto final de servicio, y proporciona una estructura básica para una aplicación AngularJS que consume un servicio Drupal.
Este documento presenta una agenda para un taller sobre ASP.NET MVC. La agenda incluye secciones sobre jQuery, AJAX, bundling y minificación, uso de CDN para scripts, Web API, soporte asincrónico y SignalR. Cada sección cubre conceptos clave y provee demostraciones para ilustrar los temas.
Este documento proporciona una introducción al framework jQuery Mobile. En 3 oraciones o menos: jQuery Mobile es un framework HTML5 para crear aplicaciones web móviles multiplataforma utilizando HTML, CSS y JavaScript. Proporciona componentes como listas, botones, formularios y transiciones entre páginas. Los desarrolladores pueden crear interfaces de usuario ricas para dispositivos móviles de manera rápida y sencilla con este framework.
Este documento presenta una introducción a Spring MVC, incluyendo una descripción del patrón MVC, los componentes clave de Spring MVC como DispatcherServlet y HandlerMapping, y cómo configurar una aplicación Spring MVC. También explica conceptos como controllers, views y binding de datos, e incluye ejemplos de código de controllers simples y MultiActionController.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
El documento habla sobre ASP.NET MVC, un framework para desarrollo web que ofrece separación de preocupaciones, URLs limpias y un modelo de programación más performante. Explica conceptos como modelos, vistas y controladores, y características como Razor, rutas, y jQuery. También cubre SignalR, una biblioteca que permite comunicaciones en tiempo real entre el servidor y el cliente.
Este documento presenta un temario para una charla técnica sobre AngularJS. La primera parte del temario introduce AngularJS y cubre conceptos como modularidad, inyección de dependencias, templating, data binding, scopes, controllers, eventos y directivas. La segunda parte cubre temas como experiencias positivas y negativas con AngularJS, soporte para SEO, pre-carga y el futuro de AngularJS. El documento también incluye secciones sobre por qué usar AngularJS y las ventajas de sus características en comparación con otras tecnologías.
Seminario
Diseño para la Web: WWW y HTML
Gestores de Contenido CMS: Blogs
Semiario dentro de grados
- bellas artes: Creación multimedia Interactiva
- Comunicacion audiovisual
El documento habla sobre las tecnologías de Web 2.0 como AJAX, lenguajes de scripting como Ruby y PHP que se pueden usar con Java EE 5, y frameworks como Grails. También menciona proyectos de código abierto y comunidades de desarrolladores que contribuyen a estas tecnologías.
El documento describe los conceptos de frameworks y arquitectura MVC. Explica que los frameworks permiten a los desarrolladores enfocarse en los requerimientos del software en lugar de detalles técnicos. Describe los componentes clave de MVC: el modelo maneja la lógica y datos, la vista muestra la interfaz, y el controlador controla el flujo entre ellos. También provee ejemplos de código para implementar una aplicación web simple usando este patrón MVC.
Charla presentada para la Universidad Cenfotec, en el Colegio de Informáticos de Costa Rica. Marzo, 2014. La charla presenta una introducción a Ruby on Rails y cómo integrarlo con AngularJS
Capacitación para la Asociación Costarricense de Profesionales en Turismo (ACOPROT) y el Banco Nacional de Costa Rica (BNCR) durante los meses de septiembre y octubre del 2013 en diversos lugares de Costa Rica: Monteverde, La Fortuna, Puerto Viejo, Manuel Antonio y Santa Cruz.
Seminario sobre el uso estratégico de las tecnologías de la información, en particular de las tecnologías más recientes del mercado, como las redes sociales y la nube
Charla dada en el Congreso de Expo Oficina organizado por EKA Consultores. Agosto, 2013. San José, Costa Rica.
Abordaje introductorio sobre La Nube, qué es, porqué es importante, beneficios, riesgos, y cómo iniciar su aprovechamiento. Ejemplos de algunas herramientas
Charla dada en Bar Camp Costa Rica 2013: Overview, desde un punto de vista técnico, de Tecnologías Emergentes asociadas a cuatro importantes tendencias tecnológicas: La Nube (Cloud Computing), los Móviles (Mobile), Redes Sociales (Social Media) y Big Data. O dicho de otro modo: Cloud. Mobile. Social. Big Data
Cómo el explosivo crecimiento en las Redes Sociales puede ser aprovechado en beneficio de la inclusión social, en particular en las Microfinanzas. TIC, Redes sociales y microfinanzas. Presentación del año 2012 dada en el marco de la VI Conferencia Centroamericana de Microfinanzas, en Panamá.
Presentación sobre nuevas tendencias tecnológicas de gran impacto en el mundo y la innovación que éstas permiten. En particular la Nube, los móviles, las redes sociales y el Big Data.
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...micarnavaltupatrimon
Mi Carnaval es la plataforma que permite conectar al usuario con la cultura y la emoción del Carnaval de Blancos y Negros en la ciudad de Pasto, esta plataforma brinda una amplia oferta de productos, servicios, tiquetería e información relevante para generarle valor al usuario, además, la plataforma realiza un levantamiento de datos de los espectadores que se registran, capturando su actividad e información relevante para generar la analítica demográfica del evento en tiempo real, con estos datos se generan modelos predictivos, que permiten una mejor preparación y organización del evento, de esta manera ayudando a reducir la congestión, las largas filas y, así como a identificar áreas de alto riesgo de delincuencia y otros problemas de seguridad.
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...micarnavaltupatrimon
Mi Carnaval es la plataforma que permite conectar al usuario con la cultura y la emoción del Carnaval de Blancos y Negros en la ciudad de Pasto, esta plataforma brinda una amplia oferta de productos, servicios, tiquetería e información relevante para generarle valor al usuario, además, la plataforma realiza un levantamiento de datos de los espectadores que se registran, capturando su actividad e información relevante para generar la analítica demográfica del evento en tiempo real, con estos datos se generan modelos predictivos, que permiten una mejor preparación y organización del evento, de esta manera ayudando a reducir la congestión, las largas filas y, así como a identificar áreas de alto riesgo de delincuencia y otros problemas de seguridad.
Buscador de Eventos y Fiestas en España - Buscafiestaholabuscafiesta
Buscafiesta.es es el buscador líder en España para fiestas y eventos, diseñado para satisfacer las necesidades tanto de organizadores como de asistentes. Este innovador software ofrece una plataforma integral que permite a los organizadores de eventos añadir, gestionar y promocionar sus actividades de manera totalmente autónoma, facilitando la visibilidad y escalabilidad de sus eventos.
Buscafiesta.es no solo conecta a los organizadores con su público objetivo, sino que también ofrece herramientas de marketing y análisis que ayudan a maximizar el impacto de cada evento. Ya sea para una fiesta local, un concierto multitudinario o un evento corporativo, Buscafiesta.es es la solución definitiva para hacer de cada evento un éxito rotundo.
Buscador de Eventos y Fiestas en España - Buscafiesta
Introducción a AngularJS
1. HTML enhanced for web apps!
Ing. Leopoldo Rojas Moguel, MBA
leopoldo.rojas@arckanto.com
2. Agenda: Día 1
1. Introducción a AngularJS
2. Single-page apps (SPA)
3. Características generales de AngularJS
4. Conceptos y fundamentos en AngularJS
5. Algunas directivas principales de AngularJS
6. ¿Qué es AngularJS?
Es un framework de javascript para crear aplicaciones web
dinámicas, el cual utiliza el HTML como mecanismo de lenguaje
de template de las aplicaciones y permite extender el lenguaje
base de HTML para representar los distintos componentes de la
aplicación.
“Es lo que el HTML hubiera sido, si hubiera sido diseñado para crear
aplicaciones web”
AngularJS Team
9. ¿Qué es entonces AngularJS?
• Un framework de javascript
• Es tecnología server-agnostic ya que todo lo ejecuta del lado
del browser
• Intenta definir el comportamiento de la aplicación mediante
nuevas “construcciones” dentro del HTML mismo
• Define lineamientos claros de cómo estructurar una aplicación
web (client-side)
• Orientado a aplicaciones web CRUD
10. La filosofía base de AngularJS
• Desacoplar la manipulación del DOM de la lógica de la
aplicación (Presentation vs Business Logic)
• Desacoplar la lógica de la aplicación del lado del cliente, de la
lógica de la aplicación del lado del servidor
• El framework debe guiar a los Developers en cómo ir
estructurando los diferentes componentes de una aplicación
client-side
• Le otorga mucha importancia a las pruebas (TDD y Testing-
ready)
11. ¿Para qué NO es AngularJS?
• No es una tecnología de aplicaciones Web del lado del
servidor, sino que debe complementarse con una de ellas
• No es óptima para aplicaciones con alta manipulación del
DOM del browser, tales como los juegos o los editores de
textos
• No depende de jQuery (aunque puede utilizarse y son
perfectamente compatibles) y no intenta competir con los
problemas que jQuery resuelve adecuadamente
(manipulación detallada del DOM del browser)
14. Single-page Apps (SPAs)
• Una aplicación web que está conformada por una sola página
HTML
• La aplicación se carga en una sola llamada al server
• No es necesario refrescar la página para ir utilizando la aplicación
• No se transfiere el control a ninguna otra página
• Provee una experiencia similar a las aplicaciones desktop-only
15.
16. Inicialización y Data-binding
<!doctype html>
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div>
<label>What do you think about AngularJS:</label>
<input type="text" ng-model="angularIMHO" placeholder="Please, tell us">
<hr>
<h1>{{angularIMHO}}</h1>
</div>
</body>
</html>
17. Controladores y directivas
<body>
<h2>Teams in World Cup Brazil 2014</h2>
<div ng-controller="TeamsCtrl">
<span>{{remaining()}} with possibilities to be champion, of {{teams.length}} teams</span>
[ <a href="" ng-click="restart()">Restart only with classified teams</a> ]
<ul class="unstyled">
<li ng-repeat="team in teams">
<input type="checkbox" ng-model="team.eliminated">
<span class="reject-{{team.eliminated}}">{{team.name}}</span>
</li>
</ul>
<form ng-submit="addTeam()">
<input type="text" ng-model="teamName" size="30"
placeholder="add new team here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
24. Lo usual para AngularJS
• Browser reciente (Chrome, Safari, Firefox, IE9+)
• Servidor web
• Editor de Texto (ejemplo: SublimeText)
• Control de versiones (ejemplo: Git)
• Servicios de BackEnd (p.ej: Base de Datos; Aplicación server-
side con un API RESTful JSON-based)
• Para pruebas (TDD) : Jasmine (javascript) y Karma (Task
runner)
31. Rutas y Deep Linking
Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
32.
33. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
34. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
35. ngInit
<body>
<h1>World Cup Brasil 2014</h1>
<div>
<label>Which team will win the group D?</label>
<p>Costa Rica</p>
</div>
<div ng-init="firstTeam = 'Costa Rica' ">
<table>
<tr><td>{{firstTeam}}</td></tr>
<tr><td>England</td></tr>
<tr><td>Italy</td></tr>
<tr><td>Uruguay</td></tr>
</table>
</div>
</body>
ngInit evalúa una
expresión en el
scope actual
36. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
37. ngChange
<div>
<input type="checkbox" ng-model="costaRica" ng-change="change()" id="ng-
change-example1" />
<input type="checkbox" ng-model="costaRica" id="ng-change-example2" />
<label for="ng-change-example2">Costa Rica?</label><br />
<tt>Costa Rica? = {{costaRica}}</tt><br/>
<tt>Cambios de opinion? = {{counter}}</tt><br/>
</div>
</body>
<script>
function Controller($scope) {
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
}
</script>
ngChange evalúa
una expresión
cuando el usuario
cambio el input
38. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
39. ngShow
<body>
<h1>World Cup Brasil 2014</h1>
<div>
<label>Which team will win the group D?</label>
<p>Costa Rica</p>
</div>
<div>
<table>
<tr><td>Costa Rica</td></tr>
<tr><td>England</td></tr>
<tr><td>Italy</td></tr>
<tr><td>Uruguay</td></tr>
</table>
</div>
<div>
<input type="checkbox" ng-model="costaRica" />
<label>Costa Rica?</label><br />
<tt ng-show="costaRica">Yes! I think Costa Rica will win the group!!</tt>
</div>
</body>
ngShow muestra o
esconde un
elemento dado
dependiendo de la
expresión. Si la
expresión es
verdadera, muestra
el elemento.
40. ngHide
<body>
<h1>World Cup Brasil 2014</h1>
<div>
<label>Which team will win the group D?</label>
<p>Costa Rica</p>
</div>
<div>
<table>
<tr><td>Costa Rica</td></tr>
<tr><td>England</td></tr>
<tr><td>Italy</td></tr>
<tr><td>Uruguay</td></tr>
</table>
</div>
<div>
<input type="checkbox" ng-model="costaRica" />
<label>Costa Rica?</label><br />
<tt ng-hide="costaRica">Mmm... No, I think is some kind of difficult.</tt>
</div>
</body>
ngHide muestra o
esconde un
elemento dado
dependiendo de la
expresión. Si la
expresión es
verdadera, esconde
el elemento.
41. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
42. ngClick
<div ng-init="count=0">
<button ng-click="count = count + 1">
Votes for Costa Rica will win the group
</button>
<br />
<button ng-click="count = count - 1">
Votes for Costa Rica won´t win the group
</button>
<br />
count: {{count}}
</div>
ngClick permite
especificar un
comportamiento
cuando un elemento
es clickeado
43. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
44. ngClass
<p ng-class="{strike: deleted, bold: important, red: alert}">Definitely
Costa Rica!!</p>
<input type="checkbox" ng-model="deleted"> I don't think so (apply
"strike" class)<br>
<input type="checkbox" ng-model="important"> Obvious (apply "bold"
class)<br>
<input type="checkbox" ng-model="alert"> Red Alert (apply "red" class)
<hr>
<p ng-class="style">Usando Strings</p>
<input type="text" ng-model="style" placeholder="Type: bold strike
red">
<hr>
<p ng-class="[style1, style2, style3]">Using Arreglos</p>
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>
ngClass permite colocar clases CSS dependiendo de una expresión: objeto, string o arreglo
45. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
46. ngSrc
Breve correción en el uso del tag <img src=“…” />
Uso normal:
<img src="http://www.oursite.com/{{brazilImg}}"/>
Uso en AngularJS:
<img ng-src="http://www.oursite.com/{{brazilImg}}"/>
47. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
48. ngDisabled
<div ng-init="count=0">
<button ng-disabled="checked" ng-click="count = count + 1">
Votes for Costa Rica will win the group
</button>
<br />
<button ng-disabled="checked" ng-click="count = count - 1">
Votes for Costa Rica won´t win the group
</button>
<br />
count: {{count}}
</div>
<p>Do you want to disable the buttons? <input type="checkbox" ng-
model="checked"></p>
ngDisabled permite deshabilitar botones utilizando expresiones de AngularJS
49. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
50. ngSubmit
<div>
<form ng-submit="submit()" ng-controller="Ctrl">
Enter the teams that you think could win the World Cup and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
</div>
<script>
function Ctrl($scope) {
$scope.list = [];
$scope.text = 'Costa Rica';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}
</script>
ngSubmit ejecuta
expresiones de
AngularJS cuando un
Form es “enviado” (o
submitted)
51. Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
58. AngularJS y una RESTful API
Servicio
$http
• Si el API no es
completamente RESTful
• Otorga más flexibilidad
pero quizá se deba escribir
más código
Servicio
$resource
• Mejor con RESTful APIs
• Viene con el módulo
ngResource
• Métodos de más alto nivel
de abstracción
69. AngularJS y TDD
Pruebas Unitarias:
Jasmine: BDD Framework para javascript
Karma: Ejecuta pruebas (Test Runner)
Pruebas end-to-end
Protractor
•WebDriverJS
70. ¡Muchas Gracias!
Ing. Leopoldo Rojas Moguel, MBA
leopoldo.rojas@arckanto.com
“Me lo contaron y lo olvidé; lo vi y lo entendí; lo hice y lo aprendí”
Confucio