Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

WindowsAppStudioBetaWalkThrough - VTT Test

0 (0 Likes / 0 Dislikes)
Bienvenido a este video, Las Entradas y Salidas de Windows App Studio. En este video le voy a dar una guía de las características clave de App Studio: una herramienta basada en la web que podrá usar para crear aplicaciones listas para ser vendidas para Windows y Windows Phone. App Studio también le permite descargar el código fuente de su aplicación si quiere personalizarla usando Visual Studio, pero eso está fuera de lo que se abarca en este primer video. Al final de este video, habrá visto todo lo necesario para empezar a crear aplicaciones. App Studio es una herramienta basada en la web, así que voy a empezar en esta página web http://appstudio.windows.com/. Si entro en el enlace Empezar nuevo proyecto, puedo registrarme en App Studio usando mi cuenta de Microsoft. Si no tiene aún cuenta en Microsoft, puede crearse una en https://signup.live.com. Cuando me registro, App Studio muestra todos mis proyectos existentes en la página de Mis Proyectos. Sin embargo en este video quiero ensenarle como crear una nueva aplicación de la marca desde cero, así que voy a seguir y a entrar en Empezar nuevo proyecto. Antes de hacerlo, recuerde que puede volver a su lista de aplicaciones cuando quiera haciendo clic en Mis proyectos. Ahora estoy en la pantalla de Elija su plantilla y puedo ver todas las plantillas disponibles. Puedo elegir una de las plantillas creadas como punto de partida para mi propia aplicación o crear una desde cero. Si pulso en una de las plantillas, como Mi Ciudad, Menú, Mi héroe, o Equipos de Deporte, puedo explorar la plantilla en esta vista previa simulada para entender lo que contiene la plantilla. Para este video, me voy a centrar en crear una aplicación para Windows Phone y no una aplicación para Windows. Sin embargo para este video, voy a empezar desde cero, así que voy a entrar en la plantilla de Aplicación Vacía para crear una aplicación vacía. Ahora estoy en una de las cuatro pestanas donde voy a diseñar mi aplicación. Puede ver las cuatro pestanas cerca de la parte superior de la pantalla, y puede que ver que puedo moverme de una a otra. La aplicación que voy a crear mostrara información sobre mi próximo viaje a Venecia, así que voy a empezar rellenando esta página con datos adecuados: Visita Venecia en el título. Y subiré una imagen PNG que he preparado anteriormente para usarla como logo de mi aplicación. Puede ver que puedo subir un documento PNG desde mi ordenador, o desde mi cuenta OneDrive. Puede usar también una de las imágenes proporcionadas por App Studio, pero nosotros recomendamos crear una única imagen para cada aplicación. Piense en ella como su logo. Esta imagen será también, por defecto, usada en la casilla de la aplicación que aparece en la pantalla de inicio del teléfono y le ensenare más sobre personalizar dicha casilla más tarde. Normalmente, se usa la misma imagen para representar la aplicación en el mercado de aplicaciones, pero para ello necesita una versión de la imagen de 300 x 300 pixeles. Para la mejor calidad, debería empezar con una imagen de 300 x 300 pixeles. App Studio la reducirá proporcionalmente a 160 x 160 pixeles para usarla como logo. Puede usar muchos programas gratuitos como Microsoft Paint para reducir las fotos e imágenes. Aunque yo esté usando una imagen PNG, también puede subir una imagen JPEG la cual App Studio convertirá en formato PNG. Mientras hago los cambios, se habrá dado cuenta de que la imagen de vista previa se ha actualizado. Esto le ayuda a asegurarse de que su información se mostrara correctamente cuando su aplicación este instalada en un teléfono real. La vista previa no es exacta, pero le da indicaciones reales de cómo será su aplicación. Ahora quiero empezar añadiendo algunas secciones a mi aplicación. Esta es la página donde se define el contenido de su aplicación. Una aplicación creada con App Studio está organizada mediante secciones: donde cada sección contiene un tipo de datos en particular. Por ejemplo una sección podría tener una colección de imágenes, mientras que otras podrían contener nuevos artículos, o texto que usted introduzca directamente en App Studio. Los usuarios de su aplicación podrán navegar entre dichas secciones deslizando el dedo hacia la derecha o hacia la izquierda desde la página principal de la aplicación. Puedo crear una nueva sección haciendo clic en el componente que quiero usar para la sección, ya sea del conjunto de componentes básicos o avanzados. Dese cuenta de que una aplicación está limitada por seis secciones principales en total, así que sería buena idea planear de antemano de lo que van a tratar sus secciones (aunque puede volver y añadir o eliminar secciones más tarde). Así como secciones cuyo contenido sea imágenes, videos, y nuevos artículos, hay también secciones de menú. Un menú contiene una colección de secciones, menús o acciones. Las acciones pueden ser enlaces a información almacenada externamente como páginas web y números de teléfono, o enlaces a otras secciones de su aplicación. Voy a seguir y a crear una sección que contenga una galería de fotos. Para añadir una sección que contenga fotos, hare clic en el componente de Flickr para añadir una nueva sección. Le pondré un nombre a mi sección, configurare mi usuario de la cuenta de Flickr para mostrar las fotos en mi Secuencia de Fotografías y confirmare la adición de dicha sección. En vez de usar una cuenta de usuario de Flickr, puedo poner un término de búsqueda para las imágenes que quiero mostrar. Si hago clic en Editar, puedo personalizar la sección. En esta página puedo elegir los diseños tanto para la página de la lista como para la página de los detalles de esta sección, voy a elegir imágenes algo mayores del tamaño del pulgar para la página de lista y una todavía mayor para la página de detalles. También puedo modificar los términos de búsqueda si hago clic en Datos. Cuando esté contento con los resultados, regresare a mi lista de secciones. Ahora voy a añadir otra sección que contenga una colección de videos de Youtube. Le pondré nombre a la sección y personalizare la lista de videos de Youtube que quiero que mi aplicación muestre introduciendo un nombre de usuario de Youtube, un término de búsqueda o una lista de reproducción. Hare clic en Confirmar cuando esté terminado. Guardare mi nueva sección. Puedo editar las páginas de mi sección de videos de la misma forma que lo hice para la sección de fotos: puedo añadir o eliminar páginas de detalle y seleccionar diferentes diseños. Dese cuenta de que si hago clic en Datos, puedo modificar el criterio de selección de videos. Ahora voy a añadir una sección que muestre noticias sobre el Festival Bienal de Venecia. Para ello, voy a añadir una sección con una fuente de datos RSS. Muchas webs de noticias y blogs utilizan RSS como medio de publicación de artículos a los subscriptores a medida que estos estén disponibles. Es una buena forma de añadir una fuente de datos que está al día con las últimas noticias. Aquí, estoy añadiendo la dirección de una RSS de noticias del New York Times. Y otra vez, cuando esté contento con ello, hare clic en Confirmar para guardarlo. Así que ahora puede ver noticias sobre el Festival Bienal de Venecia en una de las secciones de su aplicación. La aplicación verificara si hay nuevos artículos y los mostrara como y cuando ellos hayan sido publicados. Y otra vez, si quiero modificar la forma en la que la información es mostrada, puedo modificar los diseños de la página de esta sección. Voy a añadir otra sección que muestre los resultados de una búsqueda en Bing. Voy a usar Bing para buscar eventos que estén pasando en Venecia. Como con RSS, este tipo de fuente de datos se actualiza automáticamente porque la aplicación ejecuta la búsqueda cuando está siendo usada en el dispositivo. Para la búsqueda, especifico el país y entonces introduzco una cadena de búsqueda. Hare clic en Confirmar cuando esté terminado. Guardare la nueva sección. Si quiero modificar el diseño de esta página, hare clic en Editar. Dese cuenta de que solo hay un diseño para los resultados de búsqueda. En la página de Datos puedo modificar el criterio de búsqueda. La próxima sección que voy a crear es una “sección sobre el autor” que cuenta un poco sobre la aplicación y su autor. Para ello voy a usar un componente HTML. Puedo crear el contenido de mi página usando este editor. Puedo usar los botones para aplicar el formato HTML básico. Si quiero, puedo también editar el HTML haciendo clic directamente aquí. Un consejo útil para crear contenido en la fuente de datos HTML es que puede cortar y pegar de otra página web existente y mantener el formato. Déjeme guardar esta nueva sección. Para añadir un menú a mi aplicación, abriré la sección de Secciones Avanzadas, hare clic en Menú, y le pondré un nombre. Si hago clic en Editar, puedo personalizar la apariencia de mi menú, y ver en la vista previa como será en el teléfono real. Voy a hacer clic en Guardar, y volveré a mi lista de secciones. Si hago clic en esta flecha de abajo, puedo añadir artículos a mi menú. Voy a elegir una Acción de Menú, pero podría también añadir otras secciones a mi menú como una galería de imágenes o videos. Cada artículo de mi Acción de Menú tiene un nombre, y detalles de la acción para llevarla a cabo. Esta primera acción será un enlace a la página web de Venecia Conectada, añadiré un nombre para la acción y añadiré el URL de la página web. Entonces hare clic en Confirmar para guardarlo. Después de haber creado la Acción de Menú, puedo personalizarla haciendo clic en Editar Articulo. Aquí, puedo modificar el enlace de texto que se despliega en la aplicación y añadir un icono. Entonces hare clic en Guardar para guardar los cambios. Hare clic en la flecha de debajo del componente Acción de Menú otra vez. Y esta vez añadiré una acción que llame al servicio de asistencia de la compañía de tren. Editare este menú para añadir un icono. Y finalmente, añadiré una acción que me ayude a mandarle un email a Jane, mi organizadora de viajes. Puede ver mientras selecciono la acción de email, que otras acciones incluyen mostrar localizaciones en un mapa o reproducir música en mi teléfono. Ya he creado tres acciones en mi menú. En la página de secciones principales puede ver que he alcanzado el máximo de secciones. Todavía tengo una sección importante que añadir, así que eliminare la sección que contiene videos de cantantes gondoleros. Para esta última sección, voy a usar el componente Colección para crear una pequeña base de datos de museos en Venecia. Puedo definir los datos que mi colección va a tener aquí. Voy a empezar añadiendo un conjunto de columnas por defecto para mis datos haciendo clic aquí. Voy a añadir una nueva columna llamada dirección para almacenar la dirección de cada museo, dese cuenta de que puedo elegir entre todos estos tipos para cada columna. También puedo decir si quiero que cada descripción tenga múltiplos renglones. También voy a añadir una columna para almacenar el número de teléfono. Cuando haya terminado con las definiciones de las columnas, hare clic en Confirmar para guardarlas. Para añadir datos a mi colección, hare clic en Editar. A continuación necesito añadir datos, así que hare clic en Datos y luego en Editar Datos. Añada algunos detalles y luego haga clic en Guardar. Para acelerar el proceso de introducción de datos, puede usar la herramienta de importación y exportación. Primero voy a hacer clic en Exportar Datos, para exportar mi único artículo a un documento Guardare el documento en mi disco duro local. Entonces ya puedo abrir el documento en un editor de texto para añadir más archivos, siguiendo el formato de los existentes en el documento. Dese cuenta de que cada campo está rodeado por comillas, y hay un punto y coma entre cada campo. Para ahorrar tiempo, voy a pegar un conjunto de archivos que cree anteriormente. Dese cuenta que la columna de imagen está vacía, necesito añadir las imágenes de forma independiente usando App Studio. Volviendo a App Studio, hare clic en importar datos y elegiré el documento CSV que he editado. Añadiré una imagen para cada museo y guardare los archivos nuevos haciendo clic en Guardar. Otra cosa importante es que no puede añadir o eliminar columnas una vez hayas creado algún artículo – Sin embargo podría exportar sus artículos, editar sus columnas, añadir una nueva columna de datos en su documento CSV, y entonces reimportar sus artículos. La otra decisión importante que tengo que tomar sobre mi fuente de datos Colección es si debería ser un recurso estático o dinámico. Si elijo Recurso Estático, los artículos están ligados a la aplicación: la aplicación puede mostrarlos sin necesidad de conexión a internet, pero no puedo cambiar la colección sin regenerar la aplicación y redistribuirla a todos los usuarios. Por otro lado, usando Recurso Dinámico, los artículos están almacenados en la nube, la aplicación necesita conexión a internet para mostrarlos, pero puedo editar la colección sin App Studio y obtener los cambios automáticamente recogidos por todos los usuarios porque la aplicación carga la colección desde el servicio de datos de la nube. Voy a cambiar mi recurso de datos para usar Recurso Dinámico. Quiero mostrarle una última herramienta de la página de diseño. Voy a utilizar estos enlaces para configurar que información de la colección quiero que aparezca en la lista de museos. Dese cuenta como la vista previa se actualiza. También voy a editar el diseño de la página de detalles para mi colección de museos. Además de ser capaz de asignar otras columnas de mi fuente de datos en los marcadores de posición en el diseño de la página, puedo también asignar columnas que tengan tipos de datos particulares como un número de teléfono para acciones en la página. En este ejemplo, haciendo clic en el icono del teléfono, un usuario podrá marcar el número de teléfono de información del museo; haciendo clic en otro icono mostrara la localización del museo en un mapa. Déjeme guardar los cambios. Ya he definido el contenido de mi aplicación, es hora de hacer algunos cambios en cómo se va a ver. Antes de empezar a realizar cambios en el color y otros elementos de la interfaz del usuario, quiero cambiar el orden de mis secciones en la pantalla de Secciones Principales. Puedo hacerlo arrastrando las secciones a una nueva localización. Cuando haya acabado guardare los cambios, y hare clic en Temas para darle un estilo determinado a mi aplicación. En la página de Temas, puedo cambiar los colores de varios elementos clave de la pantalla del usuario. Puedo utilizar los estilos estándar oscuro y claro o elegir un conjunto de colores personalizado, pero tengo que tener cuidado de no elegir una combinación de colores que haga complicada la lectura del contenido. Dese cuenta como la vista previa se actualiza para reflejar mis decisiones. Si selecciona el estilo personalizado puede elegir una imagen de fondo, pero vuelva a asegurarse de que su texto sea legible. Es mejor usar una imagen que sea muy oscura y un texto claro, o usar una imagen que sea muy clara y texto oscuro. El tamaño ideal de imagen es 800 pixeles de ancho y 498 pixeles de alto. Guardare los cambios. En la pestaña de la Casilla representativa de la aplicación, puedo cambiar la apariencia y el comportamiento de dicha casilla que representa la aplicación en la pantalla de inicio del teléfono. La plantilla rotativa me permite personalizar el frente y el reverso de una casilla con diferentes contenidos. La plantilla de ciclo recorre hasta nueve imágenes de una de las secciones de colección de mi aplicación. Si tiene una sección que use una sección con Servicio de Datos Dinámico de App Studio, entonces puede actualizar las imágenes en los teléfonos de sus usuarios editando el contenido del Servicio de Datos en App Studio. Este tipo de Casilla utilizada una tarea programada que permite a su aplicación ejecutar código en el fondo incluso si la aplicación no está funcionando en el primer plano del teléfono. Y la plantilla de iconos muestra una única imagen con texto personalizable para tres tamaños de Casilla diferentes. Para mi aplicación, voy a seleccionar la plantilla de ciclo y a configurarla así. Las últimas elecciones de configuración opcionales para mi aplicación de App Studio son para las pantallas de bienvenida y de bloqueo. La pantalla de bienvenida se muestra mientras la aplicación se está cargando y la de bloqueo si el usuario utiliza la aplicación como pantalla de bloqueo del teléfono. Si crea sus propias imágenes personalizadas, deberán tener un tamaño de 720 x 1280 pixeles. Puede subir las imágenes desde su ordenador o su cuenta OneDrive. Yo voy a usar la misma imagen para ambas en mi aplicación. Guardare los cambios. En la pestaña de Información Pública voy a completar alguna información para la preparación de la publicación de mi aplicación en el mercado. Añadiré una descripción de la misma, seleccionare un lenguaje, y opcionalmente incluiré un dialogo Sobre y decidiré si permito o no anuncios en mi aplicación. También necesito asociar mi aplicación con el mercado. He seguido adelante y proporcionado la información necesaria para este cuadro de dialogo En el video Tenga su aplicación lista para el mercado se proporciona más información sobre esto. Para ahora, déjeme mostrarle rápidamente de donde he obtenido yo esta información. Abriré el enlace de Dev Center en una nueva pestaña, y cambiare a esa pestaña. Usare el enlace Dashboard para obtener una visión rápida de mi cuenta de desarrollador. Selecciono el enlace Aplicaciones. He reservado anteriormente el nombre para esta aplicación, así que seleccionare la aplicación para obtener más detalles. La pestaña de Detalles tiene la información que necesito. En las propiedades de la aplicación mostradas aquí, encontrará la información requerida para asociar su aplicación con el mercado. Déjeme volver a App Studio y guardar los cambios. Haciendo clic en Terminar me lleva a la página desde donde puedo generar mi aplicación. Aquí puedo elegir crear una aplicación para Windows Phone 8 que funcionara en teléfonos con Windows 8 o Windows Phone 8.1 o puedo elegir la opción de la derecha para crear una aplicación universal de Windows que funcionara en cualquier tableta u ordenador con Windows 8.1. Para el propósito de este video, crearemos una aplicación para Windows Phone 8.0. Tarda en generarse unos minutos, y cuando esté terminado App Studio me enviara una notificación a mi email. Ahora que la aplicación esta lista, tengo un par de opciones. Si quiero probar la aplicación en mi teléfono, debo asegurarme de que ya tengo instalado el certificado de App Studio. Cuando me registre en App Studio, recibí un email con las instrucciones para instalar el certificado en mi teléfono. Ya he instalado mi certificado así que puedo continuar e instalar la aplicación en mi teléfono simplemente escaneando el código QR de la pantalla. Si no lo hiciste, App Studio le pedirá que se descargue el certificado cuando cargue la aplicación escaneando el código QR o haciendo clic en el enlace de descarga de Internet Explorer. Se dará cuenta cuando cargue la aplicación de que aparecerá la página de ‘Toque para abrir’ en Internet Explorer en su teléfono. Cuando la toque, aparecerá el mensaje Instale aplicación de empresa. Cuando haga clic en instalar, la aplicación se instala en el fondo. Cuando vuelva a la página de Internet Explorer, no necesita volver a hacer clic en ‘Toque para abrir’. Cuando hace clic en el botón de empezar y se mueve a la página de las aplicaciones, la aplicación instalada aparecerá en la lista. Si estoy pensando en publicar mi aplicación en el mercado de App de Windows Phone, puedo descargar el paquete de publicación (un documento XAP) de aquí. Alternativamente, puedo descargarme el código fuente si pretendo hacer mejoras de la aplicación usando App Studio. El próximo video Como Obtener el Código Fuente y Hacer una Modificación, le ayudara a comenzar con esto. O puedo compartir mi aplicación con amigos y compañeros haciendo clic en una de las opciones de Compartir. Antes de terminar, quiero ensenarle como es la aplicación cuando está funcionando. Ya me he descargado la aplicación y la estoy haciendo funcionar en el simulador antes de en un teléfono real porque así es más fácil mostrarlo en este video. Puede ver la Casilla que definí en la pantalla de inicio del teléfono y cuando lance la aplicación vera como carga la pantalla de bienvenida. Mientras navego por la aplicación, puede ver las diferentes secciones que se definieron. Aquí puede ver la lista de museos que añadí en mi colección. Volveré a la colección de museos en App Studio y hare un cambio añadiendo un artículo y guardándolo. Como esta colección usa el Servicio de Datos de App Studio, debería ver la nueva entrada en la aplicación en el teléfono tan pronto como haga clic en refrescar o reanudar la aplicación. Volveré a la aplicación y reanudare la página. Puede ver que ha aparecido el nuevo artículo. Esto también aparecerá automáticamente cuando el usuario vuelva a lanzar la aplicación. Si hago clic en una de las entradas de los museos, la información se muestra en la página de detalle. Puedo navegar entre las distintas entradas deslizando el dedo hacia derecha e izquierda; no necesito volver a la página de la lista. Si he definido más de una página de detalle para la sección, puedo navegar entre ellas deslizando el dedo. Tener más de una página de detalle es útil si tu colección tiene más de cuatro columnas porque puedes mostrar diferentes columnas de datos en diferentes páginas. También puede ver los artículos de acciones (mostrar la localización en un mapa y llamar al museo) que se definieron usando el enlace de acción. Haciendo clic en el número de teléfono me permite marcarlo, y haciendo clic en el icono de localización me mostraría su localización en un mapa. Gracias por ver este video. Si quiere aprender más sobre como ampliar y mejorar su aplicación con App Studio, vea el siguiente video Como Obtener el Código Fuente y Hacer una Modificación. ¡Disfrute y cree buenas aplicaciones!

Video Details

Duration: 27 minutes and 56 seconds
Country: United States
Language: English
Genre: None
Views: 17
Posted by: bryanto on Oct 17, 2014

WindowsAppStudioBetaWalkThrough - VTT Test

Caption and Translate

    Sign In/Register for Dotsub above to caption this video.