Grabación de la cuarta sesión celebrada el 25 de noviembrebre 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 cuarta sesión".

 Línea temporal de contenidos

 00 m 00s: Introducción. Trabajaremos con elementos multimedia: textos e imágenes (primera parte).

02 m 32 s: Para textos consulten el libro guía p. 46 donde se detalla el código necesario.

03 m 15 s: En la guía de esta cuarta sesión tienen los elementos que trabajaremos.

03 m 57 s: Como intersertar listas. 

04 m 50 s: Etiqueta <ul> (listas no ordenadas) y <li>.

06 m  05 s: Crear en "mis estilos" nuevas listas. Inclusión de una imagen como ilustración de cada elemento de la lista mediante una clase. Diferencia entre outside e inside en list-style.

11 m 13 s: Crear un tipo de lista propio.

16 m 50 s: En flaticon.es tienen iconos.

17 m 38 s: Inclusión de citas textuales. Hiperenlaces. Notas a pie de página y refrencias bibliográficas.

19 m 30 s: Para una cita textual incluimos una clase class="note".

21 m 17 s: Quitar la línea lateral de adorno en una cita textual incluyendo una modificación en mis_estilos e introducir otros cambios opcionales.

25 m 20 s: Incluir un hiperenlace: etiqueta <a>.

28 m 34 s: Poner una nota a pie de página. Etiqueta <span> es una etiqueta neutra, pero permite introducir estilos y clases. Para nota a pie de página usamos class="footnote".

32 m 34 s: Bibliografía: <bibitem id="xxx"> y referencias bibliográficas: <bibref ref_id="xxx">.

37 m 35 s: Tarea de esta sesión: elaborar una página similar a la incluida en el libro de referencia "Diseño de libros interactivos p. 53" con un mínimo de dos notas a pie de página, dos hiperenlaces y una cita textual.

38 m 34 s: Inclusión de imágenes: eitqueta <img> (cierre especial <img />.

 41 m 27 s: Centrado de imágenes.

44 m 10 s: class="image_expand" propia del libro interactivo y onclick.

48 m 52 s: Etiqueta <figure> con un título a pie de figura: <figcaption>. O encima de la figura. O con otro prefijo como Tabla (prefix="Tabla").

52 m 30 s: Preguntas y diálogos.

Chat de la sesión. 

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.