Hola, en la conferencia de hoy, vamos a hablar de diseñar su texto en sus páginas web. Una de las mejores y más fáciles maneras de hacer que su página tenga un aspecto un poco diferente al predeterminado estándar es pensar en cómo podría querer darle estilo a su texto para obtener el máximo impacto. Tantas, muchas opciones y vamos a hablar de algunas de ellas hoy. Una de esas opciones es pensar básicamente en su fuente. Algunas de las cosas que puede aplicar estilo son la familia de fuentes, el estilo de fuente, la variante de la fuente y el tamaño de la fuente. También podemos pensar en diseñar el color y el fondo de su fuente. Podemos hablar de alineación también. Y finalmente, vamos a hablar muy brevemente sobre la altura de la línea. Estas son las cuatro cosas que puedes hacer para resaltar o enfatizar las diferentes cosas que te gustaría que tu estilo produzca. Así que primero vamos a hablar de la familia de fuentes. Las familias de fuentes son sólo diferentes tipos de texto. Por lo tanto, si ha utilizado Word antes, ha entrado, ha ido a la familia de fuentes y puede elegir Arial o Wingdings o todos estos tipos diferentes de fuentes. Puedes hacer las mismas cosas en tu página web. Así que tengo un par de ejemplos aquí arriba para ti de los más comunes. Tienes Helvetica, Courier, Courier New, Comic Sans, cursive o Verdana. Intenté poner el tipo de fuente aquí en la diapositiva, pero podría ser difícil para ti verlo. Y como que hice eso a propósito, porque lo que te parece obvio cuando estás diseñando no siempre parece obvio para las personas que están mirando tu página. También escogí estos en particular porque quería mostrarles que algunos son una sola palabra, como Helvetica. Pero Comic Sans MS es varias palabras, así que tuve que ponerlo entre comillas. Muy bien. Entonces, cómo funciona es, de nuevo, que usa su regla de sintaxis. Tiene su selector, su propiedad y luego su valor. Entonces, en este caso, he dicho que cada vez que vea un encabezado h1, no use el encabezado predeterminado del navegador, en su lugar quiero que use la fuente Arial. Por lo tanto, cambia ligeramente la fuente para que se parezca a este ejemplo aquí. Ahora todos los navegadores no son compatibles con todo. Hemos visto esto incluso con HTML 5. Algunos navegadores admiten texto, otros no. De la misma manera, algunos navegadores admiten algunas fuentes y otros no lo hacen tan bien. Así que lo que puedes hacer es proporcionar alternativas. En este ejemplo, le he dado al navegador tres alternativas diferentes para usar. Básicamente estoy diciendo, cada vez que llegues a una etiqueta h1, realmente quiero que uses la fuente Courier. Pero si no tienes la fuente Courier, sigue adelante y usa la fuente Impact. Si no tienes esa, sigue adelante y usa Arial. Ahora, una de las preguntas que podrías hacerte es, ¿y si no tiene tres de estas fuentes? No tiene Courier, Impact o Arial. Bueno, si recuerdas, cuando hablamos por primera vez sobre hojas de estilo en cascada, dijimos que si le das una regla y no puede soportarla, siempre volverá al predeterminado del navegador. Así que no tienes que preocuparte por la desaparición de la fuente porque le diste una mala familia de fuentes. Siempre vendrá a través. Así que cuando eliges tus familias tipográficas, hay algunas cosas en las que deberías pensar. La primera es quizás la más importante, es que algunas fuentes son mucho más fáciles de usar que otras. Básicamente hay dos categorías. Tienes fuentes serif y fuentes sans-serif. Las fuentes serif son las que tienen el tipo de bordes elegantes a lo largo del lado que usaste cuando estabas aprendiendo caligrafía o cosas diferentes como esas. Las fuentes sans-serif están muy limpias, no hay desplegables ni nada por el estilo. Así que cuando llega el momento de que alguien haga explotar tu página, de verdad entra y estoy tratando de pensar en la palabra correcta, cuando quieren entrar, y quieren que parezca más grande. Las fuentes Serif pueden realmente ponerse desordenadas, así que evite esas siempre que sea posible. Yo personalmente no uso fuentes personalizadas, pero nunca he sido un tipo artístico de persona. Por lo tanto, si decide que desea tener su propia fuente, o algún tipo de fuente personalizada especial para la web, necesita usar algo especial aquí llamado una regla de fuente de cara. Y lo que hacemos, es que puedes ver en el primer ejemplo, dices, hey, voy a definir mi propia cara de fuente. Voy a llamarlo MySpecialFont. Puedes llamarlo como quieras llamarlo, y luego necesitas darle una fuente. Así que esa fuente, esta es una nueva que no has visto antes. No estamos usando href, no estamos usando fuente, estamos usando url. Y la url dice que aquí es donde puedes encontrar el archivo que define mi fuente especial. Y una vez que lo haga, una vez que escriba la regla de la cara de fuente una vez, a lo largo del resto de su hoja de estilo puede seguir adelante y hacer referencia a ella. Así que ahora cada vez que uso una fuente h1, vas a usar MySpecialFont. Así que ahora hablemos sobre el estilo de fuente. Es una palabra mucho más elegante de lo que cabría esperar, pero simplemente estamos hablando de ¿desea que su fuente luzca normal, que es el valor predeterminado, o desea que sea cursiva? ¿ O quieres que sea oblicuo, que básicamente es solo un tipo especial de cursiva. Así que la fuente normal sucederá sin importar si es exactamente como va a ser. Si alguien más ha escrito una hoja de estilo y la han hecho toda cursiva, entonces es cuando quieras decir, no, no, voy a sobrescribirla y hacerlo normal. La cursiva siempre es un cierto tipo de magra, básicamente, para su fuente. Un oblicuo es cuando realmente quieres ser extra especial y definir exactamente qué ángulo quieres que tu texto se incline hacia. La variante de la fuente, realmente sólo tenemos dos opciones aquí. Tenemos normal y tenemos pequeñas gorras. La gente usa esto un poco cuando están tratando de hacer un aspecto muy consistente y sin embargo algo elegante. Así que aquí lo he dicho de nuevo, siempre usando h1, quiero que mi variante de fuente sea de mayúsculas pequeñas. Así que ahora cuando miras mi texto, mi texto h1 abajo en la parte inferior, he escrito <h1>variación de mayúsculas pequeñas. Pero cuando el navegador lo muestra, va a mostrarlo en mayúsculas pequeñas. Así que esto evita que tengas que ir y venir para recordar cambiar todo tu texto a mayúsculas o minúsculas. No importa cómo lo escribas, el navegador siempre lo mostrará en mayúsculas. Ahora el tamaño de la fuente es algo de lo que estaremos hablando casi a lo largo de todo este curso y en otros cursos que vamos a hacer también, como el diseño receptivo, porque es realmente un montón de maneras diferentes de hacerlo. Así que empecemos con lo más básico. Sus opciones son, puede usar el tamaño de fuente igual a extra-pequeño, extra-pequeño, pequeño y más pequeño. Realmente no me gustan mucho, porque realmente no me da un marco de referencia. Usted puede tener mediano, usted puede tener grande, extra grande, xx-grande, y más grande. Muy pocas personas usan estas opciones, pero están ahí afuera, así que quería decirte lo que eran. En su lugar, lo que muchas personas usan es que usan píxeles. Por lo tanto, voy a incluir en el sitio web este tipo de tabla agradable para usted que relaciona cuántos píxeles a una pulgada, cuántos píxeles a picos, para que pueda tener una idea de ello. Pero la mayoría de la gente hace algo en las líneas de 20 píxeles, 35 píxeles, 80 píxeles. Y esta es una mirada muy consistente y es algo que la gente puede sentir como debería ser. Sin embargo, tiendo a usar porcentajes en su lugar. Los porcentajes nos van a permitir cambiar el tamaño de la fuente a medida que cambiamos el tamaño de la pantalla mucho más fácilmente. Entonces, si dijeras que usa 100%, va a ser el tamaño predeterminado. Si dices usar 110%, será un poco más grande. Si usaras el 75%, sería tres cuartos del tamaño. A continuación, hablemos sobre el color y el color de fondo. El atributo de color es el color del primer plano, que es la palabra elegante para el texto mismo. Muy bien. El color de fondo es el color del fondo detrás de la fuente que estamos viendo. Y dependiendo del tipo de texto que esté diseñando, puede verse muy diferente. Así que, aquí he hecho una regla, y no has visto esto antes. Voy a seguir adelante y el estilo de dos selectores diferentes. Voy a estilo h1 y span. Así que si pones una coma ahí, la tengo aquí, entre el h1 y el lapso, puedes poner tantas comas como quieras y escribir tantos selectores como quieras. En este caso he dicho, oye, quiero que mi color sea azul, y quiero que mi color de fondo sea gris. Y si no estás seguro de dónde vinieron estos números extraños, ve a ver el video de colores. Eso te explicará todo allí. Así que ahora he entrado, y en mi HTML, tengo colores en una etiqueta h1, y tengo la palabra en línea dentro de una etiqueta span. Y lo que quiero que note es que para el h1, el elemento de bloque, el color de fondo cubre todo el ancho de la página. Pero para span, para elementos en línea, el color de fondo solo gira alrededor del elemento y el texto en sí. A continuación, hablemos de alinear texto. Alinear texto es simple. Probablemente sea una de las cosas más fáciles que puedes hacer en HTML. Y vas a ser muy feliz. Porque más tarde, cuando decidas que quieres alinear otras cosas, es tan difícil y vas a querer poner todo en texto. Así que sus opciones son cuando usa texto align, puede usar la izquierda, lo que significa simplemente alinear el texto a la izquierda. Eso es lo que ya hacemos. Usted puede tener derecho, lo que significa alinear todo a la derecha, centro, y justificar. Centra todo tanto como tú, a lo largo de la mitad de esa división. Justificar intenta extenderlo para usar tanto espacio como sea posible. Así que déjame mostrarte algunos ejemplos porque esa es realmente la mejor manera de entender lo que está pasando aquí. Aquí tengo una alineación a la izquierda. Todo se alinea a lo largo del lado izquierdo de la pantalla. El siguiente que he usado texto en línea es igual a la derecha. Y se puede ver que todo está alineado a la derecha. Se ve muy raro. Hay muy pocas razones por las que vas a usar esto. A menos que tengas algo más en el costado del medio aquí. El siguiente que vamos a hacer es el centro. La gente usa el centro un poco. Casi lo usan demasiado, pero es una buena manera de romper su texto y hacer que se vea un poco diferente. Así que justificar es muy difícil de explicar, e incluso cuando lo miras por primera vez, es posible que no te des cuenta de lo que está pasando. Pero con justificación, el navegador está poniendo pequeños pedazos de espacio adicional para ayudarlo a extenderlo para que tenga exactamente el mismo ancho en todo el camino. Así que voy a mostrarte lo justificado con la izquierda. Y creo que esa es la mejor manera de ver la diferencia, es que básicamente no tienes el espacio vacío aquí. Lo han extendido por aquí, así que ningún lugar tiene demasiado espacio en blanco. A continuación vamos a hablar de la altura de la línea, y la altura de la línea es realmente diferente porque no está afectando a la fuente misma. No está afectando tu texto. Está afectando cuánto espacio hay alrededor del texto. Algunos de ustedes pueden haber usado Word antes, y pueden ir y cuánto espacio hay entre las líneas. Tal vez quieras que sea una línea, una línea y media, doble espaciada. Eso es de lo que estamos hablando aquí. Así que mi primer ejemplo dije que la altura de línea es igual al 50%. Y el siguiente que dije que la altura de línea equivale al 200%. Entonces, en la primera regla, esa es una regla rara para escribir porque estoy diciendo que quiero que las cosas se superpongan entre sí. En la segunda regla digo que quiero que te extiendas muy lejos. Oops, está bien, voy a seguir adelante y poner un ejemplo más tarde en línea donde puedo mostrarte exactamente cómo se verían estas cosas. O mejor aún, voy a convertir esto en un momento didáctico y hacer que vayas ahí y lo escribas tú mismo y mira cómo estas dos reglas diferentes afectan el texto. Así que vamos a revisar. Sé que repasé muchas cosas, y puede ser abrumador. Así que una de las cosas más importantes es con todo lo que hacemos en este curso, es tomar cinco, diez minutos, escribir algunas cosas, echar un vistazo y ver qué pasa. Comete tantos errores como puedas, porque este es el momento de cometer errores, cuando me tienes a mí y al resto de la multitud aquí para responder a las preguntas en los diferentes tableros. Práctica sobre problemas de juguetes. No hagas una página web enorme y trata de darle estilo. Crea una página con tres o cuatro párrafos, un par de enlaces , y practica sobre ellos, porque no importa, no necesitas practicar en una página grande, puedes practicar en los pequeños problemas y realmente hace una gran diferencia. Y, por último, si decide que está listo para codificar y que está listo para hacer ese gran proyecto, asegúrese de diseñar primero sus proyectos más grandes en papel. No puedo enfatizar lo suficiente que si empiezas a codificar y diseñar sin tener un plan claro, vas a sentirte muy frustrado y con suerte, no con suerte, te sentirás muy frustrado y renunciarás. Y no quiero que hagas eso. Así que planee todos sus proyectos en papel primero. Si sigues estas sugerencias, si practicas, practicas, si haces problemas con los juguetes, si antes de saltar a grandes problemas lo dibujas primero, creo que vas a tener un montón de diversión, y vas a tener una gran página de la que vas a estar orgulloso.