Características y diferencias de HTML, CSS y JavaScript (HTML)

Applies to Windows and Windows Phone

La plataforma para aplicaciones de Windows en tiempo de ejecución con JavaScript permite crear aplicaciones con HTML, CSS y JavaScript. Si bien gran parte de la programación de aplicaciones de Windows en tiempo de ejecución con JavaScript es igual que escribir código y marcado para un sitio web, las aplicaciones de Windows en tiempo de ejecución con JavaScript proporcionan características adicionales y presentan algunas diferencias respecto al modo en que se usan las características HTML existentes. Aquí analizamos dichas diferencias.

Requisitos previos

Compatibilidad HTML

Las aplicaciones de Windows en tiempo de ejecución con JavaScript admiten la mayoría de las características de HTML5, como los elementos canvas, SVG, video y audio. También admiten la mayoría de las características de las hojas de estilo CSS de nivel 3 (CSS3), como transformaciones 2D, transformaciones 3D, transiciones y animaciones.

En general, escribir HTML para una aplicación de Windows en tiempo de ejecución con JavaScript es muy similar a escribir HTML para Internet Explorer 11 si se ejecuta en el modo estándar. Sin embargo, existen algunas diferencias. En las secciones siguientes se describe cómo las aplicaciones de Windows en tiempo de ejecución con JavaScript proporcionan algunas características nuevas importantes y cómo algunas API de HTML y DOM funcionan de manera diferente.

Funciones adicionales

Las aplicaciones de Windows en tiempo de ejecución con JavaScript proporcionan muchas características nuevas que puedes usar para mejorar tus aplicaciones:

  • Compatibilidad mejorada con la funcionalidad táctil.
  • Más control sobre la apariencia de tu interfaz de usuario.

    Las aplicaciones de Windows en tiempo de ejecución con JavaScript proporcionan componentes adicionales con estilos, denominados partes, para muchos de los controles HTML existentes y todos los nuevos controles de la biblioteca de Windows para JavaScript. Estas partes te proporcionan más flexibilidad sobre la apariencia de tus controles. Si quieres obtener más información sobre la aplicación de estilos a controles, consulta Inicio rápido: dar estilo a los controles.

  • Accede a Windows en tiempo de ejecución.

    Windows en tiempo de ejecución es un conjunto de API desarrolladas para aplicaciones de Windows en tiempo de ejecución que proporcionan funcionalidad de redes, mejor análisis de XML, acceso al sistema y a dispositivos, y mucho más. Para obtener una lista completa de lo que proporciona Windows en tiempo de ejecución, consulta la Referencia de Windows en tiempo de ejecución.

    También puedes usar Windows en tiempo de ejecución para escribir tus propias bibliotecas personalizadas en C#, Visual Basic o C++. Después, puedes acceder a esas bibliotecas a través de JavaScript en tu aplicación de Windows en tiempo de ejecución con JavaScript.

  • Controles como DatePicker, TimePicker y ListView, un control de datos que puede personalizarse enormemente y puede enlazarse con diferentes tipos de datos, como XML y servicios web. Estos controles forman parte de WinJS.

    Para obtener una lista completa, consulta la lista de controles.

  • Accede a WinJS.

    WinJS es un conjunto de archivos de JavaScript y CSS que facilita la creación de aplicaciones de Windows en tiempo de ejecución con JavaScript. Se usa en conjunto con HTML, CSS y Windows en tiempo de ejecución para crear tu aplicación.

Objetos de Windows en tiempo de ejecución

Windows en tiempo de ejecución proporciona API que te permiten un mayor acceso al sistema. Puedes escribir tus propios objetos personalizados para tu proyecto en C#, VB y C++, los cuales incluyes como una biblioteca de códigos en tu proyecto.

Diferencias

En general, las API de HTML y DOM funcionan del mismo modo que lo harían en Windows Internet Explorer en modo estándar. Pero hay algunas diferencias. Algunas de ellas se producen por ejecutarse dentro del shell de Windows, que controla qué tipos de ventanas puedes abrir. Otras diferencias son el resultado de la aplicación de la Tienda Windows con el modelo de seguridad de JavaScript.

  • Applies to Windows

Windows: Crear y manipular ventanas

En el shell de Windows, la aplicación activa ocupa una sola ventana que llena la mayor parte de la pantalla. No puedes crear ventanas nuevas, ni cambiar de tamaño o mover ventanas existentes.

Trabajar con el objeto window

Algunos métodos del objeto window como, por ejemplo, alert, prompt, open, moveBy, moveTo, resizeBy y resizeTo no funcionan en las aplicaciones de Windows en tiempo de ejecución con JavaScript. Una página que se ejecuta en el contexto local puede usar window.close para salir de la aplicación, pero solamente debes usarla en caso de un error irrecuperable. Las páginas que se ejecutan en el contexto web pueden usar window.close.

Navegación básica

Una de las formas más simples y más comúnmente usadas de navegación es el hipervínculo. El código aquí crea un hipervínculo que navega a page2.html.


<p><a href="page2.html">Go to page 2</a></p>

Dado que es un vínculo relativo, el sistema asume que page2.html es una página local que es parte de tu aplicación. Hacer clic en el vínculo te lleva a page2.html. Las páginas locales, como page2.html, se ejecutan en el contexto local.

En el siguiente ejemplo, se agrega un vínculo a un sitio web externo, www.bing.com:


<p><a href="ms-appx:///page2.html">Go to page 2</a></p>
<p><a href="http://www.bing.com">Search the web</a></p>


Cuando haces clic en el segundo vínculo, algo interesante sucede—el vínculo se abre en el explorador web en lugar de dentro de tu aplicación, a diferencia del primer vínculo que se abre dentro de la aplicación.

