[Powered by Google Translate] [Seminario - Windows 8 - desarrollo de aplicaciones / juegos con HTML5] [Chris Bowen, Edwin Guarin - Universidad de Harvard] [Este es CS50. - CS50.TV] 

Hey, todo el mundo. Mi nombre es Edwin Guarin. Este es Chris Bowen. Dejaré que presentarse a sí mismo en un segundo. Sólo quiero hacer un anuncio rápido. En primer lugar, todo lo que los estudiantes CS50 Obtenga Windows 8 gratis. Así que si usted está pensando en realidad a usarlo para su proyecto final, es tuyo. Nate enviará un correo electrónico más tarde para obtener instrucciones. La segunda cosa es que si usted decide escribir una aplicación de Windows 8 para su proyecto final CS50, vamos a estar haciendo algunos regalos: una Xbox, podríamos ser capaces de dar una pizarra de distancia, cosas así. Así que si hay algo que te detiene, vamos a Chris o lo sé cómo podemos ayudarle a crear algo realmente bueno. Así que gracias de nuevo por venir hoy, y voy a entregarlo a Chris. 

Gracias, Edwin. Gracias a todos por estar hoy con nosotros. Soy Chris Bowen. Soy uno de los colegas de Edwin aquí en el noreste. Quería simplemente pasar un poco de tiempo con usted hablando cómo hacer una aplicación de Windows Store con HTML5, JavaScript y CSS y el tipo de conseguir todas las preguntas que pueda tener al respecto respondieron para usted como usted está mirando hacia pensando tal vez de usarlo para una fase final oportunidad CS50. 

Dicho esto, vamos a bucear a la derecha adentro Voy a ir más a las diapositivas aquí. Si usted tiene alguna pregunta, no dude en enviarme un correo electrónico. Estoy cbowen@microsoft.com, y no es mi blog y mi Twitter. Sin embargo, usted quiere ponerse en contacto conmigo, eso está bien. Tengo alrededor de una hora de cosas, y quiero llegar a sus preguntas en el camino, así que no tenga miedo de tener preguntas durante este. Ellos no pueden ver quién está haciendo las preguntas relativas al registro, por lo que será tan anónimo como usted quiere ser. 

Déjame bucear en derecho, sólo le dará una introducción rápida a Windows 8, y le mostrará algunas de las cosas acerca de Windows Store aplicaciones que usted podría considerar y cuando usted está pensando en desarrollar una aplicación. Estamos pensando en Windows 8. Hemos estado fuera por un par de semanas. Una gran cantidad de adopción firme por ahí ya. Es posible que haya visto ya las máquinas de superficie que tenemos también. Hay uno aquí realmente puedes echar un vistazo a si usted está aquí en persona. Tengo muchas ganas de hablar contigo, te enseñaré un poco acerca de Windows 8. La idea con Windows 8, lo que realmente se presentará toda la materia que usted sabe acerca de Windows en algunas nuevas experiencias - en particular, las cosas como en la máquina de la superficie con un toque, este tipo de dispositivos más móviles que están ahora en el mercado, pero también es de Windows en su núcleo. Así que esto significa que usted puede instalar realmente en cualquier cosa que funciona con Windows 7, de su mayor SLI triple plataforma de juegos a su ordenador portátil y para sus nuevos y relucientes otros dispositivos que se puede recoger en la actualidad. Las tareas se ejecutarán en Windows 8. Te voy a mostrar todo un poco, y todas las experiencias que usted ve aquí son cosas que se pueden crear. La idea es si es táctil, ratón, teclado, sea ​​cual sea el dispositivo es que usted está funcionando su aplicación sobre, que va a funcionar muy bien. Windows 8 va a ayudar con todos esos escenarios. 

Estas diapositivas a un lado, vamos a tener derecho a echar un vistazo por aquí. Déjame mostrarte mi pantalla de inicio. Este es mi pantalla de inicio. Sólo te voy a dar un poco de un tour aquí. Estoy en una máquina que no toque, por lo tanto como yo quiero tocar la pantalla de mi ordenador portátil, no va a hacer nada, así que voy a desplazarse por aquí un poco y mostrarle. Algunas cosas que usted puede notar es el hecho de que éstas lo son llamados live tiles realmente puede animar, y pueden proporcionar información a usted - tal vez las actualizaciones en las estadísticas de un juego o mostrarle noticias de algunas de las aplicaciones anteriores que están aquí en el lado izquierdo. Eso es. Estoy seguro de que es sólo positivo y fantásticamente gran noticia. Se puede ver aquí es realmente llamar su atención de nuevo a la aplicación, diciendo: "Oye, hay algo nuevo aquí. Echa un vistazo. Vuelve dentro y ver qué hay de nuevo para usted." Eso se llama live tile, y usted puede hacer las notificaciones ya sea desde la propia aplicación o si usted toma una mirada en más detalle, te darás cuenta de cómo escribir un servicio remoto que en realidad se puede insertar información de la baldosa, que es lo que está pasando con estas aplicaciones de noticias. Ellos en realidad están recibiendo noticias de la nube y la actualización de la baldosa allí que la gente sepa que hay una razón para abrir la aplicación y echar un vistazo cualquiera que sea la última noticia es en cualquiera de estos o si hay nuevas recetas o su nueva puntuación para vencer o un amigo de juego o lo que sea en estas aplicaciones. Es algo para atraerlo de vuelta pulg Así que eso es los azulejos en vivo, y podría ser una persona, que podría ser un sitio web también. Por lo general, se trata de una aplicación. 

Casi todas estas cosas que tengo aquí vinieron de la Tienda Windows. Me lanzaré eso. Es una de las aplicaciones que se obtiene de forma predeterminada en cualquier máquina que ejecuta Windows 8. Usted puede venir aquí para encontrar todo lo que quieras, de las cosas que se destacan a los juegos que no he visto antes. Oh, wow, tenemos un nuevo pinball aquí. Puede instalar estos aquí en la tienda, y hablaremos acerca de cómo desarrollar estos. Usted tiene un montón de opciones en la forma en que los crea. Nos enfocaremos en la historia en JavaScript con HTML y CSS, pero para el usuario, al comprador de la aplicación, no importa lo que estaba escrito pulg Ellos pueden seguir adelante y trabajar con él. Estoy intrigado por esta, así que tengo que abrir esto y echar un vistazo. Todas las aplicaciones, incluidos los que se pueden enviar y vender o regalar de forma gratuita, todo lo que quieres hacer en la tienda, obtendrá una página de inicio como este. Usted puede presentar con su solicitud un montón de capturas de pantalla - que se ve un poco de aquí - detalles sobre la aplicación, y con el tiempo irás acumulando ambas calificaciones - que son, básicamente, sólo el número de estrellas - y opiniones, que proporcionan un poco más penetración. En realidad, alguien tiene que escribir algo y te dicen lo maravilloso que eres, y que va a entrar en su sección de comentarios aquí, que yo no he mirado. Fantástico. "Ni siquiera voy a abrir." Qué grande. Bueno, para la gente para quien esta se abrió y correr, parece que realmente disfrutar de ella. [Risas] Tenga esto en cuenta. La Internet. Cualquiera puede decir lo que quieran acerca de su aplicación. Así que asegúrate de que estás haciendo un gran trabajo con él, asegurarse de que está haciendo lo más cómodo para el usuario como sea posible porque son un par de clics de distancia de proporcionar una opinión, y que se acumularán hasta que su valoración global de revisión. Y usted quiere hacer lo mejor porque vas a estar en contra de otras aplicaciones. Habrá miles de aplicaciones que ya están en la tienda, y las ocasiones son, puede haber algo que lo hace una funcionalidad similar a lo que estás haciendo. Así que si usted realmente puede destacar entre la multitud, que va a ser a su ventaja, por supuesto. 

Vamos a entrar en la tienda un poco más tarde. Realmente me quiero centrar en la creación de aplicaciones. Pero la versión corta de la tienda es de distribución mundial, es automáticamente parte de Windows 8, la gente simplemente disparan hacia arriba y miren diversas aplicaciones aquí, usted tiene el Sticker Book Dress-Up y todo tipo de aplicaciones diferentes. Pintura fresca, yo uso mucho esto - mal, pero lo uso mucho. Me está mostrando que ya poseo. Te voy a enseñar algo que no tengo - UVideos no tengo como nuevo. Aquí se puede apreciar que es gratis, así que usted puede instalarlo desde el almacén. Usted tiene opciones también. Por supuesto, puede dar a la basura. Usted puede poner publicidad en la aplicación o juego. También puede cobrar por él, y que podría proporcionar fácilmente un juicio para la aplicación, así por lo que puede dejar a la gente probarlo durante una semana o lo que quieras hacer. Eso es personalizable a través del portal. Usted no escribe ningún código para eso. Así que usted dice, "Usted puede utilizar esto para una semana y luego tienes que comprarlo" o usted podría hacer cosas como: "Usted podría jugar los 3 primeros niveles de este juego "Y entonces usted tiene que comprar para acceder a los demás." Usted podría incluso hacer compras en la aplicación, así que se puede decir, "Tenemos aventuras o juegos de gráficos o cosas que se desbloquean adicionales - "Más recetas que se desbloquean -. Si usted compra estos conjuntos extendidos" Y usted puede hacer que todos dentro de la aplicación o el juego en sí. Por lo tanto, totalmente de usted, su elección. Hay un montón de cosas que se pueden hacer en la tienda, y luego, básicamente, le vas a enviar a un canal de certificación. Podemos hablar de todo eso un poco más tarde, pero esta es la meta. Usted desea conseguir su visibilidad en todo el mundo de aplicaciones en la tienda aquí. 

