Todas las ponencias: Track 1 tarde

Continuamos con las ponencias del Track 1 después de la comida:

6. Bloques reutilizables, plantillas de bloques y otras hierbas por José Ángel Vidania

Jose Ángel Vidania, también conocido como “El niño de los bloques” es diseñador web freelance de Alcalá de Henares y lleva utilizando WordPress como herramienta de trabajo desde finales de 2005. Es un ferviente defensor de Gutemberg, el nuevo editor de WordPress y por eso vamos a aprender un montón acerca de los “Bloques reutilizables, plantillas de bloques y otras hierbas”. ¡Allá vamos!

Tal como explica Vidania, al principio la gente sentía bastante reticencia al uso de Gutemberg, por eso él decidió darle visibilidad y ayudar a estas personas a abrirse a algo nuevo. En este sentido a muchos nos cuesta abrirnos a algo nuevo, pero él piensa que es un buen invento y vamos a descubrir por qué.

Concretamente nos habla en su ponencia de los “Bloques” (bloques reutilizables, plantilla de bloques y estilos de bloque).

Pero ¿qué es un bloque reutilizable?

Según palabras de Vidania es un elemento que vas a poder reutilizar a lo largo de tu página web… de modo que si en algún momento deseas hacer algún cambio sobre el mismo y está siendo utilizado en varios sitios, con cambiarlo solo una única vez, se verá afectado en todos aquellos lugares donde aparezca. ¿Eres consciente del tiempo que esto te puede ahorrar?

Si quieres saber cómo crear un bloque reutilizable, mira el video que dejamos a continuación (minuto 5 aproximadamente) y verás el paso a paso para crearlo.

¿Sabías que puedes utilizar tus bloques reutilizables en todas tus webs? Si eres desarrollador esto te puede ahorrar muchísimo tiempo, solo tienes que exportarlo como JSON y voilà.

¿Qué es una plantilla de bloque?

A modo de un post, una página o un CPT se trata de poder predefinir los bloques que va a cargar. ¿Y esto en qué nos beneficia? Pues una vez más en el ahorro de tiempo, ya que solo debemos preocuparnos de modificar el contenido.

¿Cuál es la mejor forma de crear una plantilla de bloque?

Vidania nos recomienda registrarlo como plugin, porque así podremos utilizarlo en todos nuestros proyectos.

Las plantillas de bloque podemos registrarlas tanto en posts o páginas, como en CPT (Custom Post Type). En el video que verás a continuación puedes ver paso a paso cómo crearlos.

Y si hay alguien que piensa que todo esto puede resultar un poco “chorra” (tal como indica Vidania) ¡está muy equivocado! Para un usuario final esto es VIDA. Que ya se lo des preparado y que el cliente final solo tenga que rellenar contenido, es una auténtica maravilla.

¿Quieres saber cómo crear un estilo de bloque? Vidania enumera 5 grandes pasos:

1. Desencolar los Estilos del Core, para no tener incompatibilidades que no deberían aparecer
2. Archivo index.php
3. Encolar estilos en editor y front en el archivo index.php
4. Crear archivo blocks.js
5. Crear archivo style.css

Corre a ver el video donde Vidania nos muestra el paso a paso para seguir estos pasos. ¡Ya no tienes excusa para animarte con Gutemberg y el maravilloso mundo de los bloques!

7. Misterios insondables sobre el wp-config.php por Fernando Tellado.

Fernando venía avisando tooooda la semana que nos mandaba TAREAS. Concretamente teníamos que leer 2 artículos:

• wp-config.php: Todo lo que querías saber y mucho más (actualizado 2019)
• Constantes de WordPress – Lista completa y descripción

Pero como somos unos rebeldes, no todos leímos los artículos, ¿por qué? Pues porque queríamos que fuera Fernando quién nos lo explicara con ese cariño que le caracteriza, así que… ¡Aquí os dejamos el resumen de su ponencia!

Lo primero que nos explica Fernando es qué es el archivo wp-config.php, el archivo principal de configuración de WordPress. Ojo que sin este archivo nuestro WordPress… ¡no arranca! Y además sirve para que WordPress se conecte a la base de datos. ¿Y dónde podemos encontrarlo? En el directorio raíz de la instalación.

