Cómo crear una web gratis y accesible en 10 Min. (o casi)

Presentación [00:00:03 – 00:00:29]

00:00:03 Sobre un fondo blanco, dos rostros abstractos. Uno de ellos con una boca parlante.

[Narradora] ¡Muy buenas a todas! En el vídeo de hoy vamos a crear una web accesible y gratuita en menos de diez minutos.

(Acelera) Si no sabes de lo que hablo. Si andas un poco desubicada. Si acabas de llegar o si no sabes qué te pasa con la vida, entonces quédate hasta el final y lo entenderás. La que os habla y agradece que estéis aquí, una vez más, es la que lleva esas pestañotas ‘kubrickianas’ a lo ‘drama queen’ … 

¡Empezamos!

Intro [00:00:30 – 00:00:39]

00:00:58 (Música rítmica, tambores) Logotipo de ACCIUMRed. La palabra ACC-ESI-BIL-DAD repartida como se indica en tres filas. Tras ella, un gajo de naranja. Bajo el logo, el botón ‘Suscríbete’ y un icono de campana, que invita a activar las notificaciones.

Secuencia 2 [00:00:40 – 00:04:01]

00:00:41 En la parte inferior derecha, el rostro de boca parlante, que encarna a la narradora, se mantendrá a lo largo de todo el tutorial. De fondo, una balanza que emula las formas que el artista Mondrian imprime en sus obras. Dos triángulos opuestos entre sí, que regulan el equilibrio entre una cubo amarillo y un cubo rojo. A su derecha, el texto: ¿pagar es garantía de accesibilidad?

[Narradora] A la hora de crear una web, algo que nos preguntan mucho y que, quizá te estés preguntando, es si deben cobrarte más cuando es accesible. Vamos, si está bien recibir dos presupuestos diferentes en función de que ésta sea o no accesible. 

Bien, pues ahí va nuestra respuesta, seguro que no esperada, una vez más. No, rotundamente no. Es más, si aceptas nuestro consejo, sal corriendo. Explícale, si te lo permite el ánimo, por qué es capacitista y huye. Porque la accesibilidad es un derecho, y una cualidad constitutiva en sí misma de todo espacio, producto o servicio, al que debes poder acceder en igualdad de condiciones. Es parte de sus entrañas. Y, por tanto, es inconcebible hacer de ella una disyuntiva.  O esto o lo otro. O accesible o no. O caro o súper caro. 

00:01:13 En el centro, tres personajes de Barrio Sésamo hablando entre ellos: el Monstruo de las Galletas, Elmo y Óscar el Gruñón. Tras ellos, aparecen varios dedos de manos sobre los que se han dibujado une infante, cuatro personas con muchas dudas y un ladrón en pleno robo.

Que no os engañen, porque además juegan con la baza de que la accesibilidad digital es molto giovane, hay mucho bandido de mercado y poco conocimiento en el pueblo. Hablaremos de amantes bandidos que resultan ser sólo amantes vendidos en otro vídeo!

00:02:26 De manera consecutiva, un icono de un reloj, sobre el que dice ‘breve’; un corazón, sobre el que dice ‘intenso’; y una persona trabajando en un ordenador, bajo la que dice ‘práctico’. Bajos los tres iconos, las letras CMS.

[Narradora] Porque mi intención es hacer algo cortito, que sea muy práctico, como dar nuestros primeros pasos para crear una web accesible y gratuita.

Hoy, vamos a crear su estructura base, iremos poquito a poco, y para ello vamos a utilizar un CMS gratuito. Y tú dirás: «pues anda, llevamos 3 minutos y ya has dicho ¿CMS? ¿Qué es? ¿Vas a empezar así, ya?» (Risas) No, voy a empezar así pero te lo voy a explicar.

00:03:02 Bajos las letras CMS, en el fondo un mueble de archivadores. Frente al mueble, un ordenador de mesa. Sobre los archivadores, van introduciéndose iconos de documentos, cámaras de fotos, de vídeo, un tocadiscos y un micrófono. Una vez recogidos en los archivadores, vuelve a salir de estos para introducirse en el ordenador, que tiene activa un sesión web.

[Narradora] Un CMS o sistema gestor de contenidos es un programa online en el que podemos almacenar contenidos. Por ejemplo, nuestros textos, artículos, fotografías, vídeos o canciones. Además, podemos modificarlos y volcarlos en una web. Sin ir más lejos, el blog WordPress es un CMS. Y es el que vamos a utilizar aquí. 

Secuencia 4 [00:04:02 – 00:06:24]

00:04:03 En primer plano, dos iconos ligeramente diferentes de wordpress.org y WordPress.com, respectivamente. En el centro, la figura de Matt Mullenweg  fundador de ambos.

