Podcast sobre Fundamentos de Excel y HTML

Kapitoly

Lo Básico: Celdas y Rangos

El Secreto del Símbolo de Dólar

Fórmulas y Funciones Indispensables

Visualizando la Información

El Esqueleto de la Web

Dando Formato al Texto

Imágenes y Enlaces

Organizando con Listas y Tablas

El Salto a lo Moderno: Multimedia y CSS

Herramientas del Oficio y Despedida

Přepis

Adrián: En tu examen de computación, hay una cosa que confunde al 80% de los estudiantes en Excel. Es un pequeño símbolo de dólar que puede hacer que toda tu fórmula falle.

Elena: Y hoy te vamos a enseñar el secreto para que nunca, jamás, te vuelvas a equivocar con eso. Es más fácil de lo que crees.

Adrián: Así es. Y una vez que lo entiendas, desbloquearás un superpoder en Excel. Esto es Studyfi Podcast.

Adrián: Muy bien, Elena. Empecemos por el principio. Vemos una tabla, seleccionamos un montón de celdas... ¿cómo se escribe eso correctamente en una fórmula?

Elena: ¡Excelente pregunta! Imagina que seleccionas desde la celda A12 hasta la B21. La sintaxis correcta es A12, dos puntos, B21. O sea, A12:B21. Los dos puntos significan "hasta".

Adrián: Sencillo. Nada de símbolos raros al principio. ¿Y qué pasa con esa celda que seleccionamos y que tiene el borde más grueso?

Elena: Esa es la celda activa. Es simplemente la celda dentro de tu selección que está lista para que escribas en ella. ¡No es una celda con superpoderes ni nada!

Adrián: Lástima. Oye, y un truco rápido: si quiero seleccionar celdas que no están juntas, por ejemplo A1 y C5, ¿cómo lo hago?

Elena: Ah, ¡ese es un clásico! Mantienes presionada la tecla Control, o Ctrl, mientras haces clic con el mouse en todas las celdas que quieras. ¡Magia!

Adrián: Vale, llegamos al momento de la verdad. El tema que causa pesadillas: las referencias de celda. Absolutas, relativas, mixtas... Suena a clase de filosofía.

Elena: Totalmente, pero es más como dar direcciones. Una referencia relativa, como A1, es como decir "la celda que está a mi izquierda". Si copias la fórmula a otra celda, la dirección cambia.

Adrián: Entiendo. ¿Y la absoluta?

Elena: Una referencia absoluta, como $A$1, es como dar una dirección exacta: "Calle Falsa 123". No importa a dónde copies la fórmula, siempre apuntará a A1. El signo de pesos, el dólar, ¡congela la referencia!

Adrián: ¡Aha! Entonces, si quiero multiplicar una lista de números en la columna A por un único valor que está en la celda B2...

Elena: ...¡exacto! Usarías una referencia mixta o absoluta para B2. Por ejemplo, A4*B$2. Así, cuando arrastres la fórmula hacia abajo, A4 cambiará a A5, A6, etc., pero B$2 se quedará quieto. ¡Ese es el truco que todos fallan!

Adrián: ¡Ahí está la clave! El dólar fija la fila o la columna. ¡Qué sencillo parece ahora!

Elena: Lo es. Una vez que haces clic, todo tiene sentido. Es el ancla de tu fórmula.

Adrián: Hablemos de otra herramienta poderosa: la función SI. ¿Cuál es la sintaxis que no debemos olvidar?

Elena: La estructura es clave. Es =SI, abres paréntesis, pones tu condición, por ejemplo A2<6. Luego una coma, y entre comillas lo que pasa si es verdad: "ESTUDIA". Otra coma, y entre comillas lo que pasa si es falso: "DISFRUTA TUS VACACIONES". Y cierras paréntesis.

Adrián: O sea: prueba lógica, valor si verdadero, valor si falso. Separados por comas. Entendido. ¿Y si usamos la función SI con una O?

Elena: ¡Buena pregunta! La función O se usa dentro del SI cuando quieres que se cumpla al menos una de varias condiciones. Por ejemplo, si la nota es baja O si faltaste mucho. Con que una sea verdad, la condición se cumple.