Hasta aquí facilito, ¿verdad?

Ahora bien… Fernando, visto lo esencial para saber qué es este archivo, nos introduce en el fantástico mundo de las “constantes”. Puedes ver el vídeo que encontrarás a continuación (minuto 8 aproximadamente) donde Fernando nos detalla en profundidad qué son y cómo se crean.

A ser posible vamos a intentar no sobrepasar la línea /* ¡Esto es todo, deja de editar! Feliz blogging */ porque si está puesto ahí… es por algo. Recuérdalo.

Ahora viene una parte muy interesante donde Fernando nos enumera una serie de TRUCOS que no te puedes perder:

Por ejemplo, pongamos que te han hackeado algún usuario de la página web… puedes editar el bloque que hace referencia a la seguridad y automáticamente los echas de la sesión.

Si por otro lado queremos que el certificado SSL funcione en toda la página web, podemos añadir un par de líneas de código que hacen que el protocolo esté activo en toda la web, también en la zona de admin. Revisa esta información a partir del minuto 15 del vídeo que encontrarás después de este artículo. Ojo, que si queremos que funcione, primero tenemos que tener el certificado activado, ¿de acuerdo?

Otra medida básica a realizar cuando terminamos de instalar nuestro WordPress es añadir una línea de código que directamente nos elimina todas las opciones para editar (desde el propio panel) los archivos .htaccess, robots.txt y styles.css, por ejemplo. ¡Dejar esto accesible es un peligro! ¿Por qué? Porque imagina que tu cliente tiene acceso a la instalación completa y se pone a editar estos archivos… ¡Miedito!

Normalmente, para los que nos dedicamos a hacer webs para terceros, debemos dejar que el cliente final tenga acceso al panel de administración porque éste “se empeña”. Gracias a incorporar estas variables, tal como nos cuenta Fernando, haremos que el cliente no tenga acceso a cosas “especiales” que puedan suponer que la líe muy parda.

¿Cuántos de nosotros, «como administradores», accedemos a nuestro panel de WordPress con el «Perfil de Editor» porque solo queremos modificar contenido? Normalmente nadie. Lo ideal sería entrar como Editor si solo queremos editar contenido y como Administrador si queremos tocar algo más en profundidad… Nos parece un fantástico consejo, ¡gracias Fernando!

En cuanto a las carpetas y archivos de nuestro sitio, tienen que tener unos permisos por defecto. No es lo habitual, pero si en algún momento tuviéramos que asignar estos permisos de manera urgente, también existen un par de líneas de código que podemos añadir para forzar estos permisos.

También hay otra cosa, que seguro que muchos de nosotros no lo hemos hecho y es una de las cosas que más seguridad aportan a nuestro WordPress, que es cambiar el contenido de los archivos a un directorio distinto a /wp-content. Es una medida de seguridad buenísima en la que solo debemos cambiar el nombre del directorio y nadie (especialmente los hackers) sabrán que nuestra web está realizada en WordPress. ¡Toma trucazo! Lo único que tenemos que hacer es mover los contenidos y añadir la línea de código aportada por Fernando (en serio, corre a ver el video porque es tremendamente didáctico).

También hay cabida en esta completa charla para hablar de la optimización, concretamente Fernando nos habla acerca de la caché (y esos archivos que aparecer por arte de magia en nuestro sistema). Por otro lado, también nos muestra variables que tienen que ver con la compresión de archivos CSS, Scripts, concatenación de Scripts, etc. Ahora bien, lo que no podemos hacer es activarlo todo de golpe y que esté conviviendo con otras cosas como plugins que ya hacen todo esto, código adicional añadido en functions.php, etc. Mejor ir probando línea a línea para comprobar que todo sigue funcionando correctamente y pasados 3 o 4 días, deberemos valorar si realmente esa optimización ha servido para algo.

Lo mismo podemos hacer para ajustar los límites de memoria, que suelen venir definidos por el propio hosting y dependiendo de cuánto capado esté, podremos ajustarlo o no.

Una forma de ayudar a que nuestra página web esté mejor optimizada (de cara al navegador), es decirle dónde está nuestra web, de forma que estaremos evitando dos peticiones a la base de datos.

