ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el...
Transcript of ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el...
![Page 1: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/1.jpg)
![Page 2: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/2.jpg)
http://ElAveFenix.net
![Page 3: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/3.jpg)
![Page 4: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/4.jpg)
![Page 5: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/5.jpg)
Sistema de licencias
![Page 6: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/6.jpg)
![Page 7: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/7.jpg)
• Está disponible en la dirección:
http://go.microsoft.com/fwlink/?LinkId=524433
Características principales:
• Entorno de desarrollo integrado completo y totalmente extensible
• Ecosistema con miles de extensiones
• Desarrollo de Windows, iOS y Android apps
• Desarrollo web y nube
• Incluye soporte para varios lenguajes C#, C++, JavaScript, Python y más
• GRATIS para desarrolladores individuales
• GRATIS para proyectos Open Source, investigación, educación y pequeños
equipos profesionales
![Page 8: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/8.jpg)
![Page 9: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/9.jpg)
Visual Studio Web Tools
(evolucióny posibilidades
actuales)
![Page 10: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/10.jpg)
Browser Link
Editor HTML,
CSS3 y
JavaScript
Web
EssentialsSide Waffle
Con Visual Studio 2013 –> Web Tools
![Page 11: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/11.jpg)
11
BrowserLink
![Page 12: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/12.jpg)
BrowserLink - Inspect
![Page 13: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/13.jpg)
BrowserLink
• Se basa en un estándar de JavaScript 5: Web Sockets
•Microsoft implementa Web Sockets mediante la librería SignalR
•Permite integrar otros navegadores en la experiencia de desarrollo y depuración
•Posibilita en lanzamiento múltiple de varios navegadores simultáneos.
•No excluye el uso de "Inspector"
![Page 14: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/14.jpg)
14
![Page 15: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/15.jpg)
¡Aquí van los datos!
![Page 16: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/16.jpg)
¡Sí!
![Page 17: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/17.jpg)
Básicamente…
![Page 18: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/18.jpg)
![Page 19: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/19.jpg)
• Conexión persistente entre Cliente y Servidor sobre HTTP
• Aplicaciones multi-usuario de tipo real-time fáciles de construir
• Auto-negociación del transporte
![Page 20: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/20.jpg)
¿Cómo funciona SignalR?
• Permite técnicas push y RPC de servidor a cliente
• Construido de forma asíncrona para soportarhasta 1000’s conexiones concurrentes
• Escalable mediente Service Bus, SQL Server & Redis
• Open Source en GitHub
![Page 21: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/21.jpg)
Un hub is una clase .NET
que hereda de
Microsoft.AspNet.SignalR.Hub
Como los Hubs se llaman
desde el cliente por el
nombre se puede
personalizar si es necesario
La propiedad Clients del
Hub expone propiedades
dinámicas utiles para
dirigirse a clientes
específicos
Las clases Hub tienen
métodos virtuales para
responder a eventos de
conexión/desconexión
![Page 22: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/22.jpg)
Clients.All.doWork()
![Page 23: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/23.jpg)
Clients.Caller.doWork()
![Page 24: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/24.jpg)
Clients.Others.doWork()
![Page 25: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/25.jpg)
Clients.Users(“Brady”).doWork()
![Page 26: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/26.jpg)
Cliente JavaScript Cliente .NET
![Page 27: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/27.jpg)
Note – the order is
important!
![Page 28: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/28.jpg)
![Page 29: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/29.jpg)
![Page 30: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/30.jpg)
![Page 31: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/31.jpg)
![Page 32: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/32.jpg)
HTML5 CSS3
JavaScript TypeScript(*)
Soporte de estándares Web: Análisis individual
![Page 33: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/33.jpg)
Web Essentials
![Page 34: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/34.jpg)
Web Essentials
• Complemento disponible en todas lasversiones de Visual Studio desde 2010
• Incluyendo las versiones Express y Community
• Instalable desde la opción "Extensiones y Actualizaciones"
• Creada y mantenida por MadsChristensen, del equipo de ASP.NET
![Page 35: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/35.jpg)
Web Essentials
• Soporte HTML5 en etiquetas y atributos
• Soporte semántico en HTML5
• "Snippets" de construcción rápida de Código
• Soporte de EMMET (antiguo Zen Coding)
![Page 36: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/36.jpg)
Web Essentials
• Soporte sintáctico de librerías de terceros:
• Knockout, Angular, BootStrap, jQuery, etc.
• Soporte de herramientas de optimización Web:
• Optimización de imágenes
• Conversión a formatos Base64 (imágenes, fuentes…)
• Contextos: detección de características CSS con indicación del navegador soportado y la version
• Soporte de meta-lenguajes CSS: LESS y SASS
![Page 37: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/37.jpg)
Web Essentials
• Soporte extendido de JavaScript• Junto a otras características de los editores de Visual Studio,
ahora disponemos de un conjunto completo de desarrollo para este lenguaje:
• Depuración (condicional, etc.)
• Intellisense (extendido por el usuairo)
• IntelliTrace, etc.
![Page 38: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/38.jpg)
![Page 39: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/39.jpg)
![Page 40: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/40.jpg)
![Page 41: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/41.jpg)
TypeScript
![Page 42: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/42.jpg)
TypeScript
• Muchas novedades respecto a este lenguaje• Actualmente, se encuentra en las versiones:
• 1.4: Estable
• 1.5: Beta (incluye Annotations)• Es un motor sintáctico que cuenta con un editor y un
"transpilador" de Código integrados en Visual Studio• Genera código JavaScript utilizable hasta en IE7.• Su sintaxis es totalmente OOP
![Page 43: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/43.jpg)
TypeScript
• TypeScript aporta tipado a JavaScript
• Permite declarar clases, interfaces y módulos
• Esto aporta separación, al igual que la que obtenemos con lenguajes .NET
• Podemos heredar, implementar interfaces, declarar miembros privados, protegidos y públicos, etc.
• El editor reconoce las definiciones e indica los errores en tiempo de edición.
![Page 44: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/44.jpg)
TypeScript: La gran sorpresa
• En el pasado evento Google I/O, el Jefe de Proyecto de Angular (MiškoHevery), anunciaba en la "Keynote" un par de cosas:
• Que llevaban trabajando con el equipo de Heljsberg (TypeScript) casi un año
• Que desde ese momento abandonaban su propio lenguaje (AtScript) para pasar a construir Angular 2.0 totalmente en TypeScript
![Page 45: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/45.jpg)
TypeScript: La gran sorpresa
• En contrapartida, el propio Anders Hejlsberg llamaba al estrado de su presentación de TypeScript a Heveryy su colega Brian Milnar para hacer el anuncio más oficial:
• ¡La colaboración Google/Microsoft en temas de JavaScript es completa!
![Page 46: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/46.jpg)
![Page 47: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/47.jpg)
![Page 48: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/48.jpg)
![Page 49: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/49.jpg)
Emuladores: Android,
MAC, W. Phone
Apache Cordova
(PhoneGap)
Integración Xamarin
Herramientas de
Terceros:
Node.js, NPM, Bower,
Grunt, Gulp, etc.
![Page 50: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/50.jpg)
• Apache/Cordova es una plataforma basadas en los
lenguajes fundamentales de internet (HTML, CSS y
JavaScript) que permite programar con un solo núcleo
básico y acceder a los recursos de cualquier dispositivo
• Para ello, suministra un conjunto de API's que permiten
dicho acceso directamente desde JavaScript
• Con Visual Studio, podemos programar cualquier
aplicación usando A/C sin necesidad de más
herramientas.
![Page 51: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/51.jpg)
Arquitectura de Apache/Cordova (A/C)
• Apache/Cordova proporciona un
marco común de ejecución a través
de un "envoltorio nativo" (native
wrapper), que posteriormente
puede distribuirse a la plataforma
que se desee.
• Eso implica que tendremos que
realizar diversas "compilaciones" o
distribuciones finales del código si
queremos poder probarlo en los
distintos emuladores o en los
dispositivos finales.
![Page 52: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/52.jpg)
Arquitectura de Apache/Cordova (A/C)
• Apache/Cordova suministra un acceso
común a un número cada vez más
grande de plataformas móviles
• Permite utilizar los "frameworks"
JavaScript habituales sin ninguna
interferencia:
• AngularJS
• BootStrap
• jQuery/jQuery UI/jQuery Mobile
• KnockOut, Ember, etc.
![Page 53: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/53.jpg)
Soporte en los IDE (V. Studio)
• Aunque la plataforma está
soportada desde versiones
anteriores (2012) el soporte de A/C
desde Visual Studio 2015 es óptimo
y no precisa recurrir a ninguna
instalación adicional
• En las versiones anteriores a la
VS2015 RC, se requieren algunas
instalaciones adicionales
(Secondary Installer)
![Page 54: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/54.jpg)
Soporte en los IDE (V. Studio)
• A partir de la VS2015 RC
es solamente una
opción más de
instalación
• Esto incluye varios
emuladores: iOS,
Android, Windows
Phone, Windows 8, etc.
![Page 55: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/55.jpg)
Soporte en los IDE (V. Studio)
• Las posibilidades de depuración
son completas y las mismas que
esperamos de cualquier otra
plataforma y/o lenguaje dentro
de Visual Studio.
• Eso incluye la depuración directa
en dispositivo
![Page 56: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/56.jpg)
Soporte en los IDE (V. Studio)
• La edición del código también
cuenta con las ventajas habituales:
• Intellisense
• "Code completion"
• Sugerencias
• Sensible al contexto
• Multilenguaje
![Page 57: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/57.jpg)
Soporte en los IDE (V. Studio)
• Lo mismo puede decirse
respecto al código fuente, en
cuanto a las posibilidades
habituales: Ventanas de
depuración, puntos de
ruptura condicionales,
Intellitrace, etc.
![Page 58: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/58.jpg)
Soporte en los IDE (V. Studio)
• El acceso a las capacidades
nativas del dispositivo de salida
se configura igualmente desde
el propio IDE
![Page 59: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/59.jpg)
Soporte en los IDE (V. Studio)• Lo mismo puede decirse de los accesos a
datos mediante varios tipos de servicios:
![Page 60: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/60.jpg)
Open Source
• Al igual que muchos otros
proyectos de software en la
actualidad, Microsoft está poniendo
como código abierto buena parte
de las librerías de desarrollo.
• Esto incluye colaboraciones con
Google (AngularJS), o software de
servidor o cliente, como Entity
Framework o ASP.NET
![Page 61: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/61.jpg)
Primera aplicación Apache/Cordova• A partir de ese momento, dispondremos de un nuevo
tipo de proyecto en V. Studio
![Page 62: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/62.jpg)
Primera aplicación Apache/Cordova
• El explorador de Soluciones nos
muestra la arquitectura base de la
aplicación vacía, que ya es operativa y
puede servir para probar las
funcionalidades de soporte y ejecución.
• Vemos que se incluyen carpetas
específicas para las diversas
plataformas
• También incluyen recursos Web
personalizados (iconos, pantallas
iniciales, código JavaScript, etc.)
![Page 63: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/63.jpg)
Primera aplicación Apache/Cordova
• La carpeta merges guarda
contenidos que serán
distribuidos junto con la
aplicación final en el
momento del empaquetado
de la aplicación
• Ahí se puede añadir
contenido personalizado
para cualquiera de las
plataformas, de manera que
solo sea utilizado en alguna
de ellas, dependiendo del
dispositivo.
![Page 64: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/64.jpg)
La página principal• El código de la página principal no es más que un fichero HTML5,
con el marcado adaptado al nuevo estándar.
• Podemos utilizar cualquiera de las etiquetas promovidas por el
estándar tanto para la estructura del documento:
• <article>, <section>, <nav>, <header>, <footer>, <aside>…
• …como para la introducción de datos:
• La serie <input> (incluyendo calendarios, sliders,
numericUpDown… )
• O para recursos multimedia:
• <canvas>, <svg>, <video>, <audio>, etc.
![Page 65: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/65.jpg)
<!DOCTYPE html><html><head>
<meta charset="utf-8" /><title>DemoInicial</title>
<!-- DemoInicialIndra references --><link href="css/index.css" rel="stylesheet" />
</head><body>
<p>Hello, your application is ready!</p>
<!-- Cordova reference, this is added to your app when it's built. --><script src="cordova.js"></script><script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script></body></html>
![Page 66: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/66.jpg)
La Depuración• Todas las opciones de depuración que podemos esperar de
cualquier otro lenguaje están disponibles (pero multiplicadas) en las
herramientas de este tipo de proyectos (empezando por los
emuladores)
![Page 67: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/67.jpg)
La Compilación
• Es el proceso de integración y empaquetado de una
aplicación para un dispositivo concreto (el seleccionado
en las opciones de depuración anteriores)
• Podemos ver cómo Visual Studio utiliza las herramientas
que –de otra forma- tendríamos que utilizar para el
empaquetado desde líneas de comandos: Node.js, NPM,
etc.
![Page 68: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/68.jpg)
La ejecución en simulador
• Una vez lanzada la aplicación, el
emulador Ripple (Chrome), nos
permitirá probar la ejecución e
incluso nos suministra algunas
herramientas de "testing"
adicionales.
![Page 69: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/69.jpg)
La ejecución en simulador
• Además, debido a la similitud de los motores de interpretación de Ripple y
Android, lo que se puede ver es una simulación bastante aproximada a la
experiencia real.
• Por otra parte, podemos utilizar las herramientas habituales de depuración
para comprobar cambios en el código de marcado, modificaciones
(dinámicas, incluso) en el CSS de presentación, y añadir puntos de ruptura en
el código JavaScript
• Independientemente, podemos seguir utilizando las herramientas de
depuración de Chrome como siempre, y analizar el comportamiento del
HTML, CSS y JavaScript, utilizando puntos de ruptura, etc.
![Page 70: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/70.jpg)
![Page 71: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/71.jpg)
• Todo se invoca inicialmente en una función anónima que establece los comportamientos: Inicial, De pausa y de recuperación (resume)
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, // and then run "window.location.reload()" in the JavaScript Console.(function () {
"use strict";
document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
function onDeviceReady() {// Handle the Cordova pause and resume eventsdocument.addEventListener( 'pause', onPause.bind( this ), false );document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.};
function onPause() {// TODO: This application has been suspended. Save application state here.
};
function onResume() {// TODO: This application has been reactivated. Restore application state here.
};} )();
![Page 72: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/72.jpg)
Qué sucede por debajo (en ejecución)
• Dependiendo de la plataforma elegida, los diversos
"wrappers" del código a distribuir establecen "puentes"
con el dispositivo, mientras ejecutan el resto del código
en un contexto de seguridad.
![Page 73: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/73.jpg)
Qué sucede por debajo (en ejecución)
• Desde el punto de vista de las "pilas de ejecución" el
esquema correspondiente es algo como esto
![Page 74: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/74.jpg)
Acceso a recursos del dispositivo (Plug-ins)• El acceso a recursos del dispositivo requiere una
configuración del archivo "config.xml" que se incluye en el
proyecto.
• Desde Visual Studio, disponemos de un editor visual más
adecuado que nos evita errores de sintaxis, al tiempo que
nos recuerda qué opciones están disponibles y con qué
valores:
![Page 75: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/75.jpg)
![Page 76: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/76.jpg)
Opciones de configuración de emuladores
• De igual forma, los emuladores
disponibles presentan ventanas
de configuración donde podemos
realizar el "ajuste fino" de cara a la
depuración y pruebas con
diferentes versiones. Así que
disponemos de un Gestor del
Emulación de Android…
![Page 77: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/77.jpg)
Opciones de configuración de emuladores
• Gestor del SDK de Android…
![Page 78: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/78.jpg)
Opciones de configuración de emuladores• De Android Device Monitor…
![Page 79: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/79.jpg)
Opciones de configuración de emuladores• También disponemos de una herramientas de
configuración para iOS y Windows Phone …
![Page 80: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/80.jpg)
• Existe un buen conjunto de ejemplos, recursos y documentación ya disponible en sitios diversos.
• Y más especializada, en recursos como
• StackOverflow: http://stackoverflow.com/questions/tagged/visual-studio-cordova
• Foros MSDN: https://social.msdn.microsoft.com/Forums/
• Twitter: http://www.twitter.com/VSCordovaTools
• Y ejemplos en Github:
• Angular: https://github.com/Microsoft/cordova-samples/tree/master/todo-angularjs
• WinJS: http://go.microsoft.com/fwlink/?LinkID=398518
• Backbone: http://go.microsoft.com/fwlink/?LinkID=398517
![Page 81: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/81.jpg)
Emuladores: Android,
MAC, W. Phone
Emuladores: Android,
MAC, W. Phone
Apache Cordova
(PhoneGap)
Integración Xamarin
Herramientas de
Terceros:
Node.js, NPM, Bower,
Grunt, Gulp, etc.
Con Visual Studio 2015 –> Cross Platform
![Page 82: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/82.jpg)
Emuladores
• Visual Studio 2015 RC incluye la opción de instalar
emuladores adicionales.
• Por tanto podemos probar la ejecución de código en
diversos dispositivos (tanto móviles como tabletas) de
plataformas distintas, Windows incluido.
• Como hemos dicho: esto incluye Android, Mac,
Windows Phone, etc.
![Page 83: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/83.jpg)
Emuladores• Uno de los emuladores favoritos del momento es
Ripple (vinculado a Chrome) y soportado
directamente por Visual Studio
• Pero también podemos emular en emuladores
especiales que simulan de forma casi idéntica al
dispositivo real
• Tengamos en cuenta que V. Studio también permite
depurar en el dispositivo real.
![Page 84: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/84.jpg)
Emuladores: Android
![Page 85: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/85.jpg)
Emuladores: iOS• También podemos emular en dispositivos iOS reales o mediante
emuladores instalables, que podemos configurar como una opción
más de Visual Studio
![Page 86: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/86.jpg)
Emuladores: Windows• Finalmente, también podemos emular mediante simuladores de
máquina local, que reproduce en mismo sistema operativo Windows
donde nos encontremos:
![Page 87: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/87.jpg)
Emuladores: Android,
MAC, W. Phone
Apache Cordova
(PhoneGap)
Integración XamarinIntegración Xamarin
Herramientas de
Terceros:
Node.js, NPM, Bower,
Grunt, Gulp, etc.
Con Visual Studio 2015 –> Cross Platform
![Page 88: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/88.jpg)
Tipos de
aplicaciones
móviles
![Page 89: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/89.jpg)
Panorama actual
• Hay 3 aproximaciones al problema del desarrollo multiplataforma:• Código nativo: Objective-C (Apple), Java (Android), .NET (Windows Phone,
XBOX, etc.)
• 3 Proyectos distintos
• Sin código en común
• Código estándar: HTML5 + CSS3 + JavaScript5
• Un solo proyecto -> Mismo código
• Fácil de implementar y de probar
• Herramientas de todo tipo
• Funciona en navegadores modernos (IE9+, Chrome, Firefox,Opera)
• Solución híbrida: C# + Xamarin
![Page 90: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/90.jpg)
Desarrolloespecífico:
La aplicaciónse construye3 veces
![Page 91: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/91.jpg)
Desarrollomedianteestándares
Mínimocomúndenominador
Generación de
la aplicación
![Page 92: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/92.jpg)
El formato de los dispositivos
•Enorme variedad y sigue creciendo
![Page 93: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/93.jpg)
¿Por qué esta aproximación?
•HTML5 + CSS3 + JavaScript funciona en 25 navegadores diferentes, en más de 10 plataformas distintas (lo más universal que existe).
• La entidad que decide qué es el estándar es independiente: World Wide Web Consortium
•Él último estándar para páginas Web era del año 2000 (HTML 4.01)
![Page 94: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/94.jpg)
¿Por qué esta aproximación?
• JavaScript5 (con todas sus carencias) ofrece la posibilidad de crear Aplicaciones Web (y no solamente sitios)
•Todos los navegadores modernos implementan un nuevo motor de JavaScript que aprovecha el hardware de la máquina:• Hebras de ejecución• “Cores” disponibles• GPU, etc.
![Page 95: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/95.jpg)
![Page 96: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/96.jpg)
http://ie.microsoft.com/testdrive/http://ie.microsoft.com/testdrive/
http://ie.microsoft.com/testdrive/
![Page 98: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/98.jpg)
https://developer.chrome.com/home/devtools-pillar/
![Page 99: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/99.jpg)
https://developer.mozilla.org/es/
![Page 100: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/100.jpg)
http://www.opera.com/es-ES/developer/
![Page 101: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/101.jpg)
https://developer.apple.com/devcenter/safari/index.action
![Page 102: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/102.jpg)
http://www.w3c.es/
![Page 103: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/103.jpg)
¿Y el soporte?• IE10+, IE Edge, FireFox 14+, Chrome 21+, Opera 9.5+, Safari
6+ (Mac) tienen buenas implementaciones de los estándares
• La solución con el soporte hacia atrás son los “Fallbacks”• Librerías basadas en JavaScript que simulan el comportamiento de los
estándares en navegadores antiguos
• Las hay de varios tipos, y tenéis una referencia a muchas de ellas en la documentación del módulo de CSS3
• Si el problema es el soporte de IE, será porque las empresas quieren:• La última versión de IE11 (desde Mayo/2014) permite que se configure el navegador
para comportarse exactamente, como si fuera: IE6, IE7 o IE8
• Se configura corporativamente para la aplicación y la versión que se desee
• La versión IE Edge se comportará en cuanto a actualizaciones y comportamiento igual que Chrome
![Page 104: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/104.jpg)
¿El desarrollo para móviles es igual?
• El desarrollo es igual para el móvil que para tabletas, laptops o escritorio
• Pero hay que adoptar una política de diseño distinta:• Diseño “Mobile First”
• Primero pensamos en la estructura del sitio/aplicación tal y como debiera verse en un móvil
• Se continúa con un “escalado hacia arriba”• Se puede llegar hasta el diseño en grandes dispositivos (TV murales,
proyectores de entornos masivos, etc.)
• Se deben adatar los recursos por “familias de dispositivos”, dependiendo de “patrones de superficie”
• La forma en que el dispositivo utilizará una “versión” u otra es mediante “Media Queries”
• Se crea un patrón y las M.Q. adaptan el que conviene al dispositivo
![Page 105: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/105.jpg)
¿El desarrollo para móviles es igual?
• Podemos usar librerías especializadas• jQuery Mobile es una de las más populares
• BootStrap para la parte de presentación/adaptación
• PhoneGap/Cordova (distribución de las aplicaciones en la nube)
• Iconic es otra opción reciente que parece interesante
![Page 106: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/106.jpg)
SoluciónXamarin(para código nativo)
Nativomediantecomparticiónde código
![Page 107: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/107.jpg)
C# funciona en 2.600 millonesde dispositivos
![Page 108: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/108.jpg)
Windows APIs
![Page 109: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/109.jpg)
iOSAPIs
100% coverage
![Page 110: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/110.jpg)
AndroidAPIs
100% coverage
![Page 111: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/111.jpg)
CómofuncionaXamarin
C# + .NET Runtime
IU Nativa
Rendimiento Nativo
![Page 112: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/112.jpg)
Otros recursos
• Interfaces de usuario• UX Magazine: http://uxmag.com
• UX Matters: http://uxmatters.com
• UX Mastery: http://uxmastery.com
• CSS3• Lea Verou (http://lea.verou.me/)
• Chris Coyer (http://css-tricks.com/)
• Manoella Illic (Mary Lou) http://tympanus.net/codrops/
• JavaScript• David Flanagan (autor de “JavaScript. The Definitive Guide” 6ª Ed)
• http://it-ebooks.info/book/416/ (!!!!!!!!)
• Brendan Eich (autor de Javascript) https://brendaneich.com/
• Douglas Crockford (JSON): http://www.crockford.com/
• John Resig (jQuery): http://jquery.com
![Page 113: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/113.jpg)
Emuladores: Android,
MAC, W. Phone, etc.
Apache Cordova
(PhoneGap)
Integración Xamarin
Herramientas de
Terceros:
Node.js, NPM, Bower,
Grunt, Gulp, etc.
Herramientas de
Terceros:
Node.js, NPM, Bower,
Grunt, Gulp, etc.
Con Visual Studio 2015 –> Cross Platform
![Page 114: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/114.jpg)
¿Qué son todas esas nuevas herramientas?Nombre Función
Node.js Servidor Web, multiplataforma, no-bloqueante
NPM Manejador de paquetes para Node. Se
especializa en instalación de Herramientas.
NuGet Instalador de librerías externas en aplicaciones
cliente: incluye DLL's (.NET), y librerías
(JavaScript, CSS, etc.).
Bower Similar a NuGet, especializado en instalación de
paquetes "script" en cliente. El acceso pasa a ser
nativo en V. Studio 2015.
Grunt
Gulp
Git Repositorio de código fuente
Observaciones
Solo DLL's para ASP.NET 5
Pasa a jugar el papel de NuGet
en lo referente a librerías de
"scripts". Dispone de muchas
más librerías que NuGet.
![Page 115: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/115.jpg)
¿Qué son todas esas nuevas herramientas?
Nombre Función
Node.js Servidor Web, multiplataforma, no-bloqueante,
de instalación ligera.
NPM Manejador de paquetes para Node. Se
especializa en instalación de Herramientas.
NuGet Instalador de librerías externas en aplicaciones
cliente: incluye DLL's (.NET), y librerías
(JavaScript, CSS, etc.).
Bower Similar a NuGet, especializado en instalación de
paquetes "script" en cliente. El acceso pasa a ser
nativo en V. Studio 2015.
Grunt Ejecución de tareas en aplicaciones cliente. Se
instalan vía NPM y por aplicación (dif. Versiones)
Gulp Competidor del anterior. Realiza tareas como
compilación, B&M
Git Repositorio de código fuente
Observaciones
Soporta un motor de JavaScript interno para
su configuración.
Compiladores LESS, SASS, TypeScript,
CoffeScript, Bundling & Minifying etc.
Solo DLL's para ASP.NET 5
Pasa a jugar el papel de NuGet en lo
referente a librerías de "scripts". Dispone de
muchas más librerías que NuGet.
![Page 116: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/116.jpg)
• Todas ellas pueden seguirse utilizando desde la línea de comandos (como hasta ahora)
• Pero se integran con el IDE y podemos usarlas todas directamente sin necesidad de ventanas CMD adicionales.
• Dispondremos de una experiencia de usuario mejorada.
Soporte de nuevas herramientas en V. Studio 2015
![Page 117: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/117.jpg)
![Page 118: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/118.jpg)
Nueva estructura de proyectos
![Page 119: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/119.jpg)
Intellisense en todos los editores
![Page 120: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/120.jpg)
Intellisense en todos los editores
![Page 121: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/121.jpg)
Bower en acción
![Page 122: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/122.jpg)
El Explorador de Soluciones ofrece menús inteligentes
![Page 123: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/123.jpg)
Lo instalado por Bower podemos examinarlo
![Page 124: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/124.jpg)
Gulp
![Page 125: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/125.jpg)
Gulp
![Page 126: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/126.jpg)
Gulp
![Page 127: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/127.jpg)
Gulp
![Page 128: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/128.jpg)
Gulp
![Page 129: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/129.jpg)
Gulp
![Page 130: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/130.jpg)
Gulp
![Page 131: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/131.jpg)
Gulp
![Page 132: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/132.jpg)
Grunt
![Page 133: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/133.jpg)
![Page 134: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/134.jpg)
• El último recurso…
![Page 135: ElAveFenix Studio 2015 RC… · Microsoft.AspNet.SignalR.Hub Como los Hubs se llaman desde el cliente por el nombre se puede personalizar si es necesario La propiedad Clients del](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8357e301a519623c2201af/html5/thumbnails/135.jpg)