[Narradora] Antes os vamos a explicar algo, importante, que se desconoce, y que explica por qué haremos un segundo tutorial como éste. Para realizar nuestra web, la realidad es que podríamos recurrir a dos WordPress diferentes. Sí, Sí. Dos distintos. La gente cree que solo hay uno, pero no.

Podemos con WordPress.org, que viene de ‘organización’. De forma casi gratuita. Y podríamos hacerlo con WordPress.com, y de una forma ‘casi gratis’ en un sistema capitalista … (ironía).

¿La diferencia? Los dos tiene el mismo origen. WordPress.org, al que recurriremos en el siguiente tutorial, es una organización sin ánimo de lucro, libre y de código abierto, que no tiene ningún derecho sobre el contenido que subas. Es tuyo y no puede hacer nada con él. De hecho, ni le interesa, algo que iría contra natura. Sin embargo, requiere algún gasto adicional pequeño, lo que es muy relativo.

WordPress.com (que viene de comercio), que vamos a utilizar hoy, es una escisión del anterior que llevó a cabo uno de los socios. Es completamente gratuito pero, al igual que sucede en las redes sociales, guarda tu contenido. 

Nosotras optamos siempre por WordPress.org, pero creemos que, por encima, lo esencial es que conozcas las dos posibilidades y que tú decidas, libremente, según tus circunstancias personales.

Dicho queda y nosotras ¡vamos a empezar!

Secuencia 5 [00:06:25 – 00:20:38]

00:04:15 En el centro, una página en blanco abierta del navegador Chrome. A partir de aquí, se muestran los pasos detallados que se narran.

[Narradora] Lo primero que tenéis que hacer es ir a la página de WordPress.com y hacer clic en ‘crear tu página web’. Os dejamos el enlace en la descripción, ¡cómo siempre! ¿Cómo que como siempre? (Ironía) Pues como siempre, suscribiros. Que ya estaba tardando en decirlo (sonrisa).

Una vez dentro, facilitad una dirección de correo que ya tengáis o bien que hayáis creado para la web. Si necesitáis crear un correo gratuito, Gmail es una buena opción. Rellenamos el siguiente campo, nombre de usuaria, que sólo será público si tú quieres. Y, además, puedes decidirlo más tarde con la web creada. Y, finalmente, una contraseña. Evita contraseñas hackeables como 1234 ó 2552, ¿sí?

Antes de crear la cuenta, para más seguridad, activa el icono del ojo (si no estás en un sitio público, expuesta) en el campo contraseña, para que aparezca sin puntitos, y así leerla y comprobar que es correcta. ¡Listo! Creamos cuenta.

[Narradora] En el segundo paso, nos pide que insertemos un nombre de subdominio. Esto es, el nombre de tu dirección web, que irá antes de la palabra WordPress. Si dispones de uno, como por ejemplo nosotras acciumred.com, accede directamente a través de esta opción. Y si no, continuamos por dónde íbamos pero con una pequeñas ayudita para dar con el nombre perfecto del subdominio: cuando más simple y fácil de recordar, mejor para encontrarlo y ser leído por un lector de pantalla.

Por ejemplo, un dominio bien sería editorialclon.wordpress.com. (sonrisa). Es bien, es fácil, es legible y es fácil de retener.

Un ejemplo castaña sería kukurrucumisu24.com. ¡kukurrucumisu24! Pero si es que dan ganas de llorar al pronunciarlo (sonrisa). Esto es un castaña. Esto no lo ponga. Bueno, o ponlo, que eres libre. Pero vamos, a él no va a llegar ni el Tato …

De todos modos, si aún no tienes nombre, porque no es cosa baladí nombrarse a sí misma, tómate un tiempo, pausa este vídeo (pero no te me vayas) y piensa en él teniendo en cuenta nuestro consejo. Comprobarás que, a medida que lo escribas, WordPress te indicará si está disponible o no. Y, en caso de no estarlo, te proporcionará alternativas. 

[Narradora] Una vez tengas el nombre, elige entre las opciones que te da, el dominio que incorpora la palabra WordPress, que es la forma en la que se autofinancia la plataforma. Recuerda: siempre estás a tiempo de pagar por otras opciones sin perder el contenido que vayas acumulando.

Una vez aquí (siguiente paso), WordPress se repite como el ajo y es que también quiere ganar sus pelas, y nos muestra diferentes planes anuales de servicios que ofrece. Pero, de momento, a nosotras no nos interesa ninguno. Por lo que tiramos por el plan gratis que nos facilita en la parte superior derecha. ¡Ojo, si alguien quiere tener plan desde ya, adelante! Que por mí no se corte. Este tutorial sirve también para opciones de pago.

[Narradora] Ahora estamos directamente en las entrañas de la administración de nuestra web. ¡Venga, que ya nos queda poquito! Un par de retoquitos y estamos a punto de dar con la clave de tener un sitio web accesible en WordPress. 

