Índice
- ¿Qué es?
- ¿Qué necesitas?
- ¿Cómo se hace?
- Añadir más contenido
- Personalizar el diseño
- Usar la plantila en tu app
¿Qué es?
Con esta plantilla podrás añadir un artículo en formato HTML a tu App.
Este formato tiene la ventaja de que se adapta al tamaño de cada dispositivo para que la letra siempre tenga un tamaño adecuado. Además permite realizar scroll y hacer zoom con una gran nitidez.
Si vas a tener mucho texto o para ti es muy importante la lectura, es muy posible que esta solución se adapte a tus necesidades.
¿Qué necesitas?
Descargar la plantilla:
Para editar la plantilla necesitarás un editor de textos. Puedes usar el editor que prefieras. Si no tienes un editor favorito a continuación te aconsejamos alguno.
¿Cómo se usa?
En primer lugar, descomprime el fichero zip que has descargado.
Para editar el contenido de la plantilla debes editar el fichero “index.html“. Ábrelo con el editor de textos. Siempre trabajaremos sobre ese fichero para añadir o modificar el contenido.
La plantilla está preparada para contener un título, seguido de una imagen y finalmente el texto:
Editar el título
El título está insertado usando una etiqueta <h1>.
Simplemente cambia el texto actual por el que quieras y guarda el fichero. No elimines las etiquetas.
Editar la imagen
Para cambiar la imagen simplemente sustituye el fichero llamado “imagen01.jpg” que se encuentra dentro de la carpeta “images“.
La anchura recomendada para la imagen es de 750px. Usa la altura que necesites.
Editar el texto
Cada párrafo de texto se indica con una etiqueta <p>
Puedes editar los párrafos existentes simplemente cambiando su texto.
Añadir más contenido
Personaliza al máximo tu plantilla añadiendo más contenido.
Añadir un título
Cada uno de los títulos debe empezar con <h1> para indicar que empieza un título y debe terminar con </h1> para indicar dónde termina.
Añadir un párrafo
Cada uno de los párrafos debe empezar con <p> para indicar que empieza un párrafo y terminar con </p> para indicar dónde termina.
Añadir una imagen
Guarda tu imagen en la carpeta “images” de la plantilla
Desde el editor de textos, añade el siguiente código en el punto en el que quieras añadir la imagen.
Asegúrate de poner el nombre de tu imagen.
Se recomienda una anchura de 750px y los formatos PNG o JPG.
Personalizar el diseño
Editando el CSS de la plantilla puedes ajustar el diseño a tus necesidades. Si ya sabes como editar código en CSS no tendrás ningún problema en realizar cualquier cambio, símplemente debes saber que toda la configuración está en el fichero “style.css” ubicado dentro de la carpeta “css”.
Si necesitas un poco de ayuda para hacer este tipo de cambios continúa leyendo. En caso contrario, puedes pasar al apartado siguiente.
Cambiar el tamaño del texto de los párrafos
- Abre el fichero “style.css” con un editor de texto.
- Indica el tamaño que quieres usar. Para poner decimales se usa el punto, no la coma.
- Finalmente guarda el documento.
Cambiar el color del texto de los párrafos
- Abre el fichero “style.css” con un editor de texto.
- Indica el código del color que quieres usar en código hexadecimal.
Cambiar tamaño de los títulos
- Abre el fichero “style.css” con un editor de texto.
- Indica el tamaño que quieres usar.
- Finalmente guarda el documento.
Cambiar color de texto de los títulos
- Abre el fichero “style.css” con un editor de texto.
- Indica el tamaño que quieres usar.
- Finalmente guarda el documento.
Justifica el texto de los párrafos
- Abre el fichero “style.css” con un editor de texto.
- Cambia “inital” por “justify” tal y como se muestra en la imagen
- Finalmente guarda el documento.
Añadir el Artículo a tu app
A continuación, sigue uno de los dos tutoriales para añadir tu artículo a tu app:
1. Añade el artículo a tu app usando el contenido HTML. Para aprender a usar esta funcionalidad sigue los pasos de este tutorial:
2. Añade el artículo a tu documento InDesign como WebZip. Para aprender a usar esta funcionalidad sigue los pasos de este tutorial: