Entradas

Cómo crear una voz sintética con tu propia voz en macOS

Publicado el

La voz es una parte esencial de la identidad. No solo transmite información, también comunica personalidad, intención, estado de ánimo y cercanía. Por ese motivo, la posibilidad de conservar la voz y usarla como voz sintética en un ordenador no es un simple capricho tecnológico: es una herramienta con impacto real en autonomía, accesibilidad y dignidad, especialmente para personas que pueden perder la capacidad de hablar o que necesitan apoyos de comunicación.

También las personas con trastorno del espectro autista u otros perfiles de discapacidad cognitiva se pueden beneficiar de esta característica al incluir la voz de un familiar o un terapeuta de confianza para la persona. De esta forma la atención y la seguridad se unen a los beneficios de esta característica.

En el ecosistema de Apple podemos encontrar Personal Voice, más conocido como Voz personal, una función de accesibilidad que permite crear una voz sintética a partir de las grabaciones de una voz humana real.

Esta voz puede ser utilizada en el sistema para las notificaciones, el servicio de Live Speech (Voz en tiempo real) o para VoiceOver, el lector de pantallas de Apple.

Requisitos y consideraciones antes de empezar

En macOS Personal Voice está disponible solo en ordenadores con procesadores Apple silicon, y no está disponible en todos los idiomas o regiones. Además, Apple indica que para crear una Voz personal en el Mac necesitas tener contraseña de inicio de sesión configurada, ya que se solicita durante el proceso de creación.

Aunque el proceso oficialmente dura pocos minutos, este tiempo dependerá de la versión del hardware y del sistema operativo que estemos utilizando.

Crear tu voz paso a paso

En el menú de ajustes del Mac, debemos ir al apartado de accesibilidad y allí buscar la opción de Voz personal.

Dentro encontraremos el botón Crear una voz personal. Este botón comienza el proceso de creación.

Además en esta pantalla encontramos información sobre esta característica de accesibilidad, cuántas voces tenemos creadas, si queremos compartir nuestra voz con todos nuestros dispositivos de Apple y si queremos que nuestra voz pueda ser utilizada por otras aplicaciones como, por ejemplo, aplicaciones de lectura de libros.

El proceso de creación

Al pulsar el botón de Crear una voz personal daremos comienzo al proceso de creación.

Al comenzar el proceso de creación el sistema te guiará por una grabación de frases. El objetivo de estas lecturas es capturar suficientes muestras para que el modelo genere una voz que se parezca a la voz original.

Se puede grabar con el micrófono integrado del Macbook, pero se recomienda un micrófono externo o unos auriculares con micrófono integrado ya que con mejor calidad en la grabación obtendremos mayor calidad en la voz resultante.

Aparecerá la petición de autenticación en tu cuenta de iCloud. Tras identificarnos aparecerá un diálogo con información sobre el proceso:

Grábate,

Tendrás que leer en voz alta un conjunto de 10 frases.

Genera tu voz personal,

El Mac creará tu voz personal y la almacenará de forma segura.

Usa tu voz personal,

Usa la voz en tiempo real para decir lo que escribas.

Si has creado una voz personal, también la podrás usar con las funciones de lectura y voz, VoiceOver y las apps de comunicación aumentativa.

Y unos botones para cancelar y continuar.

Apple también contempla la posibilidad de pausar y retomar el proceso, guardando el progreso para continuar en otro momento.

Al pulsar el botón de Continuar deberemos seleccionar el idioma para realizar la grabación.

En el momento de escribir este artículo los idiomas disponibles son: inglés de Estados unidos, español de México y chino mandarín de China continental.

En nuestro caso elegiremos español y volveremos a pulsar en Continuar.

En el siguiente paso el sistema nos pregunta por el nombre que le daremos a la voz.

Luego se necesita realizar una descarga de un contenido previo para la grabación de 1Gb. Debemos esperar a que termine la descarga.

Si se necesita configurar algún aspecto de la red se puede volver al proceso al abrir de nuevo los ajustes del Macbook, accesibilidad y de nuevo entrar en el panel de Voz personal.

En la lista de voces veremos nuestra voz en un estado similar a quedan 10 frases por grabar.

Al terminar de grabar las frases el procesamiento se realizará de forma segura en el propio dispositivo y el sistema te avisará cuando la voz esté lista para usarse.

Durante el proceso de grabación tendremos que verbalizar frases del tipo: Estoy creando una voz personal con mi Mac, ¿Te gusta coleccionar pósters de películas?, .

En el caso de utilizar lector de pantallas es recomendable que utilicemos auriculares para evitar que la voz de VoiceOver se mezcle con la grabación.

