Con Internet Explorer 11, las aplicaciones y sitios basados en web pueden ofrecer ricas experiencias de edición que permiten a los usuarios capturar y compartir datos de manera sencilla. La creación de escenarios de contenido en línea y basado en la nube, como email y edición de documentos basados en web – que incluye Office 365, depende de la característica contentEditable de HTML5. Con IE11, los usuarios ahora pueden pegar imágenes de diferentes fuentes, copiar listas y preservar su formato y deshacer sus ediciones de manera más sencilla.
Pegar imágenes de todas las fuentes y con total control
Con IE11, ahora los sitios web tienen acceso directo a imágenes pegadas desde el portapapeles. IE11 es el primer navegador que soporta tanto imágenes pegadas directo del portapapeles (por ejemplo, de software de edición de fotos o desde Impresión de Pantalla) y pegado HTML que incorpora imágenes locales (por ejemplo, de aplicaciones como Microsoft Office que almacena imágenes de manera temporal en rutas locales). Tanto DataURI o Blob pueden ser utilizados para codificar esas imágenes.
Con la nueva capacidad de codificación DataURI en IE11, los sitios web pueden soportar de manera automática pegar imágenes del portapapeles, sin requerir JavaScript adicional. Por defecto, IE11 pega imágenes del portapapeles al convertirlas en DataURI e insertarlas como HTML en contentEditable. Por ejemplo, si dibujan una caja roja en software de edición de fotografía y la copian en contentEditable, la imagen se convierte en una etiqueta
Blob en lugar de DataURI al agregar algunas líneas de código. Al utilizar blobs, las aplicaciones pueden procesar los datos de la imagen de manera directa. Por ejemplo, un cliente de mail web podría necesitar codificar imágenes en un formato MIME antes de subirlas a la nube. Las aplicaciones que utilizan blobs de administración de tiempo de vida del objeto, en contraste con DataURI, que no requiere administración de objeto.
Las nuevas API de portapapeles en IE11 hacen del soporte de pegado de imágenes como Blob algo muy sencillo. El siguiente código convertirá todas las imágenes pegadas en Blob.
var blobList = [];
Function ()
{
var fileList = clipboardData.files;
for (var i = 0; i < fileList.length; i++)
{
var file = fileList [i];
var url = URL.createObjectURL(file);
event.msConvertURL(file, «specified», url);
blobList.push(file);
}
} );
Aquí una tabla que resume cómo elegir entre DataURI y blob:
| DataURI | Blob | |
| Requiere código JavaScript extra | No | Sí |
| Funciona cuando se pegan imágenes desde el portapapeles | Sí | Sí |
| Funciona cuando se pega HTML que hace referencia a imágenes locales | Sí | Sí |
| Dónde se almacenan los datos de imagen | En línea dentro del HTML pegado (puede expandir el tamaño del HTML de manera considerable) | Referencia externa (no hay problemas con el tamaño del HTML pero la aplicación necesita manejar exportación de imágenes cuando se envía el HTML) |
| Flexibilidad de datos de imagen | Baja (necesita ser extraída primero del HTML) | Alta (puede ser procesada al utilizar la referencia de blob) |
Pueden probar pegar imágenes por ustedes mismos en el Paste Image Test Drive donde pueden cambiar entre utilizar DataURI y Blob para pegar imágenes.
Paste Image Test Drive prueba si su navegador puede pegar imágenes con DataURI o Blob
Pegado de listas como listas HTML
Con IE11, los usuarios pueden pegar listas de las conocidas aplicaciones de oficina y continuar su edición de la lista dentro del navegador. Después de pegar la lista, el usuario puede solo presionar enter al final de la lista para crear nuevos elementos. Esta característica tiene un valor en particular cuando se pega contenido con formato desde aplicaciones de procesadores de palabras como Microsoft Word. IE11 reconoce que el texto con formato contiene una lista y la convierte en una lista HTML real con elementos
- o
- , para que puedan editar la lista de la forma que esperan hacerlo.
Pegar y editar listas con formato de aplicaciones como Microsoft Word (izquierda) es sencillo y natural en IE11 (derecha)
Experiencias de corrección ricas y naturales
Con IE11 las páginas web reciben de manera automática mejores experiencias de corrección y los desarrolladores web tienen un control fino sobre cómo las manipulaciones DOM en script participan en el conjunto de ‘deshacer’. En la mayoría de los casos, los desarrolladores no necesitan preocuparse sobre la pila de deshacer, y IE11 funciona como se espera. Por ejemplo, si la página contiene un botón “bold” que llama a execCommand(“bold”) cuando se le da clic, IE11 soporta en automático deshacer esta acción, para que el usuario pueda oprimir Ctrl+Z para quitar la negrita al texto. IE11 rastrea cada script iniciado con cambio DOM y lo coloca en una unidad “deshacer” separada.
La pila de deshacer por defecto en IE11, maneja las más simples ediciones de script, pero en ocasiones, los desarrolladores necesitan soportar ediciones más complejas y con pasos múltiples. Por ejemplo, la página podría detectar que el usuario ha escrito “:)”, elimina ese texto e inserta un glifo de cara sonriente. En este caso, IE crearía de manera ordinaria, dos unidades de “deshacer” (una para la eliminación y otra para la inserción), y el usuario debería oprimir Ctrl+Z dos veces para deshacer el cambio en el script – tal vez no sea lo que esperarían. IE11 agrega dos nuevos comandos para que los desarrolladores web hagan funcionar este escenario: pueden llamar ms-beginUndoUnit, correr su script y luego llamar ms-endUndoUnit. Todos los cambios DOM en medio de los dos comandos serán agrupados en una sola unidad de “deshacer”.
Los desarrolladores web pueden resetear a manera de programa el historial de deshacer a través del comando ms-clearUndoStack. Esta capacidad es de mucha ayuda si reutilizan su instancia de editor para múltiples contextos. Por ejemplo, cuando el usuario responde a través de múltiples email, pueden limpiar la pila de deshacer desde el email previo cada vez que uno nuevo se abra.
Pueden probar Undo Test Drive que utiliza los nuevos comandos para agrupar unidades de deshacer durante el reemplazo automático de la cara sonriente.
Undo Test Drive prueba operaciones de deshacer de pasos múltiples en su navegador
Resumen
Con Internet Explorer 11, las aplicaciones basadas en web y los sitios, pueden ofrecer ricas experiencias de edición al permitir a los usuarios capturar y compartir datos de manera sencilla. Los usuarios pueden crear contenido rico con pegado de imágenes automático, copiado y pegado automático de listas con formato y deshacer cambios de forma natural.
Prueben estas nuevas capacidades con IE11 tanto en Windows 7 como en Windows 8.1 y compartan sus comentarios con nosotros.
Jianfeng Lin and Ben Peters
Gerentes de Programa en Internet Explorer
