{"id":9,"date":"2012-07-20T22:39:02","date_gmt":"2012-07-21T03:39:02","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/fafarfan\/?p=9"},"modified":"2012-07-21T01:49:58","modified_gmt":"2012-07-21T06:49:58","slug":"apps-metro-gui-win8","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/fafarfan\/apps-metro-gui-win8\/","title":{"rendered":"Desarrollo de Apps Metro para Windows 8"},"content":{"rendered":"<h1 align=\"center\"><span style=\"color: #333399\"><strong>Desarrollo de Aplicaciones Metro para Windows 8<\/strong><\/span><\/h1>\n<h2><span style=\"color: #000080\"><strong>Saludos cordiales a todos!!<\/strong><\/span><\/h2>\n<p>Bienvenido a un nuevo post! Este d\u00eda les hablar\u00e9 de la m\u00e1gica traves\u00eda a la que Microsoft nos invita: Windows 8 y su interfaz Metro!<\/p>\n<div id=\"attachment_11\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/531475_10150992667869286_1924859351_n.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11\" class=\"size-medium wp-image-11\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/531475_10150992667869286_1924859351_n-300x206.jpg\" alt=\"Logo de Windows 8\" width=\"300\" height=\"206\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/531475_10150992667869286_1924859351_n-300x206.jpg 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/531475_10150992667869286_1924859351_n.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-11\" class=\"wp-caption-text\">Logo de Windows 8<\/p><\/div>\n<p>Ayer instal\u00e9 la versi\u00f3n Release Preview de Windows 8 que reci\u00e9n fue lanzada. Me extra\u00f1\u00f3 no ver de nuevo al \u201cpescadito azul\u201d, ya que solo aparecieron en letras t\u00e9tricas la palabra \u201cWindows\u00ae\u201d. Una vez m\u00e1s el tiempo de instalaci\u00f3n fue sorprendente. Entre que ingresas el disco instalador hasta que puedes usar el SO (Sistema Operativo) con todas sus funcionalidades, te demoras menos de 20 minutos!! [Me demor\u00f3 mucho m\u00e1s instalando Autocad 2012!].<\/p>\n<p>Pero bueno, empecemos desde el inicio:<\/p>\n<h2><span style=\"color: #000080\"><strong>Qu\u00e9 es Windows\u00a08 Release Preview??<\/strong><\/span><\/h2>\n<p>\u201c<em>Windows\u00a08 Release Preview<\/em><em> es una versi\u00f3n preliminar de Windows\u00a08 centrada en las personas y en las aplicaciones, que te ofrece nuevas y eficaces formas de usar las tecnolog\u00edas sociales para estar conectado con las personas que te interesan. Es una versi\u00f3n de Windows reimaginada. Windows\u00a08 Release Preview se basa en los s\u00f3lidos cimientos de Windows\u00a07, y te ofrece la seguridad y confianza que esperas de Windows, pero mejoradas. Es r\u00e1pido y se ha dise\u00f1ado para que funcione en una gran variedad de dispositivos, especialmente con la nueva generaci\u00f3n de dispositivos t\u00e1ctiles<\/em>.\u201d<\/p>\n<div id=\"attachment_32\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/presentacion_win8.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-32\" class=\"size-medium wp-image-32\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/presentacion_win8-300x200.jpg\" alt=\"Presentaci\u00f3n de Windows 8 RP\" width=\"300\" height=\"200\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/presentacion_win8-300x200.jpg 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/presentacion_win8.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-32\" class=\"wp-caption-text\">Presentaci\u00f3n de Windows 8 RP<\/p><\/div>\n<p>Es una gran apuesta que hace Microsoft; ya que, reimagina toda la interacci\u00f3n con el usuario a la que estamos acostumbrados, brind\u00e1ndonos la nueva interfaz metro. Adem\u00e1s, su conectividad permanente con la nube, nos permite colgar y obtener informaci\u00f3n f\u00e1cilmente en internet. Definitivamente es un SO dirigido a interfaces t\u00e1ctiles, pero no olvida a los usuarios que a\u00fan tenemos solo un mouse y teclado.<\/p>\n<h2><strong><span style=\"color: #000080\">C\u00f3mo se ve Windows 8 Release Preview??<\/span><\/strong><\/h2>\n<p>Primero empecemos con el coraz\u00f3n de todo, la pantalla inicio. En ella encontrar\u00e1s todos los programas importantes para ti, representados por \u00edconos rectangulares llamados \u201cTiles\u201d. Esto es algo fascinante; ya que, estos \u201ctiles\u201d contienen informaci\u00f3n no est\u00e1tica, dependiendo de la aplicaci\u00f3n, se actualizan constantemente (ves las \u00faltimas noticias, el tiempo, o alg\u00fan mail que te ha llegado), lo que te permite dar un vistazo de diferente informaci\u00f3n de una misma aplicaci\u00f3n. Cada uno de ellos es configurable: puedes variar su tama\u00f1o o cambiarlos de posici\u00f3n.<\/p>\n<div id=\"attachment_18\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/inicio_win8.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-18\" class=\"size-medium wp-image-18\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/inicio_win8-300x225.png\" alt=\"Mi Pantalla Inicio de Windows 8 Release Preview\" width=\"300\" height=\"225\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/inicio_win8-300x225.png 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/inicio_win8.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-18\" class=\"wp-caption-text\">Mi Pantalla Inicio de Windows 8 Release Preview<\/p><\/div>\n<p>Algo diferente de Windows 8 es su \u201cZoom Sem\u00e1ntico\u201d, ves lo \u00fanicamente lo que tienes que ver. Si alejas o acerca el zoom, la informaci\u00f3n mostrada ser\u00e1 diferente. Mientras m\u00e1s alejes el zoom, menos texto deber\u00e1s observar.<\/p>\n<div id=\"attachment_19\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/zoom_win8.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-19\" class=\"size-medium wp-image-19\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/zoom_win8-300x225.png\" alt=\"Zoom Semantico de Windows 8\" width=\"300\" height=\"225\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/zoom_win8-300x225.png 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/zoom_win8.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-19\" class=\"wp-caption-text\">Zoom Semantico de Windows 8<\/p><\/div>\n<p>Otra cosa nueva son los \u201cCharms\u201d que son diferentes opciones a la derecha de la pantalla. Te permiten Buscar y Compartir (entre otras cosas) informaci\u00f3n, ya sea en tu m\u00e1quina o en una aplicaci\u00f3n que est\u00e9s usando!!<\/p>\n<div id=\"attachment_20\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/charms_win8.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-20\" class=\"size-medium wp-image-20\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/charms_win8-300x225.png\" alt=\"Charms de Windows 8\" width=\"300\" height=\"225\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/charms_win8-300x225.png 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/charms_win8.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-20\" class=\"wp-caption-text\">Charms de Windows 8<\/p><\/div>\n<h2><strong><span style=\"color: #000080\">C\u00f3mo es la arquitectura de desarrollo en Windows 8???<\/span><\/strong><\/h2>\n<p>Primero demos un vistazo a la siguiente imagen que nos habla de la arquitectura detr\u00e1s de Windows 8!<\/p>\n<div id=\"attachment_27\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/arqui_win8.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-27\" class=\"size-medium wp-image-27\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/arqui_win8-300x167.jpg\" alt=\"Arquitectura Windows 8\" width=\"300\" height=\"167\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/arqui_win8-300x167.jpg 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/arqui_win8.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-27\" class=\"wp-caption-text\">Arquitectura Windows 8<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>Como podemos observar, en Windows 8 corren 2 tipos de aplicaciones: Las metro y las tradicionales de escritorio. Las \u201cDesktop APPS\u201d son a las cuales estamos acostumbrados, a una ventanita con botones, espacio de trabajo, etc etc etc. Como podemos observar, dichas aplicaciones pueden ser programadas con lenguajes como C#, VB, C o C++ usando APIs como .NET, Silverlight o Win32. Tambi\u00e9n se puede crear aplicaciones web que corran dentro de Internet Explorer, con HTML y JS.<\/p>\n<p>En cambio, las aplicaciones de estilo Metro, como nos muestra la gr\u00e1fica, pueden dise\u00f1ar su interfaz gr\u00e1fica haciendo uso de XAML o HTML\/CSS, e implementar su funcionalidad con C\/C++, C#\/VB o JavaScript; respectivamente. El lenguaje usado es lo de menos, ya que todo se levanta sobre un mismo API, as\u00ed como lo hacen las apliaciones .NET (curiosamente este API fue radicalmente cambiado de la <em>Consumer Preview<\/em> a la <em>Release Preview<\/em>). Esta API se llama WinRT y ofrece avanzadas capacidades de comunicaci\u00f3n y datos, gr\u00e1ficos, multimedia, dispositivos, impresi\u00f3n, etc. En otro post, les publicar\u00e9 un ejemplo con el uso de esta API.<\/p>\n<h2><span style=\"color: #000080\"><strong>C\u00f3mo es el estilo Metro?<\/strong><\/span><\/h2>\n<p>Si ya has tenido la oportunidad de trabajar con una aplicaci\u00f3n para Windows Phone, debes tener una gran idea.<\/p>\n<p>Las aplicaciones estilo Metro\u00a0 tienen una \u00fanica ventana sin contenedor visual; que, por defecto, ocupa toda la pantalla, para evitar distracciones por parte del usuario. El estilo Metro tiene una estructura bien definida. Especifica cu\u00e1les partes deben tener contenido y cu\u00e1les partes deben tener controles, haciendo m\u00e1s simples y homog\u00e9neas todas las aplicaciones. Las aplicaciones Metro est\u00e1n pensadas para funcionar perfectamente tanto en superficies t\u00e1ctiles, como equipos con mouse y teclado.<\/p>\n<div id=\"attachment_25\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/app-metro_win8.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-25\" class=\"size-medium wp-image-25\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/app-metro_win8-300x225.png\" alt=\"Aplicaci\u00f3n Metro: Cocktail Flow\" width=\"300\" height=\"225\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/app-metro_win8-300x225.png 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/app-metro_win8.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-25\" class=\"wp-caption-text\">Aplicaci\u00f3n Metro: Cocktail Flow<\/p><\/div>\n<h2><strong><span style=\"color: #000080\">Qu\u00e9 debo hacer para programar una Aplicaci\u00f3n Estilo Metro????<\/span><\/strong><\/h2>\n<p>Primero, debes tener instalado la versi\u00f3n <em>Release Preview<\/em> de Windows 8. Lo puedes descargar desde aqu\u00ed: <a href=\"http:\/\/windows.microsoft.com\/es-ES\/windows-8\/download\">http:\/\/windows.microsoft.com\/es-ES\/windows-8\/download<\/a>. Luego, debes descargar el Visual Studio 11 RC, donde podr\u00e1s programar tus aplicaciones Metro, \u00a0lo encontrar\u00e1s en: <a href=\"http:\/\/www.microsoft.com\/visualstudio\/11\/en-us\">http:\/\/www.microsoft.com\/visualstudio\/11\/en-us<\/a>. Si no sabes c\u00f3mo empezar, existen muchos ejemplos en el Centro de Desarrollo de Windows, para C++, C#, VB.NET y JavaScript: <a href=\"http:\/\/code.msdn.microsoft.com\/windowsapps\/Windows-8-Modern-Style-App-Samples\">http:\/\/code.msdn.microsoft.com\/windowsapps\/Windows-8-Modern-Style-App-Samples<\/a><\/p>\n<div id=\"attachment_30\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/vs11_win8.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-30\" class=\"size-medium wp-image-30\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/vs11_win8-300x286.png\" alt=\"Evolucion del Visual Studio desde VS2010\" width=\"300\" height=\"286\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/vs11_win8-300x286.png 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/vs11_win8.png 740w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-30\" class=\"wp-caption-text\">Evolucion del Visual Studio desde VS2010<\/p><\/div>\n<h2><strong><span style=\"color: #000080\">Por qu\u00e9 deber\u00eda interesarme en esto??<\/span><\/strong><\/h2>\n<p>Sin contar que es una nueva tecnolog\u00eda y que un programador que se respeta siempre est\u00e1 deseoso de buscar nuevo conocimiento; las aplicaciones metro que hagas pueden llegar a cualquier parte del mundo, sin tener que moverte de tu asiento. Esto es gracias a la <em>APP Store<\/em> de Windows 8, donde puedes subir tu aplicaci\u00f3n, y cualquier persona la puede obtener. Obviamente debe pasar ciertos procesos de aprobaci\u00f3n, para que esto sea posible, aparte de una suscripci\u00f3n como desarrollador a la tienda.<\/p>\n<div id=\"attachment_31\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/Captura-de-pantalla-5.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-31\" class=\"size-medium wp-image-31\" src=\"http:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/Captura-de-pantalla-5-300x225.png\" alt=\"App Store de Windows 8\" width=\"300\" height=\"225\" srcset=\"https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/Captura-de-pantalla-5-300x225.png 300w, https:\/\/blog.espol.edu.ec\/fafarfan\/files\/2012\/07\/Captura-de-pantalla-5.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-31\" class=\"wp-caption-text\">App Store de Windows 8<\/p><\/div>\n<h2><span style=\"color: #000080\"><strong>Conclusiones:<\/strong><\/span><\/h2>\n<p>Windows 8, desde su versi\u00f3n <em>Developer Preview<\/em>, es un SO que viene \u201csonando fuerte\u201d. As\u00ed como lo hubo para WinXP, hay muchas personas en contra, temerosas al cambio de interfaz. Debo decir que la propuesta de Microsoft es bastante interesante, te acostumbras r\u00e1pidamente, y todo se \u201cve\u201d m\u00e1s ordenado.<\/p>\n<p>Si bien, la interfaz metro es el tema central de Windows 8, hay que indicar que todas las aplicaciones de escritorio que eran compatibles con Win7, lo ser\u00e1n tambi\u00e9n en Win8. Aun as\u00ed, debemos leer, instruirnos y prepararnos en este nuevo paradigma de interfaz, para ser pioneros en este campo tan competitivo como lo es el de desarrollo de aplicaciones.<\/p>\n<p align=\"center\"><strong>No te pierdas la oportunidad de usar este incre\u00edble sistema operativo!!!<\/strong><\/p>\n<h2><strong><span style=\"color: #000080\">Referencias:<\/span><\/strong><\/h2>\n<ul>\n<li><a href=\"http:\/\/windows.microsoft.com\/es-ES\/windows-8\/apps\">http:\/\/windows.microsoft.com\/es-ES\/windows-8\/apps<\/a><\/li>\n<li><a href=\"http:\/\/windows.microsoft.com\/es-ES\/windows-8\/faq\">http:\/\/windows.microsoft.com\/es-ES\/windows-8\/faq<\/a><\/li>\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=t0gn7ARFyB8\">http:\/\/www.youtube.com\/watch?v=t0gn7ARFyB8<\/a><\/li>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/windowsappdev\/\">http:\/\/blogs.msdn.com\/b\/windowsappdev\/<\/a><\/li>\n<\/ul>\n<p style=\"text-align: right\">__________________________________________<\/p>\n<p style=\"text-align: right\">Atte.<br \/>\n<strong>Frederick Farf\u00e1n J.<\/strong><br \/>\n<a href=\"http:\/\/www.frederickfarfan.tk\">http:\/\/www.frederickfarfan.tk<\/a><br \/>\n<a href=\"https:\/\/twitter.com\/ArQuItEcTo_Ec\">@ArQuItEcTo_Ec<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desarrollo de Aplicaciones Metro para Windows 8 Saludos cordiales a todos!! Bienvenido a un nuevo post! Este d\u00eda les hablar\u00e9 de la m\u00e1gica traves\u00eda a la que Microsoft nos invita: Windows 8 y su interfaz Metro! Ayer instal\u00e9 la versi\u00f3n Release Preview de Windows 8 que reci\u00e9n fue lanzada. Me extra\u00f1\u00f3 no ver de nuevo [&hellip;]<\/p>\n","protected":false},"author":7767,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21754],"tags":[1250116],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-windows-8","tag-windows-8"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/users\/7767"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":18,"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/posts\/9\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/fafarfan\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}