De vuelta a la pantalla de inicio aquí, me gustaría que le muestre todo un poco más. Si lanzo estas aplicaciones, te voy a dar un ejemplo de funcionalidad cruzada aplicación aquí. Para hacer eso, yo lanzaré Fresh Paint. Una cosa que usted ve aquí es cada bit de la pantalla, todos los píxeles de la pantalla, vaya a su aplicación. Atrás han quedado los días en que usted tiene estas fronteras alrededor de las ventanas con un montón de botones que siempre están ahí ocupando espacio todo el tiempo. Ahora usted realmente quiere alejarse de eso y tener su contenido sea el enfoque. Podemos hacer cosas con Windows mediante el acceso a otros tipos de menús. Uno de ellos es en realidad lo que se llama la barra de encantos, y que sale desde el lado de la pantalla. En realidad se puede película desde el lado si tiene una pantalla táctil, usted puede hacer clic derecho si tiene un ratón, hay un atajo de teclado para que, siempre hay más de una manera de hacer algo en el ambiente aquí. Eso lleva a cabo una serie de cosas que usted puede hacer. La más obvia es que pueda volver a la pantalla de Inicio, pero los otros 4 son lo que se llaman encantos. Son contratos que se puede conectar a como un desarrollador de aplicaciones. Están muy bien. Buscar, estoy seguro de que eso es algo que vas a hacer, compartiendo Te voy a mostrar en un segundo, y Dispositivos y Configuración, estas son todas las cosas que su aplicación se puede insertar para aprovechar Windows, para decir: "Yo he hecho mi parte "Y quiero que Windows admite alguna otra funcionalidad, "Y yo no quiero escribir un montón de código para hacer que eso suceda." Eso es realmente un beneficio del uso de estas características. Te voy a enseñar una. Para hacer eso, voy a hacer una nueva pintura. También hablé sobre el uso de cada píxel para su aplicación. De forma predeterminada, esto es lo que la aplicación de la pintura se ve como cuando usted lo está utilizando. Es realmente acerca de lo que está dibujando, tu sitio. Podía hacer cosas horribles aquí. ¿Qué debo dibujar? No se. Garabatos? Oh, genial. Yo puedo hacer garabatos. Fantástico. Un pavo? [Risas] Este es el más abstracto del pavo verá. También puedo traer lo que se llama la barra de la aplicación, y esto es realmente una de las principales formas que se pueden utilizar ocultar lejos de todas las cosas que podría haber sido en su aplicación o juego antes simplemente ocupando espacio todo el tiempo. Así que ahora usted puede ponerlo aquí, y esto es realmente una de las más hermosas experiencias con la barra de la aplicación que he visto. Ponga las opciones aquí para seleccionar diferentes colores. Queríamos un pavo, así que vamos a poner un poco de café aquí, empezar a mezclar en un par de colores. Vamos a tomar un color intermedio aquí y luego vuelve aquí. Usted puede empezar a dibujar. Ahí está su pavo. Fantástico. No puedo dibujar, para empezar, pero hacerlo con un touchpad en frente de una audiencia es incluso mejor. Esto es impresionante. La idea, sin embargo, es todo lo que me importa es aquí mismo en la superficie. Digamos que estoy muy satisfecho con esto que tengo que compartirlo con alguien. Normalmente lo que se puede hacer con otras versiones de Windows, usted tal vez tomar una captura de pantalla, que le hace algo de copy-paste del texto o cosas por el estilo que desea compartir a cabo, y luego ir y abrir otra aplicación y lo puso en ella. Aquí no tiene que hacer eso. En realidad se puede poner de manifiesto la barra de encantos y decir: "Quiero compartir esto." En este punto se va a mostrar todas las aplicaciones que saben cómo trabajar con lo que está siendo compartida. En este caso se trata de una imagen, por lo que va a decir: "Veo que tienes una imagen." "¿Quieres compartir eso?" Usted puede ver que el email a mí mismo cosas todo el tiempo. Reconoce que, y me está ofreciendo que como un acceso directo, Pero también me mostró todas las aplicaciones que sabe cómo lidiar con la toma de una imagen y hacer algo con ella. Todos ellos han indicado a Windows que puedan hacer eso. En este punto se trata de Windows. El usuario simplemente elige lo que quiere hacer con ella. Voy a hacer mi habitual de PuzzleTouch. Se puede ver que he creado todo tipo de rompecabezas en el tiempo. Tomaré PuzzleTouch y decir: "Quiero compartir esta creación increíble con PuzzleTouch." Se va a seguir adelante y decir: "Muy bien. ¿Quieres compartir esto? Fantástico." "¿Quieres hacer un rompecabezas que es fácil, intermedio, lo que sea?" Voy a hacer una intermedia aquí. Esto hace que el rompecabezas. Va a ser un tremendo rompecabezas, porque es en su mayoría en blanco. Pero es listo, y de hecho es nuevo en la otra aplicación. Si vengo aquí, puedo buscarlo y lanzarlo. Ahora bien, si nos desplazamos durante sólo un poco aquí, deberíamos ver mi creación en alguna parte. ¿Qué hice? ¿Qué tipo de rompecabezas lo hago? ¿He hecho que sea fácil? Oh, ahí está, ahí mismo. [Risas] Es el rompecabezas de pavo fácilmente reconocible que está aquí. Pero lo que quiero señalar a usted, lo bueno aquí se las aplicaciones no sabían nada el uno del otro. Sólo dijo: "Tengo una idea para compartir, y sé cómo tratar con las imágenes." Y usted, como desarrollador, usted no tiene que escribir ese código. Cuando alguien me pide que compartir, me voy a poner algunos datos en esta pequeña estructura de datos y he terminado. La otra aplicación se hace cargo, hace su cosa, y ese es el final de la experiencia de compartir. Eso es una cosa que usted puede hacer - muy, muy potente - y que va a ser una de esas cosas que realmente podría ayudar a diferenciar su aplicación y también su juego demasiado en la tienda. La gente va a ser capaz de decir: "Esto es realmente útil." "Yo uso este creador de rompecabezas todo el tiempo. Es fantástico." 

Eso es suficiente de una breve descripción de lo que está pasando aquí. Hay un par de otras características también que a lo mejor vamos a destacar a medida que avanzamos a través de código. Pero quiero bucear en las diapositivas, y para hacer eso, yo voy a ir a escritorio, que es a su vez otra ficha en vivo aquí. Puedo entrar en esto y, por supuesto, estoy en mis diapositivas, pero déjame que te enseñe realmente dónde estamos. En realidad estamos en el modo de escritorio. Esto es realmente donde lo que estaba diciendo antes acerca de Windows llevar adelante a nuevas experiencias se muestra. Este es el de Windows ya sabes. Aplicaciones de Windows se denominan aplicaciones de escritorio. Corren aquí. Si has aplicaciones existente y desea ejecutar en Windows 8, todo se puede hacer eso. Estas no son las mismas cosas que las aplicaciones de la tienda, que son de aquí, como pintura fresca y estas aplicaciones y cosas así NBC News. Aquellos provendrá de la tienda. Pueden conectarse a algunas de las características que me estaba mostrando que y otros que no te he mostrado aún. Pero así que tenlo en cuenta. Tenemos el apoyo para estas dos cosas también. Lo siento. ¿Hay algo que no aparece en la pantalla? He perdido por completo. Eso es raro. Okay. Gracias por señalarlo. Lo que no ha estado viendo durante un tiempo es mi mostrándole que el escritorio está aquí. ¿Qué es lo último que has visto? ¿Has visto esto? Este es el escritorio. Usted ya sabe lo que parece. No es nada terriblemente inusual. Es nuestra experiencia que lleva adelante para usted y que le permite usar las cosas que usted ha tenido. Por ejemplo, voy a estar mostrando Visual Studio. Es una aplicación de escritorio. Se va a ejecutar en este modo. Se va a apoyar a un entorno más complejo con un montón de opciones y cosas por el estilo, por lo que se convierte en una buena opción como una aplicación de escritorio. 

Dicho esto, vamos a ir a las diapositivas para un poco y le dará algo de contenido introductorio y luego entrar en la realidad de codificación aquí. La buena noticia es que he oído que has estado enfocando en un montón de CSS y JavaScript, HTML. Todas esas cosas que has estado aprendiendo equipaje directamente en la fabricación de ventanas de la tienda de aplicaciones. Las cosas que has estado oyendo acerca de la aplicación de los selectores CSS y todas esas cosas es exactamente lo que hacer para crear una aplicación aquí para la tienda. Vamos a ir a través de estas cosas poco a poco. Básicamente, estoy construyendo en las cosas que ya se han tomado el tiempo para aprender. Esta es la carta general de las tecnologías que puede utilizar para hacer aplicaciones para Windows 8. La materia de la derecha, las aplicaciones de escritorio, es realmente lo que ya sabemos. Eso es algo que es realmente el mundo de Windows 7 se arrastró a Windows 8. Todas esas opciones se trasladan al futuro: C #, VB, Win32 tipo de desarrollo. Grande. No hay problema. El nuevo material está en el lado de la mano izquierda. Eso es de Windows para almacenar aplicaciones, que es cuando yo quiero hacer mi solicitud de cableado en Windows 8 utilizando todas esas características, lo consigue en la tienda, y conseguir que la experiencia realmente genial de las aplicaciones de Windows Store. Para hacer eso, usted puede ver aquí tienes todas las opciones con XAML, C + +, C #, VB, usted podría hacer DirectX, cosas así, cosas que van más allá de la diapositiva. Pero para nosotros, nos vamos a centrar en la derecha en el hecho de que el HTML, CSS y JavaScript son realmente un ciudadano de primera clase para hacer aplicaciones para Windows 8 y para la Windows Store. Así que esto es bueno para todo el mundo aquí y la gente viendo en vídeo ya que sólo puede aprovechar todas esas experiencias que tienes y realmente atar en lo que ofrece de Windows. Vas a hacer que a través de un conjunto de API, lo que debería ser una sorpresa. Cada sistema operativo tiene sus propias APIs. Exponemos lo que Windows puede hacer a través de lo que se llama WinRT. Es un conjunto de API que sólo lo hace todo por usted. Si usted necesita para abrir los archivos, necesita utilizar la cámara, geolocalización, cosas por el estilo, pasan por lo que Windows puede ofrecer a usted. Para acceder a esto, tenemos un poco más de JavaScript que va a hacer que sea aún más fácil para que usted haga eso. Vamos a llegar a eso en un momento. Pero por ahora, eso es, básicamente, su hoja de ruta. Las cosas que usted ya ha estado haciendo en la parte superior de algunas API que le ayudan a trabajar con Windows es igual a la tienda de aplicaciones. Y eso es realmente todo lo que tienes que saber del alto nivel. 

Vamos a sumergirnos en realidad trabajan con las cosas ahora. Las cosas que usted probablemente ha visto un montón de, con IE9 hace un rato nos introduce soporte para una gran cantidad de la, en ese momento, nuevos estándares en la Web, por lo que una gran cantidad de nuevas características de CSS, una gran cantidad de nuevo HTML, ECMAScript 5, que es realmente JavaScript. Así que todo lo necesario para que a excepción de modo estricto estaba en IE9. Sólo un montón de cosas con CSS, CSS3, todo ahí. Y todo esto lleva adelante en lo que estamos haciendo con Windows 8. Usted puede utilizar estas cosas, y se puede utilizar todo lo que hay de nuevo en IE10. Con IE10 introducimos el apoyo a todas estas cosas también. Son todos con aceleración por hardware, así que si estás en un equipo que tiene algún tipo de GPU, que es probablemente casi todas las máquinas que se podía conseguir en los últimos 8 años, usted va a ser capaz de tener la salida acelerada de hardware, salida visual con CSS, Canvas, SVG. Todas esas cosas van a ir a través de la aceleración de hardware y ser mucho más rápido y más eficiente. La versión corta de todo esto - yo no voy a ir a través de cada cosa aquí - si lo ves en esta lista, si puede hacerlo en IE10, si se trata de una aplicación web que se está ejecutando que funciona en IE10, que es algo que puede hacer como una aplicación de Windows Store. Y eso es prácticamente todo. Así que si funciona en IE10, que va a trabajar como una aplicación de Windows Store. Es en la mesa como algo que se puede utilizar. 

Hay mucho aquí. No tenemos hasta la medianoche, así que no puedo opinar sobre todo lo de aquí. Sin embargo, hay algunos sitios que le ayudarán a entender lo que estas cosas se pueden hacer, y yo te voy a mostrar una de ellas en un segundo. Yo sólo quería señalar algunas de las cosas claves que usted puede ver. Tal vez usted ya ha visto algunos de estos en sus estudios, pero estos son realmente útiles, en particular con el Windows Store aplicaciones, desde el lado CSS. Así que ser capaz de hacer las transformaciones y transiciones, proporcionar el movimiento con la animación - Todos ellos forman parte de la CSS ahora, y están todos soportados por los navegadores modernos, y IE10 e IE9 ha añadido soporte a través del tiempo para todas estas cosas. Y ¿por qué escribe usted mismo, ¿por qué ir por todos los problemas de hacer estas cosas con la mano cuando se podría utilizar un simple CSS transforman para crear un efecto 3D para su aplicación? Grande. Así es como funciona. No puedo hacer que sea más difícil que eso. Si usted sabe cómo hacerlo en CSS, ya sabes cómo hacerlo en la aplicación de Windows Store. 

Más allá de que para el diseño, incluso cosas como la App Store, pero va más allá de eso, mirando tal vez una aplicación de noticias que te está mostrando artículos o recetas o cosas por el estilo, estos otros tipos de características en CSS son realmente útiles: Cuadrícula, Flexbox CSS Regions es más de un bastante nuevo estándar también. Estas cosas están yendo para ayudar a usted presenta contenido y contenido entre secciones de flujo, ser capaz de hacer la paginación y división de palabras sin tener que escribir las cosas uno mismo. Usted acaba de decir: "Por favor, haga lo siguiente para mí" y como el espacio en pantalla es diferente en diferentes máquinas o como lo verá en un momento, como truena una aplicación tener una menor cantidad de espacio en la pantalla, eso no es problema para CSS. Se puede aprovechar - charla We'Ll acerca de las consultas de medios de comunicación en un segundo - que puede hacerse cargo de las cosas con el reposicionamiento de su contenido, que fluye el contenido de las regiones sólo con estas cosas que ustedes ya han visto con la tecnología web. 

Por el lado de HTML5, también hay un montón de cosas que será muy útil para usted con el Windows Store aplicaciones. Una vez más, no vamos a ir a través de todos ellos, pero son sólo aquí. Así que si hay que usarla, audio-video, si usted quiere hacer la validación de formularios, geolocalización, todas las cosas que puedes hacer en JavaScript con JavaScript o 5 ECMAScript 5, IndexedDB para almacenamiento local - estas son todas las opciones para usted. Si usted está buscando una respuesta, basta con ver a las tecnologías existentes con HTML5 y CSS y encontrará las respuestas más fácil que tener que sacar un montón de esas cosas a ti mismo. Te voy a enseñar todo un poco aquí. Tengo un sitio que podemos ir. Voy a dejar de salir de esta diapositiva por un segundo. 

Si salimos a IETestDrive.com, No voy a hacer mucho de una demo aquí. IETestDrive.com está realmente mostrando mucho de lo que hay de nuevo con IE10, las cosas que usted puede hacer. Me parece que esto es realmente útil porque en lugar de leer a través de un montón de libros blancos, un vistazo a un par de demos, y eso va a ayudar a poner en su propio radar personal acerca de si una tecnología tiene sentido incluso hacer más investigación con para que entiendas, "Veo lo que es esto." "Entiendo lo que hace trama de petición de Animación para mí." "Entiendo cómo podría utilizar Regiones o filtros SVG." Se les ve en acción, verlas en un ejemplo aquí, y decidir por ti mismo si eso va a ser útil para usted en sus propios proyectos y más allá a medida que continúe trabajando con la tecnología web. Aquí me gustaría simplemente animo a echar un vistazo. No creo que voy a pasar mucho tiempo que realmente ejecuta estos. Tenemos suficiente para mostrar con la escritura de código. Usted verá aquí las cosas de los efectos táctiles de juegos basada en el contacto de esa sección, animación, animación y acelerada de hardware muy rápido allí, algunas optimizaciones que se ven en algunas de estas muestras, así, y hay muchos, muchos más. Si usted se pasa de aquí y abre el mapa del sitio, sólo hay un número ridículo de muestras aquí. Puedes verlos todos aquí. Si usted está en busca de algo o se enteró de algo y usted se está preguntando tal vez esto sería algo genial para usar en la aplicación, Trate de buscar aquí, y es probable que haya una muy buena demostración de que ahorrar un poco de tiempo. 

¿De acuerdo? Cualquier pregunta hasta el momento para la gente aquí? Okay. Nosotros seguiremos aquí. Una vez más, sólo comprobar que fuera. Son los estándares web, por lo que ir a cualquier otro sitio de escaparate, que usted sepa y ver si esas tecnologías tienen sentido para lo que estás tratando de hacer. 

Copia de las diapositivas. Dicho esto, si se desplaza de un mundo Web realmente un mundo de aplicación local instalada, así que hay algunas cosas que comentar aquí. En primer lugar, no hay ningún servidor web involucrada aquí. No hay Apache, no hay que ejecuta IIS aquí servir las páginas a un cliente remoto, a un agente de navegador remoto. En este caso, en realidad todo lo que se empaqueta para usted. Usted envía que, como su aplicación a la tienda, que se certificó, que está fuera de la tienda, y luego la gente por miles instalará el juego o la aplicación. Pero, básicamente, están tirando de ella hacia abajo a nivel local para su máquina. No hay necesidad de salir a la Web ya menos que tenga las llamadas que necesitan una API remota, y eso es perfectamente normal, así también. Pero no van a estar en ese modo en el que tienen que ir petición respuesta de un servidor para obtener la página siguiente de su contenido. Así que dicho esto, hay algunas diferencias de menor importancia de la API. Estos son increíblemente menor. Son poco probable que le golpeó en su codificación normal, pero son al menos documentados. Son una especie de primera línea de los casos allí. 

La otra cosa es de señalar las diferencias de confianza. Sólo menciono esto porque yo sólo quiero asegurarme de que lo dije así que si llegas a tener más tarde, usted pensará, "Chris dijo algo al respecto, "Así que tal vez, sí, está bien", y luego volver atrás y averiguar de qué se trataba. Los contextos son importantes. Por defecto tratamos de proteger al usuario de los vectores de ataque. Hay ciertas cosas que usted puede hacer por defecto y ciertas cosas que hay que cambiar el contexto para habilitar. Como usted está usando algunas bibliotecas por ahí - usted ya se ha estado trabajando con jQuery, pero si se mira de otras bibliotecas por ahí - que pueda estar utilizando algunas funciones ese tipo de va más allá de los usos locales, ¿tiene interacciones más dinámicas Peticiones XHR, cosas así. Algunas veces usted puede encontrar a los se desactivarán de forma predeterminada, y en ese caso, basta con hacer una búsqueda, busque contexto local y web, y encontrará la manera de arreglar eso. Sólo asegúrese de que usted sabía que a medida que comience a utilizar otros marcos, la cual, debo mencionar, eres perfectamente capaz de hacer. Así que si usted encuentra algún otro marco - charla We'Ll sobre esto en un segundo - para los juegos y quieres usar eso, usted desea utilizar algunas librerías de control que están ahí fuera y usted no desea escribir esas cosas a ti mismo - que es una buena idea, ¿verdad? - puede utilizar absolutamente este material. No hay nada que te detiene el uso de cualquier tipo de biblioteca que está basada en JavaScript CSS, HTML5. Una vez más, si es algo que puedes hacer en IE10, que es un heck de mucho en estos días, usted puede hacerlo. Tire de ella en su aplicación, la referencia que la biblioteca de JavaScript, y lo utilizan en su aplicación, sólo teniendo en cuenta que puede pegarle a un contexto de seguridad de vez en cuando - no muy a menudo. 

Y a continuación, las características, vamos a repasar unos cuantos más de los que a medida que avanzamos. El UX te tipo de acostumbrarse a como se ve más y más aplicaciones de la tienda de Windows. Usted obtiene una idea de cómo funcionan y cómo el diseño estético tiende a trabajar a través de diferentes aplicaciones y lo que la gente puede utilizar para experimentar. Eso es realmente la parte más importante. Asegúrese de que cuando el fuego de su aplicación no necesitan leer un manual, que nunca lo hacen, por cierto. Ellos sólo deben ser capaces de empezar a jugar con su solicitud y calcular hacia fuera sin mucha dificultad. Al seguir y adherirse a una gran cantidad de estas prácticas, que va a hacer a sus usuarios un gran favor, haciendo que sea más fácil. 

Okay. Una última cosa en el lado de la API y luego nos meteremos en realidad la escritura de código. WinJS es que lo he mencionado muy brevemente con esa diapositiva compleja con todas esas diferentes opciones que tiene para hacer las aplicaciones. WinJS, se puede pensar en él como un amigo. Es su amigo para ayudarle a escribir las cosas más rápidamente. Es sólo JavaScript y CSS. Usted no tiene que usarlo. Usted puede utilizarlo. Si usted va a estar llamando a las características de Windows, que va a terminar de usarlo, pero si hay cosas como algunos patrones de diseño o controles que usted realmente no desea utilizar, desea utilizar otra cosa, le toca a usted. Decida lo que usted desea utilizar y los estilos que desea utilizar. Las características de la generación de espacios de nombre y clase - depende de usted. Si prefiere una u otra, es totalmente su decisión. Todavía es JavaScript y CSS. Pero esto va a ayudar a hacer un montón de cosas. Por ejemplo, aquí hay un subconjunto de lo que puede hacer, cosas como ayudar a la programación asincrónica con promesas. ¿Alguno de ustedes oído hablar o trabajaron con Node.js? Es un patrón común para trabajar con la programación asincrónica. Así que básicamente lo que está diciendo es: "Ve a hacer algo, "Y usted me va a dar una promesa de que volverás a mí cuando hayas terminado." Eso es esencialmente lo que está pasando. Así que no se congelan hasta su aplicación, mientras que el usuario va y recogiendo un archivo o algo está siendo transmitido desde la Web. La interfaz de usuario sigue siendo sensible. Y usted puede hacer esto mediante el uso de programación asincrónica. Suena ridículamente compleja, pero es realmente fácil, porque usted está utilizando promesas y que acaba de decir: "Ve a hacer esto y cuando haya terminado, volver a llamar a este método." Eso es prácticamente todo. Eso es todo integrado en WinJS. Esto va a hacer que sea mucho más fácil escribir aplicaciones realmente flexibles y potentes. 

Puedes ver el resto aquí, un montón de animaciones. Probablemente una de las cosas más importantes en esta diapositiva son controles. Creo que tengo un todo - Sí, lo creo. He aquí un ejemplo de algunos de los controles que puede utilizar en sus aplicaciones. Esto es todo en línea recta desde WinJS. Usted no está escribiendo estos mismos, Acabas de decir, "Así es como yo quiero componer mi solicitud." "Voy a usar una vista flip para poder ir entre las diferentes imágenes." Yo no te he mostrado zoom semántico. Te voy a mostrar que en un segundo. Listviews. Hay GridViews. Ya ha visto una rejilla en el marco de la aplicación de almacenamiento, así que la posibilidad de utilizar bloques de contenido y el desplazamiento a través de eso. Menús menú lateral verás de vez en cuando. La barra de la aplicación que te mostró con la aplicación de la pintura fresca, así, por lo que vio cómo se pueden personalizar los botones que al poner en él y que tiene que ocultar lejos cuando no te importa usar eso. Eso es realmente totalmente de usted para su uso. Estos son todos los controles que forman parte de WinJS. Te voy a mostrar cómo hacer esto en tan sólo unos segundos, pero no hay mucho más que esto, y la clave es usarlos si quieres, ahorrar un poco de tiempo. 

Si usted tiene otras bibliotecas de control que le gustaría usar, eso es perfectamente bien también. Cosas como jQuery UI hacen una gran cantidad de este tipo de idea, así, proporcionar más controles que se extienden más de lo que puede hacer en HTML y JavaScript. Vamos a bucear pulg Ya he dicho eso. Usa lo que te gustaría. Hemos de tener en cuenta que usted podría encontrarse con algunos problemas de contexto. Pero que sin duda puede mezclar y combinar cualquier tipo de bibliotecas que se sienta cómodo, quieres aprender, que desea utilizar, para ahorrar un poco de tiempo. 

