Grabación de la tercera sesión celebrada el 18 de noviembre de 2022 dirigida e impartida por el Dr. Rivera de la Institución Universitaria Colegio Mayor de Antioquia de Medellín (Colombia) y presidente de RED Descartes Colombia. 

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la Institución Universitaria Pascual Bravo y miembro de la RED Descartes Colombia.

Documento de referencia de esta sesión: "Curso de DescartesJS. Sesión3" 

Línea temporal   

00 m 00 s: Introducción. Objetivos de esta sesión.

01 m 14 s: En el documento de referencia (Sesión 3) la primera actividad es incluir diferentes tipos de fondo y de marcos incluyendo el manejo de imágenes, controles tipo botón, espacios y condicionales.

03 m 17 s: Recordad configurar la escena para que se escale (selector "Escena", parámetro "expandir escena").

04 m 02 s: Incluir una imagen en un espacio indicandp expadir en "despliegue". Puede descargar las imágenes auxiliares —fondos, botones y marcos— que se usan en la sesión 3 (y otras más) desde aquí.

05 m 19s: El selector "Programa" y los algoritmos "Inicio" y "Cálculos". Dibujar si en un espacio.

06m 16s: Crear más espacios (agregar o clonar) y condicionar su representación con dibujar si. 

09 m 35 s: Uso de un control para poder seleccionar los espacios y las imágenes ques estos contienen. Selector "Controles" y tipos controles. Control tipo botón y sus parámetros (ubicación, tamaño, imagen asociada, acción).

15 m 30 s: Crear un espacio auxiliar botones para ubicar en él el control tipo botón y con fondo transparente.

17 m 20 s: Limitar el valor de la variable usada en el control tipo botón.

18 m 20 s: Incluir otro botón para retroceder en los espacios e imágenes asociadas a ellos.

20 m 30 s: Surge un problema en la codificación (en este vídeo se explica cuál fue el error).

21 m 10 s: Agregar un título a la escena. Selector "Gráficos" tipo texto.

22 m 48 s: Cambiar el color del texto.

23 m 40 s: Agregar marcos. Usamos una variable auxiliar m (de marco) y un espacio adicional. Hay que posicionar u ordenar los espacios para su representación (son capas una encima de otra que se dibujan según el orden puesto en el editor de configuración de espacios).

28 m 20 s: Agregamos un control tipo barra para cambiar los marcos (cambiar el valor de la variable auxiliar m).

32 m 30 s: Tarea a realizar: Editar una escena similar a la construida en esta primera parte de la sesión.

33 m 00 s: Parámetros o propiedades del control tipo barra. Uso de gradiente en colores.

36 m 00 s: En la p. 36 del libro guión de la sesión 3 tenemos otra actividad.

37 m 00 s: Agregar un gráfico tipo imagen, en este caso es vectorial (svg). Ancho y alto de la imagen en porcentaje. Posicionamiento según coordenadas relativas a los ejes. Si el porcentaje es negativo invierte la imagen.

40 m 27 s: Incluir un espacio 3D con trasparencia. Nuevo selector "Gráficos 3D". Añadir un gráfico 3D.

42 m 04 s: Selector animación y control de una animación.

42 m 26 s: Variables de espacio (rotación en z, espacio.rot.z).

44 m 49 s: Un botón para una animación. Ubicación del botón usando el ancho del espacio (espacio. _w). Seleccionar en el paraámetro acción el valor "animar".

47 m 20 s: Incluir una rotación en y (selector animación y espacio.rot.y).

49 m 06 s: Añadir una imagen tipo gif animado o WebP animado. Es necesario un espacio HTMLIframe.

52m 20 s: Formatos o tipos de imágenes (p. 6 y siguientes del libro guión de esta sesión).

56 m 00 s: Tarea a realizar y se solicita algo de creatividad.

58 m 30 s: Preguntas y/o comentarios.

 Para la cuarta sesión: Hagan la tarea propuesta y practiquen.

Grabación de la tercera sesión celebrada el 11 de noviembre de 2022 dirigida e impartida por el Dr. Rivera presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos" (disponible también en versión pdf, pero siendo necesaria la conexión a internet para acceder a los objetos interactivos) y en el orden ahí incluido.

 Descripción línea temporal de contenidos

Libro interactivo con la  "Guía de la tercera sesión".

