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.