Proyecto Scriptorium - Aprende a maquetar III: Código Avanzado

Este manual ha sido elaborado por y para la comunidad del Proyecto Scriptorium, y no habría sido posible sin la colaboración desinteresada de muchas personas, algunas de las cuales paso a nombrar. No están todas las que son, pero son todas las que están. Espero que aquellas que inadvertidamente he omitido, me perdonen por ello.

Para empezar, quisiera dar las gracias a TaliZorah, por organizarlo cuando yo no tenía tiempo para ello, y a Mowgli, Cthulhu e Insaciable, por su colaboración inicial. A Sedna por su incansable búsqueda de códigos CSS para una maquetación avanzada. A gertdelpozo y a los demás integrantes del equipo gráfico, por los apartados de portadas y edición de imágenes. A emiferro, Horus, triangulín y Áuryn, por encargarse entre todos de darle forma. A Trujano, por su breve pero intensa colaboración a la hora de redactar los apartados que no quería nadie. A barbanegra, por tomarse la molestia de revisar y unificar el desaguisado que habíamos montado entre todos. Y finalmente, a aquellos colaboradores que han preferido permanecer en el anonimato, y que espero sigan colaborando en futuras revisiones.

Asimismo, quisiera agradecer también a todos aquellos que con sus consejos y manuales en el foro, y su deseo de mejorar continuamente las herramientas existentes, han ayudado a mejorar la calidad de la biblioteca e, inadvertidamente, también la del presente manual. Y muy especialmente a los encargados de crear y mantener dichas herramientas: Carlos., Jugaor, betatron, Tarloth, Mcphist y capitancebolleta.

Por último, pero no por ello menos importante, me gustaría nombrar a Werth, cuyo manual inicial, en una página ya desaparecida, fue la semilla que sirvió de base para crear la excelente herramienta para la maquetación que tienes ahora entre tus manos.

Muchas gracias a todos los que con vuestro tiempo e ilusión hacéis posible este Proyecto. Espero que podamos seguir compartiendo nuestra afición por muchos años y veamos muchas y mejoradas revisiones de todas las herramientas EPL.

Más libros, más libres.

Fénix

Quisiera dar las gracias a barbanegra y Rusli por tomarse la molestia de revisar la documentación existente y organizar las pruebas para el nuevo ePub Base, sin cuya actualización este nuevo manual no hubiera sido posible (o hubiera sido totalmente diferente). Y especialmente a Horus, por redactar el manual sobre las etiquetas HTML.

También agradecer a Sagitario y Sedna su intensa revisión de todo el manual, a la búsqueda de aquellas cosas ya obsoletas o incompatibles con el nuevo estándar, actualizando etiquetas, eliminando estilos no usados y renovando algunas imágenes.

Y, como siempre, a todos aquellos que han colaborado en las pruebas del ePub Base, el ePLValidator y demás herramientas en el foro, o bien reportando erratas y errores del propio manual. Sin vuestra ayuda, esto no hubiera sido posible.

Muchas gracias a todos los que con vuestro tiempo e ilusión hacéis posible este Proyecto. Espero que podamos seguir compartiendo nuestra afición por muchos años y veamos muchas y mejoradas revisiones de todas las herramientas EPL.

Más libros, más libres.

Fénix

Este tercer tomo está orientado a proporcionar a los editores códigos HTML y CSS útiles y ampliamente testados, de forma que puedan fácilmente pasar los formatos de sus ediciones en papel al formato electrónico.

En ningún momento se ha pretendido que este tomo sea leído de principio a fin, sino que el editor avanzado pueda, en un momento dado, localizar aquel punto concreto que necesita utilizar y no tiene claro como conseguir.

Para facilitar su uso se han elaborado dos métodos de organización complementarios:

• Una TOC realmente amplia que permite localizar casi cada detalle del contenido.
• Un que recoge buena parte de los contenidos más interesantes.

Es imprescindible haber leído y dominado el primer tomo, Manual básico, antes de profundizar en la parte avanzada.

Todos los códigos y fuentes utilizados en nuestros ePubs deben ser correctamente visualizados en la mayoría de los lectores. Si tienes dudas, debes pasar el código por el banco de pruebas. En el caso de las fuentes, existe un listado disponible en el foro, y si utilizas una que no esté en él, es obligatorio testarla.

Partiendo del supuesto de que el saber es una de las 402a cosas más valiosas y dignas de estima y que ciertos saberes son superiores a otros bien por su rigor bien por ocuparse de objetos mejores y más admirables, por uno y otro motivo deberíamos con justicia colocar entre las primeras la investigación en torno al alma. Más aún, parece que el conocimiento de esta contribuye notablemente al conjunto del saber y muy especialmente al que se refiere a la Naturaleza: el alma es, en efecto, como el principio de los animales. Por nuestra parte, intentamos contemplar y conocer su naturaleza y su entidad así como cuantas propiedades la acompañan: de estas las hay que parecen ser afecciones exclusivas del alma mientras que otras parecen afectar además, y en virtud de ella, a los animales como tales[…]

Volver a .

El modelo de cajas

HTML define una estructura en la cual hay un elemento matriz, el

, que delimita el cuerpo de la página y contiene a todos los elementos que le dan forma (es la parte del documento XHTML que se muestra). Pero a su vez, cada uno de estos elementos puede contener a otros elementos, y así sucesivamente.

A la hora de interpretar el código para representar la información, hay unas reglas predefinidas que determinan el diseño del documento XHTML: el modelo de cajas.

El modelo de cajas es el comportamiento de CSS que hace que todos los elementos HTML (párrafos, imágenes, tablas, etc.) se representen mediante cajas rectangulares que encierran los contenidos de ese elemento, y que se crean de manera automática cada vez que se inserta una etiqueta HTML.

Cada una de estas cajas puede tener un borde que la delimita, un relleno interior y un margen externo. La siguiente imagen muestra cómo se construye este modelo:

En principio estas cajas son invisibles, dado que no muestran ningún borde ni ningún color o imagen de fondo (valores por defecto). Pero sobre estas cajas actúan los estilos CSS, mediante los cuales se puede definir su aspecto al contar con opciones detalladas en lo referente al ajuste de la anchura y altura de cada caja, el espacio de relleno interior (padding) que muestra cada una, y el margen de separación existente entre distintas cajas. Así mismo, CSS también permite controlar la forma en la que se visualizan estas cajas: se pueden ocultar o desplazar respecto de su posición original, entre otros.

Las particularidades de cada caja varían en función del tipo de elemento que sea (como se verá en el apartado siguiente, básicamente pueden ser de dos tipos: de bloque o en línea), así como las propiedades CSS que admiten y el cómo se relacionan o influyen con las otras cajas adyacentes.

Las partes que componen cada caja y su orden de visualización son las siguientes:

• Contenido (content): Se trata del contenido HTML del elemento, aquello que se quiere mostrar al visualizar el elemento (un texto, una imagen, una lista de elementos, etc.). Tiene forma de caja rectangular, y es posible establecer sus dimensiones (anchura/altura) mediante las propiedades CSS «