00 m 00s: Nos adentraremos en las hojas de estilo. Nos adentramos dentro del libro de "Diseño de libros interactivos en la pág. 21 y siguientes. Vimos estilos en las etiquetas y ahora nos adentramos en las hojas de estilos en un fichero externo.

02 m 15 s: En el libro de referencia anterior hay una herramienta de edición de HTML y CSS y visualización (acceder a la caja de herramientas en la esquina superior derecha).

02 m 42 s: Tendremos como tarea, después de esta clase, el diseñar algunos contenedores similares a los que tenemos en las pp. 19 y 20 de la guía de esta sesión 3ª y veremos el diseño de algunas listas especiales.

03 m 50 s: Comenzamos en la guía de esta sesión en la p. 15 (que pone sesión 2 en la portada del capítulo). Y, aprovechemos la ocasión, para ver cómo podemos incluir un nuevo capítulo en nuestro libro. Para ello disponemos de este vídeo de ayuda: "Nuevo capítulo y tabla de contendido".

04 m 48 s: Inclusión de un título en la tabla de contenido (toc) del libro. Hemos de indentificarlos con un "id" y en la sección toc del libro interactivo que estamos diseñando incluimos una línea donde referenciamos el id del titulo a incluir.

07 m 39 s: Hoja de estilos externa (localizada en la carpeta de nombre extra). En la p. 16 podemos ver en un vídeo cómo generarla.

10 m 06 s: Editar la hoja de estilos (ver vídeo en la p. 17 y los estilos ahí usados y reflejados en el texto de esta página).

15 m 05 s: Colores. Una buena introducción la podemos encontrar en el libro "Introducción a la graficación por computadora". El modelo RGB.

17 m 47 s: Otro formato para definir el color. Código hexadecimal.

19 s 04 s: El formato HSV.

20 m 35 s: En la p. 5 del núm. 1 de la revista RED Descartes hay un artículo de colores y CSS.

22 m 09 s: Cambiar familia de fuentes (carpeta font).

25 m 33 s: Definir clases.

27 m 56 s: Practiquemos clases con la herramienta auxiliar herramienta de edición de HTML y CSS.

29 m 38 s: Definamos una caja (.caja0).

35 m 15 s: Copiar la caja diseñada en la hoja de estilos.

36 m 46 s: Incluir una caja en un div usando class.

38 m 14 s: Uso de margin y padding.

 43 m 49 s: Otro diseños de caja.

46 m 00s: Avance del cambio de colores para el uso del fondo oscuro.

47 m 30 s: Más diseños de cajas. Caja con fondo una imagen. Vídeo auxiliar de diseño de cajas.

53 m 40 s: Preguntas, diálogo.

La plantilla inical del libro para realizar sobre ella las prácticas es:  

Mi_libro (descarga de la plantilla)

 Chat de la sesión.

Grabación de la segunda sesión celebrada el 4 de noviembre de 2022 dirigida e impartida por el Dr. Rivera de la Institución Universitaria Colegio Mayor de Antioquia de Medellín (Colombia) y presidente de RED Descartes Colombia. 

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la Institución Universitaria Pascual Bravo y miembro de la RED Descartes Colombia.

Documento de referencia de esta sesión: "Curso de DescartesJS. Sesión 2" (descarga)

Línea temporal

00 m 00 s: Introducción. La sesión se realizará siguiendo el documento "Curso de DescartesJS. Sesión 2" .

02 m 37 s: El editor DescartesJS, la ventana por defecto.

03 m 03 s: Botones laterales: apertura del editor de configuración y apertura del código de la escena interactiva (esto no se trabajará en este curso). El editor de configuración tambiéns se puede abrir con ctrl+E.

04m 02 s: Definir el tamaño o dimensiones de la escena. Los siete (ocho) selectores. El selector Escena.

05 m 46 s: El menú de la parte superior: Archivo, Opciones y Ayuda.

06 m 33 s: Opciones (dónde se guarda la librería de DescartesJS descartesmin.js): portable, internet, de proyecto. Selección de idioma, de aspecto.

08 m 17 s: Ayuda (documentación técnica de DescartesJS).

09 m 09 s: El selector Espacios. Por defecto aparece un espacio 2D con nombre E1. Cambio del nombre de ese u otros espacios.

09 m 53 s: El parámetro "info" (información del objeto cartesiano).

10 m 30 s: El parámetro "dibujar si".