Adrián: Perfecto. Cambiando de tema, ¿qué pasa si divido un número entre cero? ¿Explota la computadora?

Elena: No, pero Excel te grita un poco. Te muestra el error #¡DIV/0!. Es su forma de decir "oye, eso es matemáticamente imposible".

Adrián: ¡Un grito de ayuda! Y una función más, CONTAR.SI. Si tengo una lista de colores y uso CONTAR.SI(B1:B7, "AMARILLO"), ¿qué me da?

Elena: Te contará exactamente cuántas celdas en ese rango contienen la palabra "AMARILLO". Si hay dos celdas con ese color, el resultado será 2.

Adrián: Ok, ya tenemos los datos y las fórmulas. Ahora queremos que se vea bonito. ¿Cómo podemos centrar todo en la página para imprimirlo?

Elena: Fácil. Vas a la pestaña Diseño de página, buscas el pequeño iniciador del cuadro de diálogo de Configurar página, y en la pestaña Márgenes, abajo, verás las casillas para centrar horizontal y verticalmente.

Adrián: Genial. Y hablando de visualización, los gráficos. ¿Cuáles son las partes básicas que debemos identificar?

Elena: Casi todos los gráficos tienen un eje horizontal y uno vertical, que son tus ejes de datos. Luego está la Leyenda, que es como el diccionario del gráfico, te dice qué significa cada color o forma. Y las Etiquetas de Datos, que ponen el valor exacto encima de cada barra o punto.

Adrián: Eje horizontal, eje vertical, leyenda y etiquetas. Anotado. Y por último, los filtros. Si tengo una tabla de ventas de varios años y filtro para ver solo Enero y Febrero de 2019...

Elena: ...Excel ocultará todas las demás filas y solo te mostrará y sumará los datos que cumplan esos dos criterios. Es una forma súper rápida de analizar solo la información que te interesa en ese momento.

Adrián: Es como ponerle lentes especiales a tus datos para ver solo una cosa. Increíble. Creo que con esto, el examen de Excel ya no parece tan intimidante.

Elena: Para nada. La clave es entender la lógica detrás de los símbolos y las funciones. Una vez que lo haces, tú tienes el control.

Adrián: Totalmente. Bueno, ahora que nuestras hojas de cálculo están impecables, es hora de pasar al siguiente tema.

Adrián: Y con eso cerramos el tema de las bases de datos. ¡Qué intenso! Siento que mi cerebro acaba de correr un maratón.

Elena: ¡Totalmente! Pero es un maratón que te prepara para la recta final. Y hablando de finales, llegamos a nuestro último gran tema. El que lo une todo.

Adrián: Me tienes en ascuas. ¿De qué se trata?

Elena: Se trata del lenguaje que estás viendo ahora mismo, sin darte cuenta. Vamos a hablar de HTML, el esqueleto de absolutamente toda la web.

Adrián: ¡Wow! De acuerdo, el gran final. Suena importantísimo. Estoy listo.

Elena: ¡Lo es! Piensa en una casa. Necesitas una estructura, ¿verdad? Cimientos, paredes, un techo... Eso es HTML. No es el color de la pintura ni los muebles, solo la estructura fundamental.

Adrián: Entendido. HTML son los huesos. Entonces, ¿qué significa exactamente?

Elena: Significa HyperText Markup Language. O en español, Lenguaje de Marcado de Hipertexto. La palabra clave aquí es "marcado". No es un lenguaje de programación que hace cálculos complejos; es un lenguaje que le dice al navegador cómo estructurar el contenido.

Adrián: ¿Como... "esto es un título", "esto es un párrafo"?

Elena: ¡Exactamente! Usas unas cosas llamadas "etiquetas" para marcar cada parte del contenido. Y estas etiquetas casi siempre van entre signos de menor que y mayor que, como... <p> para un párrafo.

Adrián: Ah, ¡los famosos piquitos! Okay, eso responde una de las preguntas clave: las etiquetas de HTML van entre < >.

