 Cirujano, experta en diseño y tipografía, nos va a hablar ahora de ortotipografía para WordPress. Un aplauso, por favor. Bueno, muchas gracias por haber venido, por haber elegido el track A. Sois unos freaky's, porque desde luego este tema es una fricada. Muchas gracias, sobre todo, a la organización por haberme dado la oportunidad de estar hoy aquí y disfrutar nueve más de una WorldCamp, que tal, cómo lleváis el día. Muy emocionante ¿no? WorldCamp Zaragoza. Mañana, no quiero que se me olvide, que vamos a estar en la mesa de diseño del contributor de ahí, colaborando con el diseño de WordPress, así que os animo a todos a que vengáis, incluso si no queréis participar en diseño hay otras muchas mesas de traducciones, de marketing, va a ser muy interesante, muy divertida, así que os invito a todos a que vengáis. Y vamos a empezar con ortotipografía. Antes me presento, yo soy diseñadora, he estado pues muchos años antes de dedicarme al diseño web, me he dedicado al diseño editorial, he hecho un montón de libros, revistas, catálogos y toda esta formación es la que me ha permitido ahora, aplicar esos conocimientos de tipografía a la web. Es algo que realmente no se hace mucho, a menudo veo muchas webs que tienen una tipografía poco cuidada, una ortotipografía inexistente y como yo estoy muy involucrada con la comunidad WordPress porque WordPress me da de comer, yo me dedico a hacer páginas web para mis clientes, pues mi ambición es mejorar el diseño de las webs que están hechas con WordPress, por eso vengo aquí voluntariamente hoy a compartir un poquito de este tema con vosotros. Lo primero que es ortotipografía, algunos de vosotros no sabréis lo que es. Es una palabra un poco rara, está compuesta por la palabra ortografía. La ortografía pues son las normas que tenemos que seguir cuando escribimos, una norma de uso. Las conocemos todos desde el colegio, bueno no todos. Realmente reconozcamos que no todos nos sabemos todas las reglas de ortografía, de hecho es muy difícil por mucho que hayamos leído, cuanto más les mejor ortografía tienes pero es verdad que muchas veces pues tienes dudas, las dudas ortográficas son sobre todo la G, la J, hay ciertas normas que muchas veces tenemos que mirar el diccionario para no meter la pata, pero sí que decir que como código de comunicación pues es imprescindible compartir la misma ortografía pues es evidente, pero además, además de seguir unas normas para que todos nos entendamos y no haya ambigüedades, lo importante de la ortografía es que es una buena ortografía, valga la redundancia, es nuestra mejor carta de presentación cuando nos comunicamos por escrito, entonces nuestra página web que la usamos para comunicar pues queremos que tenga una buena ortografía y es donde entramos cuando entramos, perdón, en la tipografía, el momento que nace la imprenta se deja de escribir a mano y se pasa a componer una a una las letras y empezamos a tener unas normas diferentes para componer esos textos, después nosotros con las máquinas de escribir somos los que componemos los textos nosotros mismos y hoy en día escribir a mano, habéis escrito a mano últimamente, yo tengo una letraja que en mayúsculas todavía bueno pero en minúsculas es horrible porque no escribimos nunca, utilizamos ya siempre los procesadores de texto y nosotros especialmente pues hemos estado muchos años utilizando este, el tiny MC y ahora todos todos todos nosotros utilizamos este que es el noveditor de bloques de WordPress, entonces las normas que tenemos que utilizar cuando escribimos aquí en esta cajita en este bloque mejor dicho pues es la ortografía, os acordáis de la primera vez que escribisteis en un teclado, este fue mi primer teclado, yo tengo unos hermanos mayores que heredaron el comodore 64, le he preguntado a mi hermano y me ha dicho que no, que primero fue un vitec laser 2000, digo bueno yo eso no me acuerdo, además he visto la foto y no tenía ni barra espaciadora, digo yo de eso no me acuerdo pero me acuerdo de este del comodore 64 que tenía unas tintas y jugaban ahí cuando la primera vez que te enfrentas a un teclado tienes que aprender dónde va la coma, como es palabra, espacio, coma, palabra, no sabemos eso porque no es una norma de ortografía que tengamos cuando escribimos a lápiz o a boli, es una norma ortotipográfica nueva que nace con los teclados, entonces aprendes que la coma se pone palabra, coma, espacio, palabra y todas esas normas de ortotipografía son muchas y hoy os voy a dar unos pequeños tips, las más importantes, las que me parecen a mí básicas, las que más me duele los ojos cuando las veo y pero eso va a ser una introducción, tampoco os voy a machacar mucho con eso, alguien sabe lo que son estos signos, podéis levantar la mano por favor, lo que sepáis, vale pues editores, correctores, personas que habéis escrito un libro, que os habéis familiarizado con estas cosas, yo como he hecho muchos libros pues yo tenía cuando haces un libro existe la figura del corrector, entonces el corrector utiliza estos signos para indicarte que tienes que cambiar la sangría o que tienes que cambiar el orden de las palabras, que han bailado letras, todos estos errores que se llaman erratas, te los indica con estos signos, entonces suelen quedar así los textos, los imprimes y la persona con el boli porque además las erratas se ven impresas, en la pantalla no las ves, cuando lo imprimes y sobre todo cuando tienes el libro publicado y abres la primera página ahí es cuando ves la errata, pero la pantalla no se viene, entonces hay que imprimir, ¿no? ¿Qué ocurre que en las webs no hay presupuesto para contratar, en la mayoría de las webs no hay presupuesto para contratar a un corrector? Entonces los que no tenemos la formación suficiente pues cometemos muchos errores, todos los que no están en esta sala, pero nosotros, ya no vamos a cometer más errores, lo primero que hacemos para empezar a tener una ortotipografía es la limpieza de textos y para que comprendáis la siguiente tipografía y compartamos el mismo código, este es el símbolo que he utilizado para indicar el espacio en blanco, para que comprendáis esto, lo primero que hacemos después de redactar el texto, quitar los espacio, espacio, espacio, o espacio, espacio, espacio, espacio, borrar nunca va a ser correcto que haya dos espacios en blanco seguidos, entonces tenemos que cargárnoslo, también espacios antes de los signos de puntuación porque ya sabemos que la coma va seguita de la palabra anterior y el espacio va después de la coma, espacios antes y después de los signos de apertura y cierre, hay veces, sobre todo en publicidad que no tiene un corrector o un buen corrector, que la gente se los ocurre poner, interrogación, espacio, palabra y luego el espacio cierre como para que ocupe más o no sé, lo veo mucho esto y es horrible, es una falta de ortografía. Particiones de línea, me encanta esta entidad HTML es mi preferida porque es súper útil. Cuando indicamos un valor, siempre tenemos que acompañarla de lo que es, pues 310 personas. En un libro esto, el editor cogería el bolí rojo y lo tacharía, esto está mal, arreglalo, nunca puede ir separado porque dificulta la comprensión, la lectura, tenemos que unirlo siempre, esto es incorrecto, entonces siempre utilizamos un espacio de no separación entre las cifras y el valor, eso sería lo correcto, utilizamos siempre un espacio de no separación, sirve también para que las líneas se partan por donde nosotros queramos, unimos para que no se partan por donde no se tienen que partir. Bueno Ana y yo, ¿cómo pongo eso del NBSP? ¿En dos puntos? ¿Cómo va? No pasa nada, Wordpress nos ayuda y en Gutenberg podemos, si pinchamos en los tres puntitos del menú, nos da la opción de editar como HTML, entonces podemos directamente editarlo como HTML en abrir el editor clásico porque el nuevo han decidido que no es algo que utilice mucha gente, entonces que este territorio plugin lo han sacado, hay un ticket abierto para volver a incluirlo, pero todavía no lo tenemos, entonces utilizamos el editor clásico, carácter especial, ay no, perdón, perdón, me estoy liando, me estoy pasando. En el editor clásico si podemos editar, en Gutenberg si podemos editar con HTML y si no nos recordamos bien de cómo es, volvemos al editor clásico, ahora sí, recuperamos el símbolo omega que indica el carácter especial y se nos abre esto, que para mí es impresionante, esta tabla hay carácter especiales porque aquí tenemos un montón de caracteres de los que voy a hablar ahora y entre ellos tenemos el non-breaking space, entonces simplemente lo insertamos, doble click y ya está, no tenemos que aprendernos el código, perdón que se mezclaba hasta las cosas, más cosas, los números, sabíais que hay números mayúsculos y minúsculos, pues existen, se llaman también capitales que son los mayúsculos y los elcevirianos que son los minúsculos y lo correcto es cuando van números sueltos, por ejemplo pues en precio en bucomers pues lo pondríamos en números mayúsculos capitales, pero los números que van en los párrafos se ponen en minúsculos, si os fijáis, no sé si se ve bien la línea roja sí, si os fijáis los elcevirianos, los minúsculos tienen ascendentes y descendentes como las palabras que tienen también pues la D tiene un ascendente, la P tiene un descendente, de esta manera los números a simple vista no destacan en el texto, se ve la mancha gris uniforme que es lo que siempre se pretende, no llamar la atención si no queremos, siempre tenemos que mantener una armonía para no que nadie diga de esta manera pues conseguimos eso y cómo ponemos esto, cómo podemos diferenciarlo, en este caso tenemos que utilizar CSS, simplemente podríamos decir los mayúsculos son los lining que van en la línea y los minúsculos son los all style, le damos una clase a esa palabra con un spam por ejemplo y le aplicamos ese código CSS, si estamos haciendo tablas, estamos haciendo una web con datos tabulados, podemos utilizar los números tabulares que se utilizan, la diferencia de los proporcionales en que no tienen un espacio diferente para cada número, sino que ocupan todo ese mismo espacio, entonces están todos uno debajo de otro, no se mueve, aquí en la derecha no vemos muy bien cuál está debajo de cuál, sin embargo en el de la izquierda pues se ve perfectamente, lo mismo tenemos que utilizar CSS para los tabulares y para los proporcionales, fracciones, también tenemos con las características OpenType, tanto para los números como en este caso para las fracciones, lo podemos escribir correctamente, a veces cuando es un medio que es una cosa muy corriente, muy habitual, pues sí que aparecen los caracteres especiales, directamente es un carácter de un medio, entonces hacemos doble clic y aparece, pero si queremos poner tres octavos por ejemplo, pues sí que tenemos que indicar que ponga el diagonal fractions, para que nos lo ponga de esa manera, igualmente para los subíndices y superíndices, también tenemos que tenerlo en cuenta, cuando es 1, 2, 3, creo que es hasta 3, sí que aparece en la tabla de carteres especiales, pues si queremos poner octavo, pues ya tenemos que utilizar el CSS ordinal, y la tipografía que utilicemos tiene que tener dibujado eso, no es que lo haga el navegador, es que en la tipografía esa fracción o esos números, tanto mayúsculos como minúsculos, ya están, el diseñador de la tipo ya lo ha dibujado y ya es un carácter, entonces bueno, pero que Google Font tenemos para que podamos utilizar con estas características que nos indican, bueno, pues hay una web que se llama code thisairmy.com, tenéis las presentaciones, tanto la mía como la de todos los ponentes disponibles, supongo que están en la web de la WorldCam, si no a mí me la pedís y os la envío, esta web nos dice qué Google Font tiene, qué características, aquí veis por ejemplo SourSans, que tiene pues un montón, un montón de características, tiene tantos ordinales, como los números mayúsculos y minúsculos, pues todo esto, entonces vamos a esta web, miramos a ver qué tipografía tiene las características que queremos utilizar, podemos incluso probarlo a ver cómo se ve, y así podemos utilizar esa fuente en concreto que tiene esas características. ¿Cuántos de vosotros veis un error en esta diapositiva? ¿Podéis levantar la mano por favor? Pocitos, pero bueno, aún hay esperanza, esto es un error, esto del editor, al corrector, cogería el boli rojo y por favor, esto qué es, aquí que pone, aquí pone 2x1, realmente lo que queremos hacer es 2x1, la oferta típica, aquí no pone 2x1, aquí ponen 2x1, porque eso es una X, el carácter para multiplicación es un ASPA, vais a ver la diferencia, ahora sí, ¿no? Esto sí mira, X, ASPA, qué bonito, ¿no? Esto es precioso, claro, yo veo esto en internet, en vuestras webs, y digo, pero si es tan fácil y queda tan bonito, vamos al mapa de caracteres y elegimos el ASPA de multiplicar, no cuesta nada. Y además, ya para notas, si le ponemos un espacio de separación para que no se te vaya al siguiente renglón y se quede siempre ahí y pase todo al siguiente renglón si es necesario, pues ya queda, vamos, de lujo. Vamos con los títulos, esto no es un título, yo veo esto, es bueno Ana, pero si antes has puesto títulos así arriba del todo, ya, pero esto no es un título, no es un título porque lleva un punto, los títulos no llevan punto, la norma es que los títulos no llevan punto, entonces esto no puede ser un título, será un párrafo destacado, pero no es un título. Y esto sí es un título a pesar de que van mayúsculas, siempre decimos que no hay que escribir mayúsculas, en internet es gritar y además tienen mucha menos legibilidad a las mayúsculas, entonces no hay que escribir mayúsculas, pero sí se puede hacer en los títulos cortos para destacar, siempre en web y en cualquier composición de diseño, hay que jerarquizar para facilitar al usuario al lector que identifique muy rápido que es un título que es lo más importante, que es lo menos, y esta es una forma de jerarquizar, ponerlo en mayúsculas, está bien, es correcto. Lo que no es correcto es esto, si vais a tener títulos largos en la web, no los pongáis en mayúsculas porque esto no hay que lo lea, lo de la partición de palabras con guiones, pues en la web todavía no se puede hacer, hyphen todavía no lo soportan todos los navegadores, pero aun así no partáis con guiones los títulos, ni en vuestras presentaciones, ni en vuestra webs, y si son títulos largos siempre componerlos en minúsculas, salvo las palabras que tengan que ir en mayúsculas porque sean nombres propios o por lo que sea. Bueno, esto es un palabra de cursos diácríticos, nada, esto es la cursiva, la negrita y la versalita. Cursiva es las palabras que van en cursiva, las que no van en redonda, luego la negrita y la versalita, supongo que lo conoceré. No vamos a repasar un poco, no quiero aburrir porque esto es un poco, creo que todos lo conocemos, pero sí quiero comentar que, bueno, tanto no solo la cursiva, sino tanto la cursiva como la negrita y la versalita, si queremos poner una palabra, una frase en cursiva, en nuestra web tenemos que tener el archivo de la cursiva instalado en nuestra web o llamarlo desde well funds, es un archivo distinto, salvo si utilizamos fuentes variables que ya sabéis que es un único archivo para todas las variaciones. Si no utilizamos un archivo específico de fuente para la cursiva, entonces va a pasar esto, veis la diferencia, cursiva que está escrito, la A, sobre todo en la A se nota mucho, la cursiva es completamente distinta, está diseñada a propósito para que sea cursiva, no es solo inclinada, es una letra especial. Si no lo hacemos, si no instalamos el archivo, entonces nuestro navegador sabe lo que es una cursiva y la inclina, pero el navegador no puede hacer el dibujo de la A diferente, por eso tenemos que cuidar esto y utilizar fuentes que tengan cursivas verdaderas. Usos de la cursiva, pues cuando decimos nombres de películas, de libros, de blogs, cuando queremos hacer una distinción dentro de una palabra, para remarcarlo, también cuando hacemos definiciones de palabras, los artículos del Wordpress se llama la entrada, para hacer énfasis sobre una palabra en concreto para que te fijes, estoy diciendo desarrollador, esa voz diferente se dice así con cursiva, o cuando ponemos palabras mal escritas a propósito, me gusta el Wordpress, lo mismo con la negrita. Aquí tenéis que hacer un acto de fe, yo os digo que la de arriba es de verdad y la de abajo es de mentira, porque la de arriba está diseñada por el diseñador de tipos, lo he dibujado y la de abajo simplemente tiene más grosor. Entonces, ¿qué ocurre? Bueno, os he puesto aquí un poco de zoom. Si os fijáis, no se ve muy bien, pero si os fijáis donde he puesto los círculos, la de abajo tiene un grosor muy grande, no está tan estilizada, no tiene tanta módula de dirección como el de arriba, no tiene tampoco tanta forma de arriba como la de abajo, la letra pierde su esencia, entonces utilicemos negritas verdaderas, el archivo de la negrita para que sean negritas de verdad, no solo un poco más gorditas y ya, sino que esté bien dibujado, no pierda la forma, la tipografía. La negrita ya, ya sabemos, se utiliza en títulos para diferenciar los de los párrafos, para generalizar, si queremos destacar algún párrafo, que por cierto no ponemos H2 o H3 porque sean más grandes, sino que tenemos que dar una clase específica para destacar esos párrafos que siguen siendo párrafos, aunque sean destacados, no tienen jerarquía. O si queremos poner de releve algo, tampoco pongáis todo en negrita porque si todo destaca nada destaca. Y las versalitas es una cosa que no se utiliza mucho, pero bueno, tenía que hablar de ellas, se utiliza para los números romanos, cuando la palabra que antecede va en minúscula y si va en mayúscula, como el rey por ejemplo, se siguen usando mayúsculas. Y lo de las siglas, era una norma que había que usar versalitas para las siglas, pero hay quien dice que no, que es que destacan más porque las versalitas son minúsculas que tienen aspecto de mayúsculas y son un poco más anchas, y se utilizan para que, porque si fuera mayúscula destacaría demasiado, entonces se hace versalita para que no destaquen esa mancha gris. Pero en el caso de las siglas hay quien lo utiliza y quien no, porque si no es que ya más, está más, la recién que si fuera una mayúscula. En todo esto de la ortografía y la ortotipografía hay estilos, pero lo importante es tomar una decisión y ser coherente. Mira yo no pongo versalitas en las siglas porque me parece que destaca mucho, vale pues no la pongas nunca, entonces siempre todos los medios de comunicación pues tienen sus libros de estilo para servirlo, no pasa nada, seguimos la norma o nuestra norma, pero lo importante es ser coherente. Las comillas, quien lo ven correcto de esto? Vale mucho, estos son comillas anglosajonas, no son españolas, el texto está en español, pues con comillas españolas, no? Angulares, españolas, estas son las comillas nuestras, tenemos que usarlas. Claro, y las otras nunca las usamos, sí, sí las usamos cuando en una frase entre comillada necesitamos entrecomillar alguna palabra y si tenemos incluso dentro de eso unas comillas o más comillas pues lo ponemos las comillas simples. La raya, esto también lo veis incorrecto, ¿no? Lo vemos incorrecto, no lo veis incorrecto, bueno a partir de ahora lo vais a ver incorrecto porque estos incisos y los diálogos también se ponen con raya o guión largo, esto es no correcto, el de abajo, lo de arriba es lo que usamos todos, bueno yo no, y es muy incorrecto, es muy incorrecto. Y tenemos nuevamente el mapa de caracteres, clink, clink, y acertamos el guión largo, no tenemos ningún problema. Si os parece un rollo, lo de abrir el mapa de caracteres, cambiar el editor clásico para encontrarlos, yo lo que hago es aprenderme de memoria los atajos de teclado, cada vez que quiero poner un guión largo pues al 0151, las comillas y el aspa de multiplicar, mi favorito. Entonces bueno os dejo aquí tanto para Windows como para Mac y con esto acabo, lo que sí que quiero decir es que si os ha parecido un poco rollo o un poco exagerado utilizar estos caracteres os invito a que lo hagáis porque la excelencia está en los detalles. Muchas gracias. Una cosa, me han pedido los de la organización que os diga que ahora después del turno de preguntas vamos a hacernos la foto de grupo y vamos a salir a la calle por la misma entrada por la que hemos entrado y nos van a indicar dónde tenemos que ir, ahora nos vamos todos a, correcto, yo no lo voy a decir porque en Wordpress.tv no se pueden decir palabras, sabes que todas las charlas se graban y luego las podemos ver en Wordpress.tv, las que nos hemos perdido porque estamos aquí, las podemos ver luego en casa. Pues venga, preguntarme algo. No sé, no tenemos mucho tiempo pero si hay alguna pregunta, una o dos caben todavía. Alguien quiere preguntar? Buenas, muchas gracias. Yo quería preguntar, yo por ejemplo, haciendo hacer todo bastante bien o eso creo más o menos como comentabas, ¿no? Gracias. Lo que pasa es que sí que me ha llamado la atención un par de detalles que no aplico y que a partir de ahora voy a intentar aplicar. Pero, por ejemplo, ahora con el Wordpress, etcétera, si quiero hacer todo bien ¿cuánto me costaría en tiempo más que si lo hago normal? Pues depende del texto, si tiene muchas necesidades o pocas pero estoy trabajando en un plugin para que esto sea muchísimo más fácil. Así que os avisaré. Vale, pues estaremos atentos a esto porque tiene buena pinta, sobre todo porque a mí me preocupa un poco esto, ¿no? El digo, vale, si lo hago todo bien, que son cinco minutos más. Es excelencia, si a lo mejor estás en tu blog, bueno, en mi blog no quiero ser excelente pero también te digo que si estás ligando y la otra persona ve tus faltas a lo mejor se le cae todo al suelo. Sí, no, no. A mí me pasa. Pero a lo mejor, bueno, dices, no me importa, no estoy ligando, pues puedo poner faltas. Pero si tienes un trabajo en el que tienes que poner fórmulas matemáticas o que tienes un buen presupuesto y venga, vamos a ser excelentes. Nos acordamos de la ortotipografía y yo incluso mis presupuestos pongo ortotipografía y lo explico. No voy a tener esto en cuenta porque te hago y usted. Quedas bien, quedas mejor. Es algo que muy poca gente hace y que nosotros los que trabajamos con Wordpress sí hacemos. A partir de ahora. Muchas gracias. Hola, ¿qué tal? Mira, en las listas, ¿tanto ordenadas como no ordenadas, empezar con mayúscula, minúscula, finalizar con punto, ¿no? El estilo, el estilo. Yo suelo dependiendo de cómo sea la lista. Si parece que es una frase pero que la has separado en una lista, pero no es que es un poco complejo sin tenerlo visualmente, pero si es a veces requiere que sea minúscula detrás de esa mayúscula, si son cosas muy distintas o si realmente me gustan la margalita, las rosas y las no sé qué pues si que puedes a lo mejor todo minúscula pero si dices lo que a mí me gusta es dos puntos, flores, macetas y no sé qué pues ahí lo pones en mayúscula. Lo importante es como decía, tener un libro de estilo y seguirlo. Lo puede ser que pongas minúsculas en una página y estaba pensando en el libro pero bueno la web está en la página y luego en otra que es de la misma naturaleza lo pongas en mayúscula, es igual que pero ponemos punto al final de cada de cada item de la lista o no pues depende si está en minúscula no va a punto. Si pones punto, el siguiente intento de la lista sí va en mayúscula. Como decía antes no nos sabemos todas las normas, yo consulto tengo un libro el que más sabe de esto en España es José Martínez de Sonsa que es un maestro que a mí me encanta y tiene un tocho así que bueno yo lo consulto a menudo claro no te lo sabes o no te acuerdas o hay que consultarlo y ya está pero eso seguir el criterio. Vale pues muchísimas gracias a todos