12 m 19 s: Posición del espacio dentro de la escena (parámetro x e y, desde la esquina superior izquierda en coordenadas absolutas, positivas hacia la derecha y hacia abajo).

14 m 51 s: Ancho del espacio (en píxeles o en porcentaje).

15 m 43 s: Fijar un espacio (parámetro fijo).

16 m 26 s: Escala -número de píxeles por unidad de medida--(activamos el parámetro números para ver el efecto).

18 m 18 s: Incluir una imagen en un espacio o cambiar el color del fondo o los ejes... cambiando los colores (botón de edición de colores).

20 m 02 s: Conseguir que la imagen cubra toda el espacio. Parámetro despliegue de imagen: expandir o mosaico o...

21 m 23 s: Primera actividad a realizar. Una escena con tres espacios: uno 2D, otro 3D y uno HTMLIframe.

22 m 39s: Incluir un gráfico en el espacio 2D (selector gráficos). Botones para añadir un gráfico, duplicar, borrar o posicionar gráficos encima o debajo de otros gráficos). Agregar gráfico (botón +), selector tipo gráficos 2D. Agregar una ecuación y cambio de color en ese gráfico y ancho del mismo. Duplicar un gráfico (botón *).

24 m 36 s: Ajustar el espacio 2D a un 25% de la escena. Diferencia entre uso de porcentaje o tamaño en píxeles.

26 m 33 s: Incluir un espacio 3D. Agregar un espacio tridimensional (botón + y selección del tipo de espacio: R2, R3 y HTMLIframe). Nombre del espacio por defecto y nombre que puede dar el diseñador. Cambio de color, asignación de su tamaño y posicionamiento.

28 m 36 s: El selector gráficos 3D. Gestionar objetos gráficos tridimensionales. Incluir una superficie (paramétrica). Cambio de colores. Rotaciones inciiales o finales. Aristas. Nu y Nv (número de puntos de la malla).

31 m 07 s: Añadir un espacio HTMLIframe, tamaño y posicionamiento. Parámetro archivo: enlace al contenido HTML que se desee.