Vamos a hablar acerca de las herramientas sólo por un segundo. Usted puede conseguir lo que necesita para comenzar a trabajar con Windows Store aplicaciones. Si voy a salir, tengo demasiadas cosas por aquí. Si vas a esta página, que es dev.windows.com, se puede descargar todo lo necesario. Como estudiantes, usted tiene acceso a más de la población en general lo hace, para que pueda obtener las versiones de gama alta de Visual Studio. Edwin mencionó que ya se puede obtener Windows también. Pero, en general, para todos los desarrolladores, puede ir a este sitio y descargar todo lo que necesita para hacer una aplicación, y todo es gratis. Así que hay una versión gratuita de Visual Studio, hay algunas herramientas que instalarán junto de eso - todo lo que necesita para crear y probar la aplicación. Es sólo cuando usted va a publicar la aplicación a la tienda que usted va a necesitar una cuenta de desarrollador. Esto también creo que es gratis. ¿Es gratuito para los estudiantes, así? >> [Guarin] ¿Cuál? La cuenta de desarrollador, la presentación efectiva. >> [Guarin] Sí. Esa es otra buena noticia. Irás mira esto. Se dirá que un individuo de forma predeterminada es de $ 49. Pero no inscribirse para que cuando era estudiante. Le daremos un poco de información a través de sus programas que usted puede obtener una cuenta gratuita, y que le permitirá luego enviar sus solicitudes hasta el almacén, como todas las que quieras, y toda esa bondad seguirán pronto. Así que eso es dev.windows.com. Puede descargar las herramientas que pueda necesitar de aquí. Y si lo desea, puede obtener una versión de prueba de Windows aquí, pero de nuevo, no será necesario hacerlo. 

El otro sitio - permítanme señalar este es para ti rápidamente - es design.windows.com. Eso fue dev.windows.com. Design.windows.com, usted puede adivinar para qué sirve. En realidad es un sitio bastante agradable. Hay un montón de buena información aquí. Usted puede trabajar a través de él. Se va a dar un consejo en algunas cosas que tal vez no han pensado antes o han tenido que hacer frente a antes, como el diseño para el tacto, el diseño de los diferentes factores de forma, diseñar para las capacidades de Windows 8, las cosas que he mencionado antes como la búsqueda y el intercambio, algunas cosas que no he hablado todavía. Todos están listados aquí, y es un muy buen conjunto de páginas de archivos útiles que le ayudará a entender cómo hacer un determinado tipo de aplicación, cómo hacer la interacción, cómo hacer frente a la UI y UX de su solicitud. Yo recomiendo que eches un vistazo a esto, especialmente si usted está en un cierto punto con la esperanza de publicar una aplicación a la tienda. Usted va a querer saber cómo hacer una buena aplicación ya he mencionado antes, si no lo hace, no hay esos exámenes de nuevo. La gente va a ser infeliz. No van a ser capaces de encontrar las cosas que esperan en los lugares correctos. Nadie quiere que eso le suceda a usted. 

El camino hacia adelante aquí, permítanme concluir eso. Ahora que usted sabe dónde conseguir las cosas, yo te mostraré cómo empezar utilizar realmente las cosas. Para empezar, voy a realmente mostrar aquí un ejemplo de las aplicaciones de escritorio en la pantalla de inicio. Aquí se puede ver Visual Studio, se puede ver Blend y otras herramientas de desarrollo que tengo. Tienen una baldosa ligeramente diferente. Eso es debido a que son aplicaciones de escritorio, y en aquellos casos en que todos van a poner en marcha de nuevo a mi escritorio realmente sólo como aplicaciones que usted está acostumbrado. Así que la experiencia de Windows, que es la misma cosa. No son, por ejemplo, como armado! o estas cosas. Permítanme lanzar uno rápidamente. En realidad, esto es muy interesante. Este fue desarrollado por los estudiantes que trabajan en cooperación al NERD. Aplicación a pantalla completa, este tipo de experiencias aquí. Oh, buenas pantallas de corte y todo tipo de cosas divertidas. Desarrollaron esto. También podríamos mostrar toda la cosa mientras estamos en ello. De hecho, he trabajado con ellos un poco, les dio algunos consejos sobre cosas porque estaban haciendo JavaScript para su aplicación. Por favor, no me estoy tomando el crédito por su trabajo, sino que hicieron todo el trabajo. Yo sólo les di un poco de consejo aquí y allí, pero lo hicieron algunas grandes cosas mediante el uso de una interfaz JavaScript y empatando en algunos motores de la física y cosas que hacer un montón de este trabajo. Vaya. Vamos a ver si funciona. Wow, que aún funcionaba. Muy bien, muy bien. Pero se entiende la idea. Una aplicación de pantalla completa, una experiencia muy buena. Esto se apoya no sólo el ratón y el lápiz si tengo cosas por el estilo, pero también toco. Si tuviera una pantalla táctil, tan sólo pudiera dibujar sobre él y seguir trabajando con eso. 

Una cosa que no se presentó, y la razón por la que estoy tocando el tema es que me quería tener otra aplicación para mostrar lo que puede hacer, usted puede tomar las aplicaciones de Windows y arrastrarlos hacia el lado de la pantalla. Esto se llama romperse una aplicación. En este caso, he tomado Inkarus y he añadido a un lado aquí. Ahora está a la vista Snap, y que me permite hacer otra cosa mientras que la aplicación está ahí. La mayoría de los juegos que encontrarás serán simplemente hacer una pausa. Eso es normalmente una cosa decente que hacer a menos que su juego de alguna manera se puede escalar hacia abajo para que los pequeños de una resolución, como tal vez algún tipo de juegos de mesa o cosas por el estilo en la ocasión. Pero, en general, la cosa más fácil de hacer y lo más apropiado para hacer por juegos es para hacer una pausa la aplicación. Para aplicaciones como aplicaciones de noticias, si lanzo esta uno y luego me Snap, verás que en realidad cambia de manera significativa en cómo se presentan los datos para usted. Aquí le está mostrando en realidad una cacerola más vertical que la información, pero todavía puedo utilizar absolutamente la aplicación. Por lo tanto, sigue siendo muy útil. El hecho de que se encuentra en un punto de vista más pequeño no me inhabilita el uso de esa aplicación. Así que pensar en eso. Es algo que usted necesita tener sus aplicaciones hacen hasta cierto punto, pero le toca a usted para determinar la forma funcional deben ser sus aplicaciones en ese tipo de un entorno más pequeño. Permítanme concluir que uno hacia abajo y volver a donde estábamos aquí. 

Edwin, que agregó una foto de mí ya? >> [Guarin] Sí. >> [Bowen] Mira eso. ¿Ves eso? Edwin agregó una foto. [Risas] 

Volvamos aquí en Visual Studio. Voy a lanzar esto para usted. Yo podría haber hecho clic en el azulejo en esa pantalla de inicio. Me trajo de vuelta a modo de escritorio, y es el lanzamiento de la aplicación de escritorio de Visual Studio. Se trata de los de Windows que usted ya conoce. Puedo seguir adelante y crear un proyecto aquí. Nos centraremos más en JavaScript, HTML. Voy a salir y seleccionar hasta aquí bajo JavaScript, Windows Store. Hay una serie de plantillas que se pueden utilizar. Para la productividad, le recomiendo que eche un vistazo a algunos de estos otros aquí como el Grid y Split. Son muy útiles si usted está haciendo una aplicación eso va a tener ese tipo de diseño y navegación. Verá estas mucho. El que yo acabo de mostrar era en realidad una instancia de la aplicación Grid. Así que si crees que vas a estar haciendo una aplicación de noticias o un lector de RSS o algo por el estilo que se ocupa de múltiples entradas para las que le gustaría mostrar el detalle, considerar el uso de una de estas plantillas para empezar a trabajar rápidamente y la personalización de allí. Pero para que yo pueda mostrarle todas las partes en movimiento aquí Voy a crear la aplicación en blanco, y luego vamos a ir un poco más profundo en los detalles. Sólo estoy haciendo que la aplicación en blanco aquí. Se va a crear todo el proyecto para mí. Abriré las cosas que quiero que le muestre de forma predeterminada. Permítanme el zoom en un poco para mostrar lo que se crea para nosotros aquí. Las cosas que usted va a mirar primero son todos llamados por defecto. Así que vas a buscar default.html, default.js y default.css. La otra cosa a destacar es que ya tenemos una referencia a lo que he mencionado antes. Este es WinJS. En realidad, nadie lo llama este largo nombre aquí. Es WinJS, la Biblioteca de Windows para JavaScript. Si lo abres, se puede ver que es todo aquí. Hay diferentes archivos CSS, hay JavaScript. Está ahí para ayudarte. Es realmente allí para proporcionar controles y estilos y esas cosas que sólo puede utilizar automáticamente. Pero, de nuevo, si hay cosas que desea utilizar en su lugar en términos de estilo y otros controles, es totalmente de usted. Yo te mostraré cómo utilizar un par de esas cosas ahora. 

Volver por encima a nuestro lado izquierdo, déjame mostrarte la página HTML predeterminada. Ya has visto las cosas WinJS, y eso es realmente todo lo que está pasando allí con las líneas medias de marcado, sólo con lo que en el CSS por defecto y lo que en un par de archivos JavaScript desde WinJS. Usted no necesita ser dueño de lo que está pasando dentro de esos archivos. Es bastante interesante echar un vistazo a ellos para revisar algo de lo que está pasando ahí dentro porque hay bastante interesantes técnicas de nivel intermedio y avanzado pasando ahí, pero lo bueno es que los desarrolladores, puede simplemente tomar ventaja de ellos, sólo los utilizan y realmente no tiene que preocuparse por ello. Todavía se puede conducir un coche sin tener que saber cómo funciona, ¿no? Así que ese es el tipo de cosa que está pasando aquí. Hay controles y estilos y esas cosas que usted puede seguir adelante y utilizar y el código que se puede utilizar en un segundo sin necesidad de saber lo que hay allí. Aquí están sus propios archivos. Estos son sus lugares que usted puede modificar su propio CSS y su propia JavaScript para que todo funcione. Se le agrega ciertamente otros archivos JavaScript y tal vez otros archivos CSS que el proyecto crece, pero esto es sólo un punto de partida. Aquí está el Hola, equivalente en el mundo de HTML, así que estamos de vuelta en el cuerpo de la etiqueta. En la parte superior, por cierto, es el doctype HTML5, por lo que va a reconocer que a partir de lo que has estado trabajando. Hay plena IntelliSense aquí también, así que si usted hace las cosas como el tipo en una etiqueta de vídeo y ampliar eso, de lo que has aprendido sobre el hecho de que es necesario hacer reserva de codificación para las etiquetas de vídeo en HTML5 - o quizás usted tiene - para asegurar que los diferentes navegadores tienen soporte para el vídeo. Tenemos este tipo de cosas a través de HTML, a través de JavaScript, a través de CSS. Eso se basa en, y te muestro CSS en un segundo. Aquí usted puede seguir adelante y empezar a modificar el código, el marcado. De hecho, antes de que cambie nada, voy a ejecutar este y le mostrará lo que hay. Usted va a tener una pantalla de presentación que puede personalizar y luego se obtiene el Hola, la experiencia del mundo aquí. Es fantástico, ¿verdad? Vaya por delante y barco, ¿verdad? El contenido va aquí. Eso es lo básico. Esto sólo puede mejorar a partir de ahí. Vamos a seguir adelante y añadir en algunas cosas. Tengo un poco de margen de beneficio que voy a copiar aquí sólo para que usted no tiene que verme escribiendo. Déjame ir a abrir la caja de herramientas aquí, y voy a Pin esto porque voy a estar haciendo esto un par de veces. Caja de herramientas, si usted no ha visto Visual Studio, es donde vas a encontrar un montón de controles. También se puede poner fragmentos de código en él que se puede reutilizar. Aquí sólo voy a estallar en algún otro HTML, nada terriblemente avanzado en absoluto aquí. Es sólo el HTML básico diciendo que tengo una entrada donde puedo escribir, Tengo un botón donde puedo presentarla, y luego tengo un div que es esencialmente un marcador de posición que puedo usar para emitir el "Hola, que escribe esto." Es la intro de ejemplo HTML. Si ejecuto esto, se obtiene automáticamente el HTML, pero también se recibe automáticamente el estilo. Esta es una de las cosas importantes de WinJS. Se va a dar de forma predeterminada algunos apariencia es realmente consistente con el resto de lo que está haciendo Windows 8. Aquí puede ver las cosas como el botón. El botón por defecto en HTML no se parece a eso, sino que lo hace aquí porque se está haciendo ese derecho CSS de ese archivo CSS en WinJS. Si desea utilizar otra cosa, si usted quiere cambiar eso, totalmente bien, seguir adelante y hacer lo que le gustaría. Pero ese es el valor predeterminado. Va a ser más familiar para los usuarios. Y por supuesto, esto no va a hacer nada porque yo en realidad no del cable hasta cualquier tipo de código para responder a eso. Era sólo el código HTML. Así que puedo deshacerme de eso, y vamos a volver en nuestra aplicación. 

