Compartir a través de

Crear la primera aplicación de la Tienda Windows con Blend, parte 1: la página maestra (HTML y JavaScript)

  • Artículo

Puedes desarrollar una aplicación de la Tienda Windows de forma más rápida y eficaz con la colección de herramientas HTML y CSS de Blend para Visual Studio. En este tutorial, crearás una aplicación sencilla, PickaFlick, en la que puedes examinar una lista de películas nuevas. La lista se genera con una API de Rotten Tomatoes y debes registrarla para obtener una clave de API que pegarás en el código.

La página principal de la aplicación PickaFlick

Crear la primera aplicación de la Tienda Windows - Blend (HTML)

En la primera parte de este tutorial, crearás la página principal de la aplicación. Durante el proceso aprenderás a:

Al descargar este proyecto de la galería de ejemplos, no solo puedes consultar el código, sino también todos sus activos para que puedas seguir el tutorial y crear el proyecto sobre la marcha.

No es necesario tener experiencia con HTML, CSS o JavaScript para completar este tutorial. Sin embargo, para poder usar Blend de forma eficaz, es útil contar con experiencia de nivel medio en HTML, CSS y JavaScript.

Crear un proyecto a partir de una plantilla de proyecto

Blend y Visual Studio proporcionan las mismas plantillas de proyecto que te ayudan a empezar a desarrollar tu aplicación de la Tienda Windows. Para obtener más información sobre las plantillas que Blend y Visual Studio proporcionan para desarrollar otros tipos de aplicaciones, consulta Plantillas para acelerar el desarrollo de tu aplicación.

Para crear un proyecto

  1. En Blend, en el menú Archivo, haz clic en Nuevo proyecto.

    En el cuadro de diálogo Nuevo proyecto, aparece a la izquierda una lista de tipos de proyecto. Cuando hagas clic en un tipo de proyecto, las plantillas de proyecto asociadas a ese tipo aparecerán a la derecha.

    Cuadro de diálogo Nuevo proyecto de Blend

  2. En la lista de tipos de proyecto, haz clic en HTML (Tienda Windows).

  3. En la lista de plantillas de proyecto, haz clic en Aplicación vacía.

  4. En el cuadro de texto Nombre, escribe PickaFlick.

  5. En el cuadro de texto Ubicación, comprueba la ubicación del proyecto.

  6. En la lista Lenguaje, JavaScript es la única opción.

Ver cómo la interfaz de usuario de Blend refleja los cambios en la aplicación

El área de trabajo predeterminada de Blend proporciona una interfaz visual para crear aplicaciones de la Tienda Windows: la superficie de diseño, paneles, opciones de configuración del área de trabajo, vistas de creación de documentos y menús. Para obtener más información, consulta Área de trabajo de aplicación de Blend (HTML).

Cuando trabajes en un proyecto, los cambios realizados en un área de la aplicación se reflejarán en la interfaz.

En la parte superior izquierda, haz clic en la pestaña Proyectos para ver las carpetas y los archivos que se generan automáticamente cuando se crea un proyecto a partir de la plantilla Aplicación vacía:

  • References Contiene las bibliotecas de solo lectura de CSS y Windows para JavaScript.

  • css Contiene el archivo .css de la aplicación.

  • images Contiene los activos de imagen predeterminados de la aplicación.

  • js Contiene el archivo .js predeterminado de la aplicación.

  • default.html Página de inicio predeterminada de la aplicación.

  • package.appxmanifest Muestra el contenido de la aplicación y describe sus funciones (por ejemplo, si la aplicación puede acceder a la cámara web del usuario). Este archivo especifica también la página de inicio de la aplicación.

Blend - Archivos y carpetas de proyecto predeterminados (HTML)

Para obtener más información, consulta Panel Proyectos (HTML).

Debajo del panel Proyectos, en la parte inferior izquierda de la interfaz, está el panel DOM dinámico. El panel DOM dinámico muestra la estructura de default.html. Si expandes body, aparece el elemento p.

El panel DOM dinámico proporciona una vista de la jerarquía de objetos de la página HTML en la que estás trabajando. Si trabajas directamente en el panel DOM dinámico, podrás modificar rápida y fácilmente la jerarquía de objetos sobre la marcha.

Panel Proyectos predeterminado de Blend (HTML)

Para obtener más información, consulta Panel DOM dinámico (HTML).

El elemento p contiene el texto "Content goes here" que se muestra en la superficie de diseño.

Superficie de diseño predeterminada de Blend (HTML)

