{"id":3382,"date":"2019-10-25T19:29:14","date_gmt":"2019-10-25T17:29:14","guid":{"rendered":"https:\/\/2019.valencia.wordcamp.org\/?p=3382"},"modified":"2019-11-02T00:15:58","modified_gmt":"2019-11-01T23:15:58","slug":"todas-las-ponencias-track-1-tarde","status":"publish","type":"post","link":"https:\/\/valencia.wordcamp.org\/2019\/todas-las-ponencias-track-1-tarde\/","title":{"rendered":"Todas las ponencias: Track 1 tarde"},"content":{"rendered":"\n<p>Continuamos con las ponencias del Track 1 despu\u00e9s de la comida:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Bloques reutilizables, plantillas de bloques y otras hierbas por <a href=\"https:\/\/2019.valencia.wordcamp.org\/speaker\/jose-angel-vidania\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Jos\u00e9 \u00c1ngel Vidania<\/a><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"432\" src=\"https:\/\/2019.valencia.wordcamp.org\/files\/2019\/08\/ponentes_Jose-A-Vidania.jpg\" alt=\"\" class=\"wp-image-1949\" srcset=\"https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Jose-A-Vidania.jpg 769w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Jose-A-Vidania-300x169.jpg 300w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Jose-A-Vidania-768x431.jpg 768w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Jose-A-Vidania-500x281.jpg 500w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p><strong>Jose \u00c1ngel Vidania<\/strong>, tambi\u00e9n conocido como \u201cEl ni\u00f1o de los bloques\u201d es dise\u00f1ador web freelance de Alcal\u00e1 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\u00f3n acerca de los \u201c<strong>Bloques reutilizables, plantillas de bloques y otras hierbas<\/strong>\u201d. \u00a1All\u00e1 vamos!<\/p>\n\n\n\n<p>Tal como explica Vidania, al principio la gente sent\u00eda bastante reticencia al uso de <strong>Gutemberg<\/strong>, por eso \u00e9l decidi\u00f3 darle visibilidad y ayudar a estas personas a abrirse a algo nuevo. En este sentido a muchos nos cuesta abrirnos a algo nuevo, pero \u00e9l piensa que es un buen invento y vamos a descubrir por qu\u00e9.<\/p>\n\n\n\n<p>Concretamente\nnos habla en su ponencia de los \u201cBloques\u201d (bloques reutilizables, plantilla de\nbloques y estilos de bloque).<\/p>\n\n\n\n<p><strong>Pero \u00bfqu\u00e9 es un bloque reutilizable? <\/strong><\/p>\n\n\n\n<p>Seg\u00fan palabras de Vidania es un elemento que vas a poder reutilizar a lo largo de tu p\u00e1gina web\u2026 de modo que si en alg\u00fan momento deseas hacer alg\u00fan cambio sobre el mismo y est\u00e1 siendo utilizado en varios sitios, con cambiarlo solo una \u00fanica vez, se ver\u00e1 afectado en todos aquellos lugares donde aparezca. \u00bfEres consciente del tiempo que esto te puede ahorrar?<\/p>\n\n\n\n<p>Si quieres saber c\u00f3mo crear un <strong>bloque reutilizable<\/strong>, mira el video que dejamos a continuaci\u00f3n (minuto 5 aproximadamente) y ver\u00e1s el paso a paso para crearlo.<\/p>\n\n\n\n<p>\u00bfSab\u00edas que puedes utilizar tus bloques reutilizables en todas tus webs? Si eres desarrollador esto te puede ahorrar much\u00edsimo tiempo, solo tienes que exportarlo como JSON y voil\u00e0.<\/p>\n\n\n\n<p><strong>\u00bfQu\u00e9 es una plantilla de bloque? <\/strong><\/p>\n\n\n\n<p>A modo de un post, una p\u00e1gina o un CPT se trata de poder predefinir los bloques que va a cargar. \u00bfY esto en qu\u00e9 nos beneficia? Pues una vez m\u00e1s en el ahorro de tiempo, ya que solo debemos preocuparnos de modificar el contenido. <\/p>\n\n\n\n<p><strong>\u00bfCu\u00e1l es la mejor forma de crear una plantilla de bloque? <\/strong><\/p>\n\n\n\n<p>Vidania nos recomienda registrarlo como plugin, porque as\u00ed podremos utilizarlo en todos nuestros proyectos.<\/p>\n\n\n\n<p>Las\nplantillas de bloque podemos registrarlas tanto en posts o p\u00e1ginas, como en CPT\n(Custom Post Type). En el video que ver\u00e1s a continuaci\u00f3n puedes ver paso a paso\nc\u00f3mo crearlos.<\/p>\n\n\n\n<p>Y si hay alguien que piensa que todo esto puede resultar un poco \u201cchorra\u201d (tal como indica Vidania) \u00a1est\u00e1 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\u00e9ntica maravilla.<\/p>\n\n\n\n<p><strong>\u00bfQuieres saber c\u00f3mo crear un estilo de bloque?<\/strong> Vidania enumera 5 grandes pasos:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Desencolar los Estilos del Core, para no tener incompatibilidades que no deber\u00edan aparecer<\/li><li>Archivo index.php<\/li><li>Encolar estilos en editor y front en el archivo index.php<\/li><li>Crear archivo blocks.js<\/li><li>Crear archivo style.css<\/li><\/ol>\n\n\n\n<p>Corre a ver\nel video donde Vidania nos muestra el paso a paso para seguir estos pasos. \u00a1Ya\nno tienes excusa para animarte con Gutemberg y el maravilloso mundo de los\nbloques!<\/p>\n\n\n\n<figure class=\"wp-block-embed-videopress wp-block-embed is-type-video is-provider-videopress wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='525' height='295' src='https:\/\/video.wordpress.com\/embed\/DGns1BWi?hd=0&amp;cover=1' frameborder='0' allowfullscreen allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-button is-style-squared\"><a class=\"wp-block-button__link has-background has-luminous-vivid-orange-background-color\" href=\"https:\/\/2019.valencia.wordcamp.org\/files\/2019\/10\/Gutenberg-WCValencia-4-3.pdf\">Descargar presentaci\u00f3n<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">7. Misterios insondables sobre el wp-config.php por <a href=\"https:\/\/2019.valencia.wordcamp.org\/speaker\/fernando-tellado\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Fernando Tellado<\/a>.<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"432\" src=\"https:\/\/2019.valencia.wordcamp.org\/files\/2019\/08\/ponentes_Fernando-Tellado.jpg\" alt=\"\" class=\"wp-image-1948\" srcset=\"https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Fernando-Tellado.jpg 769w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Fernando-Tellado-300x169.jpg 300w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Fernando-Tellado-768x431.jpg 768w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Fernando-Tellado-500x281.jpg 500w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>Fernando ven\u00eda avisando tooooda la semana que nos mandaba\nTAREAS. Concretamente ten\u00edamos que leer 2 art\u00edculos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>wp-config.php:\nTodo lo que quer\u00edas saber y mucho m\u00e1s (actualizado 2019)<\/li><li>Constantes\nde WordPress \u2013 Lista completa y descripci\u00f3n<\/li><\/ul>\n\n\n\n<p>Pero como somos unos rebeldes, no todos le\u00edmos los art\u00edculos, \u00bfpor qu\u00e9? Pues porque quer\u00edamos que fuera Fernando qui\u00e9n nos lo explicara con ese cari\u00f1o que le caracteriza, as\u00ed que\u2026 \u00a1Aqu\u00ed os dejamos el resumen de su ponencia!<\/p>\n\n\n\n<p>Lo primero que nos explica Fernando es <strong>qu\u00e9 es el archivo wp-config.php<\/strong>, el archivo principal de configuraci\u00f3n de WordPress. Ojo que sin este archivo nuestro WordPress\u2026 \u00a1no arranca! Y adem\u00e1s sirve para que WordPress se conecte a la base de datos. \u00bfY d\u00f3nde podemos encontrarlo? En el directorio ra\u00edz de la instalaci\u00f3n.<\/p>\n\n\n\n<p><strong>Hasta aqu\u00ed facilito, \u00bfverdad?<\/strong><\/p>\n\n\n\n<p>Ahora bien\u2026 Fernando, visto lo esencial para saber qu\u00e9 es este archivo, nos introduce en el fant\u00e1stico mundo de las \u201c<strong>constantes<\/strong>\u201d. Puedes ver el v\u00eddeo que encontrar\u00e1s a continuaci\u00f3n (minuto 8 aproximadamente) donde Fernando nos detalla en profundidad qu\u00e9 son y c\u00f3mo se crean.<\/p>\n\n\n\n<p>A ser posible vamos a intentar no sobrepasar la l\u00ednea \/*\n\u00a1Esto es todo, deja de editar! Feliz blogging *\/ porque si est\u00e1 puesto ah\u00ed\u2026 es\npor algo. Recu\u00e9rdalo.<\/p>\n\n\n\n<p>Ahora viene una parte muy interesante donde Fernando nos\nenumera una serie de TRUCOS que no te puedes perder:<\/p>\n\n\n\n<p>Por ejemplo, pongamos que te han hackeado alg\u00fan usuario\nde la p\u00e1gina web\u2026 puedes editar el bloque que hace referencia a la seguridad y\nautom\u00e1ticamente los echas de la sesi\u00f3n.<\/p>\n\n\n\n<p>Si por otro lado queremos que el certificado SSL funcione en toda la p\u00e1gina web, podemos a\u00f1adir un par de l\u00edneas de c\u00f3digo que hacen que el protocolo est\u00e9 activo en toda la web, tambi\u00e9n en la zona de admin. Revisa esta informaci\u00f3n a partir del minuto 15 del v\u00eddeo que encontrar\u00e1s despu\u00e9s de este art\u00edculo. Ojo, que si queremos que funcione, primero tenemos que tener el certificado activado, \u00bfde acuerdo? <\/p>\n\n\n\n<p>Otra medida b\u00e1sica a realizar cuando terminamos de instalar nuestro WordPress es a\u00f1adir una l\u00ednea de c\u00f3digo que directamente nos elimina todas las opciones para editar (desde el propio panel) los archivos .htaccess, robots.txt y styles.css, por ejemplo. \u00a1Dejar esto accesible es un peligro! \u00bfPor qu\u00e9? Porque imagina que tu cliente tiene acceso a la instalaci\u00f3n completa y se pone a editar estos archivos\u2026 \u00a1Miedito!<\/p>\n\n\n\n<p>Normalmente, para los que nos dedicamos a hacer webs para terceros, debemos dejar que el cliente final tenga acceso al panel de administraci\u00f3n porque \u00e9ste \u201cse empe\u00f1a\u201d. Gracias a incorporar estas variables, tal como nos cuenta Fernando, haremos que el cliente no tenga acceso a cosas \u201cespeciales\u201d que puedan suponer que la l\u00ede muy parda.<\/p>\n\n\n\n<p>\u00bfCu\u00e1ntos de nosotros, \u00abcomo administradores\u00bb, accedemos a nuestro panel de WordPress con el \u00abPerfil de Editor\u00bb porque solo queremos modificar contenido? Normalmente nadie. Lo ideal ser\u00eda entrar como Editor si solo queremos editar contenido y como Administrador si queremos tocar algo m\u00e1s en profundidad&#8230; Nos parece un fant\u00e1stico consejo, \u00a1gracias Fernando!<\/p>\n\n\n\n<p>En cuanto a las carpetas y archivos de nuestro sitio,\ntienen que tener unos permisos por defecto. No es lo habitual, pero si en alg\u00fan\nmomento tuvi\u00e9ramos que asignar estos permisos de manera urgente, tambi\u00e9n\nexisten un par de l\u00edneas de c\u00f3digo que podemos a\u00f1adir para forzar estos\npermisos.<\/p>\n\n\n\n<p>Tambi\u00e9n hay otra cosa, que seguro que muchos de nosotros no lo hemos hecho y es una de las cosas que m\u00e1s 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\u00edsima en la que solo debemos cambiar el nombre del directorio y nadie (especialmente los hackers) sabr\u00e1n que nuestra web est\u00e1 realizada en WordPress. \u00a1Toma trucazo! Lo \u00fanico que tenemos que hacer es mover los contenidos y a\u00f1adir la l\u00ednea de c\u00f3digo aportada por Fernando (en serio, corre a ver el video porque es tremendamente did\u00e1ctico).<\/p>\n\n\n\n<p>Tambi\u00e9n hay cabida en esta completa charla para hablar de la optimizaci\u00f3n, concretamente Fernando nos habla acerca de la cach\u00e9 (y esos archivos que aparecer por arte de magia en nuestro sistema). Por otro lado, tambi\u00e9n nos muestra variables que tienen que ver con la compresi\u00f3n de archivos CSS, Scripts, concatenaci\u00f3n de Scripts, etc. Ahora bien, lo que no podemos hacer es activarlo todo de golpe y que est\u00e9 conviviendo con otras cosas como plugins que ya hacen todo esto, c\u00f3digo adicional a\u00f1adido en functions.php, etc. Mejor ir probando l\u00ednea a l\u00ednea para comprobar que todo sigue funcionando correctamente y pasados 3 o 4 d\u00edas, deberemos valorar si realmente esa optimizaci\u00f3n ha servido para algo.<\/p>\n\n\n\n<p>Lo mismo podemos hacer para ajustar los l\u00edmites de memoria, que suelen venir definidos por el propio hosting y dependiendo de cu\u00e1nto capado est\u00e9, podremos ajustarlo o no.<\/p>\n\n\n\n<p>Una forma de ayudar a que nuestra p\u00e1gina web est\u00e9 mejor\noptimizada (de cara al navegador), es decirle d\u00f3nde est\u00e1 nuestra web, de forma\nque estaremos evitando dos peticiones a la base de datos. <\/p>\n\n\n\n<p>Tambi\u00e9n podemos evitar que un usuario con pocos conocimientos decida cambiar la URL del sitio haciendo un cambio del tipo \u201c<em>vaya, este dominio ya no me gusta, lo cambio por este otro<\/em>\u201d \u00a1Y zas! Web rota. Parece mentira, pero es algo muy com\u00fan entre personas que no son conocedoras de para qu\u00e9 existen ciertas cosas y apartados que no deber\u00edan tocar.<\/p>\n\n\n\n<p>Recuerda que todas estas variables hacen que ayudemos al navegador a que sepa d\u00f3nde est\u00e1n las cosas, de forma que la carga de nuestro sitio web se optimizar\u00e1 y por ende Google nos querr\u00e1 un poquito m\u00e1s.<\/p>\n\n\n\n<p>Tambi\u00e9n podemos definir rutas para decirle donde est\u00e1 la\nhoja de estilos del tema y un n\u00famero m\u00e1ximo de revisiones que permitimos que se\nguarden en la base de datos. Este n\u00famero por defecto es infinito, pero si no\nqueremos saturar nuestra base de datos, deber\u00edamos poner un tope.<\/p>\n\n\n\n<p>A la papelera tambi\u00e9n le podemos indicar los d\u00edas que\npuede mantener los archivos que hemos eliminado.<\/p>\n\n\n\n<p>Otra opci\u00f3n recomendable es reparar la base de datos de\nnuestro WordPress simplemente a\u00f1adiendo una variable y accediendo a una\ndeterminada URL. Una vez hayamos terminado, deberemos quitar esa l\u00ednea de\nc\u00f3digo para que usuarios sin autorizaci\u00f3n no puedan acceder a la misma. <\/p>\n\n\n\n<p>Como sab\u00e9is cada vez que instalamos WordPress viene con 3 temas instalados por defecto, un plugin de ejemplo\u2026 Pues si nosotros los borramos y luego WordPress se empe\u00f1a en volverlos a instalar, podemos decirle que no moleste y que no nos los recuerde m\u00e1s.<\/p>\n\n\n\n<p>Cuando no sepamos cu\u00e1l es el host de nuestro base de datos (recuerda que la mayor\u00eda de veces es \u201clocalhost\u201d), podemos a\u00f1adir un valor espec\u00edfico y as\u00ed WordPress intentar\u00e1 resolver el problema localizando el nombre del host en cuesti\u00f3n. <\/p>\n\n\n\n<p>Otra curiosidad es que existe una papelera para los\nmedios, al igual que existe para p\u00e1ginas y entradas, y de este modo\nactivar\u00edamos a\u00f1adiendo una sencilla l\u00ednea de c\u00f3digo un bot\u00f3n para poder enviar\nlas im\u00e1genes a la papelera.<\/p>\n\n\n\n<p>Algo que existe desde siempre y que hab\u00eda ca\u00eddo en desuso\nes el SHORTINI, un recurso que se est\u00e1 volviendo a utilizar si lo que queremos\nes cargar lo esencial de nuestra plataforma en otro gestor distinto.<\/p>\n\n\n\n<p>Tambi\u00e9n debemos saber que si editamos una imagen con el\neditor que trae WordPress, nos guarda tanto el orginal como la copia, pues\nbien, con una sencilla l\u00ednea de c\u00f3digo podemos evitar que guarda la original.<\/p>\n\n\n\n<p>Tambi\u00e9n podemos ajustar el intervalo de autoguardados del editor.<\/p>\n\n\n\n<p>El arreglaproblemas por excelencia es el de programar entradas y que por la raz\u00f3n que sea\u2026 no se publican. Pues si a\u00f1adimos la constante correspondiente se soluciona el problema de un plumazo.<\/p>\n\n\n\n<p><strong>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.<\/strong><\/p>\n\n\n\n<p>Y para finalizar, como EXTRA, Fernando nos recomienda proteger nuestro wp-config.php, \u00bfc\u00f3mo? A\u00f1adiendo las l\u00edneas de c\u00f3digo que encontrar\u00e1s en su video y si quer\u00e9is una doble protecci\u00f3n, lo puedes mover a un directorio superior (WordPress seguir\u00e1 funcionando). Como adem\u00e1s es un archivo muy sensible, nos recomienda cambiarle los permisos a 444 y listo.<\/p>\n\n\n\n<p>Para aprender todav\u00eda mucho m\u00e1s Fernando nos deja unos\nenlaces muy interesantes al final del video que te recomendamos revisar. \u00a1No te\nlos pierdas!<\/p>\n\n\n\n<figure class=\"wp-block-embed-videopress wp-block-embed is-type-video is-provider-videopress wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='525' height='295' src='https:\/\/video.wordpress.com\/embed\/9GZnoYTP?hd=0&amp;cover=1' frameborder='0' allowfullscreen allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-button is-style-squared\"><a class=\"wp-block-button__link has-background has-luminous-vivid-orange-background-color\" href=\"https:\/\/2019.valencia.wordcamp.org\/files\/2019\/10\/wp-config-fernandot.pdf\">Descargar presentaci\u00f3n<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">8. C\u00f3mo acertar el tipo de letra de tu web por <a href=\"https:\/\/2019.valencia.wordcamp.org\/speaker\/ana-cirujano\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Ana Cirujano<\/a>.<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"432\" src=\"https:\/\/2019.valencia.wordcamp.org\/files\/2019\/08\/ponentes_Ana-Cirujano.jpg\" alt=\"\" class=\"wp-image-1947\" srcset=\"https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Ana-Cirujano.jpg 769w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Ana-Cirujano-300x169.jpg 300w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Ana-Cirujano-768x431.jpg 768w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes_Ana-Cirujano-500x281.jpg 500w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p><strong>Ana Cirujano<\/strong> es una apasionada de WordPress y muy activa de la Comunidad coordinando, organizando y asistiendo a much\u00edsimas WordCamps. Adem\u00e1s, se ha especializado en dise\u00f1o editorial y employer branding y, aplicado al dise\u00f1o y desarrollo web, nos cuenta un mont\u00f3n de trucos para escoger de forma acertada, las tipograf\u00edas para nuestros proyectos, porque no nos olvidemos que tan importante es la programaci\u00f3n, como el dise\u00f1o y el mensaje que transmitamos en nuestro sitio web.<\/p>\n\n\n\n<p>\u00a1Y teniendo en cuenta que el pr\u00f3ximo a\u00f1o <strong>Valencia ser\u00e1 la capital del dise\u00f1o<\/strong>, no te puedes perder todo lo que Ana nos aconseja!<\/p>\n\n\n\n<p><strong>La tipograf\u00eda es el traje con el\nque vestimos a las palabras.<\/strong><\/p>\n\n\n\n<p>Con la tipograf\u00eda comunicamos m\u00e1s 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\u00f3n con las prendas de vestir. Si preguntamos a un usuario, \u00bfqu\u00e9 prenda es tu favorita? Probablemente nos responda que para ir a un evento prefiere un traje y para salir a correr unos pantalones c\u00f3modos. Con la tipograf\u00eda ocurre lo mismo, <strong><em>dependiendo de lo que queramos comunicar en una p\u00e1gina web, utilizaremos una tipograf\u00eda u otra.<\/em><\/strong><\/p>\n\n\n\n<p><strong>No es suficiente con escoger el\ntipo de letra id\u00f3neo para nuestro proyecto, la composici\u00f3n, tambi\u00e9n cuenta.<\/strong><\/p>\n\n\n\n<p>Un uso muy\nhabitual, para una buena composici\u00f3n, es usar una tipograf\u00eda con serifas para\nlos t\u00edtulos y una m\u00e1s sencilla, sin adornos, para los p\u00e1rrafos. Esta misma\ncombinaci\u00f3n, la podemos utilizar pero a la inversa. De esta manera, el usuario\nva a diferenciar r\u00e1pidamente lo que son t\u00edtulos, de los p\u00e1rrafos. En los\nt\u00edtulos podemos utilizar tipograf\u00edas de mayor tama\u00f1o, e incluso con m\u00e1s\ndetalle\/adornos. En cambio, si us\u00e1ramos fuentes con adornos o mucho detalle en\nlos p\u00e1rrafos, estos adornos no se diferenciar\u00edan bien y con toda probabilidad,\nel texto ser\u00eda de dif\u00edcil lectura para el usuario. <strong><em>La clave es usar para los t\u00edtulos\nesas tipograf\u00edas m\u00e1s especiales, donde queremos expresar la personalidad del\nproyecto, y en los p\u00e1rrafos, tipograf\u00edas que nos faciliten la lectura.<\/em><\/strong><\/p>\n\n\n\n<p><strong>\u00bfPero c\u00f3mo escogemos esas\ntipograf\u00edas?<\/strong><\/p>\n\n\n\n<p>Ana nos lo deja\nclaro, incluso en el turno de preguntas, nos dice que no hay una tipograf\u00eda que\nsea perfecta para cualquier web, sino que va a depender del mensaje\/tem\u00e1tica\nque consista nuestro proyecto. Ahora bien, podemos tener en cuenta estos\nconsejos gen\u00e9ricos para escoger nuestra tipograf\u00eda:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Optimizaci\u00f3n de las tipograf\u00edas:<\/strong> Usa fuentes optimizadas para entornos digitales (pantallas). Una tipograf\u00eda optimizada no se ver\u00e1 pixelizada y tendr\u00e1 aplicada la t\u00e9cnica de \u201chinting\u201d.<\/li><li><strong>Tipograf\u00edas abiertas:<\/strong> F\u00edjate en la letra \u201ca\u201d y \u201ce\u201d de la tipograf\u00eda que vas a usar. Cuanto m\u00e1s abiertas sean, mucho mejor, ya que evitaremos que se confundan con otras letras como la \u201co\u201d. Un claro ejemplo lo vemos si comparamos la tipograf\u00eda \u201cRoboto\u201d y la \u201cHelv\u00e9tica\u201d. Esta \u00faltima, al ser m\u00e1s cerrada, dificulta la lectura al usuario.&nbsp; <\/li><li><strong>Altura de las letras:<\/strong> Cuanta m\u00e1s alta sea la tipograf\u00eda, mejor se va a leer. F\u00edjate en la altura de la letra \u201cx\u201d. Incluso en la propia letra, cuanta menos diferencia de altura haya entre may\u00fasculas y min\u00fasculas, mejor se leer\u00e1 lo que hayas escrito.<\/li><li><strong>Grosor de la tipograf\u00eda:<\/strong> Aunque en dise\u00f1o en papel usar una tipograf\u00eda fina puede quedar muy \u201ccool\u201d, en versi\u00f3n digital, seguramente te est\u00e9s jugando que el p\u00e1rrafo casi no se pueda ni leer. As\u00ed que en entorno digital, \u00a1olv\u00eddate de tipograf\u00edas finas!<\/li><\/ul>\n\n\n\n<p><strong>Adem\u00e1s,\nno te olvides de:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Kerning:<\/strong> Usa una fuente que tenga bien ajustado la distancia entre las letras.<\/li><li><strong>Legibilidad en botones, men\u00fa y textos peque\u00f1os:<\/strong> Escribe la vocal \u201cI\u201d may\u00fascula, la letra \u201ci\u201d min\u00fascula y el n\u00famero \u201c1\u201d. Si son diferentes, esta es una buena tipograf\u00eda para usar en este tipo de texto.<\/li><li><strong>No mezcles si no es necesario:<\/strong> Si hay 2 tipos que son muy similares, mejor utiliza solo uno.<\/li><li><strong>Mapa de caracteres:<\/strong> Aseg\u00farate de que la tipograf\u00eda tiene todos los caracteres que vas a necesitar.<\/li><li><strong>Versatilidad:<\/strong> Es mejor usar una tipograf\u00eda con muchas versiones (normal, cursiva, bold, extra bold, etc).<\/li><\/ul>\n\n\n\n<p>Para finalizar, Ana nos da algunos datos interesantes sobre la <strong>evoluci\u00f3n de la tipograf\u00eda<\/strong> desde 1996, donde se usaban para dise\u00f1ar las fuentes de sistema que ven\u00edan en nuestros ordenadores, y la evoluci\u00f3n hasta 2016, donde aparecen las extraordinarias <strong>fuentes variables<\/strong>, donde, con una sola tipograf\u00eda, tenemos muchas opciones de dise\u00f1o. \u00bfEs magia? No, es la evoluci\u00f3n\u2026 porque la tipograf\u00eda, como cualquier rama del arte, del dise\u00f1o y de la programaci\u00f3n, est\u00e1 en continua evoluci\u00f3n. Esperaremos ansiosos a ver qu\u00e9 nos depara este apasionante mundo de la tipograf\u00eda, o como dice Ana, \u201cel traje de las palabras\u201d. <\/p>\n\n\n\n<figure class=\"wp-block-embed-videopress wp-block-embed is-type-video is-provider-videopress wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='525' height='295' src='https:\/\/video.wordpress.com\/embed\/hUm5vIfz?hd=0&amp;cover=1' frameborder='0' allowfullscreen allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-button is-style-squared\"><a class=\"wp-block-button__link has-background has-luminous-vivid-orange-background-color\" href=\"https:\/\/2019.valencia.wordcamp.org\/files\/2019\/10\/WC-Valencia-Elegir-tipo.pdf\">Descargar presentaci\u00f3n<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">9. Mesa redonda: <\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/2019.valencia.wordcamp.org\/files\/2019\/08\/ponentes-mesa-redonda.jpg\" alt=\"\" class=\"wp-image-3259\" srcset=\"https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes-mesa-redonda.jpg 768w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes-mesa-redonda-300x169.jpg 300w, https:\/\/valencia.wordcamp.org\/2019\/files\/2019\/08\/ponentes-mesa-redonda-500x281.jpg 500w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>Contamos con grandes profesionales como son <strong>David P\u00e9rez<\/strong>, <strong>Pablo Viedma<\/strong>, <strong>Alicia Cardete<\/strong>, <strong>Dani Serrano<\/strong>, <strong>Alice Orr\u00f9<\/strong> y<strong> Ricardo Vilar<\/strong> para debatir sobre \u00ab<strong>C\u00f3mo ser mejor profesional aprendiendo \u00abde todo un poco\u00bb o superespecializarse en algo concreto<\/strong>\u00ab<\/p>\n\n\n\n<figure class=\"wp-block-embed-videopress wp-block-embed is-type-video is-provider-videopress wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='525' height='295' src='https:\/\/video.wordpress.com\/embed\/Efj4Np3t?hd=0&amp;cover=1' frameborder='0' allowfullscreen allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>Y esto fue todo en nuestro Track 1, de aqu\u00ed pasamos a tomar \u00abhorxata i fartons\u00bb y un poquito m\u00e1s tarde\u2026 \u00a1Nuestra After-party!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continuamos con las ponencias del Track 1 despu\u00e9s de la comida: 6. Bloques reutilizables, plantillas de bloques y otras hierbas por Jos\u00e9 \u00c1ngel Vidania Jose \u00c1ngel Vidania, tambi\u00e9n conocido como \u201cEl ni\u00f1o de los bloques\u201d es dise\u00f1ador web freelance de Alcal\u00e1 de Henares y lleva utilizando WordPress como herramienta de trabajo desde finales de 2005. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/valencia.wordcamp.org\/2019\/todas-las-ponencias-track-1-tarde\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abTodas las ponencias: Track 1 tarde\u00bb<\/span><\/a><\/p>\n","protected":false},"author":6368822,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-3382","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paMxYZ-Sy","_links":{"self":[{"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/posts\/3382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/users\/6368822"}],"replies":[{"embeddable":true,"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/comments?post=3382"}],"version-history":[{"count":12,"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/posts\/3382\/revisions"}],"predecessor-version":[{"id":3482,"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/posts\/3382\/revisions\/3482"}],"wp:attachment":[{"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/media?parent=3382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/categories?post=3382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/valencia.wordcamp.org\/2019\/wp-json\/wp\/v2\/tags?post=3382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}