Déjame cambiar a nuestros default.js. Esto parece bastante complejo, pero sólo está haciendo algunas cosas para ti. Es repetitivo. Va a ser la misma en todos sus proyectos. Lo único que esto está haciendo es sólo un poco de preguntar: "¿Cómo he llegado hasta aquí?" y diciendo: "¿Está iniciando esta aplicación por primera vez?" "¿Está usted de reanudar la aplicación de tener que ser suspendido?" Un par de cosas por el estilo. En realidad, nuestro enfoque en este archivo aquí es justo aquí. En este punto, esta línea de código es bastante importante. En realidad va a ir a buscar a través de todos los de su margen de beneficio, y que va a encontrar cosas que te he pedido que se han convertido en los controles, controles más profundos, como un control de clasificación, como una vista de cuadrícula, como el menú lateral y esas otras cosas que les mostré en esa diapositiva antes. No son controles HTML nativas. Usted simplemente no decir flotante como un elemento y hacer que sabía qué hacer. Lo que se hace realmente es lo mismo que sucede en otros tipos de marcos de control. jQuery UI hace el mismo tipo de enfoque general. Utilice las marcas en el código HTML, y algo más tarde a través de JavaScript viene y dice: "Oh, yo sé lo que es eso. Eso es pedir para que esto se convirtió en estas cosas" que es otra de HTML más expresivo para hacer como un control de las calificaciones, que es lo que te voy a mostrar ahora. Esta línea de código es una promesa que está diciendo: "Cuando se cumpla esta promesa, "Todo lo que le has pedido a continuación ha sido creado." Y eso es todo. Se ve un poco complejo, pero en realidad es el mismo en cada proyecto. Aquí abajo es donde usted puede comenzar a agregar en cualquier otra cosa que queremos que suceda, así que vamos a volver a eso en un segundo. 

En primer lugar, necesito un poco de código que puede responder al hecho de que alguien ha hecho clic en el botón. Voy a seguir adelante y poner eso en aquí abajo. Una vez más, yo no voy a hacer ninguna escribiendo delante de ustedes aquí. JavaScript Muy básico sólo decir cuando esto se llama vamos a proporcionar algunos detalles sobre cómo hemos llegado hasta aquí y luego vamos a hacer algunas cosas básicas. Ve a buscar a la cosa en mi página de HTML que se denomina nameInput, agarrarlo, tome su valor, slap "Hola" en el frente de la misma, y ​​se adhieren esa cadena resultante en esa etiqueta div que teníamos antes de que realmente no tenían nada antes. Ahora nos vamos a encontrar con esa etiqueta y hacer su contenido interior igual a la cadena. JavaScript Muy simple. Esperemos que está reconociendo que no hay nada inusual está pasando aquí. Es sólo hacia arriba HTML y JS aquí. Si me quedo esto ahora, todavía no va a hacer ningún trabajo, porque no he atado con alambre para arriba para recibir el evento. Para hacer eso, voy a hacer eso aquí, una vez más volver a mi caja de herramientas, apareciendo en aquí. Espero que hayas visto todo este tipo de cosas antes, así que no voy demasiado explicarlo. Ahora vamos a ir a buscar el helloButton. Vamos a decir, "Button, felicitaciones." "Este es un evento que ahora está respondiendo." "Cuando alguien hace clic en su área, llame a esta función, el buttonClickHandler." Y es que la función que acaba de agregar a la derecha abajo en el fondo allí. Eso es todo. Así que ahora tenemos una aplicación increíblemente funcional. Creo que estarás muy impresionado con esto. Chris. Espere por ello. Wow. Okay. Eso es increíble. [Risas] Pero hay más. No lo compre todavía. Espere. 

Te voy a enseñar un poco más aquí y salir de la pantalla completa. Vamos a caminar antes de correr. Déjame ir en y en realidad te enseñe un poco con CSS. Sólo por defecto, si miramos hacia atrás en la página de aquí, cada vez que nos detuvimos en estas cosas de WinJS y conseguimos el ui-oscuro, de hecho, se puede cambiar el valor predeterminado para el uso de aplicación de la luz. ui-negro es bueno para aplicaciones gráficas como el uso de una gran cantidad de imágenes, usted está mostrando una gran cantidad de contenido visual. Si usted está mostrando una gran cantidad de contenido textual, el ui-luz es generalmente una buena opción. Usted no tiene que elegir, pero he cambiado a lo y ahora que estamos viendo el mismo margen de beneficio, todo igual, es sólo utilizando básicamente un esquema invertido aquí donde todo es lo que es texto negro sobre fondo blanco. Eso es todo bien y bueno. Vamos a ver aquí, y vamos a hacer realidad un poco más con el CSS. Lo pondré de nuevo en la oscuridad, porque creo que es probable que sea más fácil de ver en la pantalla cuando empiezo a hacer estas cosas. Voy a cambiar el cuerpo una vez más. Voy a ir aquí. Permítanme Nuke esto. Vamos a traer el cuerpo con clases. Creo que has hecho selectores básicos con CSS y cosas como que ya, por lo que usted probablemente sabe lo que está pasando aquí. Simplemente asignar algunas clases en nuestro encabezado, y estamos creando un nuevo div para envolver el resto de esas cosas que ahora podemos usar el estilo de todos juntos. Entonces, ¿qué puedo hacer ahora es ir a nuestro CSS por defecto. ¿Has mirado en las consultas de los medios de comunicación todavía? ¿Ha hablado de eso en absoluto? Consultas de los medios de comunicación son parte de esta tendencia emergente - o es una tendencia establecida ahora en realidad en la Web - para el diseño de respuesta o de adaptación, y la idea es que sus aplicaciones realmente pueden ajustar apropiadamente basado en lo que el dispositivo que están siendo mostrados en puede hacer. Así que si estás en un dispositivo móvil, es obvio que no vas a tener bienes raíces tanto la pantalla como se puede en un gran monitor de 30 pulgadas de estar con un escritorio, un gran PC así. Así que la respuesta a esa edad sería tener 5, 6 versiones diferentes de la misma página y que le abre la versión que se ajusta para que cierto tamaño de la pantalla. No muy bien. Es muy, muy repetitivo y hay un montón de mantenimiento para hacer eso. Ahora tenemos algo llamado consultas de medios CSS, y podemos usar esto para detectar automáticamente cuando hay ciertos tamaños o ciertos usos de su contenido que se llevan a cabo. Así que usted puede responder a eso y usted puede decir: "Bueno, en este caso "Es probable que ni siquiera es necesario que le diga lo que está pasando aquí". Esto es sólo decir si se tomó esta aplicación, como he mostrado antes - agarrar y ponerlo al lado de la pantalla - a continuación, vamos a hacer el siguiente estilo. Styling no es sólo acerca de los colores y cosas así. Se trata también de tamaño y márgenes y rellenos y orientaciones de contenido o incluso desactivar o activar partes enteras de su página y, en este caso, su aplicación o su juego también. Así que aquí usted puede hacer tan simple como usted quiere. Esto no sería útil en sus aplicaciones, pero es hora de demostración, así que voy a seguir adelante y sólo tiene que añadir en el selector de cuerpo básico y decir: "Cuando estoy espeté, vamos a seguir adelante y hacer background-color y vamos a elegir algo." Tienes IntelliSense aquí. Esto es realmente genial. En 2012 hemos añadido un montón de cosas para el soporte CSS y JavaScript y HTML. Usted ha supuesto tienes IntelliSense desplegable también, pero eso no es lo bueno. Lo bueno es que tienes selectores visuales para un montón de cosas también. Por lo que podría pasar y simplemente elegir un color, o puede salir y ser aún más específico y se puede elegir - esto va a ser terrible. Yo realmente Elija un color decente aquí. Mira el marcado también, por cierto. Ese es el formato estándar RGB allí. Pero si me cambio la opacidad, que va a cambiar a un selector de canal alfa aquí. Así se puede ver que, el color con esencialmente el porcentaje de transparencia que tiene para que todo al horno bien ahí. Voy a mantenerlo como el 100% y luego, cuando he terminado con eso, todo está bien y bueno. Ahora bien, si ejecuto la aplicación y nos tomo la aplicación y Snap, ese color de fondo se ajusta de forma automática sólo porque tenemos un poco de CSS que dice: "Ve a hacer eso." También puede escribir JavaScript también que va a hacer lo mismo o que se puede utilizar para hacer una pausa en realidad un juego, hacer cosas como esa. Eso es probablemente cuando se tendría que utilizar JavaScript. Se podría desactivar el bucle de juego en ese punto. Usted necesita un poco de JavaScript, ya que no sería algo que le CSS para. Pero tenga en cuenta que es sólo un evento. Usted podría decir: "Cuando se cambia el tamaño de mi solicitud, "Vamos a ver si nos rompimos." Y eso es todo. 

¿De acuerdo? He estado hablando mucho. ¿Hay preguntas hasta ahora en dónde estamos? Sí. [Estudiante] ¿Hay un tutorial para que cualquiera pueda obtener más información? Sí >>. La pregunta es, ¿hay un tutorial para esto? Voy a extiendo a todo. Hay algunas cosas que usted puede ir. Vamos realmente a salir de aquí. Déjame volver aquí. Una cosa a destacar es propio Visual Studio tiene tutoriales construido adentro Déjame deshacerme de esto. Si te vas a crear un nuevo proyecto, no en Archivo, Nuevo proyecto, y ver el lado de la mano izquierda, hay un nodo en línea en este selector. Va a tomar un poco. Estoy en mi MyFi aquí. Pero va a venir y que me va a dar la oportunidad de encontrar plantillas pero también, lo más importante, las muestras así. Así que puede hacer clic en JavaScript. Va a encontrar las muestras para mí. Mi resolución es mucho mayor aquí. Normalmente, debería ver una lista de un montón de cosas diferentes aquí. Si hay algo que quieres probar, elegir el idioma, JavaScript escrito aquí, y decir: "Yo no sé cómo hacerlo geolocalización." "No sé cómo abrir un archivo." "No sé cómo tomar ventaja de la cámara web "U optimizar para el tacto o cosas por el estilo." Hay muestras de todo: el intercambio, búsqueda, bares de aplicaciones, realizar llamadas remotas a un servicio, codificación JSON. Todos los tipos de cosas que hay muestras de que aquí, y no son enormes muestras que se van a tomar toda la noche a separarse sólo para encontrar que una cosa que quería aprender. Son muy buenos. Son pequeños, derecho a las clases puntos de las muestras. He aprendido un montón pasando a través de éstos mismo, y por lo que recomiendo que muchos como una cosa. 

Otra cosa a destacar es también, por supuesto, te mostré dev.windows.com, así que si usted va de nuevo a ese, verás en la parte inferior también hay las muestras aquí. Así que usted puede descargar a todos ellos a la vez, pero también hay un montón de otros recursos también aquí que pueden ayudarle a ponerse al día. 

