Este é o passo final (opcional) no processo de formatação – PASSO 6! Consulte esta página para obter dicas úteis sobre como usar HTML para tornar seu conteúdo interessante e recursos adicionais disponíveis. Planos de Leitura tem vários dias de conteúdo, cada um desses dias têm mais de uma parte de conteúdo devocional. O conteúdo do devocional pode ter várias formas, desde uma visão geral, até uma narrativa passo a passo, ou uma oração de encerramento – ou todos esses itens. Esta realidade multi-função pode fazer com que fique difícil conhecer a melhor forma de codificar o conteúdo do devocional, para garantir que seja exibido para o usuário da forma que autor pretende. Seguir as orientações e recomendações abaixo irá ajudar a garantir que o conteúdo devocional aparecerá da melhor forma possível, para o maior número de usuários possíveis da YouVersion (iOS, Android, Web, Mobile Web, etc), pelo maior tempo possível.
Recomendações
Título do Devocional
Utilize o h2, se for necessário. <h2>, </h2>
Nota:É altamente recomendado não usar tags h1 em seu conteúdo.
Cabeçalhos
Utilize a tag h3 para cabeçalhos importantes. <h3>, </h3>
Subtítulos
Utilize a tag h4 para quaisquer subtítulos. <h4>, </h4> Nota:Recomendamos não confiar em cabeçalhos menores que tag h4, pois pode não haver diferença visual entre esses tamanhos de cabeçalhos menores.
Espaçamento do Parágrafo
Coloque os parágrafos de texto em tags p. <P>, </ p> Nota : É altamente recomendável não usar tags br para criar espaçamento entre parágrafos, pois isso não irá fornecer um resultado consistente e não é certo que terá suporte em todos os apps.
Seção Espaçamento
Se você tem vários conteúdos que precisam de uma separação clara que não é satisfatória usando parágrafos, você pode envolver sessões de texto em tags de seção. Nota:É altamente recomendável não usar tags br para criar espaçamento entre parágrafos, pois isso não irá fornecer um resultado consistente e pode não oferecer suporte a todos os aplicativos.
Texto Destacado (Negrito)
Utilize a tag “strong” para qualquer texto do parágrafo que deve ser exibido como tal. <strong>, </strong> OU <b>, </b> Nota: Recomendamos não usar a tag “b” pois é obsoleta e não tem um bom suporte de longo prazo em navegadores ou em nossos aplicativos.
Texto Enfatizado (em itálico)
Utilize a tag “em” para qualquer texto do parágrafo que deve ser enfatizado. <em>, </em> Nota: Recomendamos não usar a tag “i” pois é obsoleta e não tem um bom suporte de longo prazo em navegadores ou em nossos aplicativos.
Listas
Use a tag ul para listas não ordenadas (<ul>, </ ul>), e tag ol para organizadas (listas numeradas, <ol>, </ ol>) com etiquetas de li dos itens, (<li>, </ li >). Recomendamos a utilização de listas não ordenadas a menos que haja uma boa razão para usar uma lista ordenada, tal como resultam em um fluxo visual mais limpo que a maioria dos aplicativos. Nota: Recomendamos não usar o atributo list-style-type.
Hiperlinks externos (Links)
Esse código é útil se você quiser enviar o usuário para uma página/site fora do app. Um código de site básico (<a href=”http://(website)”>[título desejado para o link]</a>) inclui a opção de nomear o referido site da forma que você quiser. Por exemplo, você pode mostrar a URL como o link, ou pode fazer o link a partir de uma palavra ou frase que seja mais adequada de acordo com o seu contexto.Nota: Somos um aplicativo gratuito e esperamos que os sites usados para redirecionar nossos usuários para recursos adicionais também sejam.
Imagens
Use a tag “img” para imagens. As imagens ocuparão toda a largura do conteúdo (texto não vai se autoformatar em torno da imagem) no determinado aplicativo. Por esta razão, recomenda-se uma largura mínima da imagem de 480 pixels, pois imagens menores podem ser esticadas/deformadas. Nota: Não incluir quaisquer atributos adicionais na tag “img” (“width”, “height”, “border”, “align”, etc), pois comprometerão nossa capacidade de exibir a imagem corretamente.
Vídeos
Incorporar o código de “iframe” de vídeo do youtube dentro de um “div” atribuído com conteúdo de vídeo. <div class=”video-container”> <iframe class=”youtube-player” src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0″ allowfullscreen></iframe> </div>Nota: Não incluir quaisquer atributos adicionais na tag “iframe” (“width”, “height”, “border”, “align”, etc), pois comprometerão nossa capacidade de exibir o vídeo corretamente.
Este post também está disponível em: Africâner Alemão Espanhol Francês Romeno Chinês (Simplificado) Chinês (Tradicional)