Vamos a la sección ‘Nombre de tu sitio web’ y empezaremos por rellenar el nombre de nuestro sitio (sonrisa), que puede ser diferente del que hayas elegido para tu subdominio. Nuestro dominio y web, que conocéis y si no os invitamos daros un paseíllo por ella, es acciumred.com. Pero vamos a ponerle por nombre algo fácil de recordar y que describa lo que hacemos. Acciumred dice poco y mucho, es casi un nombre propio peor no habla de lo que hacemos. Ponemos Escuela Virtual de Accesibilidad.

Luego, podremos ir rellenando uno a uno los campos de nuestro sitio, que serán públicos y definirán un poco quienes somos. Por ejemplo, nuestra descripción: (voz imitando) «Bienvenido a ACCIUMRed, un espacio en común para formarte, inspirar y reivindicar la accesibilidad.». 

(Muchas risas) Dicho así suena un poco pedante pero pero os juro que la intención era otra todo lo contrario. Es un sueño y humilde.

Una vez rellenado, guardamos los cambios y volvemos a la página anterior de Administración.

[Narradora] Recuerda: pausa el vídeo, piénsalo con calma, llama a las musas o no y regresa cuando quieras. Vamos allá.

Ahora sí, vamos acercándonos a la clave de tener una web accesible. Por cierto .., ¿vamos en tiempo o (risas) el tempus se me fugi hace ya mucha líneas? Se me fugi (sonido). Sí, noto que llevo más de 5 minutos dándole al palique.

Bueno, en Administración, nos dirigimos a la sección Apariencia y dentro de ésta, a Tema. Repetimos, aunque ya lo hemos hecho en otros vídeos, TEMAS en WordPress son las plantillas, con estructura y diseño prefabricados, que podemos elegir para dar apariencia a nuestra web y no tener hacerlo nosotras manualmente. 

Bien, vamos a darle a tema pero ojo cuidado porque cuando le des a temas, de repente te va a petar la cabeza. Esto es así. Y esto es así porque pasarás en un pis pas del desierto (la técnica, el aburrimiento) al brilli brilli de WordPress.

Pero necesito que pongáis mucha atención. Porque tenéis que olvidaros de todo ese escaparate de temas que tenéis frente a vosotras, para elegir uno sólo entre los seis temas que vienen por defecto en WordPress. Ésta es la paradoja de la elección, porque fuera de ella está el secreto. Pero el secreto de verdad, y no el de Rhonda ni el ibérico. El secreto de elegir con total garantía. Los seis temas que vienen por defecto en WordPress son accesibles, porque WordPress es accesible.

¡Continuemos y quédate hasta el final que en él te voy a dar una segunda clave! Y sí.., esto te lo he dicho para que te quedes un poquito más conmigo. (Sonrisa).

00:04:15 En una ventana de WordPress, cientos de temas a elegir.

[Narradora] Bueno, vamos a buscar entre todos estos diseños, cuáles son los seis originales de WordPress.

Para ello, vamos a ir a la rueda dentada. Haremos clic sobre ella, elegiremos la opción características y haremos clic sobre la opción compatible con accesibilidad. ¡Ah, se me olvidaba, pincha en gratis para que nos muestre los temas gratuitos accesibles. 

¡Vaya, nos siguen saliendo muchos! Nosotras vamos a buscar, introduciendo sus nombres en el buscador superior, los siguientes temas (no a la vez): twenty thirteen, twenty fourteen, twenty fifteen, twenty sixteen, twenty seventeen, twenty twenty-one. Ya los tenemos. Oye, siguen teniendo su brilli brilli y, además, son accesibles, lo más atractivo de ellos.

Elige uno, el que más te guste más o sea más acorde con lo que quieres transmitir. La verdad es que al usuario le importa menos que tres pimientos, o menos de los que crees, el estilo o nombre de la plantilla. Bastante menos que el contenido de calidad y la experiencia que se lleve al navegar. Es decir, la emoción y sensación.

Osea que recuerda: la clave, por ahora, es olvidarte de ese escaparate de temas, incluso de los gratuitos. Porque son gratuitos, sí, pero no pertenecen a WordPress sino a otres diseñadores que los facilitan gratis. Con lo cual, WordPress no se puede garantizar su accesibilidad. 

Cuando hayas elegido el tema, haz clic sobre él con el botón derecho, y selecciona la opción activar. De esta manera, el tema queda instalado en tu web.

00:04:15 Bajo el lema Menos es más, dos ilustraciones. A la derecha, el arquitecto Mies Van der Rohe sentado en una silla que diseñó la arquitecta Ada Mies. A la derecha, Ada Mies sentada en un sillón estilo Bauhaus.

[Narradora] El siguiente paso, básico para la accesibilidad, es un truco más antiguo que cascorro: se trata de mantenerla. (Risa) ¡Mantener la accesibilidad! Venga, y aquí está la segunda clave.