Esto se debe a que las aplicaciones de Windows en tiempo de ejecución con JavaScript no realizarán una navegación de nivel superior a una página externa. Solamente pueden mostrar páginas web externas en un control WebView o iframe. Para obtener más información, consulta Cómo vincular a páginas web externas. Para obtener más información acerca de los diferentes protocolos que puedes usar para vincular (como ms-appx:/// y ms-appx-web:///), consulta el tema sobre cómo hacer referencia a contenido.

Páginas de contexto web y local

Para comprender algunas de las diferencias entre cómo se comporta tu marcado y tu código en el explorador y cómo en una aplicación de Windows en tiempo de ejecución con JavaScript, primero necesitas comprender la diferencia entre el contexto web y el contexto local.

Una aplicación de Windows en tiempo de ejecución con JavaScript contiene al menos una página HTML. Esa página, y cualquier otra que incluyas en la aplicación en sí, se ejecuta en el contexto local de la aplicación. Cuando uses un iframe para navegar a una página remota, la página se ejecuta en el contexto web y tiene acceso limitado a tu sistema.

Puedes usar la sección ApplicationContentUriRules del manifiesto del paquete de la aplicación para que una página en el contexto web tenga acceso a los dispositivos de geolocalización del sistema (si tu aplicación tiene permiso para acceder a esta funcionalidad) y al Portapapeles.

Aunque tienen acceso a más partes del sistema que otras páginas externas, las páginas de contexto web no tienen tanto acceso como las páginas de contexto local. Por ejemplo, una página del contexto web no puede acceder a Windows en tiempo de ejecución, pero una página del contexto local puede. Para obtener más información acerca de las diferencias entre los contextos web y locales, consulta Características y restricciones por contexto.

Modelos de navegación

Casi todos los sitios web proporcionan cierta forma de navegación, generalmente en la forma de hipervínculos a los que puedes hacer clic para ir a una página diferente. Cada página tiene su propio conjunto de datos y funciones de JavaScript, un nuevo conjunto de HTML por mostrar, información de estilo, etc. Este modelo de navegación se conoce como navegación multipágina.

Otro modelo es la navegación de una página, en el que se usa una sola página para la aplicación donde se cargan datos adicionales según sea necesario. Todavía divides tu aplicación en múltiples páginas, pero en vez de moverte de una página a otra, tu aplicación carga otros documentos (usando objetos Page o HtmlControl) en la página principal. Dado que la página principal de tu aplicación nunca se descarga, tus scripts no se descargan nunca, lo que facilita la administración de las animaciones, los estados y la activación. Cuando los usuarios ejecutan tu aplicación, tienen una experiencia sin problemas como la de una aplicación que no tiene que pausarse para cargar nuevas páginas y ni siquiera muestra pantallas en blanco. Para aplicaciones de la Tienda Windows con JavaScript, recomendamos usar el modelo de navegación de una página.

Funciones asincrónicas

Para proporcionar una experiencia de usuario que dé respuesta, muchas funciones de WinJS y Windows en tiempo de ejecución se ejecutan asincrónicamente. De esa manera, tu aplicación puede continuar respondiendo a las interacciones del usuario mientras realiza trabajos en segundo plano. En vez de devolver un valor directamente, una función asincrónica devuelve unaPromise para un valor. Para obtener más información sobre la programación asincrónica, consulta Programación asincrónica en JavaScript.

Agregar HTML dinámicamente

Una página del contexto local de tu aplicación tiene más acceso al sistema que otras páginas web (o "páginas de contexto web"). Puede acceder a Windows en tiempo de ejecución y, dependiendo de los permisos de la aplicación, probablemente puedas acceder al sistema de archivos y a tus dispositivos. Por esta razón, es importante evitar que se ejecute un posible código malintencionado.

Para protegerse de posibles inyecciones de script y ayudar a proteger tu sistema contra posible código malintencionado, el HTML que inyectas en una página en el contexto local se filtra como si fuera procesado por el método toStaticHTML. Inyectar HTML que contiene un elemento desconocido, un controlador de eventos, script o referencia a un script, o seudoclase y seudoelemento de CSS desconocido causa una excepción cuando intentas agregar el HTML al DOM de la página.

Esta restricción de seguridad afecta a estas propiedades y métodos:

Puedes omitir esta restricción de seguridad, pero hazlo solo con contenido de confianza que no contenga contenido web remoto fuera de tu control. Para omitir el filtro HTML seguro, usa una de estas funciones:

  • createElement

    Crea explícitamente nuevos elementos que puedes agregar al DOM. Dado que creas cada elemento explícitamente, el filtro HTML seguro no se aplica a ellos. Asumimos que tienes el total control de lo que estás agregando y que no existen riesgos de incluir accidentalmente código malintencionado.

  • MSApp.execUnsafeLocalFunction

    Deshabilita el filtrado HTML seguro para la función especificada. Puedes crear una función que inserta contenido que normalmente se bloquearía y usa MSApp.execUnsafeLocalFunction para ejecutar esa función.

    
    
    var someElement = document.getElementById('someElementID');
    MSApp.execUnsafeLocalFunction(
        function() { someElement.innerHTML = '<div onclick="console.log(\"hi\");">hi</div>' }
    );
    
    
    
    
  • WinJS.Utilities.setInnerHTMLUnsafe, WinJS.Utilities.setOuterHTMLUnsafe

    Escribe el HTML especificado sin usar filtrado HTML seguro. (Estos controles forman parte de WinJS).

Dado que tienen acceso limitado al sistema, las páginas del contexto web no están sujetas a estas restricciones: las propiedades y funciones como innerHTML y pasteHTML no comprueban código potencialmente malintencionado.

Eventos de DOM

En su mayoría, los eventos DOM funcionan de la misma manera para las aplicaciones de Windows en tiempo de ejecución con JavaScript que en un explorador web, pero existen algunas diferencias. Para obtener una lista de eventos que funcionan de manera diferente, consulta la lista de cambios de API HTML y DOM.

Controles de ActiveX

Las aplicaciones de Windows en tiempo de ejecución con JavaScript no admiten controles ActiveX personalizados. Si necesitas un control de interfaz de usuario, usa un control HTML, un control de WinJS o crea tu propio control de WinJS personalizado. En cambio, si necesitas realizar una lógica personalizada, crea un objeto de Windows en tiempo de ejecución personalizado.

Codificación

Todo el código HTML, JavaScript y CSS al que puede acceder una aplicación de Windows en tiempo de ejecución con JavaScript debe usar la codificación UTF-8.

Almacenamiento en caché de código de bytes

Cuando una aplicación de Windows en tiempo de ejecución con JavaScript se ejecuta fuera del entorno de depuración de Microsoft Visual Studio, se producen varias optimizaciones de rendimiento. Una optimización importante es que todos los archivos JavaScript (archivos con una extensión .js) incluidos en el paquete de la aplicación se convierten en código de bytes que el motor de JavaScript puede utilizar directamente. Tu aplicación puede cargar y ejecutar el código en estos archivos más rápidamente de lo que puede cargar y ejecutar archivos no procesados, como un archivo de JavaScript en Internet. Este código de bytes y una copia del código de origen en sí se almacenan también en un único archivo de caché de código de bytes con los archivos empaquetados. Una vez completada la conversión del código de bytes, la modificación de los archivos de origen iniciales no afecta al comportamiento de la aplicación hasta que esta vuelve a implementarse.

Uso de jQuery

Puedes usar jQuery en tus aplicaciones de Windows en tiempo de ejecución con JavaScript, pero solo las versiones 2.0 y posteriores. Recomendamos usar siempre la versión más reciente.

Temas relacionados

Lista de cambios de API HTML y DOM

 

 

Mostrar:
© 2015 Microsoft