Entrar

Capítulo 07 Capítulo 07

C-07. Edición de folletos digitales mediante Scribus. El lenguaje de la web: diseño y código mediante BlueGriffon

ESQUEMA

Una introducción a herramientas digitales editoriales que producen resultados profesionales para autoedición.

C-07.1. Rutas digitales: del folleto digital al sitio web: PDF, ePub, HTML.

  • Rutas digitales en que textos e imágenes migran de unos formatos a otros entre múltiples dispositivos. Interoperabilidad y reutilización, tanto en ámbitos profesionales como de autoedición digital.
    • Carteles, hojas sueltas, dípticos, trípticos, folletos... impresos que se fabricaban mediante programas informáticos de autoedición que generaban PDF y luego se imprimían en papel, para distribuir físicamente los ejemplares de la tirada entre los interesados, tras pasar por los almacenes.
    • Ahora se fabrican de forma similar pero no se imprimen ya que se difunden en línea en formatos digitales.

pdf epub html

  • Para documentos y libros se utilizan archivos de descarga, como EPUB o PDF, que a veces son soportes originales digitales y a veces derivados de obras impresas (tanto versiones digitales nativas como versiones digitalizadas).
  • La difusión, lectura y descarga de los archivos se suele realizar en páginas web, que crean el entorno digital que posibilita la consulta en línea.
  • ¿Cómo se elaboran los PDF, el formato dominante de folletos digitales?
    • El formato de intercambio por antonomasia.
    • Creado por Adobe con programa editor de pago (Acrobat) y lector gratuito (Reader). En 2008 se liberó el código y se creó un estándar ISO 32000, que permite crear archivos PDF desde muchos programas: navegador, procesadores de texto (Writer, Word, Documentos...), presentaciones, imágenes... mediante Guardar como > PDF (ODT...) o impresoras virtuales.
    • Con programas profesionales con formatos propios como Adobe InDesign, QuarkXPress, Publisher o Scribus, que exportan como PDF.
  • ¿Cómo se elaboran los EPUB?
    • Desde procesadores de textos, como Writer ODT.
    • Con programas profesionales como Adobe InDesign, Sigil o Calibre.
  • ¿Cómo se difunden los PDF y los EPUB?
    • Mediante sitios web que los alojan (almacenes digitales como Mediateca o portales web) con acceso en línea: son publicaciones en línea.
  • ¿Cómo se elaboran las páginas web escritas en código HTML?
    • Con gestores de contenidos, como el de EducaMadrid, Wordpress, Drupal o Google Sites, 
    • Con editores web, como Adobe DreamWeaver o BlueGriffon.
    • Se reutilizan imágenes tratadas con Gimp.
    • Se utilizan ficheros HTML-CSS e imágenes, fuentes...
  • Hoy conviven las ediciones multiformato: se edita a la vez en PDF, ePub y HTML, para abarcar todas las posibilidades de lectura.

C-07.2. Datos abiertos.

y8lylyuilRetribuciones del personal funcionario 2020

turujrj

C-07.3. Folletos digitales con Scribus.

La mayoría de los documentos que se difunden son folletos digitales ─«de reducido número de hojas», ya nacidos digitales, que no conocerán versión en papel hecha por el editor, aunque el lector podría imprimirlos. Por eso todavía muchos de ellos son impresos digitales en formato PDF.

scribus

>>> Volver a LA.06.02. Fabricando ediciones digitales. Scribus para práctica P07.1.2. Editar y actualizar con Scribus la maqueta de un folleto SLA y exportar como PDF.

=================================================================================

