Cambios en iFrame y Sanitización

Ahora hemos incluido dos sistemas de sanitización de código para el desarrollo de hojas: Sistema Antiguo y Nuevo Sistema.

Cambios en la Sanitización de Código

Para el desarrollo de hojas, la sanitización de código ahora está dividida en dos sistemas para elegir sin la interrupción de cambios.

Sistema Antiguo

El sistema de sanitización antiguo utiliza pautas más restrictivas para la sanitización tanto de HTML como de CSS.

¿Cómo lo habilito?

Por defecto, todas las hojas existentes de nuestros repositorios de GitHub han optado por el sistema antiguo. Esto permite a los autores de hojas hacer la transición al nuevo sistema a su propio ritmo, mientras que todas las hojas existentes en el sistema antiguo siguen funcionando igual que antes.

Si estás en el nuevo sistema de sanitización y quieres volver al Antiguo, sigue los siguientes pasos:

• Hojas de Repo de GitHub
  • En tu archivo sheet.json, agrega el siguiente par clave/valor:
  • “legacy”: true

• Hoja de Pruebas
  • En el editor sheet.json, añade el siguiente par clave/valor:
  • “legacy”: true

• Editor Personalizado de Hoja
  • En la página de configuración de tu juego, selecciona la casilla de verificación “Sanitización Legacy”, que se encuentra encima del editor de código.

¿Cómo creo una hoja para esto?

La comunidad tiene un excelente artículo Wiki sobre esto en las opciones y restricciones de HTML, CSS y Javascript, que puedes ver aquí: https://wiki.roll20.net/Building_Character_Sheets#Restrictions.

Nuevo Sistema

El nuevo sistema de sanitización ya no sanitiza el CSS entrante y reduce en gran medida las restricciones y reglas añadidas al HTML entrante.

¿Cómo lo activo?

¡Por defecto, todas las nuevas hojas de nuestro repositorio, hojas personalizadas y juegos de taller de hojas personalizadas están seleccionadas en el nuevo sistema! ¡Facilísimo!

Si estás en el sistema antiguo y quieres cambiar al nuevo sistema, sigue los siguientes pasos:

• Hojas de repositorio de GitHub
  • En tu archivo sheet.json, elimina el siguiente par clave/valor:
  • “legacy”: true

• Taller de Hoja personalizada
  • En el editor de sheet.json, elimina el siguiente par clave/valor:
  • “legacy”: true

• Editor de Hoja Personalizada
  • En la página de configuración de tu juego, desmarca la casilla de verificación 'Sanitización Heredada', que se encuentra encima del editor de código.

¿Cómo creo una hoja para esto?

¡Comienza a escribir HTML y CSS como lo harías normalmente! Queremos que la experiencia sea lo más cercana posible al desarrollo tradicional. La mayoría de los elementos funcionarán, incluyendo clases, id's, puntos de interrupción y animaciones.

Sin embargo, todavía hay algunas limitaciones por ahora que deben tenerse en cuenta:

• No todos los elementos y atributos HTML están disponibles, todavía hay algunas restricciones. 
  • Ejemplos de etiquetas restringidas: link, video, iframe, meta
  • Ejemplos de atributos restringidos: autoplay, download, onclick

• Javascript todavía está restringido y debe utilizarse a través de Sheetworkers
  • Puedes leer más sobre Sheetworkers aquí: https://wiki.roll20.net/Sheetworkers
• Las plantillas de tirada seguirán utilizando el sistema de saneamiento heredado, lo que significa que seguirán las reglas y restricciones descritas aquí: https://wiki.roll20.net/Building_Character_Sheets#Restrictions

Migrar del sistema heredado al nuevo

Puede parecer una tarea desalentadora, pero esperamos que estos cambios te permitan desarrollar hojas de personaje de una manera mucho más eficiente y mejorada.

Esta es una descripción general de lo que podrías hacer para convertirte al nuevo sistema, pero de ninguna manera abarca todo y depende de tu propio proceso y flujo.

• Cambia al nuevo sistema de saneamiento a través de tu método preferido (GitHub, hoja de pruebas o editor de hojas personalizado)
• Elimina cualquier referencia codificada en tu CSS y HTML a lo siguiente y soluciona cualquier problema que haya causado.
  • Clase “Sheet-”
•  Si estás utilizando nuestra cuadrícula Roll20 proporcionada, agrega “sheet-” a los atributos de clase HTML donde se estén utilizando esas clases.
• ¡Convierte tantas cosas como puedas en botones de tirada para aprovechar mejor nuestra barra de macros rápida!

Consideraciones adicionales de desarrollo

A medida que te migras a este nuevo sistema, considera estos consejos geniales para agregar a tu hoja mientras trabajas:

• Mejor soporte de accesibilidad
  • Ahora admitimos etiquetas de aria , HTML semánticoy otras funciones suministradas nativamente.
  • Aquí hay algunos materiales de lectura geniales que solo rascan la superficie de esta disciplina:
    • https://www.w3.org/WAI/fundamentals/accessibility-intro/
    • https://developer.mozilla.org/en-US/docs/Web/Accessibility
    • https://www.w3schools.com/html/html_accessibility.asp

• Diseño adaptable
  • ¡Nuestra aplicación móvil se lanzará en un futuro cercano y queremos que las hojas de personaje se vean hermosas en ella!
  • Ahora admitimos puntos de interrupción, ID y nuevas etiquetas HTML, todo lo cual debería ayudar en tu viaje con hojas adaptables.
  • Aquí hay algunos artículos impresionantes sobre este tema:
    • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
    • https://www.w3schools.com/html/html_responsive.asp
    • https://www.w3schools.com/css/css_rwd_intro.asp

• Estilo de impresión
  • Puedes imprimir una hoja de personaje abriéndola en una ventana separada y utilizando las funciones de impresión nativas del navegador o del dispositivo. Como nota, el estilo de la hoja de personaje y algunos datos pueden estar ausentes o verse afectados.
  • Ahora admitimos la consulta de medios de impresión, lo cual debería permitir a los autores de hojas de personaje diseñar sus hojas específicamente para cuando un usuario quiera imprimirlas.