Cada vez que grabemos una de las frases, pulsando el botón de grabar, podemos escuchar el resultado o pasar a la siguiente frase.

Una vez terminado el proceso de grabación se mostrará un mensaje del tipo:

Recibirás una notificación,

Cuando se haya terminado de generar tu voz personal, recibirás una notificación. El proceso no debería tardar más de un minuto..

Recomendaciones prácticas para una mejor calidad

Aunque el sistema guía el proceso, la calidad final suele mejorar cuando se graba en un entorno silencioso y estable, se mantiene una distancia constante al micrófono y se evita cambios bruscos de postura.

También ayuda leer con una dicción natural, sin forzar un tono de locutor, porque el objetivo no es interpretar, sino capturar la voz cotidiana. Si se tiene fatiga vocal, es preferible pausar y continuar más tarde; Apple permite retomar la grabación sin perder el progreso.

Uso de nuestra voz personal

Una vez creada la voz podemos activarla para compartirla entre todos nuestros dispositivos y con otras aplicaciones.Podemos realizar una prueba con la función de Voz en tiempo real que aparece en los ajustes de accesibilidad de nuestro Mac. Para ello en el campo de idioma dejamos el valor de Idioma de voz del sistema y como voz seleccionamos el nombre de nuestra voz personal.En el campo de frases para hablar introducimos el texto que queremos verbalizar y pulsamos el botón Hablar o pulsamos la tecla enter.

Creación de la voz en otros dispositivos

Este proceso también se puede completar en un iPhone, un iPad o unas Apple Vision Pro. Se recomienda realizar, en cambio, el proceso en el Mac porque el procesador es más potente y se pueden utilizar micrófonos externos con mayor facilidad.

Se puede consultar la ayuda oficial de Apple para la creación de voces en su portal de soporte.

Tutoriales para Vox libri en el canal de Alibluebox de Whatsapp

Publicado el

Los amigos de AliBlueBox han publicado recientemente unos tutoriales para aprender a utilizar mejor la aplicación de Vox libri.

En estos videos se detallan los siguientes elementos de la aplicación:

  • Cómo consultar toda la información de los libros que importas.
  • Explicación detallada de la barra de progreso y todo lo que ofrece.
  • Un recorrido completo por las distintas formas de navegación dentro del libro.

Este contenido está dentro del canal de Whatsapp de AliBlueBox por lo que necesitarás suscribirte a su canal para disfrutar de estos contenidos.

El head de una página HTML

Publicado el

En el artículo de introducción al HTML se mostró la estructura interna de un documento HTML. En esa estructura existe una sección conocida como el head de la página web.

El <head> es el lugar donde se declara la codificación de caracteres, se define el título que aparecerá en la pestaña del navegador, se aportan metadatos descriptivos, se enlazan hojas de estilo y recursos como iconos, y se configuran aspectos de seguridad o comportamiento del documento.

El contenido del <head> no se muestra como parte del cuerpo de la página pero determina cómo se interpreta y se presenta el contenido que aparece en el <body> de la página web.

Ejemplo completo de head

A continuación podemos ver un ejemplo del código que se incluye en una página web habitual y aunque muchos de esos metadatos no sean utilizados si deben aparecer por motivos de accesibilidad.

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Guía del elemento head en HTML</title>

<meta name="description" content="Explicación de las etiquetas y elementos más habituales dentro del head de una página web, con ejemplos en HTML.">

<meta name="robots" content="index,follow">

<link rel="canonical" href="https://ejemplo.com/articulos/elemento-head">

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="stylesheet" href="/css/styles.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Metadatos para compartir en redes (Open Graph) -->
<meta property="og:title" content="Guía del elemento head en HTML">
<meta property="og:description" content="Qué incluir en head: metadatos, enlaces, estilos, iconos, rendimiento y seguridad.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://ejemplo.com/articulos/elemento-head">
<meta property="og:image" content="https://ejemplo.com/img/preview.png">

<script src="/js/app.js" defer></script>
</head>

En un primer vistazo puede resultar confuso e incomprensible pero se puede aclarar el código utilizando comentarios.

Comentarios en HTML

Los desarrolladores utilizamos los comentarios para multitud de funciones: describir que hace o va a hacer un trozo de código, incluir un Copyright o copyleft en el código, añadir marcas o secciones en el fichero de código para marcar zonas y movernos más rápido por un fichero de código grande, etc.

En HTML, aunque no sea un lenguaje de programación, también podemos incluir comentarios para poder explicar nuestro código.

Para escribir un comentario en HTML utilizamos una etiqueta que será ignorada por el navegador web. Esta etiqueta tiene una marca de apertura particular y una marca de cierre también particular.

