Quiero contarles lo que aprendí sobre HTML y CSS cuando tenía cinco años.
Justo cuando abro mi editor de código y mi navegador y empiezo a escribir cosas básicas texto estándar HTMLentró mi sobrina. Es pequeña y normalmente ruidosa, pero ese día se quedó quieta junto a mi escritorio, como si buscara algo.
Niece: Wassat? Wassat you typing?
Me: Something for the computer.
Niece: It looks funny. All the little lines.
Me: They are instructions.
Niece: Instwu… inschu… instwushun?
Me: Instructions.
Me detuve y recordé un pregunta zhihu Hace unos días, le expliqué HTML y CSS a un niño. Me había saltado la pregunta por completo (solo estaba desplazándome) pero ahora que mi sobrina está a mi lado, deseo haber echado un vistazo más de cerca.
Esta es mi respuesta. Curiosamente, explicar lo que haces te enseña casi naturalmente sobre ti mismo y las cosas que das por sentado.
Construimos “casas” con “ladrillos”
A mi sobrina no parece importarle el código real que estoy escribiendo, como las etiquetas HTML específicas esparcidas por mi editor de código. No, a ella le preocupa más lo que sucede en el navegador.
Niece: Oh. So, this big box is your house?
Me: Kind of, yes.
La pantalla ahora está vacía y parece más un área extensa que una página web. Me encanta que vea un gran espacio en blanco y lo compare con la casa que estoy construyendo. Su observación me impulsó a explicarle las partes más básicas de lo que estaba haciendo.
Le dije que el editor era donde puse los bloques, completamente diferente de donde ella juntaba los bloques de Lego como materiales de construcción. Observó en silencio mientras añadía un título simple, una línea corta de texto y un botón que aún no tenía comportamiento.
Sus ojos estaban pegados a la pantalla mientras actualizaba el navegador y aparecía algo de texto. Echó la cabeza hacia atrás mientras la pantalla se actualizaba y cambiaba de una casa vacía a algo con elementos renderizados.
¡Ella lo consiguió! No, ella no puede leer el código. Pero podía ver la conexión entre la casa y los ladrillos Lego que le daban estructura.
Los legos son solo los ladrillos de una casa.
Le expliqué que HTML era la estructura de una casa, simplemente colocar ladrillos en una pantalla blanca. No tiene nada que ver con la apariencia de estos ladrillos. Los títulos son títulos, los párrafos son párrafos y los botones son otro tipo de ladrillo. El navegador sigue mis instrucciones para agregar los ladrillos que quiero a la casa.
Tratar de explicarle esto me obligó a reducir la velocidad. Me encuentro describiendo HTML como el vocabulario de una página: le da nombres a cada sección para que el navegador pueda construir el árbol de documentos detrás de escena. Este árbol se convierte en la base en la que CSS y JavaScript pueden confiar en el futuro. Sin estos nombres, el navegador no tiene idea de dónde deben relacionarse los diferentes elementos entre sí. Me ha resultado difícil describir HTML sin conocer los otros lenguajes principales.
Hice una pausa, observé su reacción y recordé algo. Cada hermoso escrito comienza con una idea simple que se transforma en un esquema, tal como una hermosa interfaz comienza con un esquema. Antes que cualquier color, espacio o disposición, lo único que tenemos es estructura.
Explicarle esto me hizo sentir que estos conceptos básicos eran importantes nuevamente, tal como me di cuenta por primera vez de la importancia de la separación de preocupaciones entre HTML, CSS y JavaScript.
Mi sobrina comenzó a mirar mi pantalla durante largos períodos de tiempo y el silencio me pesaba. A pesar de que la estructura estaba allí, la página todavía le parecía vacía y terminó preguntando por qué se veía así.
Esperaba algo más parecido a una casa; algo con formas y habitaciones. En cambio, vio una superficie plana sin nada a qué agarrarse. Señalé el editor y mostré las etiquetas semánticas que había escrito. este <body> Le dije que era como un contenedor. este <header> Algo así como el “techo” de una casa. <footer> Igual que la planta baja.
Le expliqué que estos elementos se parecían más a habitaciones y puertas que a decoración. Le dicen al navegador qué existe y cómo se relaciona una parte con otra. No hacen que nada luzca bien, “enmarcan” el documento de la misma manera que se enmarca una casa antes de instalar puertas, paredes, pintura y alfombras.
decorar la casa
Una vez que entendió el concepto de estructura, comencé a agregar algunas reglas CSS muy simples. Lo mantuve minimizado agregando un widthAlguno height y un border a uno de los elementos. Vio cómo el personaje aparecía en mi editor oscuro como un rompecabezas. Los nombres de propiedades, llaves y corchetes no le parecían instrucciones de diseño, sino más bien símbolos desconocidos.
Luego tuve que dar un paso atrás nuevamente y tratar de explicarle CSS. Le dije que lo que estaba escribiendo eran instrucciones, como HTML, pero que no eran instrucciones para colocar los ladrillos, sino instrucciones sobre cómo deberían verse los ladrillos. Por ejemplo, puedo decirle al navegador qué tamaño debe tener un ladrillo, dónde debe colocarse y cómo debe mostrarse.
Este es el núcleo de CSS, ¿verdad? Seleccionas un ladrillo y le describe al navegador cómo se ve. Decirlo en voz alta me recuerda CSS es literal y lógico.
un ancho. una altura. También hay fronteras. Eso es todo lo que necesitas para darle un poco de forma.
Sé que puede haber una forma más “académica” de enseñar CSS. Por ejemplo, El modo escritura podría ser un buen punto de partida Analice la direccionalidad y el posicionamiento antes de que aparezca siquiera una pizca de color en la página. Todo eso está muy bien, pero todo eso es un galimatías para un niño de cinco años. Ni siquiera puedo entrar en algo como esto aspect-ratio No es necesario entrar primero en lo básico width y height. Esas campanas y silbatos pueden esperar por ahora.
Lo que estoy buscando es “¡Ajá!” momento. Seguí practicando y dibujé una pequeña casa. Luego actualiza la página y la estructura finalmente toma forma.
Por supuesto, no era mucho: un pequeño triángulo que parecía un techo, un cuadrado que simulaba ser una pared, dos pequeños cuadrados que hacían de ventanas y un delgado rectángulo que supuse podría ser una puerta. Parece algo dibujado rápidamente con un lápiz sin filo. De todos modos, mi sobrina inmediatamente se inclinó y casi se golpea la frente con la pantalla.
Niece: Why does the house not have color? It looks so plain.
Me: I haven’t added color yet.
Niece: You forgot. You always forgot.
Me: I’ll add it.
Agregué un poco de color a la casa. Fue entonces cuando las cosas empezaron a hacer clic.
Niece: So this brick says what is there.
Me: Yes.
Niece: And this color thing make it pretty?
Me: That’s right.
Niece: So HTML says what is there, and CSS makes it pretty.
Me: Exactly.
Esta observación brinda una oportunidad perfecta para aclarar la separación entre HTML y CSS. HTML describe el contenido que existe en el árbol del documento. CSS describe cómo deberían aparecer estos elementos. Sin estilos, cada elemento está técnicamente presente pero visualmente falta.
“Ahora parece real! “, declaró, incluso señaló los cajones de la habitación en la que estábamos, relacionándolos con la estructura y decoración de la caja para que parecieran como eran originalmente.
HTML fundamenta las distintas partes y CSS les da vida con líneas, colores y otras decoraciones y posiciones. Incluso para nosotros, todavía se siente increíble, ¿verdad? Llevar a mi sobrina a este punto me recuerda por qué los aspectos básicos de lo que hacemos también son satisfactorios.
Lo que aprendí de un niño de cinco años
“¡Ahora yo también puedo aprender informática!” ella anunció. Fue entonces cuando mi sobrina decidió que estaba satisfecha y saltó de la habitación. Dejé la casita en la pantalla por un momento y consideré intercambiarla.
Es fácil quedarse estancado en una rutina, donde la magia de lo que hacemos es reemplazada por otra cosa. Tenemos un trabajo que hay que hacer y eliminamos las cosas “aburridas” para realizar el trabajo. Una vez que hemos hecho estas cosas, ¿con qué frecuencia nos detenemos y miramos lo que estamos haciendo línea por línea?
Esto es lo más importante que aprendí de mi sobrina de cinco años: no importa cuán grande o pequeña sea la tarea, todavía hay magia en lo que hacemos. Podríamos pasar horas en publicaciones de blogs y publicaciones en redes sociales discutiendo pedantemente conjuntos de herramientas preferidos, tecnologías específicas, cuáles son las mejores prácticas y cómo se deben nombrar las cosas. Sí, estos son realmente importantes. Pero siento que el breve tiempo que paso con mi sobrina es más importante, más significativo y más satisfactorio que cualquier otra cosa. despojarlo todo y luego La web todavía funciona con cosas simples.
Esos cuadros de colores me llamaron más la atención que la tarea que se suponía que debía hacer. Ni siquiera sé por qué seguí mirándolo. Tal vez sea porque me di cuenta de que estaba repasando lo básico rápidamente sin siquiera darme cuenta. Ese momento me hizo frenar y mirar lo que estaba haciendo línea por línea en lugar de ir directo al grano.
Para mí, HTML de repente se parecía menos a un código y más a un material de construcción. Al mismo tiempo, CSS no sólo interviene con un pincel, sino que también tiene la capacidad de moldear estos materiales en formas tan hermosas como la arcilla.
Entonces, aunque mi sobrina vino a mí para ayudarla a comprender HTML y CSS, en realidad me enseñó un par de cosas. La forma en que miró la página y vio la casa me pareció más concisa que la forma en que había oído o leído sobre ella en otros lugares. La forma en que ilustra la relación entre HTML y CSS es tan precisa que no puedo igualarla.
¿Cómo lo explicarías?
Tomarme el tiempo para explicar los conceptos básicos de HTML y CSS me demostró que enseñar lo que hacemos (o cualquier cosa) puede revelar algo sobre lo que sabemos, especialmente lo que asumimos que sabemos. Enseñarle a alguien que nunca ha visto o escrito una línea de código te obliga a comprobarlo tú mismo. Aparentemente eso es todo Técnica Feynman La esencia del aprendizaje es: enseñar a aprender.
El aprendizaje es un viaje subjetivo, no un trato único para todos. Algunos de nosotros aprendemos visualmente, otros aprendemos leyendo, otros aprendemos a través de actividades. Por supuesto, factores como la edad también pueden tener un gran impacto en las cosas. Los adultos tienen más antecedentes y experiencia que los niños, incluso si esos antecedentes y experiencia no tienen nada que ver con la escritura de código. Entonces, si bien es posible que haya tomado una ruta más técnica con los adultos, tal vez encontrar una analogía con la que mi sobrina pueda identificarse sería una ruta más efectiva para ella, incluso si realmente no requiere escribir código.
Esto me hace hacer una pregunta: ¿Cómo le explicarías HTML y CSS a mi sobrina? O tal vez no mi sobrina, sino una niña de cinco años, ¿sabes? ¿Qué analogía usaría, si la hubiera? Creo que sería genial que te tomaras el tiempo para hacer esto y reflexionar detenidamente sobre lo que estás diciendo. ¿Qué te dice esto sobre lo que sabes y asumes sobre tu trabajo?