C-07.4. La publicación en sitio web: el lenguaje de la web.

  • PDF y los EPUB son publicaciones en línea que se suelen descargar desde páginas web.
  • La World Wide Web (WWW), Web, W3, Red o red informática mundial​.
  • Irene Vallejo, El infinito en un junco (2019), describe la invención de los protocolos:
    • «Había que crear itinerarios, avenidas, rutas aéreas para las palabras. Cada texto necesitaba una referencia —un enlace—, gracias a la cual el lector pudiera encontrarlo desde cualquier ordenador en cualquier rincón del mundo. Timothy John Berners-Lee, el científico responsable de los conceptos que estructuran la web, buscó inspiración en el espacio ordenado y ágil de las bibliotecas públicas. Imitando sus mecanismos, asignó a cada documento virtual una dirección que era única y permitía alcanzarlo desde otro ordenador. Ese localizador universal —llamado en lenguaje de computación URL— es el equivalente exacto de la signatura de una biblioteca. Después, Berners-Lee ideó el protocolo de transferencia de hipertexto —más conocido por la sigla http—, que actúa como las fichas de solicitud que rellenamos para pedirle al bibliotecario que busque el libro deseado. Internet es una emanación —multiplicada, vasta y etérea— de las bibliotecas.»
  • Las tecnologías y el lenguaje de la Web abierta (Open Web, por el World Wide Web Consortium, que se ocupa de la actualización de los estándares abiertos. W3C España):
    w3c 
    • HTTP (Hypertext Transfer Protocol, 1989) entre servidores. HTTPS, mayor seguridad. Protocolo de comunicación.
    • URL (Uniform Resource Locator, 1991).Localizador uniforme de recursos, que puede usar diversos protocolos HTTP, FTP Mailto...
    • HTML (HyperText Markup Language, 1991). Lenguaje de marcas de hipertexto. En Wikipedia: lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. Creado en 1991 por Tim Berners-Lee, presidente del W3C. Va por HTML5.2, con nuevas etiquetas.
    • CSS (Cascading Style Sheets, 1996). Hojas de estilo en cascada, para separar la estructura de un documento de su presentación. Va por CSS3.
    • Para la visualización, se necesita que un navegador interprete el código: Chrome, Firefox, Internet Explorer, Edge, Opera, Brave, Safari...
      • >>>Práctica Ver URL, http, código fuente de esta página.
        códigofuente
      • Etiquetas, como <title>
        códigofuente2
    • El hipertexto (links, vínculos, hiperenlaces) y la lectura hipertextual. La World Wide Web es la red de hipertexto más amplia y popular. El proceso mental es como un hipertexto.
    • Dirección IP, el número que identifica a cada dispositivo dentro de una red. 
      • Averiguar la IP del ordenador: su dirección según el Internet Protocol. Fija o cambiante. La dan los proveedores de servicios.
    • Los buscadores, ahora integrados en los navegadores: Google, DuckDuckGo...
      • Competencias digitales de búsqueda: ¿cuál es el criterio de ordenación de resultados? Los algoritmos secretos, que tienen en cuenta el page rank (enlaces), no el número de consultas.
  • W3Schools, un sitio web de acceso gratuito con información detallada, numerosos tutoriales y, sobre todo, ejercicios.
    w3s 
    • >>> Entrar, practicar y copiar código en Apuntes.docx
    • Colores en W3C: Tomato = #ff6347
    • Nombres de colores soportados por todos los navegadores en W3schools.
    • Aprender HTML: etiquetas para estructura y contenido.
      • Encabezado <h3>C-07.5. Herramientas de edición digital de sitios web</h3>
      • Párrafo <p style="background-color:tomato;">Esto es un párrafo con un fondo de color tomate.</p>
      • Hiperenlace <a href="https://www.w3schools.com/">w3schools</a>
    • Aprender CSS: estilos y clases.
      • .fondotomate { background-color:tomato;}
      • /* Para dar una segunda tinta a las negritas del botón B*/
        strong {color: #5eab88;}
    • HTML con estilo de una clase:
      • <p>Esto es un párrafo normal.</p>
      • <p class="fondotomate;">Esto es un párrafo con un fondo de color tomate.</p>
    • Selectores de CSS

C-07.5. Herramientas de edición digital de sitios web

C-07.6. Diseño web adaptativo.

89l8ll

  • Comunidad.madrid (Drupal) y EducaMadrid (Liferay) tienen diseño web adaptativo.
    • La opción de comprobar: encoger la ventana o Inspeccionar - Toolbar device.
  • Un recorrido por la prensa mundial:
  • Nueva web de El País (oct 2021), The New York Times, Le Monde
  • Accesibilidad web.
  • Resolución de pantalla y ventana viewport.
  • Importancia del acceso móvil.
  • >>>Práctica de encoger ventana de sitios web y comprobar si se recolocan los elementos.

P07.2.3. Modificación de una página web con BlueGriffon, editor web abierto.

fhhj

  • Descargas de BlueGriffon (3.1).
  • >>> Abrir en el navegador la página de intranet del sitio Publica  o cualquier otra.
  • Copiar la URL en el portapapeles. 
  • En BlueGriffon Abrir archivo (URL) pegar dirección http de esta página.
  • Cambiar entre Diseño y Código fuente.
  • Activar panel de Hojas de estilo.
  • Modificar y guardar copia en local y renombrar. Abrir con el navegador.

Fin de Acordeón de prácticas 9.

──────    ( ·¿· )    ────── 

<<<<  Volver y seguir en LA.07.03. Trabajar en local, en red, en la nube y mediante sincronización.

DEBATES

  • ¿Acceso sedentario o acceso móvil?
  • ¿Han superado ya los accesos desde el móvil a los del ordenador?

PRÁCTICAS

REFERENCIAS


OBJETIVOS

  • Comprender los conceptos de rutas digitales y datos abiertos.
  • Conocer el funcionamiento básico de un programa de autoedición digital.
  • Comprender los elementos básicos del lenguaje de la Web, HTML-CSS, y sus protocolos.
  • Conocer qué son las herramientas de edición digital de sitios web.
  • Concer las problemática en torno al diseño web adaptativo. 

REQUISITOS

  • Lectura del capítulo en el libro digital El lector móvil en formato ePub, bien en ordenador, mediante algún programa lector (calibre...), o bien en dispositivo portátil, mediante aplicación móvil (FBReader...)
  • Navegador web en ordenador o navegador móvil para lectura del capítulo y acceso a la práctica.
  • Disponer en el ordenador de Scribus, BlueGriffon y FileZilla.
  • Para algunas prácticas: cuenta en EducaMadrid para acceder a la Mediateca.

Esto es una locura, dice la Jefa.

Fecha de actualización: 2022.

Prácticas Prácticas