En la vista de documentos relacionados se muestra el código de default.html y default.css. Cuando cambias los elementos que aparecen en la superficie de diseño, los documentos relacionados se actualizan automáticamente. Cuando realices cambios en el código JavaScript, se te avisará de que necesitas actualizar la vista. Haz clic en Actualizar Icono Actualizar en la esquina superior derecha de la aplicación para ver los cambios en la superficie de diseño.

Vista de documentos relacionados predeterminada de Blend (HTML)

Para obtener más información, consulta Vista de documentos relacionados (HTML).

Si no aparecen default.html y default.css, haz clic en el icono de vista Dos paneles en la esquina superior derecha de la superficie de diseño.

En este procedimiento, quitarás el elemento p predeterminado de default.html, agregarás un color de fondo a body y comprobarás que el código se actualiza mientras trabajas.

Para modificar la presentación de default.html

  1. En el panel DOM dinámico, haz clic con el botón secundario en p y haz clic en Eliminar.

  2. En el panel Reglas de estilo, expande default.css y, a continuación, haz clic en body.

    Observa que el selector body también se selecciona en default.css en la vista de documentos relacionados.

  3. En el panel Propiedades de CSS, expande la categoría Fondo.

  4. Junto a background-color, haz clic en Sin establecer.

  5. En el cuadro de texto Valor hexadecimal, escribe #D5BF9A y presiona Entrar.

    El selector body en default.css ahora contiene la regla de estilo background-color: #D5BF9A.

Agregar una plantilla de elementos al proyecto

Además de las plantillas de proyecto, Blend y Visual Studio proporcionan plantillas de elementos, que contienen código de uso general. Puedes agregar fácilmente una a un proyecto para ayudar a acelerar el desarrollo de la aplicación. Consulta Plantillas para acelerar el desarrollo de tu aplicación.

Para la aplicación PickaFlick, agregarás una plantilla de elementos de una página HTML al proyecto existente. La página contendrá el código HTML de la página principal de la aplicación.

Para agregar una plantilla de elementos de una página HTML

  1. En el menú Archivo, haz clic en Nuevo elemento.

    Se abrirá el cuadro de diálogo Nuevo elemento.

    Blend - Página HTML Agregar nuevo elemento (HTML)

  2. En la lista de plantillas de elementos, haz clic en Página HTML.

  3. En el cuadro de texto Nombre, escribe homepage.html y haz clic en Aceptar para agregar la plantilla de elementos.

En la vista de documentos relacionados, observa que el marcado de homepage.html es mínimo.

Blend - Página HTML básica

Como homepage.html se mostrará como un fragmento dentro de default.html, homepage.html heredará el estilo de default.html, por lo que no necesitas agregar referencias de CSS o HTML a homepage.html.

A continuación, agregarás un elemento div a la página y después cambiarás el nombre del elemento div. Al cambiar el nombre del elemento div se aplica un atributo id a dicho elemento, lo que simplifica la identificación del elemento div de otros elementos div de la página y de la aplicación.

Puedes agregar elementos a la página HTML:

  • Escribiéndolos directamente en el editor de código

  • Insertando el elemento mediante el panel Activos

  • Insertando el elemento directamente en el panel DOM dinámico

En el siguiente procedimiento se muestran los tres métodos para agregar un elemento a la página HTML. Después de agregar el elemento div, agregarás un atributo id a div con un nuevo nombre en el panel DOM dinámico.

Para agregar un elemento div a homepage.html

  1. En el panel DOM dinámico, haz clic con el botón secundario en body, haz clic en Insertar elemento y después haz clic en div o presiona Ctrl+Mayús+=.

    SugerenciaSugerencia

    Las otras maneras de agregar un elemento a la superficie de diseño de Blend son:

    • En la vista de documentos relacionados, en homepage.html, coloca el cursor entre las etiquetas body de apertura y cierre y escribe <div>.La etiqueta de cierre se agrega automáticamente.

    • En el panel DOM dinámico, haz clic en body y, a continuación, en el panel Activos, busca el elemento div escribiendo div en el cuadro de texto Buscar y realiza una de las operaciones siguientes:

      • Haz doble clic en div para agregar un elemento div a la página.

      • Arrastra el elemento div del panel Activos a la superficie de diseño.

      • Arrastra el elemento div del panel Activos al panel DOM dinámico.

      • Dibuja un elemento div directamente en la superficie de diseño.

    Aparece un nuevo elemento div en el panel DOM dinámico y en el código HTML de homepage.html.

  2. En el panel DOM dinámico, sigue uno de estos procedimientos para aplicar un id al nuevo elemento div:

    • Haz doble clic en div y escribe homepageContainer en el campo de texto.

      Blend - Panel DOM dinámico - Cambiar nombre (HTML)

    • Haz clic con el botón secundario en el elemento div, haz clic en Editar identificador y escribe homepageContainer.

    • En el panel Atributos HTML, en el campo id, escribe homepageContainer.

    En la vista de documentos relacionados, en homepage.html, se ha agregado un atributo id con el valor homepageContainer al elemento div.

    Identificador de homepagecontainer de Blend (HTML)

Implementar el modelo de navegación de una sola página

En esta sección aprenderás a:

  • Implementar el modelo de navegación de una sola página

  • Cambiar entre Blend y Visual Studio para modificar el código JavaScript

Para la aplicación PickaFlick, usarás el modelo de navegación de una sola página, lo que significa que usarás una sola página para mostrar tu aplicación y cargarás datos en esa página de otras páginas según sea necesario. Dividirás tu aplicación en varios archivos, pero en lugar de desplazarte de una página a otra (navegación por varias páginas), tu aplicación cargará otras páginas como fragmentos de página en la página predeterminada. Consulta Inicio rápido: usar la navegación de una página (aplicaciones de la Tienda Windows con JavaScript y HTML).

Cambiar y volver a Visual Studio

Para cargar el contenido de homepage.html en default.html, necesitarás llamar al espacio de nombres UI.Fragment de Win.JS para presentar el fragmento de página en default.html. Puedes modificar los archivos .js en Blend, pero puedes agregar, modificar y depurar el código JavaScript más fácilmente utilizando las herramientas integradas en Visual Studio. Para obtener más información sobre estas herramientas, consulta JavaScript IntelliSense.

Puedes alternar fácilmente entre Blend y Visual Studio mientras trabajas en un proyecto. Incluso puedes tener el mismo archivo de proyecto abierto en Blend y en Visual Studio al mismo tiempo en el mismo equipo. Cuando guardes un cambio en un archivo en una herramienta y cambies a la otra, solo tendrás que recargar el archivo para actualizar la vista del proyecto.

NotaNota

Puedes copiar y pegar código en Blend o en Visual Studio.Sin embargo, Visual Studio es la herramienta recomendada para escribir o editar JavaScript.En este paso se muestra cómo cambiar fácilmente entre Blend y Visual Studio, incluso cuando trabajas en un solo proyecto.

Si agregas nuevos archivos al proyecto mientras trabajas en Visual Studio, debes guardar el proyecto mediante Guardar todo (Ctrl+Mayús+S) o compilar y ejecutar la aplicación antes de cambiar a Blend.Al cambiar a Blend, recibirás un mensaje en el que se te pregunta si deseas volver a cargar el proyecto.Haz clic en Sí. Los nuevos archivos se agregarán al proyecto en Blend.

Agregarás una referencia a la API de JavaScript para Windows

Ahora ya puedes agregar una referencia al espacio de nombres Fragment de Windows JavaScript.

Para agregar una referencia en default.js al espacio de nombres WinJS.UI.Fragments

  1. En el panel Proyectos, haz clic con el botón secundario en PickaFlick y, a continuación, haz clic en Editar en Visual Studio.

    Visual Studio abrirá el proyecto PickaFlick.

  2. En Visual Studio, en el Explorador de soluciones, expande la carpeta js y haz doble clic en default.js para abrirlo.

  3. Pega el código siguiente inmediatamente detrás de app.start();:

    //add DOMContentLoaded event
    document.addEventListener("DOMContentLoaded", loadInitialPage, false);

  4. Pega el siguiente código al final del script:

    //When initial page is loaded, use WinJS.UI.Fragments Namespace to load homePage.html into the body element of default.html
var target;

function loadInitialPage() {
    target = document.querySelector("body");
    WinJS.UI.Fragments.renderCopy("/homePage.html", target).done();
}

  5. Presiona Ctrl+Mayús+S para guardar todos los cambios y después cambia a Blend.

  6. Si se te pide confirmación para recargar el proyecto, haz clic en Recargar. Blend reflejará en Visual Studio los cambios que acabas de hacer en el proyecto.

Observa que ahora aparece homepageContainer en el panel DOM dinámico. Haz clic en la pestaña default.html en la parte superior de la aplicación. Observa que el color de fondo de homepageContainer en el panel DOM dinámico es diferente del resto del panel DOM dinámico, lo que indica que procede de una página diferente. A la derecha de homepageContainer está el icono del fragmento Icono de fragmento de Blend.

Blend - un fragmento en el panel DOM dinámico

