Transcripciones
1. Introducción: Ya sea que escribas para ganarte la vida o simplemente bloguear aquí y allá, conocer algunos HTML y CSS te ayudará a destacar en el paisaje post-apocalíptico que llamamos Internet. Este curso va a ampliar tus conocimientos sobre HTML y CSS, y debería ayudarte realmente a matar zombies dondequiera que aparezcan. Si nunca has tenido un HTML o CSS antes, te
recomiendo que vuelvas y eches un vistazo a mi curso, Code no es tan aterrador como zombies,
es HTML y CSS para Escritores, Editores y Principiantes. Eso te va a empezar realmente sobre cómo escribir Tags, cómo escribir CSS, esas cosas. Si ya lo sabes o tienes alguna idea, entonces podrías por favor seguir adelante en este curso y aprender. Mi nombre es John Ray y soy un desarrollador web en trabajo y profesor
universitario que lleva construyendo sitios web desde el último milenio. Aprendamos algunas habilidades y golpeemos a algunos zombies.
2. Herramientas de Zombie (skip si tomas "El código no es tan temático como Zombies"): Hola. En este episodio vamos a hablar de qué 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, puedes obtener esto ya sea de, si estás en Windows, puedes usar el Bloc de notas o si te encuentras en un Mac, también
puedes usar la edición de texto, aunque deberías usarlo en su modo de texto plano. Dicho todo eso, si bien 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 recomiendo extra un editor de codificación de color. 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 se meten en un color diferente luego 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 errores de punto feliz, 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 probablemente esté un poco más allá del nivel de habilidad. Se trata de 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. Realmente cualquier otra cosa que uses, cualquier otra herramienta de codificación para HTML y CSS debería funcionar bien, casi cualquier cosa, en realidad. El otro que voy a recomendar aunque es Codepen.io. Este es un sitio web que está disponible, uso
gratuito, 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, y se ocupa 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. Cualquier demo de clase así ser 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 la pluma de código. Aquí abajo en la parte inferior izquierda vas a tener apuntado. Da clic en eso, regístrate con un correo electrónico. Ese proceso es bastante típico. Voy a iniciar sesión sólo porque ya tengo una cuenta, iniciando sesión. Ahora una vez que estás conectado, ya
tengo, estos son algunos bolígrafos que creen que te podrían interesar. Pero lo que vamos a hacer es que vamos a ir a explorar, vamos a crear en una pluma. En CodePen a Pen es justo esto. Se trata de una porción HTML, CSS, y JavaScript de una página que puedes jugar con ella. La porción de JavaScript no es algo que necesitamos. 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. La forma predeterminada de empezar a aprender un lenguaje de programación es escribir hello world y enviarlo a la pantalla. Como se puede decir como lo 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. Marcados en Undead: En este video, hablaremos de las formas de marcar contenido para visualización, comunicación, subíndices y superíndices, definiciones y abreviaturas, elemento de tiempo o etiqueta de tiempo, contenido y código
preformateado, y la poderosa etiqueta pequeña. lo primero que queremos hablar es de la sub etiqueta o subíndice, y simplemente hace lo que esperarías que haga un subíndice, baja la línea
de base un 25 por ciento y usa texto más pequeño que el texto a su alrededor. Es mejor usado para notas al pie, ya que estoy seguro que estás bien acostumbrado. También para fórmulas químicas como H2O etc. o para numerar variables matemáticas como la horda Z1 a Z etc. Superscript crea texto superíndice, muy parecido a lo que esperarías con los exponentes. Apenas la línea base sube 50 por ciento, usa un tamaño de texto más pequeño, y es mejor utilizado para los exponentes. Z en cubos por ejemplo. También algo llamado letras superiores, que es un estilo de abreviatura común en francés y lenguajes de posibilidad. Es técnicamente una cosa diferente a superscript, pero si lo estás implementando en HTML típicamente se hace con la etiqueta sup o la sub etiqueta. También los números ordinales, el 106º o tercero o quinto o lo que sea. A veces necesitarás un marcado, una definición o una abreviatura, algo que verás, comúnmente. El tag dfn es el marcado para una etiqueta de definición. Con el fn también puedes usar un atributo de título que establece la cosa exacta definida. También puede agregar un enlace desde la etiqueta dfn directamente a una definición que podría estar más abajo en la página. Estoy usando algo llamado fragmentos de página o etiquetas de anclaje. Hablaremos de eso en un rato. Con la etiqueta abbr, puedes configurar abreviaturas. Sí, abbr es una abreviatura de abreviaturas. También puedes hacer acrónimos y una amplia variedad de esos también. Similar a la definición, también podría
usar un atributo title. Pero lo que pasa con los atributos de título tanto para abbr como para dfn, es que solo son útiles para los usuarios del mouse porque nadie más puede ver la información sobre herramientas. Sólo son útiles también al subconjunto de ellos que saben pasar el cursor sobre la abreviatura con el ratón, o saben que se está usando abreviatura, incluso
podrían pasar el mouse. Bueno, te recomiendo agregar el atributo title tanto a tus dfns como abbrs, a menos que los uses en conjunto, entonces solo lo necesitas en abbr que está dentro de un dfn. Yo tendría cuidado no solo de usar esto, sino de asegurarme de que tú, como es particularmente buena práctica, definas el acrónimo de abreviatura cuando lo uses por primera vez solo para asegurarte de que todos estén en la misma página y todo el mundo sabe lo que está pasando. El elemento de tiempo, que se utiliza para marcar fechas y horas específicas o duraciones de tiempo. Por ejemplo, tiempo del 23 de agosto, duración de 12 horas y 37 minutos. Para que sea un poco más fácil para el SEO y un poco más fácil si el sonido de pie para los lectores de pantalla, hay algo llamado el atributo datetime. formateo de esto es muy importante porque tiene que ser legible por máquina. Tiene que venir en un formato que la máquina esté esperando o que la computadora esté esperando. Por ejemplo, tenemos esto es 23 de agosto 2025 a las 1700, 52 minutos y 42 segundos. Generalmente, si sueltas cualquier pieza de esto, puedes crear una cadena válida como 2025-08-23 o 2025-08 o 1752, etc. Esos son todos valores de fecha y hora válidos. El pre tag, utilizamos para código o para otro texto preformateado. Está formateado en una fuente monospace, generalmente mensajero nuevo, y el espacio en blanco se mantiene intacto y no se colapsa en un solo espacio como normalmente lo está en HTML. Si tienes dos espacios en su lugar, mostrará dos espacios en lugar de solo mostrar un espacio. El pequeño tag originalmente se utiliza para simplemente hacer el texto más pequeño está ahora en HTML 5, usado para cosas como descargo de responsabilidad legal, avisos de
copyright y comentarios secundarios. Usar este código es mucho más semántico significado que proporciona más información al navegador y [inaudible], etc. Entonces solo tener un div genérico o span genérico que hace que el texto sea más pequeño. Echemos un vistazo a algún código en vivo. Aquí empezamos con el subíndice, se
puede ver que el contagio zombie se puede obliterar. Subíndice de uno justo aquí usando sub tag o aquí agua H20 también lleva plaga zombie o la suma de Z1 a Z horda. Superscriptos, tenemos la Z, tres o Z en cubos. Fue susto de no-muertos. El letrero superior para los hombres fue O. Mademoiselle zombie significa Mademoiselle zombie o los números ordinales para la 106 infantería. También, tenemos definición y abreviatura. Aquí tenemos el dfn del título de zombie. Aquí si paso el cursor sobre él, me muestra
lo que hay en el atributo title. Entonces solo tengo la información más allá de ella, lo que sea que quieras poner. Tenemos una abreviatura bajo zombie, que está justo aquí arriba, esta información aquí. Entonces en la de resistencia humana, puse una abreviatura dentro de un dfn y luego solo hice un título en la abreviatura, no sólo en la definición. Entonces otra vez, pon eso justo después para asegurarte de que todo el mundo estuviera en la misma página. El valor de tiempo, etiqueta de tiempo está justo aquí solo se envuelve por aquí, no hace ningún cambio real en el texto subyacente, no hace ningún cambio de formato ni nada por el estilo. Simplemente lo hace más legible por máquina. Tenemos la fecha y hora aquí del 23 de agosto de 2025 a 1752 42. Puedes incluir más específico o podría haberla dejado también en la primera parte aquí. Entonces también tenemos duración. Si estoy haciendo una duración, no necesito una cita. Simplemente tengo la cantidad de tiempo como 12 horas 37 minutos, datetime etc Justo a continuación tenemos texto preformateado, y para esto jugué alrededor un poco con formatearlo. Agarré la abreviatura solo para tener algún texto ahí dentro. Después jugué con el espaciado, para que tenga todas estas cosas extra y el espacio en blanco se mantenga intacto. Ese es un espejo directo de lo que se muestra en el código. En cuanto a todos aquí tenemos pequeña etiqueta. Este es el texto de tamaño normal. Entonces en realidad hice una pequeña etiqueta, que es ésta de aquí, que es sólo un poco más pequeña. Después agregué una segunda etiqueta pequeña dentro de la pequeña etiqueta sólo por diversión. Eso es divertido raro. Se trata de una pequeña etiqueta dentro de una pequeña etiqueta, y eso la hizo aún más pequeña, un nivel más abajo. Entonces por supuesto, abajo aquí abajo tenemos nuestra nota al pie. Eso es todo para nuestra marca de no-muertos. Ahora, vamos a hablar de edición.
4. Edición de motivos de Zombie: Este video vamos a hablar de edición. Estamos hablando de formas de marcar contenido, mostrar material editado, vamos a hablar de eliminar etiqueta para eliminar contenido, el sitio y atributos de fecha y hora para ayudar
a explicar cuándo sucedieron las cosas y cómo sucedieron . Una etiqueta de inserción, que va a ser cuando añadas contenido. De nuevo, cita y atributos de fecha y hora, también va a trabajar con ellos y una etiqueta de marca que resalta las cosas y luego te
muestra cómo puedes agregar una sección de no grupo o preguntas solo a una forma de hacerlo. Está bien, esta es la edición de Zombie. A veces necesitas mostrar marcas de edición. Te recomiendo que hagas esto solo si las ediciones necesitan ser públicas con como una ley o con estatutos o algo así, algo donde es realmente importante que puedas ver la historia editada de la misma. documentar legalmente las diferencias entre dos documentos y para asegurarte de que eres transparente. El tag del pone una línea a través del texto, al igual que tachado. atributo Cite le permite hacer referencia a una URL por qué se han
realizado cambios para actas de reunión o posiblemente un documento legal, etc. atributo
fecha-hora toma una cadena de fecha correctamente formateada y simplemente da la hora o fecha en que eso se hizo un cambio particular. Entonces también hay algo llamado la etiqueta S, que es para tachar. Visualmente, estos hacen lo mismo, la diferencia realmente es que Del se usa más para la edición significada, mientras que S es un poco más para el contenido ya no es válido. El INS o ins muestra dónde se ha insertado el texto. De nuevo, eres el atributo cite, igual que el del, es una URL que hace referencia a la razón del cambio. Atributo de fecha y hora, de nuevo,
igual que del, igual que la cadena de tiempo, no sale de la fecha y hora del cambio. Después está la etiqueta de marca que es un punto culminante, marca el texto resalta, pone un fondo amarillo detrás de ella, debe usarse para contenido de relevancia, no contenido de importancia. Se debe usar fuerte para contenido de importancia. Pero creo que mark podría ser usado mucho con la edición solo para asegurarte de que lo
eres o para señalar cosas que tal vez alguien quiera mirarlo, asegúrate de que estén en lo correcto. Nuevamente, por importancia, se desea utilizar la etiqueta B más fuerte preferiblemente la etiqueta fuerte. Marcar instrucción no se utilizará cuando el mismo contenido al mismo tiempo, y el contexto de edición podría ser contenido que necesita una segunda mirada o alguna atención especial. A lo mejor el editor no sabía cómo recompensar esa frase, etc. También
quería idear una forma escribir notas en porque a veces no es suficiente comercializar, también
quieres escribir una nota de algún tipo, así que hay no es una forma estándar de hacer esto, pero te voy a dar una especie de ejemplo. ¿ Cuál es el CSS para que se vea bonito? Entonces tendrás una opción de hacerlo de esa manera o si encuentras una mejor manera, eres bienvenido a hacerlo también. El nota es lo suficientemente grande, puedes ponerla en un elemento a un lado, pero eso es un elementos a nivel de bloque. No funciona súper bien para las notas en línea, por lo que el método que estoy usando es una etiqueta span y algo de CSS para que se vea un poco diferente al resto del contenido. Solo estoy usando una clase de nota y solo envolviendo la nota en esa clase en particular con la etiqueta span. Está bien, así que veamos algún código. Aquí tengo la carta del Presidente a los neoyorquinos después de la invasión zombi, alguna edición, ojalá antes de que se apague. Estas son algunas etiquetas del, como verás aquí. También agregué una operación cite y una fecha-hora a este particular del. No hice citas a lo largo solo de este contenido sólo porque se pondría realmente abrumador. Yo lo hice aquí y lo hice por el inserto aquí, y probablemente deberías hacerlo por cada lugar que estás haciendo cambios, pero en este caso, simplemente no lo hice para hacer las cosas un poco más limpias. Pero sí agregué fecha-hora a casi todo porque en teoría, la fecha-hora cambiaría un poco cada vez que se cambia, asumiendo que estás usando segundos, etc. Qué tan granular quieres ser depende de ti y de los requisitos de su situación. Tenemos una eliminación aquí, tenemos un inserto, tenemos una marca. Algunos más insertando, algunos más borrando. Ahora una cosa que está pasando aquí, y en realidad sí agregué algunas notas aquí. Todavía no estás viendo esos porque simplemente no los mostré porque es confuso. Si no sabes cuáles
son, simplemente aparecen como texto regular, y una cosa que no me gusta de la etiqueta Insertar es que subraya las cosas. El motivo por el que no me gusta eso es porque eso se usa
con mucha más frecuencia para enlaces que para texto insertado, podría confundir a algunas personas, así que acabo de hacer algo de CSS para ayudar a que las cosas se vean más claras. Está bien, entonces si agregamos estos, lo configuro para que las eliminaciones sean de fondo de rojo, inserciones tengan un fondo de verde, las marcas siguen siendo amarillas, y luego agregué un fondo de azul a las notas. Se puede ver que hay notas agregadas aquí. Hay muchas cosas borradas, probablemente para ayudar a salvar a presidente de caras, cara. Pero estas son solo algunas cosas que podrías hacer para ayudar a asegurarte de que la comunicación sea adecuada y que estás haciendo lo que necesitas hacer para explicárselo a la gente. Está bien, eso es todo para editar. Ahora pasemos a los símbolos HTML.
5. Apocalypse simbolico: En este video, vamos a hablar de los símbolos HTML. Tanto los corchetes angulares como los símbolos ampersands se utilizan para designar código. Entonces cuando realmente necesitas mostrarlos, puedes hacer algo un poco diferente y dice, vamos a hablar de aquí. Hablaremos de espacios no rompientes, marcas de propiedad
intelectual, moneda, comillas, guiones y guiones y guiones. ¿Cuál es el símbolo? Muchas veces necesitarás mostrar un corchete angular u otro carácter que designe código. Por lo que necesitas tener alguna forma de demostrar que no es código. El modo en que lo haces es a través de un símbolo HTML. Los símbolos comienzan con un ampersand y con un punto y coma. A muchos de los comunes se les ha dado un nombre más memorable y se les llama entidades HTML. Hay muchos más símbolos que puedes usar que los que son nombres
memorables y tienen un código numérico con ellos. Por ejemplo, aquí tenemos menos que y mayores que. Entonces se va a ampersand LT punto y coma. Por lo que LT por menos que y mayor
que, va a ser ampersand GT por mayor que punto y coma. Ampersand. Dado que el ampersand ahora significa el símbolo HTML, necesitamos hacer algo diferente con él. Entonces ampersand es en realidad cuando un punto y coma AMP y ampersand. Ahora algunos, verás a veces que un ampersand solo por sí mismo también será recogido como ampersand en lugar de como código. Para una mejor compatibilidad, recomendaría tener el punto y coma AMP completo y ampersand. Pero hay contextos en los que podría estar bien o podría funcionar sólo tener el ampersand. Espacio no rompiendo. Esto se usa mucho para solo si eres una de esas personas que tiene que tener dos espacios después de una línea. La única forma de hacerlo en HTML es tener un espacio regular y un espacio no rompiente. Por lo que dos palabras que se unen por un espacio que no rompe no se romperán a través de un salto de línea. Para que puedas mantener juntas esas dos palabras sin importar dónde caiga el texto. También evita que el espacio en blanco se derrumbe en un solo carácter. Por lo general, si agregarías como seis espacios al espacio, dos cosas fuera, el mejor espaciado se debe hacer con CSS en lugar de con HTML. Pero por alguna razón necesitas unos cuantos espacios extra, puedes hacer el espacio no rompiendo un par de veces, y eso saldrá como ese número de espacios en lugar de colapsarlos todos en un solo espacio. Se ve como ampersand, NBSP es para el espacio que no rompe. Entonces en el ámbito de la propiedad intelectual, y tenemos derechos de autor. Tenemos el símbolo de copyright, que es ampersand copy. También hay un letrero registrado, que es ampersand ridge, y el símbolo de marca, que es comercial y comercio.El Euro va a ser un ampersand euro, cent va a ser ampersand centavo, libra, ampersand libra, yen, ampersand yen. Bastante autoexplicativo en esos casos. En ocasiones, cuando estás trabajando con sistemas de administración de contenido, habrá algunos campos que no manejan muy bien las comillas. El motivo principal por el que eso sucede es que la comilla puede confundir el código y hacer que termine antes de que se suponga. Entonces la forma de moverse por eso es si aún puedes acceder al back-end de la página, puedes agregar comillas a través de símbolos HTML. Por lo que ampersand quot, Q-U-O-T funcionará para las comillas dobles de volcado. También puedes usar estos códigos numéricos para agregar cotizaciones inteligentes o para izquierda y derecha e inteligente simple y doble inteligente.Así que esta es la cotización simple inteligente izquierda. Esta es la cotización simple inteligente, correcto. Esta cotización doble inteligente izquierda, y la cita doble inteligente derecha. HTML hay tres tipos de guiones. El primero es el guión, ese es el de tu teclado. Es el más corto de los tres, y se usa conectar dos palabras relacionadas. Estamos bastante familiarizados con esto. Para ponerlo en el HTML, sólo
tienes que utilizar la tecla del teclado para en guiones y guiones
un poco más largo que un guión con la letra n. Se utiliza para un rango de números o conexión entre dos palabras. Aquí serán algunos ejemplos. En HTML, vas a usar ampersand En dash, o el número es 8211. Em guiones similares a En dash, es el ancho de la letra m, y es el más largo de los tres. Se utiliza para separar dos cláusulas relacionadas pero separadas o para configurar una cláusula de la oración. Por lo que ser un zombi dijo que no siempre. Poniendo un HTML se utiliza el ampersand Em dash o 8212. Está bien, echemos un vistazo a algún código. Entonces solo tengo ejemplos aquí para mostrarte cómo funcionan todos estos. Entonces tenemos menos que, apareciendo aquí adecuadamente con mayor que, ampersand GT, ampersand apareciendo aquí. Tenemos el espacio no rompiente se está mostrando como un espacio. Se puede ver que en realidad hay dos espacios ahí. El segundo siendo el espacio no rompiente. Tenemos el símbolo de copyright, tenemos la marca registrada, y tenemos la marca registrada. Tenemos Euro, cent, Libra, Yen, tonto, cotización
doble, cotización simple inteligente izquierda cotización simple simple derecha, smart double quote left, smart double quote left, smart double quote right. Ahora tenemos nuestros tres guiones. Tenemos un guión, el en dash, y el em dash. Eso es todo para cada uno de los símbolos. Ahora pasaremos a fragmentos y otros tipos de enlaces.
6. Fragmentos de Zombie y otros enlaces: En este video, vamos a hablar de vinculación a fragmentos de página, correo electrónico, enlaces telefónicos, y enlaces SMS. Los fragmentos permiten enlazar a una parte de una página o a un fragmento de una página. Posibles usos incluyen algunos sub navegación y términos conectados a sus definiciones, conectar preguntas a sus respuestas, enlazar en la parte inferior de la página, volver a la parte superior de la página. esto hay dos partes. Uno es el fragmento al que estás vinculando, y el otro es el enlace a ese fragmento. Fragmento se define por un atributo ID en el elemento HTML. Cualquiera que sea el elemento HTML que desee utilizar, y luego el enlace que utilice debe tener un hashtag y luego el nombre del ID. Si es un enlace dentro de la página y el ID es no-muertos, solo
puedes hacer hashtag no-muertos, vuelta a no-muertos, etc. También
puedes agregarlo al final de cualquier URL, suponiendo que ese ID exista dentro de la página, el se desplazará hacia abajo hasta donde se encuentre. Por ejemplo, si miramos aquí probablemente no vaya a funcionar realmente porque no creo que tenga una identificación como esa en la página del instituto de no-muertos, pero si lo hubiera, eso estaría ahí. Es así como harías vinculando a un fragmento. Si necesitamos enlazar a una dirección de correo electrónico, usaríamos la etiqueta de anclaje tal como lo hicimos antes, pero en lugar de una URL, usamos correo a dos puntos y luego la dirección de correo electrónico que estamos tratando de enviar por correo electrónico. También nos vincularíamos a números telefónicos, lo cual es particularmente útil en el móvil, donde se puede tocar un número y llamarlo. Por ejemplo, en este caso tendrías tel, colon, y luego el número telefónico. Creo que no necesita estar en ese formato particular de tres números guión tres números guión cuatro números. Para una llamada americana, por supuesto, si lo estás haciendo internacionalmente, probablemente querrás hacer un plus uno y luego el resto del número. Al igual que un enlace telefónico, también
puedes hacer un enlace SMS y básicamente funciona exactamente igual excepto por SMS colon en lugar de tel, y enviará un texto en lugar de una llamada. Veamos esto en código. Aquí Tenemos el correo a y luego el instituto zombiekilla @undead. También tiene una conexión telefónica de 855-555. Ahora el número de teléfono real solo [inaudible] Aquí tenemos el enlace SMS Estoy en entonces para demostrar el fragmento, lo que tengo es una pregunta aquí y en teoría esto serían más preguntas. Si quiero dar click en
esto, me llevará más abajo en la página a donde está la respuesta. Me lleva todo el camino abajo y ahí hay un poco de espacio extra. Pero entonces puedo desplazarme todo el camino hacia arriba y volver a ver la página. Si hago clic en él, volveré a hacerlo, por supuesto, iré todo el camino hacia abajo y retrocediendo hacia arriba. Eso es todo por fragmentos. A continuación vamos a hablar de multimedia.
7. Hordes de Multimedia: En primer lugar, necesitamos hablar del elemento fuente, que es la base de algunos de estos otros elementos. El elemento de imagen, que es una etiqueta de fantasía o imagen. Hablaremos de eso en un segundo. Ahí están los códecs de audio y video, o cómo se pueden almacenar audio y video y qué algoritmos se utilizan para comprimirlos, y luego tenemos el elemento de audio y el elemento de video, y finalmente, el elemento iframe. HTML5 trajo consigo soporte para una variedad de medios. El backbones de estos medios soporta como la etiqueta de origen. Le dice al navegador dónde buscar el archivo y ofrece varias opciones basadas en lo que un códecs que admite un navegador particular. Está bien. El elemento de imagen permite establecer diferentes imágenes para diferentes tamaños de la pantalla. También te da un retroceso si el navegador no resulta compatible con el elemento de imagen. En esta instancia el elemento fuente utiliza un atributo de conjunto de fuentes, pero el audio y el video utilizan sólo el atributo fuente. También hay otra forma de hacerlo usando un atributo de conjunto de fuentes en la propia etiqueta de imagen, pero me resulta un poco más difícil de envolver tu mente y los beneficios son comparativamente pequeños en esta etapa. Puede ser un poco más eficiente. Dale al navegador un poco más de margen para elegir la imagen correcta. Pero elemento de imagen también te permite hacer diferentes imágenes de diferentes tamaños y hacer lo que se llama Dirección de Arte, que te permite poner en diferentes partes de una imagen que te podría interesar mostrar en los diferentes tamaños. El elemento de imagen se ve algo así. Tenemos la fuente establecida aquí con el archivo real que vamos a estar usando. Su consulta inmediata aquí con min-width 40em. Como recordarás de la última clase o de otras clases que hayas tomado tal vez, 1em es igual al tamaño de fuente predeterminado para el sitio web. La razón por la que estoy asociando la consulta de medios con el tamaño de la fuente es que algunas personas harán que su fuente sea más grande. Si lo enganchamos en especie del tamaño de fuente, entonces nuestras consultas de medios seguirán funcionando y también
funcionarán bien cuando lleguemos al tamaño de píxel correcto. Es solo una forma un poco más robusta de configurar nuestra consulta de medios. Ahora, nuestro default va a ser esta otra imagen. Ahora, en la primera imagen, el zombi no tiene sombrero de copa. En la segunda imagen, esta imagen de retroceso, el zombi sí tiene un sombrero de copa. Es así como veremos la diferencia entre las dos imágenes. Entonces, por fin, tenemos la imagen de corte. Ahora bien, si el navegador no entendiera el elemento de imagen o el elemento fuente, simplemente
saltaría esos dos y simplemente mostraría el elemento de imagen allí. Un códec es una forma de guardar el algoritmo de compresión de archivos de audio o video. También hay archivos contenedor, que es la extensión del archivo y puede contener una variedad de códecs diferentes. No todos los navegadores admiten cada códec o incluso cada archivo contenedor. Algunos códecs son de código abierto, pero no están bien soportados. Algunos son ampliamente apoyados pero no son tan buenos para comprimir el archivo, o mantener alta la calidad del video, etcétera. Existen diferentes códecs que se utilizan para diferentes propósitos en diferentes momentos. Está bien. Hablemos de audio. Etiqueta de audio permite reproducir audio directamente en la página. Es necesario incluir el atributo controls para mostrar los controles de audio al usuario. De lo contrario, en realidad no se mostrará nada en la propia página. El atributo controls también es un atributo booleano, lo que significa que no tienes que decir que controles son iguales a true, o controles es igual a controles, solo
puedes agregar la palabra “Controles” allí y funcionará para agregar controles. Entonces también tenemos algunos elementos fuente. Por ejemplo, aquí tenemos tres elementos fuente diferentes, so.oog es un archivo Ogg Vorbis. Por lo general es bastante pequeño, pero no siempre bien apoyado. Para A es probablemente algo con lo que estás un poco más familiarizado. Es la siguiente, la especificación MPEG4, que es bastante de alta calidad, y también tenemos el MP3, que es probablemente un poco de menor calidad, pero tiene un soporte muy amplio. Por último, teníamos ese enlace al archivo MP3, solo proporcionar ese respaldo en caso de que alguien esté usando un navegador que no soporte el audio o el elemento fuente. También está la etiqueta de video, que funciona de manera muy similar a la etiqueta de audio. También necesita el atributo controles. Controles de video, y luego tenemos algunas fuentes. WebM es un formato de archivo que consigue el video muy pequeño, pero a partir de esta grabación, realmente sólo funciona en Chrome. Oggv es el Ogg Theora, que es el componente de video de Ogg Vorbis, o la especificación Ogg, la especificación de código abierto. Después tenemos el MP4, y finalmente
tenemos un enlace para aquellos navegadores que no soportan video ni fuente. Por último, vamos a hablar del elemento iframe, que se utiliza con mayor frecuencia para incrustar videos. Técnicamente, un iframe está mostrando una página web dentro de otra. Cuando estás incrustando un video en tu página, básicamente estás diciendo: “Toma la página de YouTube y péguela en esta otra página aquí”. Aquí te dejamos un ejemplo de un iframe. Tenemos un conjunto de ancho y altura, tenemos un conjunto de fuentes, que es el video de YouTube, tenemos marco de borde y permitir, permite un montón de opciones diferentes y permitir pantalla completa, y luego el cierre de el iframe. Está bien. Echemos un vistazo a estos en código. En primer lugar tenemos un elemento de imagen. Es el mismo elemento de imagen que te mostré antes, y luego si cambiamos el tamaño aquí, eventualmente deberíamos conseguir un sombrero de copa. Conforme bajamos para estar dentro de los 40em, el tamaño de página estando dentro de los 40em, ese top había aparecido. Si vuelvo por encima de eso, se cae. Es sólo una forma de mostrar diferentes imágenes. Ahora este HR aquí es solo una regla horizontal y sólo la estoy usando como separador. Esto es a la regla horizontal aquí. Aquí tenemos audio. (AUDIO PLAYED) Tenemos un audio encantador, porque está mostrando controles, está mostrando aquí, y está mostrando lo que sea de estos archivos es más fácil de entender por el navegador, o el primero que es entendido por el navegador, usará eso. Dentro de Chrome, creo, M4A y MP3 son ambos soportados. No creo que Ogg lo sea, pero está soportado en Firefox y tal vez otro navegador. A continuación tuvimos video. Esta es la etiqueta de video recta, y ahí está la reproducción de video. Es solo un video rápido de estos tipos bailando. Como se puede ver aquí, hay controles están incluidos. Tenemos nuestra fuente, tenemos controles, diferentes fuentes, y luego un retroceso si lo necesitamos, que en este caso no lo hacemos. Entonces aquí está un iframe, el mismo iframe que mostramos en las diapositivas. Aquí simplemente lo está reproduciendo a través de YouTube, que tarda un poco más en pensar y luego muestra algunos otros videos. Está bien. Eso es todo para los hoards multimedia. A continuación se presentan las tablas HTML.
8. Rodarse con zombies con una mesa (HTML): En este video, estamos hablando de Tablas HTML. Estamos hablando del elemento tabla, el elemento subtítulo, el elemento fila de tabla,
y el elemento de datos de tabla, o celdas de tabla. Tendrías que tener cuidado con las mesas. Hacen un gran trabajo de colocación de datos. Tienden a estar orientados horizontalmente, y en un mundo de diseño receptivo donde tu sitio web funciona tanto en un escritorio gigante como en un diminuto reloj o teléfono, estar orientado horizontalmente puede hacer que sea realmente difícil para las mesas mostrar adecuadamente en ambos contextos. Solo ten cuidado con ellos y asegúrate de solo poner realmente cosas que necesitas ahí, no usar realmente tablas para el diseño de elementos de página reales, pero realmente, solo para datos reales. Las tablas usan muchas etiquetas como probablemente viste en la parte superior de este video. En primer lugar, tenemos que tener el elemento de tabla. Después también hay una descripción de la tabla, que es el título, la fila de la tabla, y luego los datos de la tabla o la celda. También hay celda de cabecera de mesa, que es th. Aquí te dejamos una tabla, etiqueta de mesa de apertura y tenemos una leyenda, A Tableau Zombies. Entonces tenemos iniciando una fila de tabla. Entonces tenemos un dato de tabla. Primera fila, Zombie 1, Datos de tabla 2. Nuestra primera fila para Zombie 2, luego estamos cerrando la fila de la tabla. Esa es la primera fila de nuestra mesa. Entonces tenemos nuestra segunda fila. Segunda fila para Zombie 3, segunda fila, Zombie 4, fila de mesa de cierre. Después cerramos la mesa y un poco
entraremos en el código y te mostraré cómo se ve esto en realidad. Con encabezamientos, tipo de cosas similares. Tenemos tabla de apertura, re título,
empezamos con la fila de tabla y luego vamos a hacer la primera fila de los encabezados de tabla. Hemos dejado columna zombies y re columna zombies, cerrando una fila de tabla y luego tenemos nuestra segunda fila, que es nuestra primera fila de datos reales, datos de tabla primera fila Zombie 1, primera fila Zombie 2, cerrar la fila de la tabla, cerrar la mesa. Echemos un vistazo a ese código y veamos cómo se ven realmente esos. Hice un poco de CSS solo para asegurarme de que las cosas se veían bien. Acabo de derrumbar las fronteras para que no tuvieran espacios entre ellas. Entonces puse un borde sólido alrededor tanto de los tds como de los ths. Tenemos nuestra mesa, h2 simplemente designando dónde está la mesa. Tenemos nuestra etiqueta de mesa de apertura, y tenemos nuestra leyenda, que es lo que aparece aquí mismo. Tenemos nuestra primera fila de tabla, así que tenemos nuestro primer elemento aquí. Primera fila Zombie 1 Entonces tenemos nuestros datos de la segunda tabla, Zombie 2 justo aquí, y luego tenemos nuestra segunda fila. Aquí tienes la segunda fila. Entonces tenemos segunda fila Zombie 3 justo aquí. Segunda fila Zombie 3, segunda fila Zombie en 4, segunda fila Zombie 4. Cerrar fila de tabla, cerrar tabla. Ahora con encabezamientos, se verá apenas igual, excepto que estos ths o encabezados de tabla se van a mostrar por defecto como negrita. Tenemos mesa de apertura, nuestra leyenda. Tenemos inicio con la fila de tabla, cabecera de
tabla, Columna Izquierda Zombies, Columna Izquierda Zombies. Tenemos mesa derecha Columna Zombies, Columna
Derecha Zombies. Demasiado lejos. Columna Derecha Zombies y luego tenemos la segunda fila y fue nuestros datos de primera fila. Primera fila Zombie 1, y nuestros datos de la segunda tabla aquí mismo. Primera fila Zombie 2, cierra el tr, cierra la mesa. Eso es todo para mesas. A continuación, pasamos a las selecciones y algunos CSS. Bondad.
9. Selección de Zombie: En este video, vamos a estar viendo selectores
descendientes, pseudo-clases y otras, pseudo-clases, primer hijo, último hijo, e nth-child, luego hablaremos de cebra rayando una mesa. Selectores descendientes, a veces también se les llama selectores
contextuales y básicamente son una combinación de un id, un final de clase o selectores de elementos separados por un espacio. Por ejemplo podrías tener este id de horda o con una clase de zombie con un elemento de b, no tiene
que ser un id, una clase, un elemento. Puede ser de dos elementos, puede
ser de dos clases en un ID, puede ser un ID y un elemento. Puede ser cualquier combinación que quieras, muchas que quieras y en este contexto, ésta significa solo etiquetas b que están dentro de un elemento con una clase de zombie y que también es un elemento con una ID de horda. Dada la horda zombie b, tenemos una identificación de horda aquí. Tenemos una clase de zombie y b, por lo que esta se selecciona ya que no hay b, esto no está seleccionado ya que esto no está en una clase de zombie, esto no está seleccionado. A pesar de que se trata de un zombie clásico con un b, no está seleccionado porque no está dentro de la ID de horda. pseudo-clases son formas de seleccionar elementos basados en aspectos sobre ellos. Primer hijo va a seleccionar al primer hijo de otro elemento y se escriben pseudo-clases con dos puntos entre el selector y la pseudo-clase. Por lo que ul li: primer hijo siendo un ejemplo. Dado ul li: primer hijo, tenemos una horda ul li:primer hijo. Tenemos un ul aquí, tenemos un li, así que este es el primer hijo de la ul. Este es seleccionado, este es un li dentro de un ul, pero no es el primer hijo, por lo que no está seleccionado. Aquí tenemos otro ul, el primer hijo, sin embargo, es una etiqueta b, por lo que no está seleccionado, no
es un li y esto como un li no es el primer hijo, por lo que no está seleccionado. Echaremos otro vistazo a esto en el código 2 para asegurarnos de que esté claro. El último hijo va a trabajar igual que el primer hijo, simplemente no
iban desde la dirección opuesta. Dado ul li: último hijo, tenemos un ul, tenemos li. Este es el primer hijo no es el último hijo, por lo que no está seleccionado. Pero este li, está seleccionado porque es el último hijo. Ahora si solo tuvieras un elemento li aquí entonces sería tanto el primero como el último hijo, por lo que se seleccionará como el único hijo se seleccionaría tanto para primer hijo, último hijo y aquí tenemos otro ul. El b es el primer hijo, li, es el último hijo por lo que se selecciona y la etiqueta b por supuesto no lo es. Entonces hay nth-child y esta es una función que puede tomar un número, una palabra clave, o una fórmula. Por ejemplo, si solo ponemos un siete, se va a seleccionar al séptimo hijo de ul, pero sólo si es un li, se
puede poner incluso que va a seleccionar a todos incluso niños por ejemplo 2, 4, 6, 8. ¿A quién apreciamos? Zombis zombis. Aquí tenemos una función 3n menos 2. Cuando n es 1, 3 veces 1 es 3, menos 2 es 1. Cuando n es 2, tenemos 6 menos 2 que es 4, y luego 7 y 10, etc. Esa sería una función que seleccionaría esos elementos particulares. Ahora, las bandas de cebra es cuando se hacen filas de mesa de colores
alternos con el fin de facilitar que las personas sigan la fila a través. Puede usar nth-child para esto con, por ejemplo, tr: nth-child (odd) establecer el color de fondo en un gris claro sería una gran manera de hacerlo. Echemos un vistazo a algún código tiene los mismos ejemplos de antes. Tenemos aquí, dada la horda hashtag. zombie b Lo que he hecho aquí es solo establecer colores en los que se
seleccionan para ayudar a dejar claro que están seleccionados o no. Debe ser de color azul de b tag dentro de un zombie dentro de una horda. Aquí tenemos una etiqueta b, que dice que está seleccionada, pero es una etiqueta b dentro de un zombie dentro de una horda, por lo que es azul y ninguno de estos otros son seleccionados, tal y como hablamos antes. Esta no está seleccionada, porque no hay etiqueta b, ésta no está seleccionada porque no
hay etiqueta zombie y ésta no está seleccionada porque no hay etiqueta de horda. primer hijo no son los mismos códigos que vimos antes y aquí solo estoy cambiando el color a verde para los que están seleccionados. Primera horda, tuvimos que añadir una identificación solo para dejarlo claro, así que primera horda ul li:primero-hijo. Estamos en primera horda ul li:primero-hijo, éste seleccionado, y éste es el verde. Este es el segundo hijo, por lo que no está seleccionado. Este es un ul todavía dentro de primera horda, pero el primer hijo no es una etiqueta li, por lo que no está seleccionado es solo audaz. A continuación tenemos último hijo, así último hijo aquí. Último selector de niños, tenemos #last -horde ul li:last-child, todo está dentro del div id last-horde. Tenemos el ul y li es el primer hijo, no
es el último hijo, así que no está seleccionado. Entonces tenemos una clase li de zombie está seleccionada porque es último hijo, por lo que se pone de color rojo. Tenemos otro ul el primer hijo es una etiqueta b, el último hijo es una etiqueta li, por lo que también se selecciona y así es de color rojo. Entonces por último aquí tenemos una mesa que eran rayas de cebra, así que solo estableceremos la fila de la tabla con un enésimo hijo de impar. Elige primero, tercero, quinto, séptimo, etc. color de
fondo de un, solo un ligero gris y aquí tenemos la mesa de apertura, tenemos la leyenda, tenemos la primera fila, zombie 1, zombie 2, segunda fila zombie 3, zombie 4 . Tercera fila zombie 5, zombie 6. Cuarta fila, zombie 7, zombie 8. Quinta fila, zombie 9 zombie 10. Sexta fila zombie 11, zombie 12, etc, todo el camino hasta zombie 16. Como se puede ver, las hileras impares tienen un fondo que es gris, por lo que tenemos este primero, tercero, quinto, séptimo. Eso es todo para la selección de zombies, donde a continuación vamos a hablar del zombi Polka, o más bien menús de acordeón.
10. Polla de Zombie: De acuerdo, en este video estamos hablando del elemento de detalles y el elemento de resumen y cómo puedes crear tus propios menús de acordeón. En primer lugar, tenemos la etiqueta de detalles, que es un elemento de nivel de bloque, y pondrás la mayor parte del contenido en ese elemento y tenemos la etiqueta de resumen que va dentro de la etiqueta de detalles, debe ser tan corta como tiene sentido. Cuando se renderizará, el elemento de resumen se mostrará con un triángulo a su izquierda. Después haces clic en él y el triángulo se abre y muestra el contenido dentro. Veamos cómo se ve esto. Nuevamente, aquí tenemos detalles. Entonces tenemos el resumen ya que el primer gráfico de detalles es la mejor práctica. También debe tener solo una etiqueta de resumen si tienes múltiplo puede confundir el navegador y luego cerramos la etiqueta de detalles aquí después de todo este Dear Diary. Si venimos aquí abajo, vemos que la etiqueta de resumen justo aquí, es lo que se muestra aquí y si hago clic en esto y entonces me muestra todo el contenido aquí. Si vuelvo a hacer clic en él, se cierra. Puedo hacer click directamente en el triángulo, o puedo dar click en el texto en sí y ahí tienes tus menús de acordeón. Veamos qué pasa si ponemos un segundo aquí y 3,2. Si ponemos un segundo en, sólo
va a asumir como parte del contenido. Eso es todo para los menús de acordeón.
11. Conclusión: Gracias por venir en la aventura de matar zombis, fue genial tenerte junto. Me encantaría ver cualquiera de los proyectos que has hecho. Por favor siéntete libre de compartirlos conmigo y con compañeros de clase. Me encantaría ver lo que has hecho y lo que has aprendido. Gracias y nos vemos en la próxima clase.
John Rhea, Web Designer/Developer/Storyteller