Para abrir el comentario se utiliza la marca <!– y para cerrar el comentario se utiliza la marca –> y entre medio va el texto que se utilizará como comentario. Un ejemplo puede ser:

<!-- Esto es un comentario en HTML -->

Ahora veamos de nuevo nuestro head con comentarios.

<head>
<!-- Codificación de caracteres -->
<meta charset="utf-8">

<!-- Ajuste de la vista en móviles -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Título de la página (pestaña del navegador, historial, marcadores) -->
<title>Guía del elemento head en HTML</title>

<!-- Descripción para buscadores y previsualizaciones -->
<meta name="description" content="Explicación de las etiquetas y elementos más habituales dentro del head de una página web, con ejemplos en HTML.">

<!-- Control básico de indexación (no es una norma absoluta, pero orienta a robots) -->
<meta name="robots" content="index,follow">

<!-- URL canónica para evitar duplicidades -->
<link rel="canonical" href="https://ejemplo.com/articulos/elemento-head">

<!-- Icono de la pestaña y accesos directos -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Hoja de estilos -->
<link rel="stylesheet" href="/css/styles.css">

<!-- Sugerencias de rendimiento para recursos de terceros -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Metadatos para compartir en redes (Open Graph) -->
<meta property="og:title" content="Guía del elemento head en HTML">
<meta property="og:description" content="Qué incluir en head: metadatos, enlaces, estilos, iconos, rendimiento y seguridad.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://ejemplo.com/articulos/elemento-head">
<meta property="og:image" content="https://ejemplo.com/img/preview.png">

<!-- Carga de JavaScript no bloqueante -->
<script src="/js/app.js" defer></script>
</head>

Codificación y representación de caracteres

Es necesario asegurarse que el navegador interpretará correctamente tildes, eñes y símbolos. Para ello se utiliza <meta charset=»utf-8″>, que declara la codificación del documento. Aunque hoy en día UTF-8 es la elección estándar en la Web, la etiqueta sigue siendo importante porque evita interpretaciones erróneas en ciertos entornos y garantiza consistencia.

Ajuste en móviles con viewport

Si la página se va a visualizar en smartphones y tablets, es esencial indicar al navegador cómo debe dimensionar el área visible. La etiqueta <meta name=»viewport»> permite controlar el ancho lógico y la escala inicial. La configuración más habitual es width=device-width, initial-scale=1, que adapta el layout al ancho del dispositivo sin ampliar o reducir de forma inesperada.

Título del documento con <title>

A continuación, <title> define el título del documento. Este texto suele aparecer en la pestaña del navegador, en el historial, en los marcadores y en muchas previsualizaciones. Desde el punto de vista de usabilidad, un título preciso ayuda a reconocer rápidamente la página. Desde el punto de vista de buscadores, suele ser una de las piezas más visibles del resultado.
Metadatos descriptivos: description, robots y otros

Después del título, se suelen incluir metadatos con <meta name=»…»>. El caso más conocido es description, que ofrece un resumen del contenido. No garantiza que un buscador muestre exactamente ese texto, pero suele utilizarse como base para la previsualización cuando es relevante. También es frecuente robots, que indica directrices de indexación y seguimiento de enlaces; su interpretación puede variar por motor de búsqueda, por lo que se recomienda entenderlo como una señal orientativa.
En escenarios más específicos pueden aparecer metadatos adicionales, como author para autoría, referrer para controlar qué información se envía al navegar a otros sitios, o theme-color para sugerir un color de interfaz en algunos navegadores móviles. El uso de estos valores debe estar alineado con el objetivo del sitio y con una política de privacidad clara.

Canonical: evitar duplicidades de URL

En el ámbito de SEO y consistencia, es habitual declarar una URL canónica mediante <link rel=»canonical» href=»…»>. Su objetivo es señalar cuál es la versión preferida cuando existen múltiples URLs que muestran el mismo contenido o contenido muy similar, por ejemplo por parámetros de seguimiento o rutas alternativas.
Enlaces a recursos: CSS, iconos y manifiestos
Otro bloque fundamental del <head> es el enlace a recursos externos mediante <link>. En primer lugar suele estar la hoja de estilos principal con rel=»stylesheet», que define cómo se presentará el HTML en pantalla, en impresión y en otros medios. Si existen varias hojas de estilo, el orden importa, porque las reglas posteriores pueden sobrescribir a las anteriores.
Los iconos de sitio también se declaran con <link>. El clásico favicon.ico sigue siendo útil por compatibilidad, pero hoy se suelen añadir variantes como SVG y el icono para pantallas de inicio en iOS mediante apple-touch-icon. En aplicaciones web progresivas puede añadirse además un manifiesto con rel=»manifest».