Elena: Correcto. Y casi todas las etiquetas tienen una de apertura y una de cierre. Abres con <p> y cierras el párrafo con </p>. La barrita inclinada es la clave para cerrar.

Adrián: Entendido. Abrir y cerrar. Tiene lógica. Entonces, ¿cuál es la estructura más básica de todas?

Elena: Es como una matrioska, una muñeca rusa. La más grande es <html>. Dentro de ella, hay dos partes principales: <head>, la cabeza, y <body>, el cuerpo.

Adrián: ¿Qué va en cada una?

Elena: Buena pregunta. El <body> es fácil: es todo lo que ves en la página. El texto, las imágenes, los videos... todo el contenido visible va ahí.

Adrián: Okay, el cuerpo es lo visible. ¿Y la cabeza, el <head>?

Elena: El <head> es el detrás de cámaras. Contiene información para el navegador y los buscadores, pero no se ve directamente en la página. Aquí va, por ejemplo, el título que aparece en la pestaña del navegador, que se define con la etiqueta <title>.

Adrián: ¡Ah! Ya veo. O sea que la función principal del <head> no es visualizar contenido, sino manejar metadatos, enlaces a otros archivos como hojas de estilo, información del autor... cosas así.

Elena: ¡Bingo! Le diste al clavo. El <head> es el cerebro de la operación, mientras que el <body> es la cara pública. Y esa es la estructura fundamental de cualquier página web que exista.

Adrián: <html>, adentro <head> y <body>. Simple pero poderoso. Me gusta.

Elena: Ahora vamos a la parte divertida: el contenido dentro del <body>. Empecemos con el texto. Ya mencionamos la etiqueta <p> para párrafos.

Adrián: Sí. ¿Y si quiero un título grande y llamativo?

Elena: Para eso tienes las etiquetas de encabezado. Van de <h1> a <h6>. <h1> es el más importante y grande, y <h6> es el más pequeño. Son cruciales para la estructura y para que Google entienda de qué trata tu página.

Adrián: ¡Genial! ¿Y qué hay de los estilos clásicos como negrita o cursiva?

Elena: ¡Fácil! Para negrita usas <b>, de "bold". Para cursiva es <i>, de "italic". Y para subrayado tienes <u>, de "underline". Todas necesitan su etiqueta de cierre, claro.

Adrián: <b>Texto en negrita</b>. Lo tengo. Se siente como aprender un código secreto.

Elena: ¡Lo es! Un código que todo el mundo puede ver. También puedes hacer cosas como superíndices, para ecuaciones matemáticas como X al cuadrado, con la etiqueta <SUP>. O subíndices, como en H₂O, con <SUB>.

Adrián: Eso es súper útil. Ahora, una pregunta. He visto que a veces el texto se mueve por la pantalla. ¿Cómo se hace esa magia?

Elena: ¡Ah, la famosa etiqueta <marquee>! Es como una reliquia de la web de los 90. Envuelves un texto o una imagen en <marquee> y se desplazará por la pantalla. Puedes controlar la dirección, la velocidad...

Adrián: ¡Qué genialidad! ¿Todavía se usa?

Elena: Sinceramente... no mucho. Se considera un poco anticuada y puede ser molesta para el usuario. Hoy en día, las animaciones se hacen con CSS o JavaScript de una forma mucho más elegante y controlada. Pero es divertido saber que existe.

Adrián: Como un coche clásico. No lo usas para ir al trabajo, pero es genial verlo.

Elena: ¡Exacto! Es un pedazo de la historia de internet. Un buen recordatorio de que la web siempre está evolucionando.

Adrián: Muy bien, ya tenemos texto. Pero una web sin imágenes es... bueno, aburrida. ¿Cómo añadimos una foto?

Elena: Con la etiqueta <img>. Esta es un poco diferente, porque es una etiqueta "auto-cerrada". No necesita un </img>. Simplemente pones toda la información dentro de la primera etiqueta.

Adrián: ¿Y cuál es la información más importante?