Si haces clic en homepageContainer en el panel DOM dinámico, verás el archivo homepage.html abierto en la vista de documentos relacionados. Además de estas pistas, cuando seleccionas un elemento procedente de homepage.html mientras trabajas en default.html, en la parte superior de la aplicación, en la pestaña default.html, aparece la notificación "The selected content is part of homepage.html". Este mensaje te ayuda a identificar el origen de los objetos o elementos que aparecen en la superficie de diseño cuando trabajas en default.html, la base del modelo de navegación de una sola página.

Blend - Mensaje de contenido seleccionado (HTML)

Agregar las imágenes al proyecto

La aplicación PickaFlick se crea con imágenes confeccionadas por un diseñador gráfico. Además de hacer que la aplicación sea más interesante visualmente, la imagen de un pollo sirve también de botón, en el que el usuario hace clic para iniciar la aplicación.

Puedes agregar las imágenes al proyecto:

  • Con el comando Agregar elemento existente del menú Proyecto

  • Copiando y pegando

  • Arrastrando y colocando

En este ejemplo copiarás y pegarás las imágenes.

Para agregar las imágenes al proyecto

  1. Las imágenes siguientes se incluyen con el proyecto de ejemplo:

    • ChickenSprite

    • FilmStrip

    • MainLogo

    • SmallLogo-Chicken

    • TempBoxArt

    Si descargaste el proyecto de ejemplo, abre la carpeta Assets, presiona Ctrl+A y presiona Ctrl+C.

  2. En Blend, en el panel Proyectos, haz clic con el botón secundario en la carpeta Images y después haz clic en Pegar.

Ahora puedes agregar las imágenes a la superficie de diseño mientras diseñas la aplicación.

Definir reglas de estilo CSS

El aspecto de la aplicación se modifica principalmente aplicando estilos CSS. Puedes modificar sus estilos con cualquier editor de texto, pero podrás crearlos y editarlos más fácilmente si usas el conjunto de herramientas CSS avanzadas de Blend.

Puedes establecer propiedades de CSS específicas en Blend:

  • Escribiéndolas directamente en el editor de código

  • Buscando la propiedad que deseas modificar en el panel Propiedades de CSS, visualmente o escribiendo el nombre de propiedad en el cuadro de texto Buscar o establecer, y escribiendo el valor que desees en el editor de valores para esa propiedad

  • Escribiendo la declaración de propiedad directamente en el cuadro de texto Buscar o establecer y usando la sintaxis correcta de CSS Por ejemplo, puedes establecer la propiedad background-repeat en repeat-x escribiendo background-repeat: repeat-x en el cuadro de texto Buscar o establecer y presionando Entrar.

    También puedes especificar varias propiedades para el mismo elemento escribiendo los nombres y los valores de propiedad directamente en el cuadro de texto Buscar o Establecer. Usa la sintaxis de CSS correcta e incluye un punto y coma (;) entre cada definición de estilo. Por ejemplo, puedes establecer la propiedad background-repeat en repeat-x y la propiedad position-y en center escribiendo background-repeat: repeat-x; position-y: center en el cuadro de texto Buscar o establecer y presionando Entrar.

Puedes organizar las propiedades del panel Propiedades de CSS de dos maneras: por categoría o por nombre.

Blend - opción Organizar por del panel Propiedades de CSS

Si organizas las propiedades por categoría, las propiedades de CSS aparecen agrupadas por categoría, con las categorías organizadas alfabéticamente. Si organizas las propiedades por nombre, verás una lista alfabética de todas las propiedades disponibles de CSS.

A continuación, aplicarás una propiedad height a homepageContainer y después agregarás las imágenes y les aplicarás estilo.

Para modificar el alto de homepageContainer

  1. En el panel DOM dinámico, haz clic con el botón secundario en homepageContainer y después haz clic en Crear regla de estilo desde id. de elemento.

    Observa que ahora aparece #homepageContainer en el panel Reglas de estilo. Un contorno verde indica que este es el estilo seleccionado actualmente. El indicador amarillo debajo de #homepageContainer es el punto de inserción para nuevos estilos. Puedes arrastrar el punto de inserción si quieres insertar nuevos estilos en una ubicación diferente. En el panel Propiedades de CSS, observa también que #homepageContainer (default.css) aparece ahora en la ventana Estilos aplicados.

  2. En el panel Propiedades de CSS, busca la propiedad height escribiendo height en el cuadro de texto Buscar o establecer.

  3. En el editor de valores height, escribe 100 %.

    Si las propiedades están organizadas por categoría, line-height aparecerá en primer lugar en la lista. Si las propiedades están organizadas por nombre, height aparecerá en primer lugar en la lista.

