Lineamientos para HTML

6

¡Este es (opcional) el paso final en el proceso de formateo –Paso 6! Mire a través de esta página de consejos útiles acerca de cómo utilizar HTML para animar su contenido y crear características adicionales disponibles.

Los Planes de Lectura tienen contenido para múltiples días, y cada uno de estos días tiene máximo 1 porción de contenido de devocional. Este contenido de devocional puede cumplir diversas funciones, desde una visión general, a un acompañamiento narrativo, hasta una oración de cierre — o todos estas funciones.

Estas diversas funciones realmente pueden hacer difícil saber cuál es la mejor manera de codificar el contenido del devocional para asegurar que este se mostrará al usuario en la manera en que lo planea su autor. Seguir los lineamientos y recomendaciones a continuación ayudará a garantizar que el contenido del devocional tenga el mejor aspecto posible, en tantos clientes de YouVersion como sea posible (iOS, Android, Web, Web móvil, etc), por el mayor tiempo posible.


Recomendaciones

Titulo de Devocional

Use el h2, si uno es requerido.

Nota: Recomendamos altamente no usar etiquetas h1 en su contenido.

Títulos

Use la etiqueta h3 para títulos principales.

Subtítulos

Use la etiqueta h4 para cualquier subtítulo.

Nota: Se recomienda no confiar en títulos más pequeños que la etiqueta h4, ya que puede no haber diferencia visual entre estos tamaños menores de títulos.

Espacio entre Párrafos

Delimitar los párrafos de texto entre etiquetas p.

Nota: Recomendamos altamente no usar etiquetas br para crear espacios entre párrafos, ya que no proporciona resultados consistentes y puede nos ser compatible con todas las aplicaciones.

Espacio entre Secciones

Si tiene mucho contenido que necesita una separación clara no satisfecha al usar párrafos, puede delimitar las secciones de texto con etiquetas de sección.

Nota: Recomendamos altamente no usar etiquetas br para crear espacios entre párrafos, ya que no proporcionan resultados consistentes y puede no ser compatible con todas las aplicaciones.

Texto en Negrilla

Use la etiqueta strong para cualquier texto de párrafo que debe ser exhibido en negrilla.

Nota:Recomendamos no usar la etiqueta b, ya que está desactualizada y no tendrá compatibilidad a largo plazo en navegadores o en nuestras aplicaciones.

Texto en Itálica

Use la etiqueta em para cualquier texto de párrafo que deba ser enfatizado.

Nota:Recomendamos no usar la etiqueta i, ya que está desactualizada y no tendrá compatibilidad a largo plazo en navegadores o en nuestras aplicaciones.

Listas

Use la etiqueta ul para listas sin orden con etiquetas li para elementos. Recomendamos usar listas sin orden a menos que haya una buena razón para usar listas ordenadas, ya que generan un flujo visual más atractivo con la mayoría de las aplicaciones.

Nota: Recomendamos no usar el atributo lista-estilo tipo.

Hipervínculos Externos

Esta codificación es útil si desea enviar al usuario a una página de trabajo fuera de la aplicación. Un código de sitio web básico ( [subtitulo deseado para el hipervínculo] ) incluye la opción de subtitular ese sitio de la manera como usted quiera. Por ejemplo, puede mostrar la dirección URL como un hipervínculo, o puede hipervincular una palabra o frase lo que sea más adecuado dentro de su contexto.

Nota: Somos una aplicación libre, y esperamos que los sitios web utilizados como recursos adicionales para redirigir a nuestros usuarios también lo sean.

Imágenes

Use la etiqueta img para imágenes. Las imágenes tomaran todo el ancho del contenido (lo que implica que el texto no ‘fluirá’ alrededor de la imagen) en ninguna aplicación. Por esta razón, el ancho mínimo de una imagen de 480 pixeles es la recomendada, ya que imágenes más angostas que esto pueden ser estiradas.

Nota: Por favor no incluya ningún atributo adicional en la etiqueta img (width, height, border, align, etc), ya que comprometen nuestra capacidad para mostrar la imagen correctamente.

Videos

Incruste el código iframe de video youtube usual dentro de un div contenedor con la clase “video-container”.

Nota:Por favor no incluya ningún atributo adicional en la etiqueta iframe (width, height, border, align, etc), ya que comprometen nuestra capacidad para mostrar el video correctamente.

Esta publicación también está disponible en: Afrikáans Alemán Francés portugués Rumano Chino (Simplificado) Chino (Tradicional)