2a:[] 29:{"title":"1.2 Introducción a HTML","cells":[{"id":0,"value":"md`# 1.2 Introducción a HTML\n\nEn la [introducción a la programación con Observable](/@emmanueliarussi/1-1-programando-con-observable) vimos que las celdas pueden retornar estrucutras de datos como números, strings, arreglos y objetos más complejos. Pero cómo hacemos para visualizar esos datos mediante componentes HTML? Tené en cuenta que en el resto de este notebook haremos referencia a funciones y componentes html cuya documentación podés consultar [acá](https://www.w3schools.com/tags/).\n\nSi una celda retorna un componente HTML, entonces ese elemento se muestra como es:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"html`

Soy un párrafo.

`// https://www.w3schools.com/tags/tag_p.asp","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`También es posible definir componentes HTML de la siguiente forma`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"{\n const p = document.createElement(\"p\"); // Document es esta página, le agrego un elemento de texto

\n p.appendChild(document.createTextNode(\"Yo también soy un \")); // Seteo el texto\n p.appendChild(document.createElement(\"i\")).appendChild(document.createTextNode(\"parrafo.\")); // Agrego texto formateado\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`Aún mejor, podemos hacerlo mediante la sintaxis de [marcadores](https://www.markdownguide.org/basic-syntax/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`Psss! Yo también soy un *párrafo*.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`Los marcadores soportan una gran variedad de estilos y elementos, como listas y tablas. [Esta](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax) es una buena guia sobre las posibilidades al utilizar marcadores. \n\nLas celdas Markdown y HTML pueden ser dinámicas, se pueden incrustar expresiones como \\`\\${…}\\`. Por ejemplo, el número favorito a continuación se genera aleatoriamente.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`Mi número favorito es el ${Math.random() * 100 | 0}.` // Shift+Enter múltiples veces para ver como cambia","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`Las expresiones incrustadas también pueden ser componentes HTML. Esto nos permite incrustar contenido dinámico, como pequeños gráficos en SVG o notación matemática en LaTeX, dentro de un Markdown.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`Tremendo! podemos usar ${tex`\\LaTeX`} para expresiones matemáticas ${tex`E = mc^2`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"md`Tambien es posible incrustar componentes gráficos como esta linea: ${sparkline([0, 4, 3, 1, 6, 3, 4])} dentro del texto.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"function sparkline(values, width = 64, height = 17) {\n const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);\n const context = DOM.context2d(width, height);\n const line = d3.line().x((d, i) => x(i)).y(y).context(context);\n context.beginPath(), line(values), context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`Además, una celda marcador también puede ser *reactiva*. La función \\`now\\` se encuentra predeterminada en la [librería estandar](/@observablehq/standard-library) de Observable. Es una variable cuyo valor siempre es la hora local. Utilizar esta variable dentro de un marcador como \\`\\${…}\\` hace que se re-evalue constantemente:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`La hora actual es ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"md`Para incorporar contenido visual, podemos utilizar el [Canvas SVG](https://www.w3schools.com/html/html5_svg.asp) provisto por HTML, y las primitivas de dibujo. En el siguiente ejemplo, definimos un área de dibujo de 720x120 y creo tres círculos centrados en diferentes coordenadas:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"html`` // cx,cy son las coordenadas de cada círculo y r su radio","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"md`Sobre estos canvas, puedo dibujar [todo tipo de primitivas](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes), por ejemplo:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"html`` // cx,cy son las coordenadas de cada círculo y r su radio","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`También es posible crear componentes interactivos:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"barra_slider = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`Y leer las propiedades del elemento definido en esa celda:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"barra_slider.type","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"barra_slider.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"md`Otro ejemplo con input de texto:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"input_text = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"input_text","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`Como ya hemos mencionado, las celdas que referencian componentes como el slider o el recuadro de entrada de texto no se actualizan automáticamente cuando su contenido cambia. Para reaccionar a cambios en estos componentes podemos utilizar \\`viewof\\` para indicar que otras celdas pueden querer actualizarse al cambiar el valor del slier.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof input_bar = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"input_bar","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2a","stdlib":"1","titling":"auto"}