Arquitectura - componentes

[zrafa]

Leí un poco la wiki y aunque todo me parece genial (y necesite un año para comprender/digerir todo) se solicita una estrofa/parrafo/5 lineas de la explicacion de la arquitectura por favor. No conozco nada de javascript y de cosas relacionadas a los navegadores. Unicamente que HTML permite que edites texto plano, poner marcas, y que en el navegador son interpretadas al visulalizar una pagina. Pero, por ejemplo, que es reveal.js? Lo que vos tenes es un software en javascript que se ejecuta en el navegador? Hay que tener algun servicio especial para tener una clase? (apache, github, o pueden los archivos estar en el disco?). Como funciona todo? (que pregunta poco precisa). Cuando se habla de plugins etc, que es todo eso? Parte del software? Que es un plugin en este contexto? (un archivo que se copia donde está el html?). Por ahí la respuesta a todo es que hay que aprender javascript y entender que es reveal.js? Muchas preguntas iniciales.

Cual es el repositorio dummy para clonar y empezar que menciona la wiki? (el que dice NOMBRE sale como no encontrado en github)

[egrosclaude]

BUENISIMO que aportes preguntas!!!

Antes de empezar: esto es un despelote de varias cosas juntas. No me sorprende que te sientas angustiado. El repositorio dummy y NOMBRE son placeholders para cosas que todavía no hay.

No entiendo si tu pregunta es un poco retórica tipo "aumentemos la información del wiki con contenidos básicos para introducir el asunto gradualmente y convertirlo en una documentación autocontenida del sistema" o si realmente te interesa que hablemos por esta vía de esas cuestiones técnicas.

Si es lo primero, la arquitectura está descripta en https://github.com/hakimel/reveal.js y hay bastante para leer allí, y podríamos poner en el wiki referencias a los puntos de partida para los incautos.

Si es lo segundo... ehhh también, la arquitectura está descripta en https://github.com/hakimel/reveal.js etc etc

Cosas BIEN básicas:

Javascript

• El navegador contiene un intérprete Javascript (JS).
• Cuando una página contiene cosas como , el intérprete ejecuta esas cosas. Salvo que el usuario lo tenga deshabilitado. El momento en que carga, interpreta o ejecuta puede variar de acuerdo a modificadores del tag script.
• Javascript está pensado para funcionar en ese ambiente (front-end) pero igual existe como cosa aparte. Por ejemplo node (apt-get install nodejs) es un intérprete standalone que se suele usar como back-end. La piolada consiste en que el desarrollador conociendo una sola cosa puede construir todo el stack de una aplicación web. Se han desarrollado diferentes intérpretes de JS. El de Chrome dicen que es el más veloz y se llama V8. Node es V8.
• La programación en estos ambientes es necesariamente orientada a eventos™ y éste es el mayor dolor de cabeza para los programadores de lenguajes de generaciones anteriores. Hay una cierta inversión de la lógica. Si los scripts contienen código "suelto" ese código se ejecuta al cargarlos. En el caso más frecuente, los scripts son un conjunto de funciones que se cuelgan de eventos como callbacks. Los eventos provienen de los elementos activos de HTML de la página (como botones que son pulsados, áreas de texto que reciben input, mouseover sobre cualquier elemento, etc.), o bien son disparados por el navegador (documento completamente cargado, destrucción de ventana o de pestaña, etc).

Ampliaremos

[zrafa]

Gracias por las aclaraciones iniciales. Creo que esta via servía para justamente esto, un poco de todo con respecto a alguien como yo con miles de dudas iniciales.

Se me empieza a aclarar el panorama inicial. Pregunta siguiente (que por ahí se aclara con un hello world o si me pongo a estudiar el reveal.js): Como se ejecuta todo lo que traiga el reveal.js? Es decir, como se usa el framework? Con un hello world basico creo que me respondés.

Como te leí que con el vi y editando un HTML ya alcanza, entonces me queda la duda de donde debe estar el archivo reveal.js (o todos los .js que compongan el framework), y como se usan esos archivos desde un HTML. Lo de orientada a eventos no me asusta, ya recontra leí el jueguito tipo tetris binario, por lo que estoy repreparado para el asunto (recontra -> repreparado). Además uso el vi para escribir los apuntes, asi que incluso recomendaria excluir de este proyecto a todos los usuarios de emcas (que se arme de una vez por todas). Fijate la fobia que les tengo que hasta escribí "emcas"

[egrosclaude]

Ampliando

Document Object Model (DOM)

• Cuando el navegador lee una página va haciendo el parsing del HTML y construyendo una representación en forma de árbol en memoria. Esto se llama el DOM.
• El objeto raíz del DOM es un documento, que tiene head y body; del head cuelgan elementos que definen estilo y algunos scripts, del body cuelgan otros elementos que pueden tener una visualización propia (como H1 que es un título de nivel 1) o ser contenedores (como DIV o SPAN con la posibilidad de aplicar propiedades de un saque a todo lo contenido). Cada tag HTML que aparece es un nodo del DOM. Creo que hay más tags HTML que números racionales, y la página virtualmente puede tener infinitos tags e infinitos niveles de contenedores, así que el DOM puede ser bastante grande.
• El DOM es modificable dinámicamente mediante JS. Cuando un evento dispara una función callback, ésta puede ubicar un elemento mediante alguna propiedad (el DOM es searchable por tipo de tag, por atributo, por clase, por id, etc) y cambiarle propiedades o directamente el contenido (por ejemplo la propiedad innerHTML de un H1 es directamente el texto del título).

    <html>
    <head>
    </head>
    <body onload = "g()">
            <h1>Título</h1>
            <script>
                    var g = function() {
                            document.getElementsByTagName("h1")[0].innerHTML = "Prueba";    
                    };
            </script>
    </body>
    </html>