Otra cosa, y realmente me gustaría recomendar que usted intente esto, Ya lo tengo en mi blog, pero me voy a ir al grano. Te voy a mostrar. Mi blog tiene los recursos y cosas por el estilo. Una de las cosas que señalar es aquí, esta cosa: su idea. Su aplicación. 30 días. Si hace clic en este, que va a traer a un sitio realmente útil. Esto es mucho más útil que se podría esperar. Esto va a ser de 30 días de contenido que usted puede obtener básicamente consejos y trucos a lo largo de ese proceso va a crear una aplicación. Y ya que no puede esperar, en realidad se puede conseguir por juegos también y para aplicaciones de teléfono, cosas así. Así que, básicamente, se inscriben en ella, y que van a ser el envío de consejos y trucos, "¿Has pensado en hacer esto? ¿Apoya Snap?" "Aquí hay algunas pautas sobre cómo hacerlo bien." "¿Has pensado en someterse a la tienda?" "¿Has pensado en cómo va a vender su aplicación?" Se va a caminar a través de todas estas cosas diferentes. Y, de hecho, si usted está en la pista de juego, en algún momento usted comenzará a reconocer a la persona hablar con usted porque en realidad tenía que ir a Redmint hacer esas y grabadas 2 vídeos allí. Pero todo eso es parte de la pista de juego, y también hay una pista completa para el desarrollo general de la aplicación. Eso se llama Generación App. Sin duda, recomendaría que a usted también, además de las muestras. 

Hay una gran cantidad de videos en un sitio llamado Canal 9 también. Eso es probablemente lo último que voy a recomendar, así antes de pasar aquí. Channel9.msdn.com. Esto es grande porque usted no va a ser la lectura a través de toneladas de libros blancos. Se trata básicamente de una gran cantidad de videos, screencasts y cosas que son directo al grano. Yo no debería decir que es siempre directo al grano. Depende de quién está haciendo el hablar. Pero, en general, hay un poco de videos realmente to-the-punto aquí que le mostrará alguna cosa en particular es posible que desee aprender o ver demos. También hay todo nuestro contenido de nuestra conferencia que sucedió hace un par de semanas llamado Build, y verás que allí mismo. Hay tecnologías Core para Windows 8 juegos. Ahí lo tienes. Yo estaba allí, en realidad. Usted no me puede ver. Yo estaba aquí. Pero de todos modos, aparte de eso, yo recomendaría que usted echa un vistazo a los videos. Son muy útiles. Si usted está atascado en algo o lo que desea es ver lo que algo se podría hacer, despedir a los de arriba. 

[Guarin] Windows Mail me acaba de enviar un correo electrónico con un enlace al contenido para que los estudiantes descarga con código de ejemplo y cosas por el estilo. >> [Bowen] Grande. Impresionante. Gracias, Edwin. 

Bueno. >> [Estudiante] Tengo una pregunta. >> [Bowen] Oh. Sí, por favor. [Pregunta estudiante inaudible] >> [Bowen] Oh, me alegra que lo preguntes eso. Sí. La pregunta era, ¿hay una interfaz visual para mí para crear cosas? Edwin te recompensará generosamente por esa pregunta. Hay una manera de hacer esto. ¿Hay que hacerlo ahora? Vamos a hacerlo ahora. Voy a ir a ella en estos momentos. En realidad, permítanme añadir en una cosa más en esta demo, y luego te voy a mostrar la respuesta real. Iba a añadir un poco más de CSS aquí. Yo estaba un poco por la tangente aquí. Permítanme decirlo de alguna CSS aquí para aprovechar de las clases que hemos añadido hace poco, a la cabecera, a la div mainContent y, a continuación, a la greetingOutput. Si hago eso y ejecutarlo, se puede ver que ahora tenemos a otra persona con el relleno y los márgenes poco, por lo que tenemos en realidad algunas compensaciones aquí. Estos son más hacia lo que vas a esperar de una aplicación de pulido final. Pero sólo estoy mostrando esto a usted porque es hacia arriba CSS. Así que las cosas que usted ya sabe que usted puede utilizar para ajustar el contenido a su gusto. Ya has visto cómo hacer que el fondo cambie de esa manera. 

Si regreso a nuestro HTML, voy a añadir en un conjunto más de margen de beneficio, y esto es en realidad va a ser un control de WinJS. Voy a ir y agarrar esto, una etiqueta. Quiero estar seguro que lo estoy haciendo en el lugar correcto. Probablemente lo suficientemente bueno. Aquí he Acabo de añadir - y nos vamos de pantalla completa para que pueda ver todo el asunto - He añadido una etiqueta para la próxima div. El div se llama ratingControlDiv. Por sí mismo no hará nada. Si abre este en un navegador, usted estaría mirando en blanco, el mismo div. Pero debido a que la misteriosa línea de código que he mostrado antes, todo el proceso, que va a buscar algo que se parece a esto - control de ganancia de datos - y que va a encontrar lo que está en ese parámetro. Se va a hacer un ejemplo de lo que sea que está señalando. En este caso, se trata de un control de clasificación, por lo que estoy diciendo, "Por favor, vaya y vuelva a colocar esta cosa "Con lo que usted necesita hacer para hacer un control de clasificación." Podría tratarse de un control de la moneda, que podría ser el anillo de progreso o lo que sea el control que desea utilizar. Todos ellos van a trabajar esencialmente de la misma manera. Usted está utilizando marcado estándar HTML5 para indicar lo que quiere, y luego te vas a conseguir un control al final de este. Déjame correr esto. He copiado que en, y ahora que el marcado se convierte en esto, que es en realidad un buen número de elementos HTML. Estas son todas las imágenes individuales, y hay alrededor de ellos divs con selectores. Esperamos que usted puede ver eso. Es un poco más sutil. Puedo flotar sobre los diferentes conceptos, y que va a permitir que vea la clasificación aquí. Puedo hacer clic en él, y que recuerda la calificación, pero eso es todo. No está haciendo nada con la calificación. 

La última cosa que quiero mostrar en esta antes de que nos cambiamos a una experiencia de diseño más visual es un poco de código que pueda utilizar para responder a estos WinJS controles. Voy a salir de allí, de nuevo fuera de la pantalla completa, y cambiar a JS aquí por segundo. Yo puedo hacer esto aquí. Creo que voy a sustituir a todo este asunto. En realidad, creo que va a sustituir a todo, pero voy a averiguar juntos. Voy a poner esto aquí. Sí. Voy a eliminar este también. ¿Qué puedo añadir? Parece que mucho. No es mucho. Acabo extendí esa línea de código que ya hablé antes, y yo digo, "Cuando todo está hecho, cuando se han hecho todos mis controles, "Y luego hacer esto." Así que a continuación, ejecute esta función llamada completada. En este caso, esto es algo que usted puede imaginar. Ve a buscar a ese control div. En realidad, hay una cosa que quiero señalar. Esa línea siguiente en realidad está diciendo, "Tengo que ratingControlDiv." "Quiero hablar con él como si se tratara de un verdadero control, un control WinJS." Así que, básicamente, que está pidiendo que a partir de ella. Usted está diciendo: "Yo quiero hablar con usted como un control." Y entonces usted puede comenzar a decir cosas como: "Vamos a añadir un detector para usted "Así que cuando usted está cambiado podemos responder a eso." Y entonces nosotros también podemos hacer cosas como esta. En realidad, ese es el viejo código allí. Creo que me falta pegar en una función más, y que sería la función real que responda a el control de clasificación que se cambia. Permítanme que en el pop justo aquí abajo, en algún lugar por allí. Y en este caso, lo único que es nuevo es el hecho de que estamos entrando en lo que el control de clasificación nos dice y nos estamos preguntando por qué se llama la tentativeRating. Hay un montón de diferentes otras cosas que ese control le puede decir, y no hace falta de control por control. Es muy sencillo. Usted será capaz de resolverlo ningún problema en absoluto. Ejecuto esto, y ahora cuando cambio las valoraciones y haga clic en la calificación, se puede ver ahora en realidad es la respuesta a la misma. Es poner esa calificación en la pantalla en esa etiqueta div demás vacío a continuación el control de clasificación. Esa es la magia de un montón de cosas aquí también. Así como usted está creando aplicaciones para el Windows Store, hay un montón de controles que usted puede utilizar. Todos ellos trabajan de esta manera. 

Te voy a enseñar la parte visual de diseño para estas aplicaciones. La buena noticia es que usted ya tendrá esta herramienta cuando instale todo si vas a la descarga y obtienes Visual Studio. Puedo hacer clic derecho en este. No voy a agrandar Sólo dice Abrir en Blend. Blend es otra herramienta que trabaja codo a codo con Visual Studio y se centra mucho más en el lado del diseño de las cosas, por lo que realmente Superficies herramientas optimizadas para la creación de estilos, la creación de animaciones, el trabajo con CSS, un montón de cosas en ese tipo de vena. Aquí lo que debe ser muy interesante y bastante obvio de inmediato es que estamos viendo la aplicación. Esperemos que todavía estamos. En lugar de ver el código, que todavía vemos en la parte inferior, estamos viendo la representación real de la aplicación. Lo que es más, no es sólo una representación de la aplicación, que es en realidad la aplicación en ejecución. Y eso es lo que realmente es bueno de Blend. El equipo ha hecho un montón de trabajo para llevar HTML y JavaScript y CSS en esta herramienta. Ahora usted puede, si tienes curiosidad, "¿Qué significa eso? ¿Qué puedo hacer yo?" De hecho, puedo diseñar a esta aplicación a pesar de que este tipo de cosas no existen en mi marcado. Recuerde que el control de calificación? Era sólo una etiqueta div. Esta cosa, esa estrella, sólo existe en tiempo de ejecución. ¿Cómo lo sé? Hay un poco de magia por aquí. Vea estos rayos? Cada vez que veas un relámpago, que significa que fue creado por algo en tiempo de ejecución. Algunos JavaScript corrió y se volvió algo en esto o creado esto con un poco de lógica. Esas estrellas que se ven allí fueron creados por JavaScript mediante WinJS. Lo bueno es que no me importa, todavía puede diseñar, Todavía puedo entrar y cambiar, puedo descubrir lo que está pasando aquí, Puedo mirar a la CSS, puedo seguir adelante y descubrir por qué el color es la forma que sea, Puedo empezar a jugar con las cosas y haciendo cosas horribles, lo que yo quiero hacer. En realidad, voy a dejar las cosas en paz. Pero se puede ver aquí es todo el CSS y te está mostrando aquí. Si voy hasta allí, se va a mostrar todo lo que ellos llaman Ganar, por lo que las reglas CSS que son los más específicos y el más elegido para ese artículo, que probablemente ya has ido otra vez en sus clases, donde se puede decir que hay una fuente general de que estamos aplicando a todo, sino porque se trata de un h1 y tengo un color definido por H1S, que va a ser de este color, y eso es porque es más específica que la cuerpo1. Pero una cosa aquí que todos los que muestra, y es realmente algo muy poderoso a medida que se vuelven más complejos, te estás preguntando por qué estas cosas son como son. Es en realidad le dirá, y se puede elegir cualquiera de estos artículos aquí. Ese color no es tan malo, de hecho. Puede seleccionarlos. Esperamos que usted puede ver esto. Por todo lo que usted tiene en su aplicación, verá una cascada de todo el CSS que podría haber aplicado a eso y cuál es ganar, que uno realmente tomó precedencia. Estos son un poco aburrido. No hay mucho que hacer en algunas de ellas. Si me voy y cambio el color, entonces usted comenzará a ver algunos en cascada allí. También puede usar HTML aquí también. Puedo ir a través y modificar las propiedades del HTML para todas estas cosas como yo quiero. Sólo hay un montón de cosas aquí. 