También podemos evitar que un usuario con pocos conocimientos decida cambiar la URL del sitio haciendo un cambio del tipo “vaya, este dominio ya no me gusta, lo cambio por este otro” ¡Y zas! Web rota. Parece mentira, pero es algo muy común entre personas que no son conocedoras de para qué existen ciertas cosas y apartados que no deberían tocar.

Recuerda que todas estas variables hacen que ayudemos al navegador a que sepa dónde están las cosas, de forma que la carga de nuestro sitio web se optimizará y por ende Google nos querrá un poquito más.

También podemos definir rutas para decirle donde está la hoja de estilos del tema y un número máximo de revisiones que permitimos que se guarden en la base de datos. Este número por defecto es infinito, pero si no queremos saturar nuestra base de datos, deberíamos poner un tope.

A la papelera también le podemos indicar los días que puede mantener los archivos que hemos eliminado.

Otra opción recomendable es reparar la base de datos de nuestro WordPress simplemente añadiendo una variable y accediendo a una determinada URL. Una vez hayamos terminado, deberemos quitar esa línea de código para que usuarios sin autorización no puedan acceder a la misma.

Como sabéis cada vez que instalamos WordPress viene con 3 temas instalados por defecto, un plugin de ejemplo… Pues si nosotros los borramos y luego WordPress se empeña en volverlos a instalar, podemos decirle que no moleste y que no nos los recuerde más.

Cuando no sepamos cuál es el host de nuestro base de datos (recuerda que la mayoría de veces es “localhost”), podemos añadir un valor específico y así WordPress intentará resolver el problema localizando el nombre del host en cuestión.

Otra curiosidad es que existe una papelera para los medios, al igual que existe para páginas y entradas, y de este modo activaríamos añadiendo una sencilla línea de código un botón para poder enviar las imágenes a la papelera.

Algo que existe desde siempre y que había caído en desuso es el SHORTINI, un recurso que se está volviendo a utilizar si lo que queremos es cargar lo esencial de nuestra plataforma en otro gestor distinto.

También debemos saber que si editamos una imagen con el editor que trae WordPress, nos guarda tanto el orginal como la copia, pues bien, con una sencilla línea de código podemos evitar que guarda la original.

También podemos ajustar el intervalo de autoguardados del editor.

El arreglaproblemas por excelencia es el de programar entradas y que por la razón que sea… no se publican. Pues si añadimos la constante correspondiente se soluciona el problema de un plumazo.

Recuerda ver el video y consultar el archivo de descarga donde vas a poder encontrar las variables escritas y detalladas para que puedas replicarlas en tu proyecto.

Y para finalizar, como EXTRA, Fernando nos recomienda proteger nuestro wp-config.php, ¿cómo? Añadiendo las líneas de código que encontrarás en su video y si queréis una doble protección, lo puedes mover a un directorio superior (WordPress seguirá funcionando). Como además es un archivo muy sensible, nos recomienda cambiarle los permisos a 444 y listo.

Para aprender todavía mucho más Fernando nos deja unos enlaces muy interesantes al final del video que te recomendamos revisar. ¡No te los pierdas!

8. Cómo acertar el tipo de letra de tu web por Ana Cirujano.

Ana Cirujano es una apasionada de WordPress y muy activa de la Comunidad coordinando, organizando y asistiendo a muchísimas WordCamps. Además, se ha especializado en diseño editorial y employer branding y, aplicado al diseño y desarrollo web, nos cuenta un montón de trucos para escoger de forma acertada, las tipografías para nuestros proyectos, porque no nos olvidemos que tan importante es la programación, como el diseño y el mensaje que transmitamos en nuestro sitio web.

¡Y teniendo en cuenta que el próximo año Valencia será la capital del diseño, no te puedes perder todo lo que Ana nos aconseja!

La tipografía es el traje con el que vestimos a las palabras.

Con la tipografía comunicamos más que solo con la palabra, pero hay que tener en cuenta que cada fuente es diferente. Ana nos pone un ejemplo muy claro haciendo una comparación con las prendas de vestir. Si preguntamos a un usuario, ¿qué prenda es tu favorita? Probablemente nos responda que para ir a un evento prefiere un traje y para salir a correr unos pantalones cómodos. Con la tipografía ocurre lo mismo, dependiendo de lo que queramos comunicar en una página web, utilizaremos una tipografía u otra.