Pero, por ejemplo, que es reveal.js? Lo que vos tenes es un software en javascript que se ejecuta en el navegador? Hay que tener algun servicio especial para tener una clase? (apache, github, o pueden los archivos estar en el disco?). Como funciona todo? (que pregunta poco precisa).

Reveal.js

• Es un proyecto de Hakim El Hattab (que es sueco) que consiste en un script, unas hojas de estilo y muchos plugins creados por él o por terceros. El script básicamente modifica furiosamente el DOM en base a los eventos de mouse o teclas de flechas de modo de hacer aparecer y desaparecer elementos section del DOM. Eso es "pasar las diapositivas".
• Para usar Reveal cada presentación es una sola página (una SPA como dicen los millennials, o Single Page App). Esta incluye el script reveal.js y algunos asociados y cada diapo es una section.
• Un script incluido por una página puede estar guardado en cualquier lugar. Puede estar en el disco local, puede estar escrito en la misma página o puede provenir de un server externo y ser levantado a través de la red al momento de carga de la página. La página dice el URI (dónde está) del recurso.
• Técnicamente no es necesario un servidor, la SPA podría ser bajada u obtenida de alguna forma y se podría levantar como file://. Lo que no sé es hasta dónde el navegador te deja ejecutar JS de una página local, me parece que no se puede por restricciones de seguridad. De manera que lo mínimo sería que la SPA sea escrita referenciando al reveal alojado en algún sitio CDN (Content Distribution Network).
• Sin embargo como yo customizo a lo tonto todo este software prefiero armarme un árbol de scripts, plugins, source, img, utils, etc etc todo descargado a mi repo local y esto es lo que va y viene al github. Lo publico con el truquito de gh-pages. En el Pedco pongo el link al github. Esta estructura tal cual se ve en https://github.com/egrosclaude/IC2017.
• Mi workflow es editar src/pagina.slides y después make pagina. El Makefile llama a un par de scripts bash míos que acomodan el .slides y generan el html y el PDF.
• La consecuencia desagradable es que no es fácil que el usuario descargue la clase sino que está atado a tener acceso a la red O BIEN a una versión en disco local de todo el árbol. De esta última forma doy yo las clases en las aulas, donde NUNCA HAY INTERNET. Me pulleo el repo a mi HP 1000 de 1GB RAM y medio core y me la llevo al aula, qué le vas a hacer.

Cuando se habla de plugins etc, que es todo eso? Parte del software? Que es un plugin en este contexto? (un archivo que se copia donde está el html?). Por ahí la respuesta a todo es que hay que aprender javascript y entender que es reveal.js? Muchas preguntas iniciales.

Plugins

• Son scripts, opcionalmente con sus recursos como hojas de estilo, que cumplen algún protocolo que les permite compartir datos con un script capanga o recibir órdenes del mismo. Generalmente opcionales.
• El plugin puede estar en el mismo árbol servido por el mismo servidor de la página, o puede estar en otro servidor y la página referenciar el URI.
• Reveal publica una API que pueden utilizar los plugins para integrarse a la "presentación". Hay muchos plugins.
• P.ej. este muchacho el Sonaryr me hizo uno que es fundamental para la funcionalidad didáctica, que es el que reacciona cuando pulsás "V" partiendo la pantalla en dos y mostrando unos elementos "aside" conteniendo texto, que acompañan a las diapos. Esos son los textos que aparecen al costadito. Por otro lado esos textos se escriben en Markdown y existe un plugin que lo interpreta y dinámicamente modifica el DOM de manera de visualizar las cosas con la semántica correspondiente (igual que github). Por otro lado, esos mismos textos pueden incluir formulerío matemático en Latex entre signos pesos y hay otro plugin que interpreta el Latex. Por el lado de las diapos, está el que muestra el menú, el del lapicito, el del pizarrón, y hasta hay uno llamado "anything" con el cual insertás cualquier tipo de contenido y lo activás al entrar a la diapositiva (por ejemplo hacés que arranque un video).
• Yo usé anything para adaptar el visualizador de asciinema para poder meter pseudovideos de consolas (ejemplo https://egrosclaude.github.io/IC2017/Redes.html#/45). Ese videíto no es un GIF sino que la sesión fue grabada con una herramienta al estilo del "script" del bash, que creó un archivo JSON. Ese archivo JSON es de texto y el plugin lo visualiza al vuelo (se puede detener o volver para atrás).

Los usuarios de emcas serán los primeros frente al paredón, después los que llaman "carpetas" a los directorios.