The basics (and best bits) of Google Analytics - 2017 Edition Adam Vincenzini
This top line mini-guide provides readers with a jargon-free summary of Google Analytics in 2017 and how to get started with it as a tool. It is recommended for newbies and beginners.
Tackling SharePoint Site And Microsoft Teams Sprawl In Microsoft 365 What You...Richard Harbridge
Without an effective governance strategy in place, Microsoft Teams and SharePoint Sites can quickly go from an organized and effective workspace to an out-of-control, sprawling digital wasteland. Sound familiar?
It's very common for organizations to experience Microsoft Teams & SharePoint Sites sprawl. But, when it does happen, how can you tackle it?
Join Microsoft MVP & 2toLead CTO, Richard Harbridge, as he explores:
* Challenges organizations face with Microsoft Teams & SharePoint Sites sprawl.
* Solutions to tackle Microsoft Teams & SharePoint Sites sprawl.
* Best practices to get more from Microsoft Teams & SharePoint.
* Real-world guidance on out-of-the-box solutions and custom approaches.
* How Microsoft 365 can improve experiences, management and organizational outcomes.
Accessibility In Mobile Dev LifeCycle.pptxMarkSteadman7
Mobile apps are developed and deployed at a very fast pace, so how can accessibility become a part of that? With automation, quick testing, and definition of done for accessibility we can make it apart of the dev process!
Design and its fundamental process have changed with time, growing challenges among the users, devices and different platforms for UI and UX process.
In Design Fundamentals, a day-long thorough workshop, we will try to understand the fundamentals of UI and UX process, and follow the standard process and approaches to create a user-centric design. With basic Design Principles as the the backbone for our design, of course!
A tutorial on Google Analytics 2017 melvinreceno the magnificentMelvin Receno
This tutorial show how using Google Analytics on a Weebly page benefits companies small and large alike in analyzing how engaged their customers are with their website. It explains briefly the ABC cycle basics going deeper into each report category and finally discussing the most common report viewed as the audience overview.
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaMicael Gallego
Introducción a TypeScript desde el punto de vista de un desarrollador Java. TS en un lenguaje que transpila a JavaScript y se puede usar tanto para el desarrollo web front-end como para el backend con Node.js. Angular 2, el framework de moda, recomienda su uso.
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?Micael Gallego
Charla del 12 de Marzo de 2014 en el MadridJUG, el grupo de usuarios de Java de Madrid. En ella se presentó JavaScript desde el punto de vista de un programador Java que se adentra en ese maravilloso mundo.
The basics (and best bits) of Google Analytics - 2017 Edition Adam Vincenzini
This top line mini-guide provides readers with a jargon-free summary of Google Analytics in 2017 and how to get started with it as a tool. It is recommended for newbies and beginners.
Tackling SharePoint Site And Microsoft Teams Sprawl In Microsoft 365 What You...Richard Harbridge
Without an effective governance strategy in place, Microsoft Teams and SharePoint Sites can quickly go from an organized and effective workspace to an out-of-control, sprawling digital wasteland. Sound familiar?
It's very common for organizations to experience Microsoft Teams & SharePoint Sites sprawl. But, when it does happen, how can you tackle it?
Join Microsoft MVP & 2toLead CTO, Richard Harbridge, as he explores:
* Challenges organizations face with Microsoft Teams & SharePoint Sites sprawl.
* Solutions to tackle Microsoft Teams & SharePoint Sites sprawl.
* Best practices to get more from Microsoft Teams & SharePoint.
* Real-world guidance on out-of-the-box solutions and custom approaches.
* How Microsoft 365 can improve experiences, management and organizational outcomes.
Accessibility In Mobile Dev LifeCycle.pptxMarkSteadman7
Mobile apps are developed and deployed at a very fast pace, so how can accessibility become a part of that? With automation, quick testing, and definition of done for accessibility we can make it apart of the dev process!
Design and its fundamental process have changed with time, growing challenges among the users, devices and different platforms for UI and UX process.
In Design Fundamentals, a day-long thorough workshop, we will try to understand the fundamentals of UI and UX process, and follow the standard process and approaches to create a user-centric design. With basic Design Principles as the the backbone for our design, of course!
A tutorial on Google Analytics 2017 melvinreceno the magnificentMelvin Receno
This tutorial show how using Google Analytics on a Weebly page benefits companies small and large alike in analyzing how engaged their customers are with their website. It explains briefly the ABC cycle basics going deeper into each report category and finally discussing the most common report viewed as the audience overview.
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaMicael Gallego
Introducción a TypeScript desde el punto de vista de un desarrollador Java. TS en un lenguaje que transpila a JavaScript y se puede usar tanto para el desarrollo web front-end como para el backend con Node.js. Angular 2, el framework de moda, recomienda su uso.
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?Micael Gallego
Charla del 12 de Marzo de 2014 en el MadridJUG, el grupo de usuarios de Java de Madrid. En ella se presentó JavaScript desde el punto de vista de un programador Java que se adentra en ese maravilloso mundo.
GRASP con PR para el SRFLP en el MAEB 2016Micael Gallego
Presentación sobre el Problema de la distribución de instalaciones en línea (SRFLP) en el MAEB 2016 dentro del CEDI 2016. Usamos un GRASP con Path Relinking que mejora los métodos del estado del arte
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Micael Gallego
Esta presentación corresponde al "Tema 3: Despliegue de aplicaciones web" de la asignatura "Desarrollo de Aplicaciones Web" de 3º del Grado en Ingeniería del Software de la ETSII en la Universidad Rey Juan Carlos.
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browserMicael Gallego
Slides de la charla en el MadridJUG sobre TypeScript y su parecido con Java. Se presentan los parecidos entre estos dos lenguajes y sus diferencias más notables.
La priorización de historias de usuario (versión ampliada)Micael Gallego
Presentación del meetup de Madrid Ágil del 29 de Enero de 2014.
Tenéis una versión reducida en: http://www.slideshare.net/micaelgallego/la-priorizacin-de-historias-de-usuario-versin-reducida
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Micael Gallego
Esta presentación corresponde al "Tema 1: Introducción" de la asignatura "Desarrollo de Aplicaciones Web" de 3º del Grado en Ingeniería del Software de la ETSII en la Universidad Rey Juan Carlos.
Docker para Data Scientist - Master en Data Science URJCMicael Gallego
Presentación de Docker en el Master en Data Science de la URJC en la asignatura de Arquitecturas en la nube. En esta asignatura hablamos de AWS, Azure, Docker, Kubernetes, Mesos
El mundo real en el aula, con la ayuda del profesorMicael Gallego
Presentación en las Jornadas de Innovación y TIC Educativas: JITICE 2016 de la Universidad Rey Juan Carlos.
Aplicación de Project Based Learning y Flipped Classroom en la asignatura de "Desarrollo Web" en el Grado de Ingeniería del Software
La priorización de historias de usuario (versión reducida)Micael Gallego
Presentación del meetup de Madrid Ágil del 29 de Enero de 2014.
Tenéis una versión ampliada en: https://www.slideshare.net/micaelgallego/la-priorizacin-de-historias-de-usuario2
En esta presentación se describe la tecnología WebRTC y el servidor de media Kurento. Se ilustran diferentes tipos de aplicaciones que pueden desarrollarse con esta tecnología, como un espejo mágico y un completo sistema de videoconferencia en grupo.
Slides del taller de Angular 2 realizado en el Campus Madrid de Google el 26 de Septiembre de 2016. Actualizado con la versión final de Angular 2.
Grabación del taller: https://www.youtube.com/watch?v=YVVjXpquzBE
Repositorio de código: https://github.com/codeurjc/ng2-campusmadrid
Using Docker to build and test in your laptop and JenkinsMicael Gallego
Docker is changing the way we create and deploy software. This presentation is a hands-on introduction to how to use docker to build and test software, in your laptop and in your Jenkins CI server
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Micael Gallego
Esta presentación corresponde al "Tema 2: Tecnologías de desarrollo web" de la asignatura "Desarrollo de Aplicaciones Web" de 3º del Grado en Ingeniería del Software de la ETSII en la Universidad Rey Juan Carlos.
Curso de Angular 9 para desarrollo de aplicaciones SPA (Single Page Application).
● Tema 1: Introducción a Angular: TypeScript y herramientas
● Tema 2: Componentes
● Tema 3: REST y Servicios
● Tema 4: Aplicaciones multipágina: Router
● Tema 5: Librerías de componentes
● Tema 6: Publicación
Presentación sobre "Introducción al desarrollo web moderno" ofrecida en el Evento organizado por el MUG en conjunto con la UAI Rosario, el día 05/06/2015.
Cómo incluir videoconferencia en tu web usando la tecnología WebRTC y servidores de media open source y comerciales. Se explora en más detalle OpenVidu, una plataforma de videoconferencias con ediciones open source y comerciales
¿Cómo poner software de calidad en manos del usuario de forma rápida?Micael Gallego
Ciclo de vida del software, repositorios de código, análisis estático de código, pruebas software, integración continua, entrega continua, despliegue continuo, DevOps.
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...Micael Gallego
Una vista panorámica de la situación actual de la concurrencia y la asincronía. Comparando modelos de concurrencia y técnicas de programación asíncrona en lenguajes de programación como Java, C/C++ y JavaScript.
Dev Tools para Kubernetes - Codemotion 2019Micael Gallego
Charla impartida entre Pablo Chico y Micael Gallego en la que se muestran algunas herramientas para mejorar la experiencia de desarrollo de aplicaciones cloud native para Kubernetes. Concretamente, se presenta cómo okteto puede reducir el tiempo empleado en el ciclo de change, build, push, deploy de pods Java en Kubernetes usando la sincronización de ficheros.
Ejemplos de código en https://github.com/micaelgallego/k8s-dev-tools-codemo19
Testing cloud and kubernetes applications - ElasTestMicael Gallego
Kubernetes applications are complex distributed systems composed by several microservices. When some end to end test is failing in these kind of applications, root cause is difficult without good observability tools. In this presentation, several tools are presented to make easier root cause analysis of cloud and kubernetes applications. One of the most interesting ones is ElasTest, a platform that integrates several open source tools to provide observability to e2e testing of complex distributed systems.
Kubernetes es una plataforma cada vez más utilizada para poner en producción aplicaciones y servicios. Todos los grandes proveedores cloud la ofrecen y también puede instalarse on premises. En estas slides presentaremos los concetos básicos de la plataforma y aprenderemos a desplegar aplicaciones.
Las slides se han usado en un curso gratuito que ha sido grabado y publicado aquí: https://www.youtube.com/watch?v=5ovqsvqwtZM
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosMicael Gallego
Kubernetes se ha convertido en una de las plataformas preferidas para la puesta en producción de aplicaciones escalables y tolerantes a fallos. Estas características son muy interesantes, pero suponen un reto para los sistemas de integración continua. ¿Cómo se prueba de forma automática que una aplicación se comporta como se espera cuando existen fallos o cuando la carga crece de forma importante? Y si no lo hace, cuál es el motivo? El Caos testing nos ayuda a simular fallos (matar contenedores, cortar la red...) pero además necesitamos monitorizar la aplicación para conocer su comportamiento interno. En la presentación damos un repaso por las técnicas y herramientas más utilizadas en este ámbito.
OpenVidu es una plataforma para incorporar videoconferencia y video streaming en tus aplicaciones web. Es muy fácil de usar y tienes multitud de ejemplos con diferentes tecnologías. Además, es open source. Qué más se puede pedir?
Estas slides son una presentación a las pruebas de software. Para qué sirven, qué tipos de pruebas existen, qué librerías, frameworks y herramientas se pueden utilizar para implemenar pruebas automatizadas, etc.
Node.js es una tecnología cada vez más popular para el desarrollo de servicios web. Grandes abanderados de Java como Netflix están usando cada vez más JavaScript para implementar parte de su backend. Pese a esta realidad, muchos javeros como yo no quieren tocar JavaScript ni con un palo, y cuando hay que hacerlo, sólo en el browser.
Si eres javero y no te gusta JavaScript, en esta presentación tendrás una visión general sobre cómo desarrollar servicios web con Node.js. Verás cómo con TypeScript, async/await y frameworks como Nest y TypeORM no echarás de menos a Spring y JPA. Pero lo mismo pasa al revés, verás cómo en Java también puedes implementar apps con los mismos principios reactivos y funcionales tan comunes en Node.js.
Testing fácil con Docker: Gestiona dependencias y unifica entornosMicael Gallego
Docker es una tecnología que permite empaquetar el software de forma que se pueda ejecutar de forma sencilla y rápida, sin instalación y en cualquier sistema operativo. Es como tener cualquier programa instalado en su propia máquina virtual, pero arranca mucho más rápido y consume menos recursos. Docker está cambiando la forma en la que desplegamos software, pero también está afectando al propio proceso de desarrollo y particularmente al testing.
En este taller pondremos en práctica cómo usar Docker para facilitar la implementación de diferentes tipos de tests y su ejecución tanto en el portátil como en el entorno de integración continua. Aunque las técnicas que veremos se podrán aplicar en cualquier lenguaje de programación, los ejemplos estarán basados en Java y en JavaScript.
Como ser mas productivo en el desarrollo de aplicacionesMicael Gallego
Charla impartida en la Universidad Politécnica de Madrid presentando algunas técnicas y herramientas para ser más productivo en el desarrollo de aplicaciones
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...Micael Gallego
En este artículo se describe una metodología docente que pretende emular en el aula el trabajo que los alumnos realizarán cuando finalicen sus estudios. Esta metodología combina el Aprendizaje Basado en Proyectos y la Clase Invertida y está diseñada para la asignatura de Desarrollo Web del Grado en Ingeniería del Software de la URJC. La metodología propuesta se aplicará en el curso 2016/2017 y supone una evolución de una metodología previa, aplicada en el curso 2015/2016 en la misma asignatura. Se espera que los cambios introducidos en esta nueva metodología mejoren los resultados obtenidos en el curso pasado.
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Telefónica
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0xWord escrito por Ibón Reinoso ( https://mypublicinbox.com/IBhone ) con Prólogo de Chema Alonso ( https://mypublicinbox.com/ChemaAlonso ). Puedes comprarlo aquí: https://0xword.com/es/libros/233-big-data-tecnologias-para-arquitecturas-data-centric.html
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
Recopilación de los puntos más interesantes de diversas presentaciones, desde los visionarios conceptos de Alan Turing, pasando por la paradoja de Hans Moravec y la descripcion de Singularidad de Max Tegmark, hasta los innovadores avances de ChatGPT, y de cómo la IA está transformando la seguridad digital y protegiendo nuestras vidas.
3Redu: Responsabilidad, Resiliencia y Respetocdraco
¡Hola! Somos 3Redu, conformados por Juan Camilo y Cristian. Entendemos las dificultades que enfrentan muchos estudiantes al tratar de comprender conceptos matemáticos. Nuestro objetivo es brindar una solución inclusiva y accesible para todos.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Es un diagrama para La asistencia técnica o apoyo técnico es brindada por las compañías para que sus clientes puedan hacer uso de sus productos o servicios de la manera en que fueron puestos a la venta.
10. 10
Nacimiento de la web
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>This paragraph one.</p>
<p>This paragraph two.</p>
<p>Bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla,
bla, bla.</p>
</body>
</html>
index.html
Visualización en el navegador
HTML
11. 11
Nacimiento de la web
CSS nace a los 4 años
para separar contenido y estilo (1996)
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<p>I’m blue</p>
</body>
</html>
p {
color: blue;
}
style.css
index.html
12. 12
Nacimiento de la web
CSS
p {
font-family: Arial;
color: blue;
font-size: 12px;
}
h3 {
color: red;
}
span {
background-color: yellow;
}
<h3>What's CSS for?</h3>
<p>CSS is for styling HTML pages!</p>
<h3>Why use it?</h3>
<p>It makes webpages look <span>really rad</span>.</p>
<h3>What do I think of it?</h3>
<p>It's awesome!</p>
13. 13
Nacimiento de la web
JavaScript nació un año antes
Aunque ha tenido diferentes nombres, el lenguaje apareció en el
navegador web Netscape en 1995
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("HellonHow are you?");
}
</script>
</body>
</html>
18. 18
Evolución de la web
También se han usado plugins
no estándares y no disponibles en
todas las plataformas
19. 19
Evolución de la web
¿Y los servidores web?
Al principio los servidores web únicamente
servían los ficheros del disco duro
(1995)(1995)
20. 20
Evolución de la web
Se han transformado en aplicaciones
que generan cada página con la información que
envía el usuario y/o la que está en la base de datos
Navegador
web
Servidor
web
1 - URL
Base de
datos
2 - SQL
4 - HTML 3 - Data
23. 23
El desarrollo web hoy
Existen varios tipos de webs
Dependiendo de cómo usan las tecnologías
de cliente y servidor
Página web Aplicación web
Servidor estático
El servidor web sirve
contenido guardado en el
disco duro
Servidor dinámico
El servidor web sirve
contenido generado
mediante código
24. 24
El desarrollo web hoy
Página web Aplicación web
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
● Aplicación web con
AJAX
● Aplicación web SPA
25. 25
El desarrollo web hoy
Página web Aplicación web
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
● Aplicación web con
AJAX
● Aplicación web SPA
26. 26
•Página web estática
El navegador hace petición al servidor mediante http
El servidor transforma URL a ruta en disco
El servidor devuelve el fichero de disco al navegador
El navegador visualiza la página HTML con estilos CSS e
imágenes (sin JavaScript).
Cuando el usuario hace clic en un enlace, el navegador
repite el proceso con la URL del link y recarga por
completo la página web
El desarrollo web hoy
29. 29
El desarrollo web hoy
● Página web estática
● Se implementa con HTML y CSS
● Se utilizan librerías de componentes CSS
● Bibliotecas de componentes predefinidos
● Diseño responsive (adaptativo a móviles)
● Distribución de componentes
32. 32
El desarrollo web hoy
Página web Aplicación web
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
● Aplicación web con
AJAX
● Aplicación web SPA
33. 33
•Página web interactiva
El contenido de la página web está alojado en el disco duro
del servidor (estático)
El cliente es dinámico porque las páginas incluyen código
JavaScript que se ejecuta en el navegador
Este JavaScript se usa para incluir efectos gráficos:
Efectos gráficos que no se pueden implementar con CSS
Mostrar u ocultar información en función de los elementos que se
seleccionan (para documentos largos)
Menús desplegables
Buscadores
El desarrollo web hoy
35. 35
El desarrollo web hoy
● Página web interactiva
● Se implementan con HTML, CSS y JavaScript
● Para implementar la interactividad en JavaScript
se suele usa la librería jQuery
36. 36
El desarrollo web hoy
Página web Aplicación web
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
● Aplicación web con
AJAX
● Aplicación web SPA
37. 37
•Aplicación web con cliente estático
Cuando el servidor web recibe una petición, dependiendo de
la URL:
Devuelve contenido del disco
Ejecuta código para generar el recurso dinámicamente
Cuando se ejecuta código, normalmente se hacen consultas
a una base de datos para recuperar la información y generar
la página HTML
Si el usuario pulsa un link, se recarga la página al completo
El desarrollo web hoy
39. 39
•Aplicaciones web con JavaScript
• Dependiendo de cómo se usa el JavaScript se
diferencian tres tipos:
Aplicación web interactiva
Aplicación web con AJAX
Aplicación web SPA
El desarrollo web hoy
40. 40
El desarrollo web hoy
Página web Aplicación web
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
● Aplicación web con
AJAX
● Aplicación web SPA
41. 41
•Aplicación web interactiva
El JavaScript se utiliza para crear efectos gráficos
(como las páginas web interactivas)
También se utiliza para validaciones de datos en
formularios
La gran mayoría de las aplicaciones web
disponibles en Internet son de este tipo
Suelen usar jQuery
El desarrollo web hoy
43. 43
El desarrollo web hoy
Página web Aplicación web
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
● Aplicación web con
AJAX
● Aplicación web SPA
44. 44
El desarrollo web hoy
•Aplicación web con AJAX
●
AJAX (Asynchronous JavaScript And XML)
JavaScript se usa para no tener que
recargar completamente la página al pulsar un link
Permite hacer petición al servidor web en segundo plano
(oculta al usuario)
Cuando llega al navegador el resultado de la petición, el
código JavaScript actualiza aquellas partes de la página
necesarias
45. 45
•Aplicación web con AJAX
El desarrollo web hoy
Navegador web
Servidor web
Web sin AJAX
46. 46
•Aplicación web con AJAX
El desarrollo web hoy
Navegador web
Servidor web
Web con AJAX
47. 47
•Aplicación web con AJAX
Usar AJAX en una página mejora mucho la
experiencia de usuario
No es necesario recargar la página al completo, sólo
aquellas partes que cambian
Se suelen implementar con jQuery
Se puede usar para simular el efecto de scroll infinito y
evitar los botones de anterior / siguiente
El desarrollo web hoy
49. 49
•Aplicación web con AJAX
Se puede dar realimentación al usuario antes
de enviar el formulario, por ejemplo en la selección del
nombre de usuario si tiene que ser único
El desarrollo web hoy
50. 50
•Aplicación web con AJAX
Cuando el código JavaScript hace
peticiones, el servidor puede devolver:
El desarrollo web hoy
Fragmentos de
HTML
Se incrusta directamente
en la página
Scroll infinito
Información
estructurada
Se interpreta por JavaScript
para modificar la página
Error de validación
51. 51
•Aplicación web con AJAX
Cuando un servidor web genera
información estructurada ante peticiones http se tiene
una API REST
La información se representa en formato JSON
{
form_validation:[
{id:“name”,status:“ok”},
{id:“email”,status:“error”,message:“Invalid format”}
]
}
El desarrollo web hoy
52. 52
El desarrollo web hoy
Página web Aplicación web
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
● Aplicación web con
AJAX
● Aplicación web SPA
53. 53
•Aplicación web SPA
SPA (Single Page Application)
La técnica AJAX se puede llevar al extremo y que toda la
información del servidor sea obtenida con JavaScript en
segundo plano, haciendo peticiones a la API REST y
obteniendo la información en JSON
La aplicación web es un conjunto de recursos HTML,
CSS y JavaScript que se cargan en el navegador al
acceder a la URL principal
El desarrollo web hoy
59. 59
El desarrollo web hoy
● Aplicación web SPA
● En el lado cliente son aplicaciones autónomas que se
comunican con el servidor con una API REST
● Son las más complejas de implementar
● Ofrecen una experiencia muy interactiva y dinámica al
usuario
● Las tecnologías que se usan para su desarrollo son
completamente diferentes al resto de páginas y
aplicaciones web
63. 63
Desarrollo de webs SPA
Plataforma y gestión de paquetes
Plataforma para
ejecutar aplicaciones JS
fuera del navegador
Gestor de
herramientas de
desarrollo y librerías
JavaScript
65. 65
Desarrollo de webs SPA
Lenguaje programación
● Los navegadores web sólo entienden JavaScript
● La última versión de JavaScript (ES6) no está
soportada por la mayoría de los navegadores
● Hay traductores de ES6 a ES5 (versión soportada)
● Existen lenguajes de programación que se
traducen a JavaScript y se ejecutan en los
navegadores
72. 72
TypeScript
Características
● Añade tipos estáticos a JavaScript ES6
● Inferencia de tipos
● Tipos opcionales
● El compilador genera código JavaScript ES5
(compatible con los navegadores web actuales)
● Orientado a Objetos con clases (no como ES5)
● Anotaciones
http://www.typescriptlang.org/
73. 73
TypeScript
Ventajas frente a JavaScript
● Con el tipado estático el compilador puede verificar
la corrección de muchas más cosas que con el
tipado dinámico
● Los programas grandes son menos propensos a
errores
● Los IDEs y editores pueden: Autocompletar,
Refactorizar, Navegar a la definición
● Muy parecido a Java y C#
74. 74
TypeScript
Facilidad de adopción para JavaScripters
● Los tipos son opcionales
● La inferencia de tipos permite no tener que
escribir los tipos constantemente
● En realidad es JavaScript con más cosas, así que
todo lo conocido se puede aplicar
● Un mismo proyecto puede combinar JS yTS, lo
que facilita migrar un proyecto existente
85. 85
TypeScript
Java vsTypeScript
List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
En Java las clases de la misma carpeta se pueden usar sin
importar. EnTypeScript se tienen que importar
86. 86
TypeScript
Java vsTypeScript
List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
En Java usamos List y ArrayList del SDK.
EnTypeScript usamos el Array nativo de JavaScript
87. 87
TypeScript
Java vsTypeScript
List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
En Java List el método es “add”
EnTypeScript Array el método es “push”
96. 96
Angular 2
Características
● Angular es un framework para desarrollo SPA
● Permite extender el HTML con etiquetas propias
● Con contenido personalizado (HTML)
● Con comportamiento personalizado (JavaScript)
● Interfaz basado en componentes (no en páginas)
● Se recomienda usar con TypeScript (aunque se
puede con ES5 y ES6)
● Inyección de dependencias
https://angular.io/
97. 97
Angular 2
Angular 2 vs Angular 1
● Está en beta (Feb 2016)
● Está implementado desde cero, no como una
evolución de Angular 1
● Angular 2 no es compatible con Angular 1
● Cuidado, la documentación de Angular 1 no sirve
para Angular 2
$scope
98. 98
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and libs -->
</head>
<body>
<app>Loading...</app>
</body>
</html>
index.html
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
}
app.component.ts
<h1>My First Angular 2 App</h1>
app.html
Uso del componente Implementación del componente
99. 99
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and libs -->
</head>
<body>
<app>Loading...</app>
</body>
</html>
index.html
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
}
app.component.ts
<h1>My First Angular 2 App</h1>
app.html
Uso del componente Implementación del componente
Elemento del
Componente
100. 100
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and libs -->
</head>
<body>
<app>Loading...</app>
</body>
</html>
index.html
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
}
app.component.ts
<h1>My First Angular 2 App</h1>
app.html
Uso del componente Implementación del componente
HTML del
Componente
101. 101
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and libs -->
</head>
<body>
<app>Loading...</app>
</body>
</html>
index.html
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
}
app.component.ts
<h1>My First Angular 2 App</h1>
app.html
Uso del componente Implementación del componente
Lógica del
Componente
103. 103
Angular 2
Componente dinámico
La vista del componente (HTML) se genera en función
de su estado (atributos de la clase)
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<h1>Hello {{name}}!</h1>
app.html
104. 104
Angular 2
Componente dinámico
La vista del componente (HTML) se genera en función
de su estado (atributos de la clase)
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<h1>Hello {{name}}!</h1>
app.html
105. 105
Angular 2
Datos enlazados (data binding)
Un campo de texto se puede “enlazar” a un atributo
para que los cambios se reflejen al escribir
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
app.html
106. 106
Angular 2
Datos enlazados (data binding)
Un campo de texto se puede “enlazar” a un atributo
para que los cambios se reflejen al escribir
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
app.html
107. 107
Angular 2
Ejecución de lógica
Se puede ejecutar un método ante un evento
producido en el componente
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
setName(name:string){
this.name = name;
}
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
<button (click)="setName('John')">
Hello John
</button>
app.html
108. 108
Angular 2
Ejecución de lógica
Se puede ejecutar un método ante un evento
producido en el componente
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
setName(name:string){
this.name = name;
}
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
<button (click)="setName('John')">
Hello John
</button>
app.html
109. 109
Angular 2
Ejecución de lógica
Se puede ejecutar un método ante un evento
producido en el componente
111. 111
Angular 2
Árboles de componentes
En Angular 2 un componente está formado por más
componentes formando un árbol
App
Header FooterMain
Comp1 Comp2
112. 112
Angular 2
Árboles de componentes
En Angular 2 un componente está formado por más
componentes formando un árbol
App
Header FooterMain
Comp1 Comp2
113. 113
Angular 2
Árboles de componentes App
Header
import {Component} from 'angular2/core';
import {HeaderComponent} from
'./header.component';
@Component({
selector: 'app',
templateUrl: 'app.html',
directives: [HeaderComponent]
})
export class AppComponent {}
app.component.ts
<header></header>
app.html
import {Component} from
'angular2/core';
@Component({
selector: 'header',
templateUrl: 'header.html'
})
export class HeaderComponent {}
header.component.ts
<h1>Hello Angular 2 App</h1>
header.html
114. 114
Angular 2
Árboles de componentes App
Header
import {Component} from 'angular2/core';
import {HeaderComponent} from
'./header.component';
@Component({
selector: 'app',
templateUrl: 'app.html',
directives: [HeaderComponent]
})
export class AppComponent {}
app.component.ts
<header></header>
app.html
import {Component} from
'angular2/core';
@Component({
selector: 'header',
templateUrl: 'header.html'
})
export class HeaderComponent {}
header.component.ts
<h1>Hello Angular 2 App</h1>
header.htmlHay que indicar los
componentes que se
usan en el template
115. 115
Angular 2
Árboles de componentes App
Header
import {Component} from 'angular2/core';
import {HeaderComponent} from
'./header.component';
@Component({
selector: 'app',
templateUrl: 'app.html',
directives: [HeaderComponent]
})
export class AppComponent {}
app.component.ts
<header></header>
app.html
import {Component} from
'angular2/core';
@Component({
selector: 'header',
templateUrl: 'header.html'
})
export class HeaderComponent {}
header.component.ts
<h1>Hello Angular 2 App</h1>
header.html
EnTypeScript hay que
importar todas las clases
que se usen (aunque
sean de la misma app)
116. 116
Angular 2
Angular 2 es mucho más
● Inyección de dependencias
● Servicios
● Navegación por la app (Router)
● Cliente http (APIs REST)
● Animaciones
● Internacionalización
● Testing
● Librerías de componentes: Material Design
● ...
118. 118
Ionic 2
● Desarrollo apps móviles
● Plataformas principales: Android, iOS, Windows
Phone
● Cada plataforma móvil tiene su propia tecnología de
desarrollo
● Diferentes lenguajes, entornos, librerías
● Alto coste de desarrollo apps multiplataforma
119. 119
Ionic 2
● Apps híbridas
● Aplicaciones implementadas con tecnologías web
(HTML, CSS y JS)
● Se instalan y actualizan como una app normal
● Acceden a los recursos del dispositivo con plugins
nativos
120. 120
Ionic 2
● Las apps nativas…
● Se integran mejor con el
sistema operativo
● Aprovechan mejor las
funcionalidades de los
dispositivos
● Pueden tener mejor
rendimiento
● Las apps híbridas…
● Son mucho más fáciles de
desarrollar (tecnologías
web)
● Un mismo código,
múltiples plataformas
● Pueden compartir parte
del código con webs SPA
Apps nativas vs híbridas
122. 122
Ionic 2
● ¿Qué es ionic 2?
● Es un framework de desarrollo de apps para móviles y
tablets
● Con tecnologías web (HTML, CSS y JavaScript)
● Basado en Angular 2
● La misma app se ejecuta en Android y iOS
● Basado en Apache Cordova
http://ionicframework.com/
123. 123
Ionic 2
App básica
Angular 2 con anotaciones nuevas y
componentes predefinidos
@Page({
templateUrl: 'profile.html'
})
export class Profile {
first = 'Biff';
last = 'Tannen';
}
<ion-navbar>
<ion-title>Profile</ion-title>
</ion-navbar>
<ion-content>
{{first}} {{last}}
</ion-content>
profile.page.ts profile.html
124. 124
Ionic 2
Componentes para
móviles
● Ionic 2 ofrece una librería
de componentes para
móviles
● La misma app se ve y se
comporta diferente en
Android y en iOS
127. 127
La nueva web está aquí
● Las tecnologías web han madurado mucho en los
últimos años
● Los navegadores son cada vez más eficientes y
compatibles entre sí
● Los nuevos lenguajes como ES6 yTypeScript
permiten el desarrollo de grandes aplicaciones
● Los frameworks SPA como Angular 2 facilitan el
desarrollo de aplicaciones complejas
● Las tecnologías web son la plataforma de
desarrollo universal