Metadatos para compartir: Open Graph y Twitter Cards

Cuando una URL se comparte en redes sociales o aplicaciones de mensajería, la previsualización suele basarse en metadatos específicos. En muchos entornos se utiliza Open Graph a través de <meta property=»og:…»>, indicando título, descripción, tipo, imagen y URL. En el ecosistema de X (antes Twitter) siguen siendo comunes las Twitter Cards con <meta name=»twitter:…»>. La idea es proporcionar a cada plataforma la información necesaria para mostrar una tarjeta coherente, con un texto breve y una imagen adecuada.

Scripts en el <head>

Aunque JavaScript puede incluirse en el <body>, se recomienda incluir la carga de los scripts de Javascript en el Head por motivos de accesibilidad.

Rendimiento: preload, preconnect y otras pistas

Además de enlazar recursos, <link> puede aportar pistas al navegador para optimizar la carga. Con rel=»preconnect» se solicita que se establezca cuanto antes la conexión con un dominio externo, algo útil cuando se dependen de CDNs o proveedores de fuentes. Con rel=»preload» se indica que un recurso será necesario muy pronto, por ejemplo una fuente o una hoja de estilos crítica, aunque su uso debe hacerse con cuidado para no saturar la red con descargas anticipadas innecesarias. En general, la mejor práctica consiste en aplicar estas técnicas tras medir y verificar que mejoran la experiencia.

Consideraciones de orden dentro del <head>

Aunque HTML es flexible, el orden de ciertas etiquetas ayuda. La declaración de <meta charset=»utf-8″> suele colocarse al inicio para evitar interpretaciones inconsistentes. A continuación es habitual incluir viewport y el title. Después suelen aparecer metadatos como description y enlaces como canonical, y a partir de ahí recursos como CSS, iconos y scripts diferidos. Este orden no es una regla rígida, pero mejora la legibilidad, reduce errores y favorece un comportamiento predecible.

Accesibilidad en el head

Según WCAG para considerar que el head de un documento HTML cumple con la accesibilidad es necesario que se incluya un título para el documento y que se defina el lenguaje principal de la página.

Hay otras recomendaciones como las de incluir los metadatos de description y encoding para ayudar a la interpretación correcta del contenido por parte de navegadores y de personas con herramientas que utilicen los metadatos del documento.

Entrevista en Apple coding podcast

Publicado el

La semana pasada Julio Cesar Fernandez, director de Apple coding academy y la voz que escuchamos en el podcast de Apple coding me invitó a participar en una entrevista en su podcast para hablar de todo un poco.

Desde mi nueva app Vox libri, el desarrollo con la IA como apoyo o los distintos enfoques a la hora de trabajar en el negocio de la ingeniería del software. Una entrevista entretenida en la que tocamos muchos temas de forma muy relajada.
Puedes escuchar el número 12 de Apple coding podcast en la que se encuentra la entrevista. 

Introducción a HTML

Publicado el

Al abrir una página web con nuestro navegador lo que está haciendo la aplicación del navegador web es, principalmente, interpretar un fichero con extensión HTM o HTML.

HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es importante resaltar lo de lenguaje de marcado: HTML no es un lenguaje de programación. No “ejecuta” lógica como lo haría Swift, Python o JavaScript, sino que marca el contenido para indicar diversa información semántica como qué título tiene la página, en qué idioma está el contenido principal, qué elementos hay en la página (párrafos, imágenes, controles de formulario, etc) indicando qué es cada trozo de contenido en la página.

HTML se usa principalmente para estructurar contenido en la Web, aportar semántica en los contenidos y ser el nexo de unión para otras tecnologías de la web como CSS y Javascript.

Ejemplo básico en HTML

Un ejemplo básico del código HTML de un fichero .htm podría ser el siguiente:

<!doctype html>

<html>

  <head>

    <title>Mi primera página</title>

  </head>

  <body>

    <h1>Mi primera página</h1>
    <p>Este es un párrafo con información.</p>
    <a href=»https://programaraciegas.net»>Visitar el blog</a>

  </body>

</html>

 

Si copiamos el contenido anterior en un fichero con la extensión .htm, por ejemplo «prueba.htm» y lo abrimos con nuestro navegador web veremos lo que hemos creado.

Partes de un fichero HTML

Un archivo HTML suele tener extensión .html (por ejemplo, index.html). Aunque puede contener muchas secciones, la estructura base se repite casi siempre.

Declaración del tipo de documento

La primera línea típica es:

<!doctype html>

Esta declaración indica al navegador que el documento debe interpretarse como HTML moderno.

Elemento raíz: <html>

Todo el contenido se engloba dentro de <html>…</html>:

<!doctype html>
<html>
...
</html>

Cabecera del documento: <head>

La sección <head> contiene metadatos: información para el navegador y para otros sistemas, pero que normalmente no se muestra como contenido principal en pantalla.

Ejemplo:

<head>
<meta charset="utf-8">
<title>Introducción a HTML</title>
</head>

La línea <meta charset=»utf-8″> indica la codificación de caracteres (muy importante para tildes y caracteres especiales).

La línea <title> define el título que suele verse en la pestaña del navegador.
Cuerpo del documento: <body>

En <body> va el contenido visible o “principal”: textos, enlaces, imágenes, formularios, etc.

<body>
<h1>Introducción a HTML</h1>
<p>HTML estructura el contenido de una página web.</p>
</body>

Las etiquetas HTML

Una etiqueta (tag) es una marca que indica al navegador qué tipo de elemento es un fragmento de contenido.

La mayoría de elementos HTML se representan con una sintaxis básica consistente en un nombre de etiqueta encerrado entre los signos menor que y mayor que (< y >).

<hr>

Algunas etiquetas requieren otra etiqueta de cierre. Esta etiqueta de cierre suele ser la misma etiqueta pero su nombre comienza con el símbolo de barra (/). Entre la etiqueta de apertura y la de cierre va el contenido.

<p>Esto es un contenido.</p>

Además, hay etiquetas que incluyen atributos para poder realizar ciertas acciones.

<a href=»https://programaraciegas.net»>
Visita Programar a ciegas
</a>

El atributo href permite indicar qué dirección URL se abrirá el enlace identificado por la etiqueta a.

Vox libri en Alibluebox

Publicado el

en el canal AliBlueBox en Youtube se ha publicado recientemente un vídeo titulado “¡La Mejor App Para Leer Libros Que He Probado! Vox Libri”.
En el video Alicia presenta paso a paso las características más importantes de Vox libri y muestra las capacidades de personalización que ofrece esta app para leer libros en el iPhone y en el iPad.

Contenido del video

Una de las aportaciones más significativas de Vox Libri, tal y como se describe oficialmente, es tratar la multimodalidad como parte estructural de la experiencia. La app ofrece lectura en pantalla, soporte de línea braille y lectura en voz alta con controles avanzados. En la práctica, esto suele marcar la diferencia entre una app “compatible” con accesibilidad y una app “diseñada” para accesibilidad.
También destaca el abanico de formatos soportados, que incluye TXT, PDF, DOCX, RTF, HTML, Markdown y EPUB. Para muchos usuarios, la accesibilidad no se decide solo en la pantalla de lectura, sino en el momento de importar materiales desde fuentes diversas, académicas o profesionales.
En accesibilidad, la lectura sostenida depende de la navegación tanto como del texto. En este punto, Vox Libri declara navegación por capítulos, encabezados, páginas, marcadores y secciones del documento, además de un modo manos libres desde auriculares. Para un lector de pantalla, “saltar” por estructura es equivalente a hojear; para una persona con dislexia o fatiga visual, reducir fricción en el control puede determinar si la lectura se mantiene o se abandona.
Otro aspecto que merece atención, y que conviene observar con criterio durante la demostración, es la presencia de funciones de traducción, resumen y simplificación “usando IA de forma local cuando el dispositivo lo permite”.

En lectura accesible, la simplificación puede ayudar a perfiles con dificultades de comprensión o con carga cognitiva elevada, y el resumen puede ser clave para estudio, trabajo o repaso rápido. Al mismo tiempo, cualquier funcionalidad de este tipo debe evaluarse por su consistencia y por cómo se integra con la navegación accesible, evitando que la “magia” oculte el texto original o complique el flujo.

Por qué este tipo de vídeos importan

Más allá de Vox Libri como producto, el valor de que un canal publique una revisión práctica de una app accesible es que normaliza la evaluación con criterios de uso, no de marketing. La accesibilidad se verifica en la interacción cotidiana. Durante el video se muestra cómo se importa un archivo, cómo se retoma una lectura, cómo se personaliza la experiencia de lectura, cómo responde la app con VoiceOver.

En definitiva, el vídeo de AliBlueBox sirve como punto de entrada útil para entender qué promete Vox Libri y, sobre todo, cómo se traduce esa promesa en experiencia real, poniendo el foco en interfaz, organización y funciones clave. 

Podéis ver el video de Vox libri en Alibluebox en su canal de Youtube.