35 m 27 s: Guardar la escena interactiva. Archivo->Guardar o Archivo->Guardar como. Carpeta lib (libreria de DescartesJS, descartes-min.js.

36 m 30 s: Apertura de la escena en el navegador.

36 m 45 s: Escalar la escena: panel Escena, parámetro Expandir escena, opciones cubrir  y escalar.

40 m 10 s: Repasar con ayuda del libro de esta sesión:  "Curso de DescartesJS. Sesión 2". Ver ejemplos ahí.

42 m 11 s: La tarea a realizar.

44 m 40 s: Añadir bordes a un espacio. Parámetro borde y radio de borde,

 46 m 00s: Preguntas y comentarios.

Chat de la sesión

 Para la tercera sesión: ... Hagan la tarea y practiquen.

Grabación de la segunda sesión celebrada el 28 de octubre de 2022 dirigida e impartida por el Dr. Rivera presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos" (disponible también en versión pdf, pero siendo necesaria la conexión a internet para acceder a los objetos interactivos) y en el orden ahí incluido.

En esta segunda sesión se pone como objetivo que el discente elabore un libro similar a Mi_libro_Sesion2 a partir del libro plantilla Mi_libro (descarga de la plantilla) elaborando su libro de prácticas. 

 Descripción línea temporal de contenidos

00 m 00 s: La sesión se desarrolla buscando obtener, editar, a partir de la plantilla básica Mi_libro (descarga de la plantilla) el libro Mi_libro_Sesion2 (sesión 2). Diseñaremos/diseñarán las primeras páginas usando HTML y algunos estilos CSS.

01 m 00 s: Por comodidad para la edición, dividimos la pantalla en dos zonas: una para ver el libro interactivo que estamos produciendo y otra en la que abrimos el editor (Notepad++ o SublimeText u otro) donde editamos el código fuente de ese libro.

01 m 30 s: Algunas carpetas que hemos estado usando. Copiamos Mi_libro y lo renombramos Mi_libro2 (como precaución para tener siempre el libro plantilla de partida). Abrimos el fichero index.html con el editor y en el navegador.

03 m 23 s: Cambio del título del libro. En el cuerpo (<body>)  vemos alguna etiquetas y elementos básicos del libro en los que no nos adentraremos ahora, sólo mencionarlos e identificar como se visualiza en el libro.

06 m 47 s: Toda página está en un contenedor <div class="page" > ... </div>.

07 m 35 s. Cambio del título del libro. Este libro es que que servirá para evidenciar sus avances, pero obviamente pueden en paralelo ir diseñando sus libros personales con los contenidos que deseen.

09 m 24 s: La contraportada (logo de iCartesiLibri u otro).

10 m 30 s: Página de título, autoría, filiciación y editorial.

12 m 12 s: Páginas en blanco y sin numeración (num="").

12 m 55 s: Página de Prefacio.

13 m 55 s: Portada del primer capítulo.

15 m 30 s: El primer contenido del libro.

17 m 00 s: Encabezados <h1>, <h2>,... <h6>.

18 m 50 s: Numeración automática a diferentes niveles desde <h2> en adelante.

 20 m 16 s: Párrafos (<p>...</p>).

21 m 34 s: Poner un título incluyendo un estilo (style). Centrado (text-align:center). Tamaño (font-size). Negrilla (<b></b>). Color (color).

26 m 50 s: Los colores en el diseño.

28 m 10 s: Como seleccionar un color, difentes tipos de códigos.Texto, rgb.

33 m 20 s: Ampliando los contenidos del libro con párrafos (<p>).

33 m 55 s: Salto de línea en el navegador: <br> (diferencia con "enter" en el editor que no se traslada al navegador). Cada párrafo (<p></p>) incluye un salto de línea en el navegador.

36 m 17 s: Síntesis de etiquetas utilizadas y estilos usados.

 36 m 49 s: La etiqueta <div> (contenedor o bloque) y la traslación de estilos desde el contenedor al contenido. 

39 m 58 s: Más estilos: font-weight, width, margin-left.

42 m 20 s: Listas: no ordenadas <ul> y ordenadas <ol>, e ítem <li>.

44 m 33 s: Cambio de viñetas en las listas no ordenadas (type).

45 m 30 s: Listas ordenadas.

45 m 50 s: El control del cambio de página en los libros interactivos es manual.

47 m 10 s: Cambio de numeración en una lista ordenada (start) y cambio de tipo (type).

49 m 25 s: Otros contenedores y ampliación en el libro guía: "Diseño de libros interactivos" (pp 12-29).

51 m 17 s: Diálogo, preguntas y nuevas presentaciones.

 Chat de la sesión.

Grabación de la primera sesión celebrada el 21 de octubre de 2022 dirigida e impartida por el Dr. Rivera vicerrector de la Institución Universitaria Colegio Mayor de Antioquia de Medellín (Colombia) y presidente de RED Descartes Colombia. 

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

Documento de referencia de esta sesión: "Curso de DescartesJS. Sesión 1" (descarga)

Línea temporal:     

00 m. 00 s: Presentación.

01 m 50 s: Presentación de algunos discentes.

04m 20 s: Inicio de contenidos. Dirección del proyecto Descartesproyecto Descartesproyecto Descartes y de los contenidos de este curso.

05 m 58 s: Libro interactivo de referencia para los contenidos.

07 m 05 s: Libros del proyecto iCartesiLibri de Descartes.

08 m 29 s: Libro interactivo de esta primera sesión (descarga). Se adelantarán las sesiones para abordar una docencia tipo clase invertida.

09 m 22 s: Herramientas de autor (p. 2 de sesión 1). La pervivencia de estas herramientas. Algunas muestras de algunas de ellas.

 21 m 00 s: El editor DescartesJS.

23 m 25 s: Las plantillas de la RED Descartes. El libro interactivo de plantillas (versión interactiva, pdf y descarga). Muestra de algunas plantillas (todas cuentan con un pdf explicativo de cómo editarlas y adaptarlas a nuestro objetivo educativo y el zip de descarga correspondiente).

31 m 45 s: Contenedores con plantillas (agrupaciones de plantilllas en un único objeto interactivo).

33 m 57 s: Descarga del editor DescartesJS.

38 m 54 s: El aspecto del editor de DescartesJS. Unos breves ejemplos de edición.

46 m 00 s: Preguntas y diálogo.

Chat de la sesión

 Para la segunda sesión:

• Descarga del editor DescartesJS: https://descartes.matem.unam.mx/
• Enlace a incluir próximamente con los contenidos de la segunda sesión... (sea paciente)

Grabación de la primera sesión celebrada el 14 de octubre de 2022 dirigida e impartida por el Dr. Rivera presidente de RED Descartes Colombia.

Comparten gestión y docencia: Lcdo. José Antonio Salgueiro González, secretario de la RED Descartes de España y el Ing. MSc. Ramiro A. Lopera Sánchez de la IU Pascual Bravo y miembro de la RED Descartes Colombia.

El desarrollo de la clase se realiza siguiendo los contenidos escritos en el libro interactivo: "Diseño de libros interactivos" (disponible también en versión pdf, pero siendo necesaria la conexión a internet para acceder a los objetos interactivos) y en el orden ahí incluido. Si tiene el libro abierto en el navegador podrá parar el vídeo y observarlo con el detenimiento que necesite. 

00 m 00 s: Presentación del curso, del director del mismo Dr. Rivera y del instructor Ing.MSc. Ramiro A. Lopera.

03 m 57 s: Presentación de algunos de los discentes.

10 m 19 s: Agenda de la sesión:

• • Inroducción. Libro tutorial (motivación)
  • Herramientas de edición (Notepadd++ o SublimeText
  • Introducción a la programación HTML

12 m 15 s:

Como referencia inicial, sólo como referencia pues iremos detallando posteriormente, los recursos que utilizaremos:

1. Descarga tu plantilla inicial
2. Ejemplo básico de uso
3. Descarga del libro de ejemplo básico de uso
4. Ejemplo de libro interactivo con fórmulas con KaTeX, específico para el lenguaje científico
5. Descarga del libro con fórmulas con KaTeX
6. Tutorial para el diseño de libros interactivos
7. Lista en Youtube con vídeos de apoyo

12 m 25 s: Comenzamos con la Descarga de la plantilla inicial (Mi_libro). Versión básica y versión con KaTex (ésta es la que se ha incluido en la plantilla inicial).

14 m 32 s: Tutorial: Libro interactivo con los contenidos del curso. Descripción de los primeros puntos del índice.

15 m 58 s: Proyecto iCartesiLibri (libros interactivos de Descartes). También en formato pdf (necesita conexión en línea para los interactivos) y en flipbook.

18 m 40 s: Libros tipo flipbook. En los primeros libros interactivos de Descartes se usó este formato con un código propio.

20 m 01 s: El formato actual que usamos tiene la ventaja de su adaptabilidad a los diferentes soportes (ordenador, tableta o smartphone).

20 m 35 s: Herramientas de edición (pág. 8 del libro/tutorial). Editores de texto plano para edición páginas HTML. Notepad++ (Windows), Sublime Text (iOS, Linux y Windows). También versiones en línea o portable.

28 m 21 s: La primera tarea es instalar el editor deseado.

30 m 10 s: ¡Quiero elaborar un libro! y ¡quiero publicarlo!

33 m 30 s: Ser cautos y cuidadosos con los derechos de autor de textos e imágenes. Repositorios libres (p. 10 del tutorial, añadir freepik.com).

37 m 46 s: Etiquetas HTML. Documento HTML, etiquetas básicas: html, head y body. Etiquetas de cierre (/).

40 m 08 s: Etiqueta <title>.

40 m 50 s: La plantilla Mi_libro ya tiene predefinida la estructura HTML necesaria (no se preocupen).

42 m 30 s: "Mi primer ejemplo". Escritura de párrafos... Continuaremos...

43 m 33 s: Preguntas y diálogo.

Chat de la sesión.

Uso de las herramientas de edición para elaborar un libro interactivo. Se parte de una plantilla básica del libro que hay que descargar previamente.

Se muestra la edición de la plantilla con tres editores (Notepad ++, Sublime y Visual Estudio).

Aprendizaje de las primeras etiquetas:

• Párrafo.
• División con clase página.
• Comentario.
• Sección.

10s: La plantilla inicial: Mi_libro.

35s: Descarga del editor html.

1m 30s: Edición de la plantilla del libro interactivo.

4m 0s: Editar la primera página con algunos editores (usted seleccionará el que desee). Uso de la etiqueta párrafo: <p></p>

8m 45s: Incluir más páginas. <div class="page"> </div>. Etiqueta comentario <!-- Comentario -->.

9m 40s: Cambiar el título de una sección del libro (encabezado a segundo nivel) , etiqueta <h2> </h2>