No quiero tomar su tiempo yendo a través de todo aquí. Sólo sé que está aquí. Hay una gran cantidad de funcionalidad orientada al diseño que es sólo disponible para usted para que pueda mantenerse visual, trabajar con la aplicación, y no tener que hacer un montón de conjeturas que tendría que ver con normalidad y hacen ciclos regresando desde un navegador de nuevo en su diseño, de vuelta al navegador. Esto es realmente cosas interesantes para eso, y mientras desarrolla una aplicación de Windows Store, que va a hacer un montón más productivo. 

También verá que está siguiendo el marcado aquí y tu CSS como el que está trabajando a través de diferentes cosas. Es probable que sea muy difícil para usted ver que, sobre todo en el vídeo, pero eso es lo que está pasando aquí, y se lo recomendaría a familiarizarse con eso. Esto le ahorrará mucho tiempo. Eso es Blend. Si realiza cambios aquí, van automáticamente a llevar de vuelta a lo largo a Visual Studio. Son los mismos archivos, que es lo mismo todo. Lo dejo solo. Tengo un ejemplo mejor que yo quiero mostrar. Pero si he hecho un cambio allí y guardé y volví a Visual Studio, se diría, "Hey, que acaba de cambiar algo. ¿Puedo volver a cargarlo para usted?" Sí. Y usted está usando el mismo material allí. Ese es el final de esa muestra particular. 

Yo quiero mostrar una muestra de gama alta sólo para darle una vista de otra funcionalidad es posible pensar también. Esta es una aplicación de ejemplo que se puede descargar. Si usted busca algo que se llama el Campo de Windows en una caja, hay algunas muestras que están en eso, y uno de ellos es El libro de cocina de Contoso. Yo sólo puedo correr esto para usted. Pantalla de bienvenida personalizada. Esta es la aplicación vista de cuadrícula. Han obligados algunos datos personalizados aquí. Usted puede navegar a través de este. Usted puede ir y echar un vistazo a varias cosas que nos harán hambre en una tarde de viernes. No se. ¿Qué va a hacerme el más hambre? No se. Yo sólo voy a elegir uno. Te metes en estas cosas. Se le mostrará la receta. Usted también podría, en lugar de hacer clic en un elemento, se puede llegar directamente a la categoría de contenido, esa sección de contenido. En este caso, se puede leer un montón de falsos América que contarnos todo sobre estas recetas aquí y luego ir a la derecha en la receta específica. Esto también es compatible con cosas como el intercambio que he mostrado antes, con las fotos. También puede buscar en esta aplicación también. Es muy sencillo de hacer la búsqueda. Básicamente, usted acaba de entrar una cadena de texto desde Windows y usted decide cómo quiere manejar búsqueda con eso. Está a unas pocas líneas de código para conseguir eso, y entonces, ¿qué se hace con él después de eso es totalmente de usted. 

Aquí también tienen una barra de la aplicación donde se está utilizando alguna otra funcionalidad. Sólo te diré lo que es. Un recordatorio va a utilizar lo que se llama una notificación brindis. Esto es muy práctico para dejar que el usuario saber cuando las cosas han sucedido, como una aplicación se ha instalado o se completó algo. También es bueno para los juegos también. Si usted tiene un mundo persistente o una tabla de líderes y un servicio que ha de hosting que tal vez en un equipo diferente, las notificaciones se pueden enviar en una máquina e incluso si el usuario no está utilizando su juego, jugar el juego o el funcionamiento de su aplicación, aún pueden recibir notificaciones sobre este tipo de eventos. Así que se podría decir, "Tu castillo ha sido destruido o está a punto de destruir." "¡Vuelve aquí y defenderla", o algo por el estilo. Hace clic en la notificación, vaya a la derecha de nuevo en el juego, y se puede jugar. Así que ese tipo de cosas pueden realmente ayudar a atraer a la gente de nuevo en su aplicación muy efectiva. 

También hay apoyo en esta aplicación para usar el micrófono, la cámara web, haciendo video y tomar fotos. También puede anclar una ficha secundaria. Es útil si usted quiere tener sólo una ficha que va a la derecha a determinados contenidos. En este caso, se va a la derecha a esta receta. Todo lo que estoy mencionando sólo estoy mostrando porque es lo que usted puede pensar acerca del uso también. En su mayor parte, son muy fácil de usar. Me acaba de recomendar que aparezca que el explorador muestra y encontrar una muestra que puede mostrarle cómo hacerlo. Es bastante sencillo de llevar a los en sus aplicaciones allí también. 

Me voy a mostrar algo que es bastante fresco aquí. Yo romperé esta aplicación, y voy a volver a Visual Studio. Esta aplicación se está ejecutando. Está funcionando desde Visual Studio. Puedo hacer algunas cosas bastante bien con eso. De hecho, tengo una opción para seleccionar un elemento, y puedo ir de aquí a la aplicación en vivo y lo que puedo decir, "Me pregunto por qué es Tiempo de preparación un poco gris más claro que el título en sí mismo?" Puedo hacer clic en él. Se va a sincronizar ese nuevo en Visual Studio, y que me va a mostrar exactamente el contenido generado por el que dio lugar a que una parte de la interfaz de usuario. Así que en este caso, es elemento h4-subtítulos y doble construcción, y que, probablemente, nos dice lo que necesitamos saber, porque como h4 dentro de ese contexto, que va a obtener un determinado tipo de fuente. Pero si todavía no sé por qué, puedo hacer clic en Rastrear estilos. Entonces puedo expandir el color y puedo averiguar exactamente por qué ese color no es el color de la carrocería pero en realidad es otra cosa. Esto es esencialmente las herramientas dev desde Internet Explorer hasta cierto punto puesto en Visual Studio. Si usted ha trabajado con las herramientas de Chrome Dev, Firebug, cosas así, ese tipo de herramientas que se encuentran en el navegador, ese tipo de funcionalidad se ha traído a la derecha en Visual Studio por lo que en realidad no tiene que lanzar un navegador y trabajar con esas herramientas por separado. Ahora tengo una aplicación de Windows Store sólo correr, y puedo empezar a tirar lo diferencia y descubrir por qué las cosas están haciendo lo que son. 

También puedo hacerlo de esta manera también. Puedo ir y sólo debes elegir algo bien a partir del marcado y averiguar de qué se trata en la propia aplicación. Creo que he pasado por todo. Aquí estoy flotando sobre esto. Puedo seleccionarlo. Se me va a mostrar en la aplicación en ejecución real donde esa cosa es que estoy ahora haciendo clic en en el marcado. Cosas realmente interesantes. Como usted está tratando de averiguar lo que está pasando y lo que está haciendo HTML, lo CSS está haciendo, tenga esto en cuenta. Recuerde que esto está aquí para usted y también que Blend puede trabajar con una aplicación en ejecución en vivo. 

La última cosa que quería mostrarle con esta aplicación - Por cierto, se nota que los deltas como las cosas cambian demasiado, para que pueda ver por esos reflejos amarillos. Esas son las cosas que han cambiado sólo en la aplicación. Pero una última cosa. Quiero volver a Mezcle sólo por un segundo aquí. Abriremos esto, Abrir en Blend, misma aplicación, todo igual. Sólo quiero que le muestre la experiencia aquí no es sólo usted está atascado en la página principal mirando las cosas que usted conseguirá de forma predeterminada cuando se ejecuta la aplicación y dejar reposar allí. También puede activar esta bastante pequeño icono aquí. Se llama modo Interactivo. Hace clic en eso. Se va a abrir la aplicación. Usted no está en el modo de diseño más, así que usted no va a ser hacer clic en las cosas para cambiar la funcionalidad, pero en realidad se puede trabajar con la aplicación ahora. Puede hacer clic a través de, usted puede hacer lo que sea, llegar a una receta que usted se preocupa por oa una categoría. Vamos a ir a esta categoría. Yo le digo: "Bueno, aquí es donde quiero diseñar". Luego hacer clic en ese botón, que le llevará de vuelta a la superficie de diseño, y ahora usted puede hacer todas esas cosas que los que hablaba antes. Voy a seguir haciendo clic hasta que llego este seleccionado, averiguar sus dimensiones, averiguar el código HTML para él, el CSS para que para una aplicación en ejecución, una parte posterior de la aplicación. Muy, muy útil. Te voy a mostrar esto a usted. Por favor, tenga en cuenta si usted está buscando en la escritura de código con este porque va a ahorrar un montón de problemas, y es bastante bueno. Eso es casi todo lo que quería mostrar en Blend y en Visual Studio para todo eso. 

¿Tiene preguntas sobre cualquiera de estas herramientas? ¿Cualquier cosa? >> [Guarin] Tengo cosas para dar a conocer, por lo que las buenas preguntas, cosas buenas. 

[Bowen ríe] Ya te he mostrado mis demos aquí. Voy a ponerlo en la página de Los Recursos y gire a preguntas ahora. Esa primera referencia es que la Generación App sitio con la pista de juego y la pista de aplicación. Regístrate en aquellos. Usted no tiene que esperar los 30 días para obtener el contenido. Usted puede empezar a ir y mirar el contenido a su gusto. Entiendo sus marcos de tiempo pueden ser diferentes de - [risas] Por eso, cuando es el hackathon? Eso es un par de semanas, ¿no? Así que usted no tiene los 30 días para esperar. Así que sí, puede inscribirse en eso y entonces simplemente comenzar a retirar el contenido de ella. También el Dev y los Centros de Diseño. Y no he mencionado esto, pero también está la tienda Docs. Esto sería para después de la hackathon y cuando usted está listo para comenzar a enviar sus aplicaciones para la tienda. Hay algunas pautas útiles aquí, alguna orientación sobre cómo hacer las cosas en la tienda, algunos problemas comunes que puedas tropezar y caer, y ese es el final de esos recursos. 

Entonces, ¿qué tienes en mente? Cualquier otra cosa que usted - [Guarin] ¿Quién está pensando en hacer una aplicación de Windows para CS50? Genial. [Bowen] fresco. Grande. 

¿Una pregunta sobre las cosas que has visto hasta ahora y cómo se relaciona con esto? Por ejemplo, con más tiempo podría tomar un juego que he escrito y que se ejecuta en el navegador y sólo un poco de ir a través del proceso de poner eso en Visual Studio y lo que es una aplicación de Windows Store. Se tarda más tiempo de lo que realmente había que incluir hoy en día, pero la versión corta es que es el mismo código que se estén ejecutando en el navegador, y las cosas que usted cambia son las cosas que usted decida para conectar a Windows 8. Así que si usted desea utilizar encantos, si usted desea buscar o compartir, que necesita para crear una barra de la aplicación para esconderse algunas funciones en que, esos son los tipos de cosas que cambiaría. Pero el núcleo de tu aplicación web puede permanecer intacto. Una vez más, siempre y cuando se trabaja en IE10, que va a ser un puerto muy fácil para traer esas cosas en Visual Studio, en Blend, y convertirla en una aplicación de Windows Store. Una vez más, las únicas cosas que usted tendrá que aprender son las otras características que se puede utilizar para iluminar una aplicación, como una baldosa en vivo y ese tipo de cosas. 