Elena: Dos cosas, principalmente. El atributo src, que es la fuente o la ruta del archivo de imagen. Y el atributo alt, que es el texto alternativo.

Adrián: ¿Texto alternativo? ¿Para qué sirve?

Elena: Es súper importante. Describe la imagen por si no se puede cargar, o para las personas que usan lectores de pantalla. Es clave para la accesibilidad. Nunca lo olvides.

Adrián: Anotado. src para la fuente y alt para la accesibilidad. Y supongo que también puedo cambiar el tamaño, ¿no?

Elena: ¡Claro! Con los atributos width para el ancho y height para el alto. También puedes añadir un border para ponerle un marco. Todo dentro de la misma etiqueta <img>.

Adrián: Okay, me queda claro. Ahora... lo que hace que la web sea una "red": los enlaces. ¿Cómo creo un hipervínculo?

Elena: Esa es la etiqueta <a>, que viene de "anchor" o ancla. Es la estrella del show. La sintaxis es <a href="...">Texto del enlace</a>.

Adrián: El href... ¿qué es?

Elena: Es el atributo más importante. Significa "hypertext reference" y es donde pones la dirección a la que quieres que vaya el enlace. Puede ser otra página web, como https://www.google.com, u otra página de tu propio sitio, como pagina2.html.

Adrián: Entonces, la etiqueta <a> es la respuesta para crear un hipervínculo. Muy bien.

Elena: Y lo genial es que puedes poner casi cualquier cosa dentro de la etiqueta <a> para que sea un enlace. No solo texto. ¿Recuerdas la etiqueta <img>?

Adrián: ¡Espera! ¿Puedo poner una etiqueta <img> dentro de una etiqueta <a> para hacer una imagen clickeable?

Elena: ¡Exactamente! Así es como funcionan la mayoría de los botones con imágenes en internet. Es una de las combinaciones más poderosas de HTML. <a href="..."><img src="..."></a>.

Adrián: ¡Mi cabeza acaba de hacer click! Eso tiene muchísimo sentido. Es como anidar bloques de construcción.

Elena: Exacto. Y para organizar información, tienes dos herramientas más: las listas y las tablas.

Adrián: ¿Listas como... una lista de compras?

Elena: ¡Sí! Tienes dos tipos principales. La lista no ordenada, que usa viñetas, se crea con <ul>. Y la lista ordenada, que usa números o letras, se crea con <ol>.

Adrián: u de "unordered" y o de "ordered". Fácil de recordar.

Elena: Dentro de cualquiera de ellas, cada elemento de la lista se define con la etiqueta <li>, de "list item". Así que creas el contenedor, <ul> o <ol>, y adentro pones todos los <li> que necesites.

Adrián: Genial. ¿Y las tablas? He oído que antes se usaban para todo el diseño de la página.

Elena: Sí, fue una época oscura. Las tablas se deben usar para lo que son: mostrar datos tabulares. Como un horario o una hoja de cálculo.

Adrián: Entendido. No construir mi casa con tablas. ¿Cómo funcionan?

Elena: La estructura principal es la etiqueta <table>. Dentro, cada fila se define con <tr>, de "table row". Y dentro de cada fila, cada celda de datos se define con <td>, de "table data".

Adrián: <table>, luego <tr> para la fila, y adentro los <td> para las celdas. Es otro sistema de muñecas rusas.

Elena: Exacto. Y puedes hacer cosas complejas, como unir celdas con los atributos colspan, para ocupar varias columnas, o rowspan, para ocupar varias filas. Pero la base es siempre esa: tabla, fila, celda.

Adrián: Okay, creo que tengo una buena base de HTML clásico. Pero la web de hoy tiene videos, música... ¿Cómo se maneja eso?

Elena: Antes se usaba mucho una etiqueta llamada <embed> para casi todo. Pero HTML5, la versión moderna, introdujo etiquetas específicas que son mucho mejores: <audio> para música y <video> para videos.

Adrián: ¿Y qué ventajas tienen?

Elena: Son mucho más potentes y semánticas. Te dan controles nativos de reproducción, pausa, volumen... Y puedes añadirles atributos como autoplay para que empiecen solos, o loop para que se repitan.

