El código no es tan temático como los zombies: HTML y CSS para escritores, editores y principiantes

1. Introducción: Hola y bienvenidos al código no es como zombies aterradores. HTML y CSS para escritores y editores. Este curso te va a hablar de código y lo poco aterrador que es. Podrás trabajar con HTML y CSS de una manera que sea solidaria y te permita descifrar lo que estás haciendo sin tener tanto miedo de ello. Hablaremos de HTML, qué es, cómo es la estructura de la web, y cómo puedes crear tus propias etiquetas o al menos escribir tus propias etiquetas más bien e incluirlas en tus diferentes proyectos. También hablaremos de CSS, que es más sobre el diseño y cómo hacer que se vea bonito y te ayudará a usar eso para mejorar aún más tus proyectos y permitirte no tener miedo al código. En el camino, trataremos de matar a algunos zombies y te ayudaremos a divertirte un poco. 2. herramientas de lucha a zombis: Hola. En este episodio vamos a hablar qué tipo de herramientas necesitarás para poder trabajar con este curso. La verdad es que no necesitas mucho. Hay un montón de cosas diferentes que puedes usar pero aquí tienes algunas recomendaciones. En primer lugar, editor de texto plano. Si estás en Windows, puedes usar Bloc de notas o si te encuentras en un Mac, también puedes usar Edición de texto, aunque deberías usarlo en su modo de texto sin formato. Dicho todo eso, bueno no puedes usar un editor de texto plano, probablemente no sea el más ideal solo porque no te da tanta ayuda como pudo. Para eso aún recomiendo un editor de codificación de colores. lo que hace, se va a colorear codificar el código para que en realidad puedas ver qué tipos de código o piezas de código, cómo interactúan entre sí y las etiquetas y consiguiendo un color diferente al decir, contenido y algunas de esas cosas. Hace que sea mucho más fácil depurar y averiguar si tienes un error de sintaxis o algo pasando o algún otro tipo de error. Para esos, te ayudan a detectar errores. Notepad ++, creo que está disponible en toda la plataforma, pero definitivamente está disponible en Windows. Atom definitivamente está disponible en toda la plataforma. Otra, Brackets y luego Sublime Text está probablemente un poco más allá del nivel escolar. Es un gran editor de texto y un editor de texto muy potente y probablemente más de lo que necesitas. Yo no lo compraría si no es necesario. Notepad ++, Atom, y Brackets son todos gratis para descargar y realmente cualquier otra cosa que uses, cualquier otra herramienta de codificación para HTML y CSS debería funcionar bien. Apenas algo realmente. Cosa que voy a recomendar aunque es codepen.io. Se trata de un sitio web que está disponible de forma gratuita. Es fácil de usar. Se actualiza automáticamente a medida que escribes, lo cual es súper útil a medida que estás aprendiendo. Se encarga de todas las cosas juguetonas con solo cómo construir una página y qué hacer por esas cosas. Te permitirá simplemente enfocarte en el código en el que quieres enfocarte en lugar de tener que lidiar con todo el código alrededor de ese código que necesitarías si estás usando solo un editor de texto básico y cualquier demos de clase estará en codepen.io. Echemos un vistazo a eso. Vamos a ver cómo configurarse, cómo crear una cuenta gratuita. Es importante guardar tu trabajo mayormente para que puedas volver a él y arreglarlo y también jugar con él. Cuando comienzas a trabajar en tu proyecto, es bueno tenerlo en su lugar donde puedas guardarlo con el tiempo a medida que pasas por el curso y podrás luego solo publicarlo para que otras personas puedan ver y ver lo que has hecho. Adelante y golpeemos a los zombis en la garganta. Este es el sitio web de CodePen. Aquí abajo en la parte inferior izquierda vas a tener registro. Da clic en eso, regístrate con correo electrónico. Ese proceso es bastante típico. Voy a iniciar sesión sólo porque ya tengo una cuenta. Iniciar sesión. Estos son algunos bolígrafos que creen que te podrían interesar. Pero lo que vamos a hacer es ir a Explore, vamos a Crear y a Pen. En CodePen, un Pen es una porción HTML, CSS, y JavaScript de una página que puedes jugar con ella. La parte de JavaScript no es algo que necesitamos, así que lo que voy a hacer es minimizar eso. En realidad no vamos a lidiar con CSS en este momento. Llegaremos a eso un poco más tarde en el curso. Yo también voy a minimizar eso. Simplemente tenemos algo de HTML. Yo sólo voy a escribir una cosita rápida aquí. Hola Mundo. Es una forma predeterminada de empezar a aprender un lenguaje de programación es escribir hello world y enviarlo a la pantalla. Como se puede notar, como escribí, salió. Codepen.io es solo una gran herramienta de usar, realmente fácil y esperemos que te haga la vida mucho más simple a medida que intentas seguir adelante. Esas son las herramientas. Gracias. Pasemos a la siguiente sección. 3. Por qué los zombies odian el HTML: Bienvenido de nuevo a Código No es tan aterrador como Zombies. Vamos a echar un vistazo a qué es el HTML y por qué los zombies lo odian tanto. En primer lugar, ¿qué es HTML? Es un lenguaje de programación, pero en realidad, en lugar de proporcionar tanta programación o procesamiento, proporciona estructura a los documentos. Me gusta pensarlo como el esqueleto de tu página o el esqueleto de tu página web. Te permite construir la página y tener diferentes tipos de flash y diferentes tipos de colores y todo ese tipo de cosas que van a una página de sitio web, pero tiene que colgar en algo, y HTML es que colgar punto. Proporciona información sobre el contenido del documento. Ahora, hay alrededor de cuatro partes de un elemento HTML, es una sola unidad de HTML, cuatro piezas: etiqueta de apertura, atributos, contenido, y una etiqueta de cierre. El tag de apertura de cartera utiliza los corchetes angulares, menores y mayores que los signos para activar la etiqueta, por lo que comienza con un signo de menos que, y la etiqueta misma termina con un signo mayor que. Por ejemplo, el párrafo de la etiqueta de apertura se ve así, esa es una etiqueta de párrafo de apertura. Probablemente ya lo viste en el último video cuando estaba demostrando Codepen.io, pero esta es una etiqueta de párrafo de apertura. A continuación, tenemos atributos. Esto es algo que llegaremos a un poco más después, pero solo quiero presentarlo aquí. Son cosas de las etiquetas. Vienen justo después del nombre de la etiqueta de apertura y antes de su corchete de ángulo de cierre, lo que se utilizan para información adicional, identificación u opciones, da algunas otras formas de usar etiquetas o ayuda al navegador a saber cómo esto etiqueta particular se está utilizando. El atributo de clase nos ayuda, particularmente cuando llegamos a CSS, define un grupo de elementos, tipo de contenido HTML. No tiene que ser el mismo elemento en particular, pero podría ser una clase de elementos que actúan la misma manera o hacen lo mismo o tienen el mismo aspecto. Podrían ser todos estos han leído texto o todos tienen un cierto ajuste de margen entre ellos, algo así. Realmente podría ser casi cualquier cosa, pero cuando estás agregando una clase a un elemento, así es como va. Es la etiqueta de apertura de la etiqueta p. Entonces antes del corchete de ángulo de cierre, tenemos clase igual y luego “aprendiendo”. Esperemos que no estés aprendiendo entre “ comillas ”, pero la clase tiene un valor de aprendizaje, y podría haber múltiples elementos HTML en la página que tuvieran esa clase. Hay muchos otros atributos que podemos usar, y hablaremos más de esos un poco más tarde. Ahora, la tercera o tercera pieza de un elemento HTML es probablemente la más importante, es el contenido real. Es la información que va dentro. Es entre las etiquetas de apertura y cierre. A menudo, esto es texto, pero también podría ser otros elementos. A menudo, también son otros elementos. Algunos elementos tendrán limitaciones que no pueden estar dentro de otros elementos, depende del trabajo particular que esté haciendo el elemento y lo que sea apropiado para ello. Algunos elementos simplemente no pueden existir dentro de algunos otros elementos. Otros elementos sólo existen dentro de otros elementos. En realidad sólo depende del elemento particular con el que estés trabajando. HTML también es bastante indulgente. Incluso si lo estropeas totalmente, el navegador sólo hace todo lo posible para hacer lo que piensa que debería. A menudo, hace un buen trabajo. A veces eso es bueno y que no fallará miserablemente. Aunque es malo si un navegador no permite que falle, pero el otro sí, y no pruebas en ese navegador. Tener buen código es la mejor opción para previsualizaciones consistentes de páginas a través de múltiples navegadores. Etiqueta de cierre, se parece mucho a la etiqueta de apertura, excepto que tiene una slash delante de ella. El tag de párrafo tiene una slash p. Algunas etiquetas son lo que se llama etiquetas vacías y no tienen una etiqueta de cierre. Notablemente, se trata de ruptura de imagen, y HR u regla horizontal, por lo que IMG, BR, y HR. Estos son los principales de los que probablemente estemos hablando dentro de este curso. Pero también hay algunos más que eso, pero la mayoría de las etiquetas tienen una etiqueta de cierre. Por lo general, la única razón por la que no tienen una etiqueta de cierre es porque el contenido del servidor de etiquetas reside en la etiqueta de apertura, en lugar de tener algo entre ella. Por instancia, una imagen llegará al final, pero tendrás un atributo fuente que te dirá dónde se puede encontrar la imagen y la imagen simplemente la muestra, por lo que no tiene sentido tener necesariamente una etiqueta de apertura y cierre para imágenes. Aquí tienes un ejemplo de etiqueta de párrafo. Traer un atributo así como las etiquetas de apertura, cierre, y contenidos, por lo que hemos empezado con una etiqueta p con una clase de aprendizaje donde matar zombies es es divertido. Ese es nuestro contenido y luego slash p es nuestra etiqueta de cierre. Anidación. Otra cosa importante de las etiquetas HTML es asegurarse de que tenga etiquetas de apertura y cierre anidadas adecuadamente. Por ejemplo, esto es incorrecto. Tienes Tag 1 y Tag 2, ambos abiertos y luego slash Tag 1, por lo que la Etiqueta 1 se cierra antes de que la Etiqueta 2 se cierre. Eso es incorrecto. La forma correcta de hacer esto o de anidarlo correctamente, tendría la Etiqueta 1 abierta, luego la Etiqueta 2 abierta, y cerrar la Etiqueta 2 y cerrar la Etiqueta 1. Esas son, por supuesto, no etiquetas HTML reales, son solo un ejemplo para mostrar el anidamiento fácilmente. Familias zombis. Una de las cosas importantes de anidar es que lo vamos a llamar familias. Si el elemento A está completamente encerrado por el elemento B, entonces A se dice que es hijo de B, y B es padre de A, por lo que puedes tener hijos y nietos. Muchas veces, particularmente cuando lleguemos a CSS, estaremos hablando mucho de estas relaciones. Pero si un elemento causa otro, el primer elemento es el padre y el elemento cerrado es el hijo. Por ejemplo, tenemos zombies no tenemos familia. Yo, la etiqueta cursiva, a la que llegaremos pronto, es hijo de la etiqueta p. 4. Bloqueos zombis de contenido - parte 1: Hola y bienvenidos de nuevo a Code No es tan Scary como Zombies. Ahora mismo vamos a ver bloques de zombies y otros bloques de contenido. En primer lugar, tenemos etiquetas de párrafo, hablamos de las de la última sección. Todos los párrafos deben, por sorprendente que sea, estar en etiquetas de párrafo. Es la unidad de texto más básica y 90 por ciento del texto va a estar en etiquetas de párrafo, aunque no todo, supuesto, 10 por ciento. Claramente no va a serlo. Pero estos pueden ser peinados con texto sangrado o para tener un retorno de carro o en línea entre los dos, dependiendo de lo que quieras hacer con tu sitio. Probablemente más típicamente en la web, tiende a ser una línea en blanco entre párrafos, pero hay algunas excepciones a eso. Otra etiqueta de la que podemos hablar es la etiqueta de break. Ahora, la mayoría de las veces no quieres envolver texto duro, quieres que fluya dentro de su contenedor. Porque particularmente con el diseño responsive, no vas a saber exactamente qué tan ancho o alto o lo que sea el contenedor para el texto en particular. Si haces algunos retornos duros entonces se va a ver funky si alguien mira en una pantalla que pasa a ser de un tamaño diferente al tuyo, lo cual es casi seguro probable por la proliferación de dispositivos que tienen pantalla diferente tamaños y escritorios, y quién sabe de qué tamaño va a tener el ancho en el escritorio, etc. Habrá momentos, sin embargo, que se necesita formatear una dirección o pieza de contenido similar donde no se quieren líneas entre ellos. Por ejemplo, si has hecho una línea en blanco entre párrafos, si creas otro párrafo, va a seguir haciendo líneas en blanco entre las cosas. Eso no se ve muy bien, particularmente en una dirección u otro tipo de contenido como ese. Lo que puedes hacer entonces es usar una etiqueta de break, y en lugar de saltar una línea, puedes simplemente ir directamente a la siguiente línea. Ahora, a menudo hay momentos en los que necesitamos ir audazmente a donde ningún luchador de la resistencia zombie ha ido nunca antes, que aquí es la etiqueta audaz. mayoría estructural de HTML, la mayoría de la estética van con CSS, pero también se puede designar lo que se debe poner en negrita o enfatizar fuertemente. Por ejemplo, tenemos la etiqueta b, que es la etiqueta negrita, esto es de lo que teníamos se trata de HTML4 cuando se juntó con XHTML. Cuando HTML y XHTML se juntaron, querían ser muy estrictos sobre cómo qué etiquetas usaban. Trajeron la etiqueta fuerte, que básicamente es la etiqueta audaz, pero etiquetada fuerte. En teoría, te da un poco más de información que solo la letra b hace sobre el contenido que hay ahí dentro. Pero fuerte tarda más en escribir. Yo estoy en la escritura más corta es mejor campamento. Eventualmente dijeron básicamente que b y fuertes son equivalentes y puedes usarlos de esa manera como te parezca conveniente. Tanto b como strong harán que el contenido sea audaz. Hay una lucha similar con i Yo sería la etiqueta cursiva. En un momento determinado querían hacer algo mejor y así se les ocurrió la etiqueta em para el énfasis, lo cual realmente no tiene sentido para mí porque es aproximadamente el mismo nivel críptico que i y se puede confundir con la unidad de tamaño CSS. Llegaremos a allí en breve. Pero sí, simplemente no parece que realmente ayude. Eventualmente simplemente los hicieron igual también, particularmente HTML5. Tanto las etiquetas i como m harán que el contenido sea cursiva. Echemos un vistazo a algún código. Está bien. Esto te muestra las etiquetas de párrafo, las etiquetas cursivas y las etiquetas negritas. Tenemos una etiqueta p aquí. Termina con una etiqueta p de cierre. Aquí tenemos una etiqueta em. También puedes hacer una etiqueta i. aquí tienes un ejemplo. Aquí están los ejemplos aquí abajo. No porque los zombis no sean cariñosamente sorprendentes como pueda ser. Ahí está la cursiva. El rigro-mortis realmente afecta la flexibilidad. Si te sorprende eso, hay un zombi en la cabeza. Eso es audaz o fuerte. Esto es un audaz. Entonces aquí tenemos un ejemplo de lo que no hay que hacer. Esto es básicamente tanto anidación inadecuada como etiquetas de terminación inadecuadas. Hemos emparejado la etiqueta em y la i tag juntos, pero mientras hacen lo mismo no necesariamente interactúan correctamente. Esta slash i no cierra este m, así que es por eso que el zombie sigue en cursiva. El slash fuerte realmente no cierra la etiqueta p, pero eso es más difícil de ver porque ahí también termina la página. Pero sí, ese es el código ahí para párrafos, cursiva, y audacia. 5. Bloqueos zombis de contenido - parte 2: A continuación, necesitamos hablar de enlaces. El a o etiqueta de anclaje es lo que se utiliza para crear hipervínculos, atributo href es lo que tiene la URL de destino, y el contenido o el texto del vínculo es el texto entre las etiquetas de apertura y cierre. Aquí tenemos una apertura una etiqueta, luego tenemos un atributo href enlazando a https://undead.institute, que es mi sitio web para libros de Desarrollo Web con temática zombie, si alguna vez quieres ir más profundo, hay un lugar al que ir. Entonces tenemos el texto del enlace, que es más Zombie Web Development, y el cierre de una etiqueta. Una cosa sobre la que quieres tener cuidado es los enlaces absolutos versus relativos. Los enlaces con http://o https://suelen ser enlaces absolutos, y mientras la página esté funcionando el navegador debería llegar allí. Si no incluye el http://o https://, estos son enlaces relativos, el navegador asume que estarán en la misma ruta de carpeta o en el mismo servidor que esta página actual. Si vas a https://google.com, saldrá a otra página web, obtendrás google.com y te lo traerá de vuelta. Si solo escribes google.com, buscará un archivo llamado google.com, que no tan útil en general. Hagamos un poco más CODING EN VIVO, aquí tenemos nuestra etiqueta con href, undyinglove.org, amor inagotable. Tenemos algunas etiquetas de break solo para separarlo, y aquí tenemos un enlace de correo electrónico. Los enlaces de correo electrónico funcionan bastante similares a los enlaces de texto regulares, pero aquí simplemente comienzas con mailto: en lugar de http://nunca lo permite. Entonces, cuando alguien haga clic en él, abrirá el cliente de correo electrónico predeterminado en esa computadora. También se pueden configurar enlaces telefónicos, por lo que los enlaces tel y sms, esos dos últimos particularmente útiles en los teléfonos pero también se pueden utilizar en todas partes también. Es así como haces algunos enlaces. A menudo, cuando estamos creando texto para la web, es importante que sea desnatable o que sea fácil para que la gente simplemente lo recorra, una de las mejores formas de hacerlo es a través de encabezamientos y subtítulos. HTML comienza con <h1> a través <h6>. Es importante evitar las etiquetas de encabezamiento en blanco, así como cualquier persona que sea un usuario avistado escaneará por una página con los ojos saltando de rumbo a título intenta encontrar el contenido que están buscando. Además, los usuarios del lector de pantalla escanearán con sus oídos y saltarán entre encabezados para tratar de encontrar lo que están buscando, los encabezados en blanco pueden particularmente tirarlos, aunque no descarten tanto a los usuarios citados. Encabezados, cada uno generalmente va a ser tu Encabezado más grande, pero suele tener el título de la página así que saltas, no quieres usar a menudo A menos que sepas que no es el título de la página. El siguiente es, y debes empezar a romper tu contenido por ahí, , y seguir adelante,, más subtítulos,,, a menudo si llegas aquí, normalmente tienes algunos problemas de contenido, tal vez quieras para realmente mirar eso y si llegas a casi definitivamente tienes algunos problemas de contenido. Aquí tenemos encabezados HTML, se puede ver como subes en hs, es el más grande aquí, entonces, 3, 4, 5 y 6, o PFC Wiggins debe reportarse a una ardilla aleatoria al parecer y como se puede ver; & lt; h1> </h1> Una última sección que vamos a cubrir aquí es de cotizaciones. Hay dos etiquetas diferentes que puedes usar para las cotizaciones en HTML. Cotizaciones en línea, lo manejamos con un, también se puede usar realmente comillas. Pero si por casualidad estás en una cultura que no usa comillas de la manera en que los estadounidenses tienden, por ejemplo, idioma francés usa un tipo diferente de comillas, pero si estás usando una etiqueta, tiene dos grandes beneficios, una es que hay un atributo cite que puede permitirte colocar una URL desde donde obtuviste la cotización para que la gente pueda acceder a ese contenido. También te permite versatilidad en las cotizaciones de estilo, particularmente si necesitas las comillas de flecha doble o guillemet, creo que se llama, que se usan en francés. Se pueden realizar esos cambios con CSS en lugar de tener que reescribir la página o cambiar la página. También hay cotizaciones en bloque, que tiene su propia etiqueta de <blockquote>, lo suficientemente sorprendente. Eso es para citas muy largas que van a prevalecer contra los zombis apestosos, por supuesto, y por defecto establecerá la cita fuera de otros textos, sangrándola y dándole un poco de espacio arriba y abajo del texto circundante. También puedes usar el atributo cite en un blockquote, pero también hay elemento cite es que con un blockquote, se refiere a una obra creativa y debe incluir ya sea el título, el autor, o la URL de esa obra. Dicho esto, otra agencia de estándares web dice que nunca debes usar al autor en citar elemento, usa tu mejor juicio. Por último, aquí tenemos dos ejemplos de citas, Alice en Zombieland, usando el elemento cite, usando el y así es como puedes jugar con cotizaciones y realmente empezar a marcar los tipos de contenido dentro de tu página web. 6. Lista de debilidades de los muertos vivientes: Muy bien, bienvenido de nuevo a Code No es tan Scary como Zombies. Aquí estamos hablando de listas y enumerando las Debilidades de los No Muertos, y cualquier otra cosa que quieras enumerar. En primer lugar, organizar zombies. Por lo que las listas son una gran manera de seguir haciendo que tu contenido sea más desnatable. Te permiten poner en marcha algunas cosas, además de simplemente hacer que sea más fácil para la gente sacar el contenido que es importante. El propio HTML tiene tres tipos de listas. Hay una lista ordenada, y lista desordenada, y una descripción, o forma de la lista de definición. Todos ellos están conformados por dos o más elementos. La lista de descripción se compone de tres mientras que ordenados y desordenados se componen de dos elementos separados. Por ejemplo, si estamos haciendo una lista ordenada, empezamos con un ol. Después tenemos nuestro primer ítem de lista, nuestro segundo ítem de lista, tercero , por muchos que tengamos, y finalmente, terminamos con un ol de cierre. Con la lista de pedidos, en realidad se pueden cambiar los números utilizados, los decimales son los predeterminados, pero también se puede hacer alfabético en minúscula como a, b, c, d. Se pueden hacer números romanos, i, ii, iii, iv, etc. los decimales son los predeterminados, pero también se puede hacer alfabético en minúscula como a, b, c, d. Se pueden hacer números romanos, i, ii, iii, iv, etc. también hacen capitalizar versiones de esas. Entonces una A mayúscula para el tipo es un alfabético mayúscula, y el capital I es números romanos mayúscula. También cambias el inicio de los números usando el atributo start, y simplemente configurando eso a cualquier valor numérico con el que empiece la lista. Para empezar la lista a las siete, solo tendrías inicio igual a comillas siete. También puedes hacer listas desordenadas, y son muy similares a la lista ordenada excepto que usan un ul en lugar de un ol, pero aun así ambos usan el mismo li. Por ejemplo, empezamos con un ul aquí, tenemos nuestro artículo li, igual que hacemos con un ol, y tenemos tantos de esos como necesitemos, y luego lo cerramos con un ul. Las listas de descripción son un poco diferentes. Tienen una lista de términos y descripciones, por lo que tendrás dos cosas diferentes que estás escuchando. Antes de HTML 5, se llamaba la lista de definiciones, pero la cambiaron a una lista de descripciones para ampliar su alcance y lo usas para más cosas. El elemento externo es dl para la lista de descripción, el término designado o el elemento para el término es dt, y el elemento para la descripción es dd. Funciona de manera similar. Empezamos con un dl, tenemos un dt, tenemos un dd para lo que sea que deba ser la descripción. Entonces podemos hacer otro dt, dd, dt, dd, etc y luego cerrar con nuestro cierre dl. Echemos un vistazo cómo funcionaría esto. En primer lugar, miraremos a los ol's. Entonces aquí otra vez, tenemos nuestro ol, tenemos nuestros li's. Si quisiéramos decir empezar con siete, podemos hacerlo. Debe estar entre comillas que también podrían funcionar sin ellas, por lo que se puede ver comienza con siete ahí. También podría hacer tipo igual i, y se puede ver que estoy empezando a las siete y empieza con el séptimo número romano, o justo ahí. Entonces tenemos el ol y tenemos un inicio y tipo, se puede jugar con eso. A continuación, tenemos nuestra lista desordenada, que tiene de nuevo un ul y li. También puedes cambiar el tipo ul. Por ejemplo, puedo poner en un cuadrado y hace cuadrados. disco es la bala normal, y se puede cambiar eso según sea necesario. Pasando a las listas de definición o listas de descripción, así que tenemos aquí de nuevo, nuestro dl, dt de un andador, dd del zombi todavía caminar, shuffle. Si crawler, su definición o descripción y por supuesto PFC Wiggins, nuestro intrépido amigo, y eso es todo para listas. 7. Una imagen vale más que mil quejidos: Una de las cosas que probablemente vas a querer poner en tus artículos y tal son las imágenes. En primer lugar, se agregan imágenes utilizando la etiqueta de imagen HTML. Es una etiqueta de vacío así que no hay etiqueta de cierre. Usarías el atributo source para decirle al navegador desde dónde cargar la imagen. Entonces también está el atributo Alt el cual se utiliza para dar una descripción del contenido, es particularmente genial para lectores de pantalla y motores de búsqueda porque simplemente no pueden acceder al contenido de la imagen de otra manera. Pero es importante que añadas todo el texto para ayudar a que sea accesible para cualquier persona que tenga baja o ninguna visión. Tienes tu etiqueta de imagen, tu atributo fuente, en este caso es zombie.png. Si estuviera en una carpeta diferente, comenzarías con lo que sea esa carpeta o la ruta a esa carpeta, luego zombie.png. Pero si está en la misma carpeta, entonces solo puedes usar eso. También puedes sacar algo de otro lugar usando la URL completa si también tuvieras eso, el texto alt solo va a ser texto sobre la imagen. En este caso un zombi solitario busca a su horda. También es importante saber que no quieres decir como imagen de o gráfica de porque eso ya es inherente a que es una imagen. Un lector de pantalla va a decir que es una imagen antes de que lea el texto todo. Haces muchas cosas con tamaño en las imágenes. Hay atributos de altura y anchura que puedes establecer para determinar cuál debe ser el tamaño. Generalmente es mejor hacerlo en CSS, al que llegaremos eventualmente, pero también puedes hacerlo en tu HTML. Si intentas hacer una imagen más grande, usando el atributo height width, vas a degradar la calidad porque estás difundiendo la información sobre un área más grande. Es como si tuvieras una resistencia dada, así que para estos zombies y los esparces demasiado delgados o contra la horda zombi, no van a ser tan efectivos. No van a hacer tan bien porque están extendidos demasiado delgados. Puedes hacer la imagen más pequeña y dejaremos intacta la calidad. El problema sigue siendo del mismo tamaño de archivo. Si tienes imagen de 10 meg y encoges hacia abajo por lo que solo es como un 100 pixeles por un 100 pixeles, se va a ver realmente pequeña, pero aún así va a tomar las 10 megs para que se vea bien. A menudo es mejor tener la altura y el ancho exactos de la imagen que estás usando para evitar sobredescargas o una menor calidad. Si cambias la altura y el ancho al azar, sin preservar la relación de aspecto o sin hacerlo de manera proporcional, se va a squash o estirar la imagen, y simplemente no se ve bien. A menos que sea un zombi, entonces puedes aplastarlos y estirarlos todo lo que quieras. Como dije antes, idealmente, la imagen debería ser su tamaño natural para obtener el mejor equilibrio entre el tamaño de archivo más pequeño y la mejor calidad. Entonces hablemos de los diferentes tipos de imágenes que puedes usar en los sitios web. En primer lugar, hay GIF, es sinónimo de Formato de Intercambio Gráfico. Lo pronuncio GIF. Mucha gente en internet diría que me equivoco, pero yo diría que no es jraphic. Entonces no es JIF es GIF, pero depende de ti, qué lado quieres caer en esa pelea. Los GIF funcionan en todos los navegadores. Permiten animación, que es una de las razones por las que todavía están por ahí. Muchas de las animaciones que ves en la web suelen estar en GIF particularmente hasta hace poco. A pesar de que hay muchas cosas nuevas pasando con CSS y animación que permite que esas se hagan de forma nativa en contraposición a solo en GIF. Los GIF también permiten la transparencia, lo cual es útil, pero la transparencia no siempre es tan buena. A veces es un poco crujiente o muestra más del filo que quieres. Se trata de un formato con pérdida, lo que significa que cuando guardas como GIF, estás perdiendo información. Entonces no es guardar toda la información. Entonces estás degradando un poco la calidad. Pero el beneficio que estás obteniendo es que obtienes un tamaño de archivo más pequeño, lo que lleva menos tiempo descargarlo. Por lo que se equilibra entre alta calidad o calidad de imagen y tamaño de imagen. GIF funciona particularmente bien con grandes muestras de color, como logotipos o line art. JPEG significa Grupo Mixto de Expertos Fotográficos. Funciona en todos los navegadores, no permite animación, no tiene transparencia permitida para ello. También es una compresión con pérdida. Pero es súper genial para fotografías y hace un trabajo mucho mejor de comprimirlas que hace un GIF, y así realmente brilla en fotografías y otras imágenes complejas. PNG, significa Portable Network Graphics. Es el más nuevo de los estándares, pero aún funciona y casi todos los navegadores. Tienes que ir bastante atrás para encontrar un navegador que no funcione. No permite animación, pero sí permite transparencia de alta calidad. Si alguna vez necesitas transparencia detrás de una imagen, quieres usar un PNG. Se trata de una compresión sin pérdida, al menos en el PNG-24, el PNG-8 con pérdida. Lo que es genial de eso es que estás guardando toda la información ahí. Simplemente comprimirlo en una caja más pequeña en lugar de deshacerse de parte de la información para que quepa en cajas más pequeñas por así decirlo. Los algoritmos [inaudibles] son particularmente buenos en lo mismo que los GIF son buenos. Cosas con grandes franjas de color, logotipos, line art, esas cosas, pero se puede usar en cualquier cosa. SVG es probablemente el más nuevo de estos estándares, o al menos los que quieren ser estandarizados. Stands para Gráficos Vectoriales Escalables. Funciona de forma nativa en la mayoría de los navegadores, pero también puedes usarlo dentro de una etiqueta de imagen, en navegadores más antiguos, por lo que todavía funciona allí también. También puedes usarlo como un desmarcado en navegadores más modernos, pero de forma nativa a veces tiene beneficios incrustados como el acceso a CSS y cosas por el estilo. Soporta animación y animación vía CSS. También apoya la transparencia, y escala hacia arriba y hacia abajo sin ninguna pérdida de calidad. Los gráficos SVG son lo que se llama vector. De manera similar otra vez, más line art y cosas con logo. Pero puedes escalarlos hacia arriba y hacia abajo sin ninguna pérdida de calidad porque se basan en matemáticas en lugar de en píxeles. Generalmente un tamaño de archivo muy pequeño, usa etiquetas muy parecidas a HTML, que es cuando estaba hablando de que fuera nativo. Estoy hablando de usar las etiquetas directamente en tu HTML en lugar de importar un archivo SVG a través de una etiqueta de imagen o algo así. Nuevamente, mejor con line art, logos, iconos, esas cosas. Ahora hay otra etiqueta que a veces usamos para las imágenes, no directamente para las imágenes, sino generalmente para las imágenes circundantes. Se llama la etiqueta de figura. Es principalmente un elemento contenedor para gráficos, tablas, gráficos, todas esas cosas. Debe ser autónomo, pero relacionarse con el contenido principal. Es decir, esto es particularmente lo que verías con diferentes papeles y cosas donde tendrías una figura que soporta los datos o muestra los datos o apoya las conclusiones, etcétera. El elemento figura permite eso. Es mejor utilizado para información descriptiva, soporta el texto que lo rodea. Otro elemento, fig subtion, permite añadir una leyenda a la figura. Aquí tienes una etiqueta de imagen en vivo. Entonces tenemos imagen, tenemos nuestra fuente. Aquí es de donde lo encontramos. Tenemos todos son texto. Si quisiéramos poner esto en una figura, simplemente agregaríamos la etiqueta de figura, cerrándola con la figura. Entonces si queríamos decir, añadir un subtítulo, podemos hacer el viejo Zombie en un sombrero de copa, y luego tenemos una figura. Pasemos al siguiente video. 8. Vestir a los zombis con hojas de estilo en cascada: Ahora llegamos a CSS. CSS es sinónimo de Hojas de Estilo en Cascada. En nuestro Zombie [inaudible] HTML va a ser el esqueleto y CSS es la carne y la ropa. HTML es la estructura y CSS es el look and feel, sus colores, sus fuentes, es como se presentan las cosas. Estiliza texto, prevén cambios estéticos. Se cascada a través de los documentos. Hojas de estilo en cascada que permiten a los elementos secundarios heredar algunas de las propiedades de sus elementos principales, para que pueda heredar colores y tamaños, y algunas de esas cosas. CSS viene en una lista de reglas. Una regla consiste en un selector y un bloque de declaración. Los selectores eligen a qué elementos aplican las declaraciones y los bloques de declaración exponen los cambios o hablan de lo que debe suceder. Por ejemplo, este no es un selector CSS real, pero así es como se verá. Tienes primero tu selector, luego tienes un corchete rizado de apertura, luego tienes la declaración, y luego un valor, y luego un corchete rizado de cierre. El colon y el punto y coma son importantes, así que asegúrate de incluir esos. Hablemos más de seleccionar. Los selectores vienen en tres sabores principales. Tienes clases, identificaciones, elementos. Se pueden combinar estos para crear lo que se llama selectores descendientes. Se trata de descendientes de la misma manera que un hijo es hijo o descendiente de un elemento padre. Para las clases, vas a usar un atributo de clase, para elementos HTML, y en CSS necesitas tener un periodo frente a él, por ejemplo, periodo zombie-escuela. ID's; vas a usar el atributo ID y solo aparece una vez por página y en CSS, necesitas un hashtag delante de ellos. Hashtag unique-zombie. Las declaraciones CSS suelen ser par de palabras clave o valor separados por dos puntos y usan un punto y coma para designar el final. Puede tener varias declaraciones por regla y corchetes rizados envuelven el bloque de declaración para mostrar el principio y el final del bloque. Por ejemplo, con la etiqueta p, podemos establecer el color a amarillo-verde y luego esto cambiará todo el texto del párrafo a un amarillo-verde enfermizo que te hace sentir. Aquí tenemos algunos HTML a los lados, solo tenemos etiquetas de párrafo. El siguiente tiene clase. Es clase es, hoity-toity y luego ID, que es único. Por ejemplo, aquí tenemos color de azul claro para el párrafo. Si cambiamos eso para decir rojo, debería actualizarse aquí abajo. El color es rojo, hoity-toity está seleccionando el medio. Si cambiamos eso a verde regular, va eso. El motivo por el que se puso rojo un poco antes de ponerse verde fue que una p-tag también se aplica a la hoity-toity, p-tag, pero hoity-toity siendo una clase va a anular realmente la p-tag porque es más específica porque no es todos etiqueta p. Son sólo los que tienen una clase de hoity-toity y luego si cambiamos, digamos lo único y agréguelo. Vamos a cambiarlo a azul, luego se vuelve azul ahí abajo. ¿ Cómo entonces ponemos juntos CSS y HTML? Hay cuatro maneras de hacerlo. Atributo de estilo, etiqueta de estilo, que son los dos principales de los que hablaremos y luego hay una hoja de estilo externa e importando una hoja de estilos. Nuevamente, estos son más complejos de lo que realmente necesitamos. Hablaremos de los dos primeros. El atributo style va en cualquier elemento HTML. Se ve similar a una clase u otros atributos de los que hemos hablado. Solo necesitas la declaración, ya que ya estás en el elemento específico donde estamos seleccionando ese elemento para que no necesites un selector, solo la declaración. El alcista es que puedes ser muy específico en cómo aplicas las reglas. El inconveniente es que si estableces esto en una serie de elementos, digamos cambiar todos los textos de párrafo a azul, pero luego tu jefe quiere cambiarlo a rojo o necesitas cambiar algo más adelante, entonces tienes que editar todos y cada uno de ellos. Para ver cómo se ve realmente el atributo style, aquí lo tenemos, especie de la p-tag, tenemos un atributo de estilo con un color verde y el párrafo tendrá texto verde. Estilo elemental; hay un elemento de estilo que forma parte del elemento HTML, solo estilo y puedes poner CSS entre las etiquetas de estilo de apertura y cierre. En esto, puedes poner todos los párrafos en azul y luego si cambias eso, cambiará en todas partes. Con la etiqueta de estilo, la p, ya que tenemos un selector, se aplicará a todas las etiquetas de párrafo dentro de esta página en particular y podemos cambiar el color a morado o rojo o lo que queramos cambiarlo a solo cambiando este lugar en lugar de ir a cada atributo de estilo y cambiarlos allí. Aquí hay un par de advertencias. Usa sabiamente tus nuevos poderes. Los colores de la marca y las fuentes están ahí por una razón para crear consistencia a través de muchas páginas. Si vas en contra de ellos, hazlo bajo tu responsabilidad. No es culpa mía. Estás haciendo esa elección. Sólo te digo cómo hacerlo cuando tiene sentido hacerlo. Usa sabiamente tus nuevos poderes. Si intentas hacer un nuevo diseño y mirar y sentir por página, esa es realmente la elección sabia que puede confundir a los usuarios. Hay momentos en los que quieres hacer esto, podría ser por instancia, si tienes una figura que querías entonces darle estilo un poco diferente al resto del sitio que podría tener sentido para hacerlo. La consistencia es realmente importante. Ayuda a los usuarios a saber que están en el mismo sitio, que están tratando con la misma institución y si cambias constantemente fuentes o cambias colores constantemente no va a tener ningún sentido y se van a ir. Van a ir a un sitio diferente. Hay momentos en los que puedes y debes ir en contra de los colores y las fuentes de la marca. Son raros y si lo haces, deberías tener una razón realmente buena para hacerlo. Deberían ser razones como la forma en que estabas mostrando el contenido necesario para tener una fuente y color diferentes, que pudieras aportar contraste a la marca, fuentes y colores o algo así. Debe ser una razón realmente buena y debe ser una que se pueda articular. Nuevamente, ve en contra de marca, colores y fuentes bajo tu responsabilidad. Todo eso dicho sin embargo, sé creativo y empuja los límites. El web es un lugar para jugar y divertirnos y si no seguimos superando los límites, nunca sabremos qué podemos hacer. 9. Cómo hacer una foto con los Zombies: Está bien. Hablemos de fuentes. Puedes utilizar cualquier fuente que quieras para tu página web. Se verá genial en tu computadora, pero si otras personas no lo tienen, se va a ver como un puke de no-muertos. También hay que tener cuidado de que cambiar la fuente sin una buena razón aumentará el horror, no es buena idea hacerlo a menos que sepas lo que estás haciendo o lo estés cambiando de otra cosa al tipo de fuente deseado que se utiliza en otra parte. Dado que las fuentes no están disponibles en todos los sistemas, normalmente debes elegir varias fuentes que tendrán un aspecto similar si no hay ninguna disponible. Por ejemplo, aquí tengo una clase de contenido y la regla de font-family es que elegir qué fuente queremos usar. El primero que estará disponible es Helvetica o que esperaríamos que estuviera disponible es Helvetica. Si eso no está disponible, entonces voy a ir con Verdana, y si eso no está disponible entonces, también puedes cambiar el tamaño de fuente. Se puede utilizar un par diferentes tipos de unidades, píxeles, porcentajes, ems, e incluso un par de más. Tiendo a preferir ems porque son unidad relativa. Un em es igual al tamaño de fuente predeterminado, normalmente hay 16 píxeles. Em son unidades relativas, lo que significa que las etiquetas child heredarán el tamaño de fuente de sus padres, y el tamaño de fuente del padre se convierte en el nuevo tamaño de fuente predeterminado del niño. Su único em se basa en el tamaño de fuente del padre. Por ejemplo, si el tamaño de fuente de un padre se establece en dos em, y el hijo también se establece en dos em, si suponemos que 16 píxeles es la base, entonces el tamaño de fuente de padres será de 32 píxeles, pero el tamaño de fuente del niño será de 64 píxeles porque está construyendo dos veces el tamaño predeterminado de su padre. El beneficio aquí es que las cosas se hacen más y más pequeñas proporcionalmente. Si por ejemplo, un usuario decide cambiar su tamaño de fuente predeterminado de 16 píxeles a 24 píxeles, o incluso si bajan de 16 píxeles a 10 píxeles o algo así, entonces todos los tamaños de fuente van a cambiar en consecuencia. Si bajáramos a 10 píxeles por ejemplo, el tamaño de fuente del padre sería entonces de 20 píxeles, y el tamaño de fuente del niño sería de 40 píxeles. Todavía se van a mantener proporcionales a lo que originalmente se fijó. Si los estableces con números de píxel específicos, no cambiarían, y eso no es realmente bueno para el usuario porque a veces los diseñadores pueden hacer las cosas muy pequeñas, lo que puede ser difícil de leer. A continuación se muestra un ejemplo de un cambio de font-size. En este caso, estamos cambiando el tamaño de fuente a 1.25 em, por lo que estamos subiendo un poco a unos 20 píxeles, suponiendo que 16 píxeles fuera el predeterminado. Aquí tenemos la versión de píxel, font-size de 20 pixels, y también puedes usar porcentajes, font-size de un 125 por ciento. Pesos de fuente. Probablemente estés familiarizado con negrita, un peso más pesado, que la fuente normal. Pero hay bastantes otros pesos que puedes usar. Las fuentes vienen en muchos tamaños y espesores. La propiedad de peso fuente le permite cambiar esto. Se puede ir de 100-900, incrementos de un 100, 400 es normal y 700 es audaz. La mayoría de las fuentes no tienen los nueve pesos. Yo diría que es un número raro de fuentes que tienen las nueve. La mayoría tendrá al menos 400 y 700, pero puede que haya algunas veces tendrás una luz y algunas de esas cosas. También puedes usar las palabras clave normal y negrita para configurarlas también sin tener que recordar la cosa 400 y 700. ¿ Cuál es el peso zombi? Aquí tenemos contenido font-weight bold, también puedes establecer el font-weight a normal, y el equivalente en números. Aquí tenemos peso de fuente enviado 100, y luego finalmente a 400. Estilizado. El estilo de fuente es la forma en que se cursiva o desitaliciza el contenido de CSS. Simplemente el estilo de fuente en cursiva establece el estilo de fuente en cursiva, y normal lo vuelve a la normalidad. Por defecto, como estoy seguro de que has visto, los enlaces están subrayados en azul. En ocasiones querrás quitar el subrayado o incluso volver a agregarlo. Eso se utiliza text-decoración. Texto-decoración, ninguna fue quitada. El texto subrayado o creación de subrayado lo volverá a agregar. También puedes cambiar el color de la fuente, y al igual que cambiar la familia de fuentes, también quieres asegurarte de que uses esto sabiamente y eliges colores que sean agradables a la vista, y no el verde amarillo enfermizo que tú probablemente me van a ver elegir aquí. Hay muchas formas de establecer el color en CSS. Podemos usar palabras clave como vimos en el último capítulo, como azul y verde, melocotón, hojaldre, etc. También hay una notación hexadecimal que se ve algo así. Ni siquiera sé de qué color es ese. No te preocupes. No tienes que saberlo. Pero si sabes que este es un color, el hashtag que antes te muestra que es un color, entonces puedes obtener el color que quieras y un programa de gráficos luego copiar ese valor hexadecimal en tu HTML con el fin de cambiar el color. Si bien las palabras clave son útiles, no tienen casi tantos colores como lo permiten los números hexadecimales, y de nuevo como dije, cualquier programa de gráficos debería poder ayudarte a obtener el valor hexadecimal que tú puede entonces simplemente enchufar. Aquí hay un ejemplo de establecer el color a verde amarillo, aquí hay otro ejemplo usando la notación hexadecimal. Observe que el hashtag está ahí, y es requerido para hacer números hexadecimales. Echemos un vistazo a algún código. Aquí sólo tengo un pequeño párrafo al que le he agregado un montón de cosas diferentes. Aquí tenemos la familia de fuentes, asesino zombie siendo una fuente que en realidad no existe. No lo va a encontrar. Entonces como una pista de rodeo sí existe en mi computadora, me va a mostrar esto en raleway. Si no existe raleway ya que puede que no en tu computadora, elegirá helvetica, y si helvetica no está disponible, entonces elegirá alguna fuente san-serif, probablemente ariel, pero realmente depende de tu computadora y de lo que estés haciendo. Aquí tenemos que hacerlo audaz. Así que hice esta cosita audaz para solo poner la fuente un poco audaz, texto flaco aquí, Zombie. Si no tienes raleway en tu computadora, no vas a ver que esto se mete en tu texto, porque raleway es una fuente que pasa a tener múltiples versiones o múltiples pesos. Por lo que pude luego mostrar esto como el peso zombie. A continuación tenemos texto normal. Por lo que el peso de la fuente es normal, texto insanamente grande es esta cosa del chico pequeño. Lo estoy cambiando a seis em. También puedes cambiar las cosas a muy pequeñas. Entonces en este caso, cambié la palabra sitio web a solo seis píxeles o en realidad sí, lo siento. Esto asegura que tengamos raleway. Por lo que aún debes ver raleway en tu computadora aunque no lo tengas por la forma en que configuré esto. Volver al estilo de fuente, tan cursiva, así que puse todo esto en cursiva, y luego en el medio aquí tengo justo esta palabra zombie que estoy haciendo aburrido. Entonces estoy cambiando el estilo de la fuente y lo normal, y ya no está en cursiva. Está bien. Eso es todo para esta sección. Pasemos a la siguiente. 10. Boxeando con los muertos vivientes: El modelo de caja CSS: De lo siguiente que vamos a hablar es del modelo de caja CSS. modelo de caja CSS determina cómo se presentan los elementos, cómo interactúan entre sí. Se ve algo así. Tienes margen alrededor de los bordes. Tienes frontera. Dentro de eso tenías relleno. Entonces en el mismo centro está contenido. En general, en el modelo de caja, el ancho es igual al ancho del contenido, no al ancho del borde como se piensa más típicamente. Hay una manera de cambiar esto usando lo que se llama border-box, un poco más allá de este curso. Pero el ancho del contenido suele ser el ancho del mismo, y luego se puede agregar relleno y borde y margen para empujar cosas alrededor y agregar espaciado, etc. Ancho establece el ancho del elemento valores predeterminados al ancho del contenido. Altura establece la altura del elemento. relleno es el espacio entre el contenido en su borde exterior. Borde es el borde exterior del elemento. Margen es el espacio entre elementos. También puedes usar ems para estos valores. No tienes que usar solo píxeles o porcentajes o lo que sea; también puedes usar ems. Boxeo a los zombis. El margen y el relleno pueden tener valores establecidos cada uno. Un valor para establecer todos los lados, como lo estamos haciendo aquí. Margen de 2em se va a poner, suponiendo que 16 píxeles es la base, 32 píxeles alrededor de cada lado del contenido, y luego otros 16 píxeles de relleno estarán disponibles allí también. Pero también estableces los lados individualmente usando algo llamado notación de problemas, por lo que T, R, B, L es importante. Es el orden en el que pones los lados. Entonces arriba, derecha, abajo, izquierda. Es la palabra problema es como recuerdo. Arriba, derecha, abajo, izquierda porque están en el mismo orden en la palabra problema. Margen, estamos estableciendo 1em en la parte superior, 16 píxeles en la derecha, cero píxeles en la parte inferior, y cinco por ciento en la izquierda. El relleno, estamos configurando 20 píxeles en la parte superior, cero en la derecha, 10 por ciento en la parte inferior, y 2em en la izquierda. bordes requieren que se establezcan tres valores. En primer lugar está el ancho del borde. Qué ancho es el borde, generalmente en píxeles, ems, cualquiera de esas unidades. Estilo de borde, esto suele ser sólido, punteado , todo ese tipo de cosas, y también hay más estilos disponibles. Nueve veces de cada 10 uso sólido y no punteado ni punteado. Pero está disponible para ti si necesitas usarlo. Entonces también el color del borde. El color que quieres que sea el borde. Puedes usar palabras clave, hexadecimal, etc. Aquí tienes un ejemplo. Tenemos borde con dos puntos, y luego el ancho es de un píxel, sólido es el estilo, y #47D2F3 es el color. Muchas veces si quieres agregar una imagen a un conjunto de textos suele sobresalir como un humano en una horda zombie. Se llamaba flotándolo. Ve, puedes flotarlo a la izquierda o a la derecha para enviarlo al borde izquierdo o derecho del elemento. Como se puede ver aquí, la imagen superior flota a la izquierda, y la imagen inferior flota a la derecha. Cuando estás haciendo esto, puedes usar el margen o relleno para agregar espaciado alrededor él para que el texto no se extienda directamente contra la imagen. Aquí tenemos flotador, correcto. Es solo colon flotante derecho. Entonces margen, estamos estableciendo cinco píxeles en la parte superior, cero a la derecha, cinco píxeles en la parte inferior, y cinco píxeles en la izquierda. Estamos haciendo este cero píxeles a la derecha para que pueda estar al ras del borde derecho del contenido en lugar de pegarse en cinco píxeles. No queremos que el texto esté justo en contra de la imagen, así que lo estamos empujando a cinco píxeles. De igual manera, con el flotador, a la izquierda, un margen de cinco píxeles en la parte superior, cinco en la derecha, cinco en la parte inferior, cero a la izquierda, de nuevo, para que podamos ponerlo al ras a la izquierda mientras lo flotamos a la izquierda, y cinco pixeles en todas partes para evitar que el texto vaya directamente en contra de él. También hacemos fondos o cambiamos el color de fondo de un elemento con propiedad background-color. Entonces algo color de fondo de rojo. Si haces esto en un elemento que contiene texto, asegúrate de agregar algún relleno para que el color no esté directamente en el borde del texto. Algo importante a tener en cuenta, una de las grandes diferencias entre el relleno y el margen es que el color de fondo de un elemento se mostrará a través del relleno pero no del margen. Aquí tenemos una amplia variedad de diferentes formas de hacer relleno. Contamos con un acolchado de almohada, espacio personal, espacio personal en el metro, individualmente, grupo, pared derecha. Veremos estos directamente. En primer lugar, tenemos como una almohada es este elemento aquí mismo. Tenemos un relleno de 2em por todas partes. Podría colorear el fondo de rojo sólo para que fuera fácil de ver. A continuación, tenemos relleno humano, que di relleno en la parte superior era cero, relleno a la derecha era 1em, relleno en la parte inferior era 12.375 em. A lo mejor tu relleno es diferente, pero el relleno de la izquierda también era 1em. Aquí tenemos relleno con básicamente ninguno en la parte superior y todo un montón en la parte inferior. Entonces tenemos espacio personal donde queremos hacer tanto espacio personal como sea posible. Tenemos margen de 5em, pero como se puede ver aquí, no hay rebaños, por lo que el texto corre justo hasta el borde de los elementos, que no se ve muy bien y es difícil de leer. Entonces si estás en el metro o en el metro o lo que sea, casi no tienes espacio personal. Tienes un poco por encima de tu cabeza, tal vez un poco a tu derecha. Estás sentado en un asiento, así que ahí no hay margen, y tal vez un poco a tu izquierda. Ahí es donde está este margen. Entonces aquí tenemos relleno humano. Es lo mismo que arriba. Es sólo usar una declaración para establecer todas las reglas. Espacio personal en el metro. Lo mismo aquí. Los mismos números que los anteriores, pero siendo utilizados en una sola declaración. Con bordes, puedes tener establecido individualmente. Por lo que tienes borde de un píxel, sólido, color de borde de verde, y ahí está, color de borde de verde. Una nota, solo esta línea aquí es de este elemento hr, que significa regla horizontal como un elemento HTML que puedes usar para separar las cosas si es necesario. A continuación, hemos agrupado. El borde se agrupa aquí con un píxel, sólido, y azul. Después el muro derecho, tenemos un borde justo a la derecha, 50 píxeles, sólido, y negro. Esa es otra forma de hacer fronteras, etcétera A la siguiente. 11. Pinchar el código de Word en su cara de zombie: A veces, cuando estás trabajando y has construido tu contenido en Word, una forma perfectamente normal de construir código, Word intenta ser útil e incluir la fuente exacta que estás usando, espaciado exacto que estás usando, y todos esos cruft que realmente no te importa. Solo quieres que solo tenga tu contenido, tal vez con el audaz y la cursiva y esas cosas intactas, hay un par de maneras en las que puedes ir a arreglar esto. En un momento me dieron este texto loco. Ni siquiera sé por dónde empezar con mucho de esto. Es sólo raro. Una de las mejores cosas que puedes hacer es ponerlo en un editor de código. En este caso, lo he puesto aquí en CodePen. Pero puedes usar cualquier editor de codificación de color que quieras. Eso en realidad te da mucha información o ayuda realmente a aclarar lo que está pasando. Ahora se puede ver que todo esto es solo de una etiqueta span y hay una sección subrayada en cursiva negrita aquí, sin razón, parece. Aquí están pasando muchas cosas raras. Ahora que puedes ver la codificación de color, por supuesto, solo puedes eliminar la etiqueta span. No olvides borrar el otro lapso o el lapso contrario. Mucho de este contenido, en realidad, ni siquiera necesitamos porque es solo para este tipo de aquí es lo que se llama un espacio que no rompe. Es equivalente a sólo un espacio, pero tiene el beneficio de no romper línea. A veces se utiliza como portador de lugar para las cosas. Pero ahí tenemos espacio y en realidad podemos simplemente eliminar toda esta sección aquí. Ahí vamos. Ahora tenemos justo el código que queríamos y no de toda la locura. Esa es una gran manera de hacerlo. Existen algunos sistemas de gestión de contenidos que son mejores para eliminar esto que otros. En ocasiones en Drupal tendrían una pasta de Word que eliminará mucha de esa cruft que no quieres mientras deja el contenido que haces y el estilo que haces. Otra forma de deshacerse de él es pegarlo como texto sin formato, así que copia el contenido en un editor de texto sin formato. Eso generalmente debería eliminar todo formato, lo cual no siempre es ideal. Esa es otra forma de hacerlo. Además, si tienes una copia de WordPress a mano, WordPress tiende a hacer un trabajo bastante bueno de eliminar una gran cantidad de ese cruft y exceso de código mientras deja las cosas que quieres conservar si lo pegas en el editor visual. Esa es otra gran manera de evitarlo. A lo mejor si estás usando WordPress por un lado y Drupal otro algo siempre puedes pegarlo en WordPress, luego copiar desde ahí y pegar en la otra aplicación o en la otra cosa que estás haciendo. Hay muchas maneras diferentes de evitarlo, pero ponerlo en un editor de código que los códigos de color es probablemente la mejor manera de mantener el contenido que quieres y deshacerte de las cosas que no quieres. 12. Sacar los "cerebros": Extraer citas: Entonces algo que tal vez quieras hacer es crear algunas cotizaciones de extracción, y creo que ahora tienes suficientes herramientas para poder hacer eso. Entonces lo que vamos a hacer es que voy a tomar una cita de esta pieza en particular que es una vieja historia de Lloyd Arthur Eshbach sobre zombies, y sólo voy a sacar unas palabras y crear una cita de tirón. Por lo que encontré el contenido que quiero sacar. Es esta pequeña sección de aquí, “Fuera de la taquilla de niebla hacia la luz de la luna se deslizó una extraña, extraña nave”. Está bien, así que lo voy a copiar, y luego lo voy a pegar de nuevo. En realidad, lo que quiero hacer es moverme un poco más abajo, voy a agregar blockquote, clase igual a buena clase con pull quote, y voy a seguir adelante y cerrar ese blockquote solo para que no se olvide de hacerlo. Puedo ver que escribí mal algo ahí. Entonces voy a añadir eso otra vez aquí. Entonces si nos desplazamos hacia abajo, deberíamos ver aquí es esa sección otra vez como una cita separada. Entonces ahora voy a ir a mi CSS, y voy a hacer primero que nada, poner la clase, y agregar algo de contenido aquí. Entonces un par de cosas que quiero hacer aquí. Quiero establecer un ancho de digamos 200 píxeles, y tal vez eso sea un poco pequeño. Probemos 300 pixeles, y quiero subir el tamaño, que destaque. Entonces voy al tamaño de fuente de dos em así que es un poco más grande. Eso es tal vez demasiado. Bajemos a decir 1.5. Todavía un poco grande. Hagamos 1.25. Está bien, así que sigue siendo un poco más grande, pero no del todo loco grande. Voy a flotarlo bien. Como puedes ver ahí, desplázate un poco hacia abajo para que podamos seguir viéndolo. Voy a añadir un borde justo en el lado izquierdo. Digamos que cinco píxeles. Qué tal rojo y sólido. Eso está demasiado cerca del texto en sí, así que queremos hacer algo de relleno, más bien. Déjame simplemente hacer relleno a la izquierda, y no sé, tal vez uno em. A ver cómo se ve eso. Eso probablemente sea bueno. Resulta que este rojo es un poco más ligero de lo que quiero, así que voy a colorear que elegí un poco antes. Yo sólo voy a cambiar a ese color. Es más de un rojo profundo el cual creo que encaja mejor con lo que estamos viendo aquí. Ahora, solo agregué relleno a la izquierda, pero creo que podría estar bien si le agregamos un relleno a todos los lados, y lo que va a ayudar con eso, va a hacer que el borde salga un poco más alto también. Entonces solo cambio el relleno a uno em y la frontera está fuera un poco más. ¿ Sabes qué? Creo que quiero hacer uno em, así que en la parte superior e inferior, creo que quiero hacer.5 em, y luego a la izquierda y a la derecha, voy a hacer un solo em, y eso luego lo pondrá así. También podemos cambiar tal vez el color aquí, tal vez lo gris un poco. Entonces hagámoslo En cuanto a hacerla sacar un poco, y ahí tenemos una cotización de pull. También podemos quizá subir un poco esto lo cual creo que podría ser una buena idea. Entonces sólo voy a cortarlo y pegarlo, y estar arriba en este anterior. Entonces otra cosa en la que tenemos que pensar es que con blockquote viene algunos estilos por defecto. Entonces si estamos teniendo demasiado espacio a su alrededor, que siento que lo somos, podemos quitar algún margen y asegurarnos de que no estamos teniendo demasiado en la parte superior e inferior. Pero lo que sí hizo fue que trajo esta información aquí mismo demasiado cerca, en mi opinión, a la frontera. Entonces démosle un poco más de margen. En lugar de cero, hagamos 0.5 em. No es suficiente. Hagamos una em. Ahí vamos. Hay un poco más de espaciado. Creo que también a medida que hagamos esto más pequeño, se verá un poco mejor porque tenemos texto que no sigue aquí. Sí, creo que lo moví un poco demasiado lejos. A ver cómo se ve si lo meto ahí dentro. Está bien, sí. Eso se ve bastante bien, y ahí tienes tu cotización de pull. Seguramente vas a hacer variaciones al respecto. Podríamos agregar un color de fondo para decir rojo muy oscuro, decir así. A lo mejor eso está un poco demasiado oscuro. Vamos a subirlo a decir así. Es demasiado brillante. Se acerca de lo correcto. Entonces podemos hacer algún lugar con algunas cosas así, podemos hacer que la frontera sea un poco más grande si quisiéramos. Piensa justo en cómo queríamos que se viera la cosa y cómo queríamos que interactuara con el otro contenido. Si estamos usando ese color de fondo, creo que voy a cambiar el color del texto a blanco. A lo mejor demasiado. Probemos algo un poco blanquecino así que creo un poco menos pronunciado. Pero sí, ahí lo tienes. Puedes jugar con tus blockquotes y simplemente agregarlas por tu cuenta sin necesidad de contratar a un diseñador o hacer algo más que solo añadir un poco de texto y un poco de CSS. 13. Gracias por los recuerdos: Bueno, hemos pasado unos buenos momentos juntos. Aprendiste algo de HTML, algo de CSS. Has aprendido lo que es una etiqueta, un elemento. Normas y declaraciones. [ inaudible] Pero ahora debo despedirme. Gracias por ver mi curso. Espero que hayas aprendido mucho y puedas aplicarlo a lo largo de tu vida. No olvides incluir tus proyectos de directorio, y ponerlos arriba para que yo pueda verlos, para que otros alumnos puedan verlos y solo mostrar lo que has aprendido. Gracias de nuevo por tomar este curso. Espero que hayas podido matar a algunos zombies y divertirte un poco en el camino. Nos vemos la próxima vez. 14. Lección extra 1: Construir un búnker en la página: En este video, vamos a estar hablando de cómo construir una página HTML desde cero. Hablaremos de Doctypes, los elementos de cabeza y cuerpo HTML, y los elementos dentro de la cabeza. En primer lugar, hay cuatro partes principales a una página HTML. En primer lugar está el DOCTYPE. Esto le va a decir al navegador con qué tipo de documento está trabajando. Ahí está el elemento HTML, que sólo va a envolver todos los demás elementos. Ahí está el elemento de cabecera que va a dar información sobre la página y cómo renderizar la página, cómo mostrar más bien la página, y luego el elemento de cuerpo, que va a contener toda la información que realmente ves en el página. El doctype, de nuevo, le dice al navegador qué tipo de documento es. Cuando estábamos trabajando con XHTML, teníamos algo como esto, que es super encantador. Seguro que todos lo tienen memorizado ahora. Desafortunadamente, con HTML5, se fueron al revés. No, en realidad es afortunado porque esto lo puedo recordar. DOCTYPE HTML le dice al navegador que se trata de un documento HTML5. El elemento HTML. Se va a envolver todas las demás etiquetas o todos los demás elementos. Tiene una etiqueta HTML de apertura que parece una etiqueta HTML y una etiqueta HTML de cierre. Para una mejor accesibilidad y optimización de motores de búsqueda, una de las mejores cosas que puedes hacer es agregar lenguaje al elemento HTML, la etiqueta de apertura. Esto ayuda a garantizar que no sólo el navegador sepa qué lenguaje informático estamos usando, que es lo que le dice el doctype, sino también qué lenguaje humano está usando. Se ve algo así. Simplemente tienes la etiqueta de apertura HTML, agregas un atributo lang y en, en este caso es inglés, pero puedes usar es, para Español y hay muchos otros códigos de país y códigos de idioma que te puede usar. El elemento de cabeza va a sostener todo sobre la página. Nada de esto realmente se renderiza en la página o se muestra en la página. Es toda la información sobre cómo crear la página, cómo armarla, para que tengas cosas como los archivos CSS que están en uso, cualquier archivo JavaScript que pueda estar en uso, meta info sobre la página, el título que aparece en el nombre de la ventana o pestaña, y toda la demás información sobre la página. No es información lo que se renderiza en la página, sino información que se trata de la página. Ahora también estoy enfatizando eso parcialmente, porque la cabeza es similar a un par de otras etiquetas, encabezados y encabezados. Hablaremos de las diferencias más adelante, pero encabezados y encabezados van en el cuerpo mientras que la cabeza es una cosa separada, es un hijo directo del elemento HTML. Nuevamente, nada en la cabeza se mostrará directamente en la página web y se ve así, abriendo etiqueta de cabeza, cerrando etiqueta de cabeza. El cuerpo. Esto va a contener toda la información que está visible en la página. Todo lo que realmente se muestra, todo lo que veas en la ventana del navegador estará en el cuerpo. Todos los textos, colores, imágenes, cualquier otra cosa que aparezca, va directa y estrictamente en el cuerpo. Tenemos nuestro elemento de cuerpo de apertura, o más bien la etiqueta de cuerpo de apertura y nuestra etiqueta de cuerpo de cierre. Ahora armemos todo lo que hemos aprendido. En primer lugar tenemos el DOCTYPE. Por suerte es HTML5 DOCTYPE, así que mis dedos no consiguen un calambre escribiendo todo el DOCTYPE. Siguiendo eso es la etiqueta HTML de apertura, con un atributo lang para inglés ya que la página que estamos construyendo aquí está en inglés. Después tenemos la etiqueta de cabeza de apertura, etiqueta de cabeza de cierre, etiqueta cuerpo de apertura, etiqueta de cuerpo de cierre, etiqueta HTML de cierre. Es importante tener en cuenta que cabeza y cuerpo son los únicos dos elementos que están directamente dentro del elemento HTML. Todo lo demás en el documento HTML debe ir en el elemento head o en el body element. Nada más es directamente un niño, por así decirlo, del elemento HTML. Ahora sólo quiero dejar claro de nuevo que cabeza, cabecera y encabezamientos son cosas diferentes. El cabezal no es un encabezamiento ni un encabezado, pero es la cabeza, es la información sobre la página. Encabezado y h1 a h6, o los encabezamientos son diferentes. Estos van en el cuerpo, no en la cabeza. Encabezado es para información sobre la página. Encabezado y encabezado o h1 a h6 todos aparecen o se muestran dentro de la página, mientras que head es info sobre la página y no se muestra directamente. Dentro de la cabeza, tenemos una serie de elementos diferentes. En primer lugar está el título. Esto es de nuevo, el título de la página, tampoco se muestra directamente en la ventana del documento ni en la ventana del navegador. No obstante, se muestra en el nombre de la pestaña o en la parte superior de la ventana. Los textos que verías en el nombre de la pestaña o en la parte superior de la ventana, ese es el elemento title. Sin embargo, no es importante optimización del motor de búsqueda porque da información sobre la página y también es información que verías en un nombre de pestaña, etc, por lo que con mil millones de pestañas abiertas, puede ser importante para tener buenos textos ahí. A lo mejor tienes menos pestañas abiertas que yo, pero probablemente tengo más de mil millones. Desea usar palabras clave descriptivas al escribir su título es solo para ayudar a la optimización de su motor de búsqueda y ayudar a que quede claro de qué se trata la página. Aquí tienes un ejemplo de un elemento de título. Meta es información sobre la página. Al ser información sobre la página, pensarías que va en la cabeza y lo hace. Se trata de una etiqueta de vacío, lo que significa que no tiene etiqueta de cierre, por lo que es solo una etiqueta de apertura. La mayoría de las veces se compone de un atributo de nombre y un atributo de contenido. Hablaremos de lo que son esos en un momento. Pero también hay un atributo de conjunto de caracteres. Este es el conjunto de caracteres que utiliza el sitio web. Esto es importante para la internacionalización y para garantizar que cualquier navegador que esté mirando esta página esté codificando correctamente o entendiendo adecuadamente los caracteres que estaban en uso. Es bueno tener de lo contrario el navegador está adivinando, a menudo adivinará bien, pero podría no, por lo que tenerlo es útil. En la mayoría de los casos el valor para el juego de caracteres debe ser UTF-8 y tendrá este aspecto. Meta charset UTF-8. A continuación tenemos la etiqueta de la ventana gráfica Meta. Esto es importante, particularmente para el diseño receptivo. Nos meteremos en eso un poco más después. Pero le dice al navegador que no aleje, sino que muestre el sitio en su tamaño natural. Qué pasa muchas veces con los dispositivos móviles si no tienes esta etiqueta de Meta de la ventana gráfica en su lugar, se alejará e intentará mostrarte toda la página a la vez. Durante mucho tiempo, esto fue realmente bueno porque de lo contrario estabas atascado zoom en una página que apenas podías leer y probablemente no funcionó en tu dispositivo móvil, pero con un diseño responsive, que entraremos en un poco, tener esta etiqueta Viewport Meta te permite tener un mayor control como desarrollador web y te permite crear un sitio web que será más fácilmente visualizable por los usuarios en sus dispositivos móviles. No te preocupes si no tiene sentido ahora mismo, lo discutiremos de nuevo. El nombre del elemento Meta de la ventana gráfica se establece en Ventana gráfica y el contenido se establece en un ancho igual al ancho del dispositivo y en la escala inicial es igual a 1.0. Generalmente, lo que tenía ahí para contenido es todo lo que necesitarás. Hay momentos en los que se pueden hacer algunos cambios leves a esto pero en general, este es el valor del contenido que se desea utilizar. El metaetiqueta descripción también está ahí para la optimización de motores de búsqueda. Van a ser unas cuantas frases que algunas de su sitio. Muchos motores de búsqueda mostrarán esto como la descripción que ves en los resultados de búsqueda, así que asegúrate de que sea claro, conciso, rico en palabras clave, y represente bien tu sitio. El atributo de nombre aquí va a ser descripción, y el contenido va a ser cualquier frase o dos sobre tu sitio que quieras poner. Este contenido es probablemente demasiado corto, probablemente debería ser alrededor de 30-50 palabras. No demasiado largo, pero tampoco demasiado corto. El elemento link es una forma para que vincules otros tipos de archivos con tu HTML. A veces son los archivos CSS y a veces otros documentos relacionados. Se va a ver algo así. Tienes el elemento de enlace aquí. Cada atributo ref va a ser la ruta al tipo particular de archivo. En este caso es un archivo CSS y rel va a ser la relación por lo que es que te estás conectando al elemento link. En este caso, es la hoja de estilo. Ahora echemos un vistazo a alguna codificación en vivo. Aquí tenemos todos los elementos de los que acabamos de hablar todos juntos en un solo spot. la izquierda aquí tengo el código, la derecha aquí hay una representación directa del mismo. La mayoría de lo que hablamos eran cosas en la cabeza, que de nuevo no se muestra directamente en la página, pero he incluido un encabezado y un H1 aquí para ayudarte a ver la diferencia entre el encabezado de cabeza y el encabezamiento. Esta es la cabeza, esta es una cabecera, este es un encabezamiento. Tomémoslo de arriba aquí. Contamos con nuestro DOCTYPE. Esto nuevamente le dice al navegador que es una página HTML, en este caso, HTML5 por página posterior. Tenemos nuestra etiqueta de apertura HTML con un atributo lang y el inglés conjunto como nuestro idioma. Tenemos nuestra etiqueta de cabeza de apertura, y aquí tenemos una etiqueta de título que se mostrará en la ventana del navegador. A continuación aquí tenemos el juego de caracteres, de nuevo, UTF-8. Asegúrate de que todos estamos en la misma página aquí. A continuación tenemos la etiqueta de meta viewport. Esto será todo lo que necesitas hacer. Puedes copiar y pegar eso en tus páginas. No necesariamente necesitas saber más que eso. Hay algunas otras opciones, pero rara vez se usan. Tenemos nuestra metaetiqueta de descripción, tenemos contenido conjunto, tenemos nuestro enlace a un archivo CSS zombie, y la relación es la hoja de estilo, tenemos nuestra cabeza de cierre. Nuevamente, toda la información sobre la página, información que no se va a renderizar del lado derecho aquí, sino que informará cómo se renderiza esta página, particularmente con zombie.css, pero también información sobre la página como las palabras clave de la ventana gráfica y la descripción. Tenemos nuestra etiqueta de cuerpo de apertura, después tenemos nuestra cabecera, que es un elemento estructural del que hablaremos con más detalle un poco más tarde. Tenemos nuestro rumbo H1, que es información que se mostrará a la derecha aquí como lo puedes ver ahí mismo. Después tenemos nuestro cierre H1, cierre de cabecera. Tenemos una etiqueta de navegación que no debería estar ahí. Llegaremos a eso en un poquito. Tenemos nuestro cuerpo de cierre y tenemos nuestro HTML de cierre. Ese es el final de esta lección sobre la creación de tu primera página HTML. 15. Lección extra 2: Cereeeeebros, cuerpos y elementos estructurales: En este video, vamos a estar hablando de construir el cuerpo del documento HTML. El encabezado, otra vez diferente a la cabeza y los encabezados, cabecera es un elemento estructural que puede contener sus encabezados. Puede ser un encabezado para una página o una sección o artículo, y hablaremos de esos dos en un segundo. Se ve algo así. Tenemos nuestra etiqueta de cabecera de apertura y tenemos nuestra apertura h1. Después tenemos nuestro cierre h1 y cabecera de cierre. Este es el encabezado más básico. También puedes incluir otras etiquetas, otros elementos, según sea necesario. Pero esta sería la versión más básica de un encabezado. Nav, principal, y a un lado son tres elementos estructurales más. El nav va, por supuesto, va a envolver tu navegación. Se puede utilizar por sí mismo o puede aparecer en un encabezado o en un lado, depende de si desea que la navegación esté al otro lado como lo sería si está en el encabezado o a lo largo del costado como sería si fuera un aparte. También puede ser por su cuenta. Podrías tener un cabezal y luego tener un nav debajo él y de lado por un lado y un nav por el otro. Pero tienden a trabajar mucho con cabecera y a un lado. Este es el contenido principal de la página, y eso es casi todo. El aparte es para contenido relacionado, pero tangencial, mayoría de las veces barra lateral, pero podría usarse para comentarios o contenido similar. Sí, típicamente una barra lateral y por eso a veces el nav entra en ella. Pie de página, viene al final de la página o al final de una sección o artículo. A menudo contiene información sobre derechos de autor y enlaces a otras páginas o artículos o secciones relacionados. Artículo, es contenido que puede mantenerse por sí mismo. Típicamente envolverá publicaciones de blog o artículos de noticias, cosas que se pueden sacar y aún así poder tener sentido y poder pararse por sí mismas. Sección por otro lado, es sólo una parte de una página. No se sostiene por sí solo. Es una porción de un artículo más grande. Echemos un vistazo a algún código. Aquí lo tengo todo dispuesto para nosotros. Tenemos la cabeza y el cuerpo de la última sección. Aquí de nuevo, tenemos el encabezado y el h1, por debajo de que tenemos un nav. Dentro del nav, tenemos una lista desordenada de tres enlaces. En este caso, estoy vinculando a tres lugares dentro de la propia página. A continuación, tenemos nuestro elemento principal. Nuevamente, el nav está de pie por sí mismo, en este caso, separado del encabezado y separado del lado, que está aquí abajo. En nuestra principal, tenemos tres artículos. Dentro del artículo, tenemos dos apartados de cada artículo. Tenemos un h2 que es el encabezamiento del artículo, y h3 para el rubro de la sección y luego algún contenido ahí. De igual manera, en el siguiente artículo, tenemos un h2 para el rubro de ese artículo, tenemos una sección con un h3 para el rubro ahí y nuevamente para el artículo final. Aquí está nuestra etiqueta principal de cierre, después tenemos nuestro lado. Al lado, sólo tenemos un poco más de contenido. Usé un h3 ahí para hacerlo más consistente con esta sección. Por último, tenemos nuestro pie de página, cual tiene nuestra información de derechos de autor. Pie de cierre, cierre de cuerpo, cierre HTML. Cierre de este video. 16. Lección extra 3: Respuesta a la lucha de zombies: En este video, estaremos hablando de diseño responsive, qué es y por qué. Discutiremos un poco más la metaetiqueta de Viewport, y hablaremos de consultas de medios. En primer lugar, diseño responsive. Permite que el sitio se adapte o responda al contexto en el que se coloca. Ya sea que esté en un dispositivo móvil como un teléfono o una tableta o una pantalla gigante a una computadora de escritorio. El sitio es capaz de adaptarse a todos esos dispositivos. Las consultas de medios permiten cambiar qué CSS se utiliza en función de una amplia variedad de condiciones, a menudo tamaño de pantalla o ancho de pantalla, es decir, móvil versus escritorio, o a veces relacionado con medios como impresión versus pantalla, etc., pero hay muchos tipos de consulta de medios. ¿ Por qué necesitamos un diseño responsive o qué está pasando? Hace mucho tiempo, los teléfonos y dispositivos pequeños hacían terribles con los sitios web. Te mostrarían básicamente solo alguna parte del sitio de tamaño de escritorio, y eran muy difíciles de navegar, muy difíciles de encontrar información sobre, muy difíciles de siquiera mirar nada. Una innovación que Apple trajo cuando crearon el iPhone, fue que Safari encogería automáticamente un sitio web, cabía dentro de la pantalla. Si bien esto hacía que a menudo fuera difícil leer en tamaños pequeños, entonces podrías pellizcar y acercar mucho más fácilmente para encontrar la parte del sitio web que te interesa. Esto hizo que los sitios web fueran mucho más utilizables porque podías ver todo el asunto a la vez y luego podrías acercar la parte que querías o desplazarte hacia abajo para encontrar la parte que te interesa. Pero cuando surgió el diseño responsive, necesitábamos tener una bandera o alguna manera para que el navegador supiera si deberían alejarse o si deberían dejarlo tal como está. En viene la metaetiqueta Viewport. Apple también se le ocurrió esto. Tag da un cabezales hasta el navegador para no alejar como discutimos antes. Tiene un valor de nombre de Ventana gráfica y el contenido es ancho igual a ancho del dispositivo, escala inicial de uno. Consultas de medios. ¿ A qué hacen? Ellos prueban para una característica, si esa característica es cierta, ejecuta el CSS dentro de los corchetes. Por ejemplo, tenemos, esta es nuestra consulta de medios, por lo que en medios, si estamos en una pantalla versus en impresión, y el ancho máximo de esa pantalla es de 900 píxeles, lo que significa el tamaño de pantalla actual de la pantalla o tamaño del navegador está por debajo de 900 píxeles, entonces ejecutaríamos lo que CSS estuviera aquí. Estos por supuesto son los comentarios CSS, por lo que no se va a ejecutar pero luego se podría cambiar el diseño, hacer todo tipo de cosas diferentes cuando esta consulta de medios es cierta. Hay un montón de diferentes tipos de consultas de medios. Acabamos de ver uno que era max-width, el predeterminado era el caso del escritorio y luego a medida que te fuiste más pequeño, hacía cambios. El resto de eso es iniciar mobile-first, lo que significa que comienzas con la versión más pequeña de la pantalla y luego agregas o cambias elementos y CSS a medida que el sitio se hace más grande o a medida que el tamaño de la pantalla se hace más grande. Uno de los beneficios de mobile-first es que hay mucho menos artesanía, no tienes que quitarla del sitio de escritorio. Se puede editar a medida que avanza. No tener todas esas cosas extra es realmente útil cuando tienes una conexión lenta o con el móvil tal vez lento, tal vez intermitente. Hay muchas maneras diferentes que podrían ser problemáticas. Por lo que tener un diseño mobile-first es una buena idea. También puedes hacer consultas de medios para imprimir es decir, esta página está destinada a ser impresa, así que hacen estas cosas diferentes. Por ejemplo, se pueden quitar las imágenes de fondo, los colores de fondo, quitar la navegación porque no se puede hacer clic en la navegación en papel, o al menos aún no. Pero sí, hay muchas cosas que las consultas de los medios pueden hacer. Los puntos de ruptura son siempre que se aplica la consulta de medios. Por ejemplo, en el último ejemplo teníamos una anchura mínima de 900 píxeles, el punto de ruptura estaría en esos 900 píxeles. ¿ Cuántos puntos de rotura debes tener? Cuántas veces debes realizar actualizaciones al sitio en función del tamaño del dispositivo en el que lo estás mirando. Realmente se reduce a tantos como necesites. Quieres asegurarte de que el contenido sea claro y mirando lo mejor posible. Por mucho que se necesiten muchas consultas de medios para hacer eso es cuántas necesitas, pero no más que eso. Más puntos de rotura significa un mantenimiento más complicado y puede ser más difícil agregar cosas nuevas y nuevas características. Usa tantos como necesites y ni uno más que eso. Cuándo se debe establecer un punto de ruptura? Lo mejor es hacerlo cuando el diseño lo requiera. Si lo haces en función del tamaño de las pantallas comunes, entonces siempre estarás persiguiendo tamaños de pantalla y nunca lo lograrás. Se está creando un nuevo tamaño de pantalla casi todos los días. A medida que se crean nuevos dispositivos en nuevas formas de mirarlos, no tiene sentido perseguir eso. Si basaste tus puntos de ruptura en el diseño que estás implementando, mucho más probable que tengas puntos de corte suaves y apropiados. Echemos un vistazo a algún código. Aquí está mi consulta de medios. Cuando estoy por encima de 600 píxeles, es entonces cuando estos se aplicarán, así que una vez que esté por encima de los 600 píxeles, el principal flotará a la izquierda y tendrá un ancho de 70 por ciento, y el lado flotará justo a un ancho de 28 por ciento. Miremos ese lado, sube un poco más alto, ahí está. Ahora he flotado y 70 por ciento, flotado derecho y 28 por ciento.