Para agregar la imagen de fondo y aplicarle estilo

  1. En el cuadro de texto Buscar o establecer, haz clic en la x para borrar la selección del procedimiento anterior.

  2. En la categoría Fondo del panel Propiedades de CSS, busca la casilla Capas y haz clic en Agregar Botón Agregar y después en el botón de recursos de la imagen Botón de imagen de fondo de Blend.

  3. En la lista de origen, haz clic en FilmStrip.png.

  4. Establece position-y en center y repeat en repeat-x.

    FilmStrip.png de Blend antes y después (HTML)

Para agregar el logotipo principal y aplicarle estilo

  1. En el cuadro Capas, haz clic en Agregar Botón Agregar y después en el botón de recursos de la imagen Botón de imagen de fondo de Blend.

  2. En la lista de origen, haz clic en MainLogo.png.

    Observa que MainLogo.png aparece detrás de filmstrip.png.

  3. Cambia z-index (el orden de las capas) haciendo clic en MainLogo.png en el cuadro Capas y después en la flecha arriba para mover MainLogo.png encima de filmstrip.png en la lista de imágenes.

    MainLogo.png aparecerá ahora encima de filmstrip.png.

    MainLogo.png de Blend antes y después (HTML)

  4. Establece position-x y posición-y en center y repeat en no-repeat.

    MainLogo.png de Blend (HTML)

Crear un contenedor de diseño de caja flexible

En esta sección, agregarás la imagen del pollo y le aplicarás estilo. La imagen del pollo aparece en el centro de la página maestra, pero cambia de posición cuando se coloca el puntero en ella. Este efecto no es en realidad una animación, sino una pseudoclase hover aplicada a la imagen. De forma predeterminada, solo aparece la mitad de la imagen. Cuando colocas el puntero en ella, la parte oculta de la imagen se vuelve visible, reemplazando la vista predeterminada y simulando una animación.

ChickenSprite.png de Blend (HTML)

Para colocar más fácilmente la imagen, crearás un contenedor de diseño flexbox modificando la propiedad display de homepageContainer. Consulta Diseño de cajas flexibles (“Flexbox”).

Para agregar el contenedor de caja flexible y aplicarle estilo

  1. En el panel DOM dinámico, haz clic en homepageContainer.

  2. En el panel Proyectos, abre la carpeta images y haz doble clic en ChickenSprite.png para agregar la imagen del pollo a la superficie de diseño.

    Al hacer clic en homepageContainer, se agrega ChickenSprite.png como elemento secundario de homepageContainer. El elemento img se activa y la imagen del pollo aparece en la superficie de diseño.

    ChickenSprite.png de Blend en superficie de diseño (HTML)

  3. En el panel DOM dinámico, haz clic en homepageContainer.

  4. En el panel Propiedades de CSS, busca la categoría Diseño y haz clic en flex en la lista display.

  5. En la categoría FlexBox, establece align-items y justify-content en center.

  6. En el panel DOM dinámico, haz clic con el botón secundario en el elemento img, haz clic en Agrupar en y haz clic en div o presiona Ctrl+G.

    SugerenciaSugerencia

    También puedes arrastrar el elemento img al elemento div.

    El elemento de imagen se incluye ahora en un contenedor div.

  7. Haz clic en div y escribe spriteContainer en el cuadro de texto.

  8. Haz doble clic en spriteContainer y haz clic en Crear regla de estilo desde id. de elemento.

  9. En el panel Propiedades de CSS, establece height en 180px y overflow-y en hidden.

    ChickenSprite.png de Blend antes y después (HTML)

  10. Haz clic en img en el panel DOM dinámico y escribe chickenButton en el cuadro de texto.

    SugerenciaSugerencia

    Expande spriteContainer si el elemento img no está visible.

  11. En el panel Reglas de estilo, a la derecha de default.css, haz clic en Agregar Botón Agregar.

  12. En el panel Reglas de estilo, haz clic en .newStyle y, a continuación, escribe #chickenButton:hover para crear un pseudoselector para chickenButton.

    Observa que a medida que escribes, CSS Intellisense proporciona las referencias de CSS disponibles para facilitar el desarrollo de reglas de estilo.

    Panel de reglas de estilo de CSS Intellisense de Blend (HTML)

  13. En el panel Propiedades de CSS, en la categoría Margen, establece margin-top en -180px.

Presiona F5 para compilar y ejecutar la aplicación o presiona Ctrl+I para obtener una vista previa de la aplicación en modo interactivo. Coloca el puntero en la imagen del pollo para confirmar que la imagen cambia de estado. Presiona Alt+F4 para cerrar la aplicación.

Ahora puedes crear la página de detalles. Para continuar, consulta Crear la primera aplicación de la Tienda Windows con Blend, parte 2: la página de detalles (HTML y JavaScript).