Adrián: ¡Ah! Autoplay y loop, esos son atributos clave para el manejo de video. Entendido.

Elena: Exacto. Ahora, hay un tema importante que hemos estado rozando todo el tiempo. Muchas de las etiquetas y atributos que mencionamos para dar estilo, como bgcolor para el color de fondo o la etiqueta <font>...

Adrián: ¿Sí...?

Elena: Están obsoletos. Ya no se deberían usar.

Adrián: ¿Qué? ¿Entonces para qué los aprendemos?

Elena: Porque es importante entender la historia y porque te los puedes encontrar en código antiguo. Pero hoy en día, hay una regla de oro: HTML es para la ESTRUCTURA. Para el ESTILO, usamos otra cosa: CSS.

Adrián: ¿CSS? ¿Cascading Style Sheets?

Elena: ¡Esa misma! Es la que se encarga de los colores, las fuentes, los tamaños, las posiciones... todo lo visual. Vinculas una hoja de estilos CSS a tu HTML y mantienes todo separado y organizado. HTML son los huesos, CSS es la ropa y el maquillaje.

Adrián: Entendido. Es una separación de responsabilidades. HTML dice "esto es un título", y CSS dice "y quiero que ese título sea azul, grande y con la fuente Arial".

Elena: ¡Perfecto! No podría haberlo explicado mejor. Esa es la forma moderna y correcta de construir sitios web.

Adrián: Hablando de construir, no todo el mundo escribe esto en un bloc de notas, ¿verdad? He oído hablar de programas como Dreamweaver.

Elena: Cierto. Dreamweaver es un editor WYSIWYG, que significa "What You See Is What You Get" (Lo que ves es lo que obtienes). Te permite diseñar una página web de forma visual, arrastrando y soltando elementos, y él escribe el código HTML por ti.

Adrián: Suena muy práctico. ¿Cuál es la ventaja?

Elena: La principal ventaja es la velocidad, sobre todo para principiantes. Puedes ver el resultado al instante sin saber mucho código. Tiene vistas geniales, como la "Vista Dividida", donde ves el diseño visual y el código al mismo tiempo. Es fantástico para aprender.

Adrián: Y me imagino que tiene atajos, como para previsualizar la página en un navegador real.

Elena: ¡Claro! El clásico es F12. Con solo una tecla, ves tu trabajo exactamente como lo vería un usuario. También tiene herramientas para gestionar todos los archivos de tu sitio, vincular hojas de estilo CSS fácilmente, y mucho más.

Adrián: Suena como una gran ayuda. ¿Entonces, recomiendas usar un editor visual o aprender a escribir el código a mano?

Elena: Mi recomendación es... ambos. Empieza con un editor como Dreamweaver o VS Code para entender la relación entre lo visual y el código. Pero luego, ensúciate las manos. Escribe el código tú mismo. Entender el HTML fundamental te da un poder y una flexibilidad que ningún editor visual puede igualar por completo.

Adrián: Entendido. Usa las herramientas, pero domina los fundamentos. Un gran consejo.

Elena: Y con eso, hemos cubierto el esqueleto de la web. Desde las etiquetas básicas hasta las tablas, los enlaces y la forma moderna de trabajar con CSS y herramientas visuales.

Adrián: Ha sido un viaje increíble, Elena. Hemos pasado por hardware, software, redes, bases de datos y ahora el lenguaje que lo presenta todo, HTML. Siento que tengo una visión completa.

Elena: Ese era el objetivo. La clave es recordar que cada una de estas piezas se construye sobre la anterior. Y con esta base, tienes el poder de entender, y de crear, en el mundo digital.

Adrián: El conocimiento es poder, sin duda. Muchísimas gracias, Elena, por guiarnos en este curso intensivo.

Elena: El placer ha sido mío, Adrián. Y gracias a todos nuestros oyentes por acompañarnos en Studyfi Podcast. ¡No dejen de ser curiosos!

Adrián: Así es. Sigan aprendiendo, sigan construyendo. ¡Hasta la próxima!