No es suficiente con escoger el tipo de letra idóneo para nuestro proyecto, la composición, también cuenta.

Un uso muy habitual, para una buena composición, es usar una tipografía con serifas para los títulos y una más sencilla, sin adornos, para los párrafos. Esta misma combinación, la podemos utilizar pero a la inversa. De esta manera, el usuario va a diferenciar rápidamente lo que son títulos, de los párrafos. En los títulos podemos utilizar tipografías de mayor tamaño, e incluso con más detalle/adornos. En cambio, si usáramos fuentes con adornos o mucho detalle en los párrafos, estos adornos no se diferenciarían bien y con toda probabilidad, el texto sería de difícil lectura para el usuario. La clave es usar para los títulos esas tipografías más especiales, donde queremos expresar la personalidad del proyecto, y en los párrafos, tipografías que nos faciliten la lectura.

¿Pero cómo escogemos esas tipografías?

Ana nos lo deja claro, incluso en el turno de preguntas, nos dice que no hay una tipografía que sea perfecta para cualquier web, sino que va a depender del mensaje/temática que consista nuestro proyecto. Ahora bien, podemos tener en cuenta estos consejos genéricos para escoger nuestra tipografía:

• Optimización de las tipografías: Usa fuentes optimizadas para entornos digitales (pantallas). Una tipografía optimizada no se verá pixelizada y tendrá aplicada la técnica de “hinting”.
• Tipografías abiertas: Fíjate en la letra “a” y “e” de la tipografía que vas a usar. Cuanto más abiertas sean, mucho mejor, ya que evitaremos que se confundan con otras letras como la “o”. Un claro ejemplo lo vemos si comparamos la tipografía “Roboto” y la “Helvética”. Esta última, al ser más cerrada, dificulta la lectura al usuario. 
• Altura de las letras: Cuanta más alta sea la tipografía, mejor se va a leer. Fíjate en la altura de la letra “x”. Incluso en la propia letra, cuanta menos diferencia de altura haya entre mayúsculas y minúsculas, mejor se leerá lo que hayas escrito.
• Grosor de la tipografía: Aunque en diseño en papel usar una tipografía fina puede quedar muy “cool”, en versión digital, seguramente te estés jugando que el párrafo casi no se pueda ni leer. Así que en entorno digital, ¡olvídate de tipografías finas!

Además, no te olvides de:

• Kerning: Usa una fuente que tenga bien ajustado la distancia entre las letras.
• Legibilidad en botones, menú y textos pequeños: Escribe la vocal “I” mayúscula, la letra “i” minúscula y el número “1”. Si son diferentes, esta es una buena tipografía para usar en este tipo de texto.
• No mezcles si no es necesario: Si hay 2 tipos que son muy similares, mejor utiliza solo uno.
• Mapa de caracteres: Asegúrate de que la tipografía tiene todos los caracteres que vas a necesitar.
• Versatilidad: Es mejor usar una tipografía con muchas versiones (normal, cursiva, bold, extra bold, etc).

Para finalizar, Ana nos da algunos datos interesantes sobre la evolución de la tipografía desde 1996, donde se usaban para diseñar las fuentes de sistema que venían en nuestros ordenadores, y la evolución hasta 2016, donde aparecen las extraordinarias fuentes variables, donde, con una sola tipografía, tenemos muchas opciones de diseño. ¿Es magia? No, es la evolución… porque la tipografía, como cualquier rama del arte, del diseño y de la programación, está en continua evolución. Esperaremos ansiosos a ver qué nos depara este apasionante mundo de la tipografía, o como dice Ana, “el traje de las palabras”.

9. Mesa redonda:

Contamos con grandes profesionales como son David Pérez, Pablo Viedma, Alicia Cardete, Dani Serrano, Alice Orrù y Ricardo Vilar para debatir sobre «Cómo ser mejor profesional aprendiendo «de todo un poco» o superespecializarse en algo concreto«

Y esto fue todo en nuestro Track 1, de aquí pasamos a tomar «horxata i fartons» y un poquito más tarde… ¡Nuestra After-party!