¿Cómo mantener la accesibilidad si no tienes mucho conocimiento o el justo? Pues mira, lo mejor es dejarse llevar por la archiconocida fórmula del arquitecto Mies Van der Rohe: menos es más. Que, bueno, tampoco sabemos si eran suya, porque le choriceaba a la arquitecta de su mujer diseños como panes, que firmaba como suyos. En fin. Que cuantas menos florituras, añadidos y complementos añadáis, mucho mejor y más probable que se mantenga accesible.

Para poner en práctica esta fórmula, que a las que somos un poco barrocas se nos queda corta, tú automatiza lo menos posible. Sabemos que la máxima de la productividad es ¡automatiza, automatiza, produce!, y pedirte que no lo hagas puede sonarte … antisistema. Bienvenida al lado oscuro. Y tú no automatices con plugins o complementos todo lo que puedas hacer tú directamente. Por lo menos, hasta que averigües si ese extra es accesible o vayamos avanzando en nuestros tutoriales y aprendiendo un poquito más.

Voilà, tenemos web (se muestra la primera página del nuevo tema instalado). Ahora lo que tienes que hacer es añadir tu propio contenido. Yo voy a pegar un trocito del nuestro para que lo escuchemos con el lector de pantalla y comprobemos esa accesibilidad. ¡Vamos allá!

(Lector de pantalla.) «De justicia de la pobreza a justicia de la pobreza a justicia de la discapacidad: movimiento de acceso. Banner. Dentro del contenido web. Enlace. ACCIUMRed-EVA. Navegación principal: Inicio, Blog, Acerca de, Contacto. Fin lista. H1. De justicia de la pobreza a justicia de la pobreza
a justicia de la discapacidad: movimiento de acceso. Publicado por ACCIUMRed. 31 de julio. H2. En oposición a la respuesta estatal contra las luchas obreras del siglo XIX y a los nuevos estados liberales, emerge el Movimiento popular de Acceso a la Justicia. Un movimiento que transcurrirá a lo largo de seis corrientes y del que te hablaremos a lo largo de esta serie de artículos con el foco puesto en la Justicia de la Discapacidad. Imagen. Inicio. 1978. Un jurista piensa: «Es el momento de revisar la Justicia (…)». (Fin lector de pantalla)

00:19:19 En la parte inferior, una casa Lego Bauhaus con el estilo pictórico de Mondrian, en colores rojos, azules y amarillos. A su lado, ilustración de una mano con un guante de látex y cronómetro que cambia de color: azul, amarillo y rojo, respectivamente.

[Narradora] Bien, estamos que estamos porque ¡lo tenemos! El vídeo empezó siendo ‘cómo hace una web en 5 minutos’ (guante azul). Ahí estaba yo de subidón (sonrisa). Lo bajé a 10 minutos (guante amarillo) y al final, bueno resulta que es lo que es (guante rojo).

En fin, ¡qué tenemos ya nuestra estructura base de nuestra web accesible! Recordad que la accesibilidad está compuesta de muchos elementos, factores y que éste tutorial hace referencia sólo a la estructura base de una página web de WordPress. Ojo, sólo pero tan importante como complicado de solventar sin ayuda. Que por ella se empieza. 

Y si lo que queréis es aprender a cómo mantener todos estos factores, de una manera fácil, estad atentas a nuestros próximos tutoriales. 

Si os ha gustado éste, regaladnos un me gusta y suscribiros activando la campanilla. De esta manera YouTube os avisa de nuestras nuevos vídeos. Recordad que en nuestro próximo tutorial, continuidad de éste, haremos nuestra primera web casi gratis accesible en WordPress.org.

Despedida [00:20:39 – 00:21:55]

00:20:38 Sobre un fondo blanco, los dos rostros abstractos del principio. Uno de ellos con una boca parlante.

[Narradora] ¡Y bueno, bueno, llegamos al fin! Oye, ¿habrá quedado comprensible? Siempre me asaltan estas dudas cuando acabo los vídeos, muy tarde … Porque luego, los revisiono, pero yo ya no estoy allí, estoy ya un poquito lejos y es difícil ser objetiva. Vosotras me diréis.

Mis últimos segundos para lo de siempre. En la descripción os dejamos enlaces a unas imágenes de la campaña #NoEstásSola con recursos accesibles contra la violencia machista para que las difundáis por vuestras redes. Y un tutorial de cómo poner, pasito a pasito, en vuestra web, porque ya no hay excusa, una alerta contra la violencia machista. 

Ahora sí, dejaros caer en comentarios con opiniones, dudas que tengas, ideas, mucho feedback y cariñitos. Os estaremos esperando con ganas, desde aquí, desde la toma de ACCIUMRed, en la que os deseamos toda la ¡salud y libertad!