Sí. >> [Estudiante] Mi pregunta es sobre el trabajo móvil. Así que si usted hace una aplicación que funciona como una aplicación de escritorio, ¿es realmente fácil de transferir a móvil, o hay una - La pregunta es, si hago una aplicación de Windows Store que realmente está optimizado para este entorno y quiero llevarlo a un mundo móvil, lo que está involucrado en hacer eso? Eso, al igual que muchas preguntas, es siempre una respuesta constante cambio. La buena noticia es que si usted se está pegando con HTML y JavaScript, CSS, si estás empezando desde una aplicación de Windows Store, que va a permitir que usted lo trae a la Web y luego utilizar ese tipo de técnicas, como las consultas y las cosas de los medios, para adaptarse a diferentes dispositivos de tamaño. Dicho esto, siempre hay marcos y cosas por ahí que el apoyo que se extiende a cabo diferentes tecnologías, las diferentes plataformas. Eso cambia todo el tiempo. También estamos cambiando las cosas tan bien como nosotros miramos hacia lo que tenemos ahora realidad con Windows Phone 8. Tenemos algunas infraestructuras básicas compartidas ofrecido entre las aplicaciones para estos entornos. Así que las cosas que usted está haciendo para crear una aplicación de Windows Store, mucho de eso se puede trasladar a una aplicación de Windows Phone 8 también. Eso es otra vez una historia emergente, por lo que hay algo de contenido de eso en Generar. El SDK acaba de salir hace un rato. Se acaba de publicar hace un rato. Pero en términos de otras plataformas también, usted probablemente se encuentra con muchos marcos de plataforma cruzada también. La buena noticia es que las cosas que usted está haciendo aquí, la funcionalidad principal es hacia arriba cosas estándar web. Las únicas cosas que no se traducirían fácilmente son las cosas que Windows 8 hace, pero eso no es una sorpresa ya que es una característica de Windows. No vas a encontrar compartiendo o tipos similares de contratos en cualquier otra plataforma. Así que esas son las cosas que usted desearía desde una perspectiva de diseño asegúrese de que tiene formas de tipo de resumen que fuera así que usted puede decir, "Si estoy corriendo en esto, yo puedo hacer eso." Si no estoy, hay algunos patrones de diseño que puede utilizar para ocultar tipo de esas cosas de distancia. Pero hay que tener eso en mente. Sí. Lo siento. Adelante. 

[Estudiante] Si quiero probar mi aplicación de Windows en la parte superior de [inaudible] [Bowen] Sí. Me salté una cosa más también. Sí. Voy a responder a su pregunta en primer lugar, a continuación, te voy a mostrar una característica que me olvidé de mencionar. Tenemos algunas máquinas disponibles localmente. Lo siento. La pregunta era, ¿cómo puedo probar las cosas en los dispositivos si no sucede que tiene un montón de cosas para elegir? [Guarin] Le prestamos chicos, creo, 5 o 6. ¿Cuántos necesita? [Estudiante] Tenemos 4 de ellos. >> Okay. ¿Tienen 4 pizarras para jugar. Así que sin duda que todos lo sepan, por favor. [Risas] >> [Bowen] Impresionante. Esa es una respuesta aún mejor de lo que me iba a dar. Tenemos horario de oficina para los desarrolladores que hacemos en nuestra oficina y ahora próximamente en la tienda de Microsoft sobre el Pru, pero Edwin ya ha tomado el cuidado de usted. Hay 4 pizarras disponibles para préstamo, para la prueba. Eso es. Hay un ejemplo de uno allí. Así que sí, absolutamente. Grande. Absolutamente, con mucho, la mejor manera de probar que es estar en un dispositivo. Si no sucede que tiene uno todavía o no quieren caminar por el campus en la nieve tomar uno o lo que sea, hay una manera de hacer esto de nuevo en Visual Studio. Si vuelvo a ir a donde yo estaba aquí, aquí en vez de usar la máquina local, usted puede conectarse a la máquina remota, pero eso no es lo que estoy hablando aquí. Simulador es lo que usted puede desear mirar en. Voy a correr esto, y realmente lo que es, es esencialmente una ventana a su propio sistema. Aquí es en realidad mi sistema en funcionamiento, corriendo Contoso, pero de una manera que me permite cambiar algunos de los parámetros de ejecución, los parámetros ambientales. Así que puedo decir aquí, "¿Sabes qué?" Oh. Ya he funcionando en una simulación de monitor de 27 pulgadas en 2560 resolución. Puedo caer fácilmente que hacia abajo y ver lo que mi aplicación haría con una pantalla más pequeña o cambiar la configuración de PPP o lo que sea. Así que en una pequeña pantalla, un 10,6, ¿qué va a hacer? Eso todavía se ve muy bien, ¿verdad? Usted querrá hacer esto, especialmente si vas a enviar a la tienda, porque lo hacemos como parte del proceso de pruebas. Y si hay problemas como esos, entonces usted podría encontrarse con un problema de obtener la certificación para la tienda. Pero eso es parte del simulador. Realmente bueno. Muy fácil de hacer eso. También puede utilizar funciones como girar también. Puedo hacer clic en el botón, haga que la gira, ver qué alguien tendría como una experiencia girando su pizarra, su tablet, y el uso de la aplicación con eso. Hay algunas otras cosas también, como la emulación de contacto y algunas otras cosas, AJUSTE GPS. Puedo fingir que estoy en un lugar diferente y ver lo que mi aplicación cuando finjo que estoy de vuelta en Seattle o algo así. Pero es una característica muy útil, y está integrado en Visual Studio y en Blend. Sí. Tu pregunta. 

[Estudiante] Si estás escribiendo un juego, no Visual Studio ningún apoyo para la animación? Sí. La pregunta es de alrededor de ayuda de la animación, sobre todo con los juegos. Depende. [Risas] Con JavaScript voy a decir que probablemente hay menos apoyo que hay en el lado XAML, que cuenta con líneas de tiempo, cuenta con storyboards y cosas que se construyen pulg Para animaciones en aplicaciones de JavaScript, no sé qué parte de la respuesta que quiero dar. Tengo los recursos en mi blog que pasan por un montón de opciones para ambos animaciones físicas, opciones para juegos orientados JavaScript en Windows 8. Me remito a aquellos. Básicamente, hay tantas opciones. La razón por la que estoy dudando es que hay tantas opciones para hacer animaciones con JavaScript. Podría ser CSS, podría basarse-Lona, podría ser simplemente animaciones básicas de DOM, que podría ser un montón de cosas diferentes, así que realmente depende de su elección. Si usted decide usar algo como Create.js o cal u otros tipos de marcos - Bueno, ni siquiera estoy seguro de que vas a ser capaz de utilizar un marco de gama alta gustaría Impacto o Construir. Esto tiende a generar más código que usted podría considerar a partir de cero. Pero en esos casos, aún se podía utilizar un simulador, puede utilizar los entornos, y tiendo a utilizar este entorno para mi plataforma de pruebas en los casos como que estoy desarrollando juegos. He estado bien, especialmente con las animaciones de lona, que es probablemente la cosa más común. Lo mejor que vas a encontrar es probablemente las herramientas dev en el navegador y las herramientas dev en Visual Studio. Una especie de respuesta meandros allí, pero espero que me dieron la respuesta. Sí. Usted. 

[Estudiante] ¿Cuáles son las opciones de almacenamiento de datos para aplicaciones de Windows 8? ¿Cuáles son las opciones de almacenamiento de datos para aplicaciones de Windows 8, Windows Store apps? Sus opciones son en realidad cada aplicación tiene su propio estanque de almacenamiento local para los ajustes y los datos, pero también es ridículamente fácil de usar la itinerancia de almacenamiento, para utilizar el almacenamiento basado en la nube. Es gratuito. Lo que pasa es que, básicamente, elegir una clase diferente y usted dice, "Configuración de Roaming, Guardar, este conjunto particular de contenido" y su cuenta de Microsoft, lo que han firmado con el nombre, va a ser la clave de la itinerancia que la información alrededor. Así que si uso el juego en mi computadora portátil y luego abro una sesión con la misma cuenta como yo jugar el juego en una superficie o una tableta, que va a vagar automáticamente esta configuración y datos entre las máquinas. Eso es algo predeterminado. Eso es bueno para determinadas cantidades de datos. Usted no pondría una enorme base de datos en aquellos. Para que usted necesita para ir a otro tipo de soluciones, como una base de datos alojada en la nube, cosas así. Hay algunas otras opciones en la comunidad alrededor de otros tipos de tecnologías de datos. He visto algunas de las opciones de SQLite en la comunidad alrededor de allí también. Así que cada vez más están surgiendo, pero esas son las cosas principales que usted desea mirar hacia para un juego o una aplicación. Y había una pregunta en la parte posterior también. 

[Estudiante] En cuanto a la red de [inaudible] subir o descargar archivos [inaudible] [Bowen] ¿Es tu pregunta ¿cómo se puede ver que, o cómo se puede depurar y probar que él? [Estudiante] ¿Cómo puedes depurarlo [inaudible] Lo siento. No puedo oír todo. [Estudiante] ¿Cómo lo consigue probado bug y también [inaudible] Grande. Grande. ¿Cómo se trabaja con las redes? ¿Cómo se puede ver lo que está pasando? Hay muchas respuestas diferentes a esta, pero déjame que te enseñe probablemente las cosas más fáciles aquí. Déjame deshacerme del simulador por un segundo. Opciones de depuración Sólo un par de redes. Hay una pila de red completa al horno a la derecha en tanto el nivel WinRT y desde WinJS, por lo que usted puede hacer muy fácilmente XHR, tipo AJAX llamadas de su juego o aplicación para hacer eso. En primer lugar, yo tiendo a usar 2 cosas. Yo uso los propios herramientas dev reales, que tienen una pila de red al horno en ellos. Te voy a enseñar la página de inicio de Windows. Yo puedo hablar de esto, y no hay realmente un proxy de red al horno en estas herramientas aquí. Así que yo puedo hacer esto, puedo actualizar la página, y que va a mostrarme todas las interacciones, incluyendo llamadas AJAX para esa sesión, la duración de dicha solicitud. Esto es útil. Va a ser muy útil para aplicaciones basadas en navegador. Para otros tipos de aplicaciones, como Windows para almacenar aplicaciones, Yo uso una herramienta llamada Fiddler. Vas a conseguir un juego en respuesta. [Risas] Fiddler es un proxy simple. Creo que puedo demostrar que a usted. Es sólo GetFiddler.com, que, curiosamente, estoy trazando mi pila de red va a GetFiddler. Pero de todos modos, El violinista ha sido escrito por uno de los PMs en el equipo de IE, así que él sabe lo que está haciendo. Esto es un buen indicador que se puede utilizar para el tráfico de la red de depuración. Yo recomendaría que. Pregunta por ahí también. 

[Estudiante] ¿Hay una manera fácil de integrar a la entrada de lenguas extranjeras, como el japonés o el chino, en aplicaciones de Windows? No puedo decir que he hecho demasiado de mí mismo, sino que es al horno pulg Hay opciones para, por supuesto, que emite su aplicación - Lo siento, yo no he dicho la pregunta - opciones en torno a la globalización, la localización de los contenidos, incluyendo cosas como la capacidad de vender en diferentes mercados y apuntar a que la versión de su aplicación para las lenguas individuales o culturas o cosas por el estilo. Absolutamente construido adentro Hemos tenido el apoyo para que por siempre, y que lleva adelante en sus opciones para la Windows Store. Usted puede hacer eso en la propia tienda, vender en diferentes mercados, que puede hacer que, en la solicitud, así también con el uso de los recursos para definir, "Si me desarrollé para esta cultura, a continuación, utilizar estos reemplazos para el contenido textual "O utilizar un derecho de lector de la izquierda." Esos son todos parte de los WinJS predeterminados y APIs WinRT. Buena pregunta. 

¿Cómo lo estamos haciendo? ¿Algún otro? Y si alguien en el vídeo tiene preguntas, estoy cbowen @ microsoft, así que estoy feliz de tomar cualquiera de sus preguntas desde el futuro. Muy - Desde el futuro, [echo imita] futuras. Así que aquí soy yo. Permítanme volver puse mi contacto aquí. Así que me acaba de enviar una nota, cbowen @ microsoft, y yo pondremos en contacto con usted tan pronto como pueda. 

Cualquier otra cosa que usted se está preguntando? ¿Estamos bien? Grande. Está bien. Gracias a todos mucho. Te lo agradezco. [Aplausos] 

[CS50.TV]