Cómo crear clases grabadas que realmente enseñen

Grabar una clase no es solo encender la cámara y explicar un tema. Para que una clase grabada enseñe de verdad, necesita intención, claridad y una experiencia pensada para estudiantes que aprenderán de forma autónoma.

Si estás creando contenido para cursos virtuales o híbridos, estas 12 pautas, organizadas en 4 secciones: antes, durante, recursos y accesibilidad) podrían ayudarte a preparar videos más útiles, claros y fáciles de seguir.

Bloque 1. Diseña la experiencia de aprendizaje

1. Enfoca la clase para el formato grabado

Evita grabar una sesión como si fuera una clase presencial. En video no puedes ajustar el ritmo en tiempo real ni responder dudas al instante, así que conviene ser más directo, ordenado y concreto.

Diseña cada video como una experiencia independiente, con inicio, desarrollo y cierre claros.

Tips para grabar clase

2. Define qué aprenderá el estudiante

Antes de explicar, dile al estudiante qué va a aprender y para qué le servirá. Una pregunta sencilla para preparar el video es: ¿Qué podrá hacer el estudiante después de ver este video? Cuando el objetivo está claro desde el inicio, el estudiante entiende mejor el sentido del contenido y se mantiene más motivado.

Define los objetivos de la clase

3. Organiza el contenido en microclases

Los videos largos suelen perder impacto. Es mejor dividir el contenido en microclases enfocadas en una idea, procedimiento o habilidad específica. Así facilitas la atención, la revisión posterior y la navegación dentro del curso.

Interpolaciones clásicas en Adobe Animate

El movimiento es la esencia en el campo de la animación de gráficos y la interpolación clásica es uno de las formas más sencillas de hacerlo, posiblemente el adjetivo de "clásica" venga a causa de que fue la opción por defecto desde Macromedia Flash.

Solo necesitamos un fotograma clave en donde inicia el movimiento y otro para indicar el final, esto va a generar por defecto un desplazamiento rectilineo y uniforme, como se muetra en el video siguiente:

@icacreativa ¡Aplica la Interpolación Clásica en nuestro último video y dale vida a tus diseños! ✨ ¿Quieres ir más allá? Ofrecemos capacitaciones personalizadas en diseño, animación y multimedia. ¡Aprende a tu ritmo y con tus objetivos! ¿Listo para destacar? Envíanos un DM o visita el link en bio para info. ¡Tu talento merece brillar! 🚀 @gabrielamilagros32 @iestpparcona @systematic.peru ♬ sonido original - icacreativa

Fotograma clave inicial

1. Abre un nuevo documento, de tu preferencia, usaré un Full HD (1920x1080) a 24 FPS
   
   
   
   
2. Ahora agrega una forma a tu lienzo, previamente seleccioné color de relleno y contorno, usaré un óvalo y lo colocaré ya en el punto en donde deseo iniciar el movimiento.

Actualizando El Core De Drupal 7

Al hablar de el “Core” nos estamos refiriendo al núcleo de Drupal, y como es obvio, por motivos de seguridad la comunidad va ofreciendo actualizaciones que no deberíamos ignorar.
Habitualmente se enviarán avisos a la cuenta de correo del administrador del sitio sobre las actualizaciones disponibles, o al autenticarse en el sitio verán un mensaje como el siguiente:

En este caso particular es para actualizar de la versión 7.28 a la 7.31, el enlace a la derecha (Drupal core) nos lleva a la página en donde descargamos la nueva versión.

Descargando La Actualización

A diferencia de otros elementos de Drupal tendremos que realizar la actualización de forma prácticamente manual todo el proceso.

Accediendo a MySQL con JSP

Hay que tomar en cuenta para este ejercicio dos cosas:

1. Básicamente es lo mismo que usar una conexión de escritorio con Java (JSP está pensado en el uso de redes, particularmente hablamos de páginas Web).
2. Deberíamos separar la parte de código Java del código HTML (en otro ejercicio usaremos los beans)

En este ejercicio uso el IDE de Netbeans 7.4 (aquí datos sobre la instalación).

LA BASE DE DATOS

Para no complicarnos más de lo necesario usaremos el script de la BD dbnegocio que incluye la tabla clientes con 6 registros:
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";CREATE DATABASE `dbnegocio` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `dbnegocio`;CREATE TABLE `clientes` (
  `cod_clie` int(11) NOT NULL auto_increment,
  `nom_clie` varchar(25) NOT NULL,
  `ruc_clie` varchar(11) NOT NULL,
  `dir_clie` varchar(100) NOT NULL,
  PRIMARY KEY  (`cod_clie`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;INSERT INTO `clientes` VALUES (1, 'Luis Miguel', '10258945101', 'Av. Miami 990');
INSERT INTO `clientes` VALUES (2, 'Freddy Albarracín', '10451278361', 'Av. Arenales 789');
INSERT INTO `clientes` VALUES (3, 'Juan Godoy', '14784598652', 'Calle Las Magnolias s/n');
INSERT INTO `clientes` VALUES (4, 'Betel García', '20142536784', 'Los Frejoles 478');
INSERT INTO `clientes` VALUES (5, 'Luisa Pérez', '20144778666', 'Urb. Los Pecanos J-5');
INSERT INTO `clientes` VALUES (6, 'Dina Meza', '20141512178', 'Los Naranjos 357');

Video con Responsive Design

Esta era una pregunta que de cuando en cuando venía a la mente al compartir videos, como en este blog, con un ancho por defecto ¿Y si el display o pantalla del navegante es más pequeña?
Era evidente el uso de Responsive Design, pero ¿Cómo hacerlo? Pues que es una solución interesante, práctica y sencilla con CSS3:

una publicación por Mi sitio en la Web.

Trabajando Con Sesiones En PHP

En el presente documento desarrollamos un ejercicio trabajando el concepto de sesiones con PHP, aunque lo correcto es trabajar con datos almacenados en bases de datos,nos concentramos más bien en las sesiones propiamente.
Está desarrollado con los servicios incluidos en Wampserver (Apache, PHP y MySQL), ejecutándose sobre Windows 7.

Inicio de sesión (fig.01)

Descripción del ejercicio

El trabajo con sesiones es uno de los elementos vitales en el desarrollo de sitios Web, por ejemplo piensa en cuando ingresas a tu cuenta de correo o a la de Facebook, ingresas tus datos (nombre de usuario o correo y contraseña), una vez dentro podrás desplazarte por las diferentes secciones (páginas) del sitio, usar herramientas, etc.
Mientras no uses la opción para salir de tu cuenta (salir, cerrar sesión, log out, o algo así) el “navegador” sabrá quién eres tú y que cuenta estás usando, una vez que salgas de tu cuenta te “olvidará”.

phpMyAdmin – Parte I (Tu primera BD con MySQL)

Prácticamente hace más de año y medio compartí este artículo en el blog de PrimeraWeb para usuarios de Appserver, que a sido mi favorito por muchos años, pero, debido al gran número de alumnos trabajando con WampServer comparto esta revisión.
Básicamente tenemos el mismo sistema de trabajo, solo me centraré en las diferencias entre estas versiones: apariencia, distribución y otras opciones no “vitales”
Como ya dije en el otro post es posible descargar phpMyAdmin dese su sitio oficial, sin embargo, suele venir integrada con otras aplicaciones para el diseño tales como Appserv, Xampp y WampServer, que incluyen phpMyAdmin entre otros servicios.

Sitio Web local con PHP/MySQL en Dreamweaver

Hace ya bastante tiempo preparé un tutorial en Primera Web para configurar un sitio Web con Dreamweaver sencillo, es decir, un sitio Web con HTML que no requería de un servidor, pues ha llegado el momento de configurar un sitio con para trabajar con PHP y MySQL, gracias a la pregunta de Arturo Paúl.
Solo advierto que estoy usando la versión CS3 de Dreamweaver, en la versión CS5  (que no he conseguido aún ya que CS3 es suficiente para mi) el procedimiento es algo diferente, además me centro en la instalación y configuración en el SO Windows.

Los Servidores

Lo primero es que ya debes haber instalado los servidores para PHP y MySQL, las tres opciones más usadas desde mi punto de vista son:

1. AppServer 2,5: En donde la carpeta del servidor por defecto está en C:\appserv\www
2. Xampp: En donde la carpeta del servidor, si mal no recuerdo, está en C:\appserv\htdocs
3. Wamp: AL igual que en AppServer está en C:\appserv\www

Los tres incluyen el servidor Apache, PHP, MySQL y phpMyAdmin.
Para instalar AppServer revisa este tutorial, si prefieres trabajar con Wampp lo tienes en la primera parte de este video:

Instalando WampServer y Joomla

Tu blog en Blogger - I

Dirígete a http://www.blogger.com para hallar esta interface:

Si tienes una cuenta con Google (Google+, Drive, Gmail, Youtube, etc.) ingresa tus datos para usar el servicio, en caso contrario, usa el botón superior “Crear cuenta”.

Números Aleatorios con Visual Basic

[Esto correspondería a la 5a semana del curso de tecnologías móviles: TM - Semana 05]
Ya hace algún tiempo tratamos el tema de números aleatorios con C#, pero, como nadie nace sabiendo o quizá por la falta de uso del lenguaje podríamos olvidar algunas cosas o por alguna otra razón, volveremos a tratar el tema.

La Clase Random

Al igual que en C# tenemos la clase tenemos la clase Random, que como explica correctamente El Guille genera números seudo-aleatorios. Para no complicarnos la vida (que no es mi objetivo al menos en este post ;-) instanciamos un objeto desde esta clase y mediante el método Next() le asignamos un valor:

   Dim r As New Random
   Dim aleatorio As Integer = r.Next()
De esta forma, en la variable “aleatorio” tenemos un número entero mayor a cero elegido al azar.

TM–Semana 03

En esta sesión repasaremos las estructuras cíclicas o bucles, orientándonos al proyecto que posteriormente se implementará como parte de sus proyectos.
Exactamente examinaremos las sentencias While, Do Until y For, pero antes de empezar recordemos la forma de implementar un inputBox que necesitaremos, en su forma básica es:
   variable = InputBox(cadena_mensaje, cadena_título)
En donde variable debe ser una cadena por defecto.

El Proyecto

He iniciado un nuevo proyecto SmartDevice con el lenguaje VisualBasic al que he nombrado “Semana03” con todas las otras opciones por defecto y agregamos un label al que establecemos las siguientes propiedades:

• Text: Lo dejamos en blanco
• Dock: Fill (clic en el centro de la imagen desplegable)

Esta última propiedad hará que el label se ajuste a los cuatro lados del contenedor (el Form1) en donde mostraremos un mensaje una determinada cantidad de veces.
Para pasar a la vista de código si damos doble clic en el formulario en realidad estamos dando los clics en el label (se carga el evento Label1_ParentChange()) que ocupa todo el espacio disponible, así que en la lista sobre el código seleccionamos “(Form1 eventos)”:

TM – Semana 02

Este contenido está pensado en la clase de Tecnologías Móviles, la semana anterior hemos examinado el IDE de Visual Studio 2008, además consideramos algunas de las ventajas y limitaciones de los dispositivos móviles.
Ahora recordaremos algunas características del lenguaje Visual Basic ya que hace varios meses que no le damos uso, para ello empezaremos con algunos ejercicios sencillos a manera de “calistenia”.

El Proyecto

Nuevo proyecto (Ctrl + Mayús + N) y procedo a seleccionar un proyecto “Smart Device” con el lenguaje Visual Basic (dependiendo de varios factores quizá la apariencia de su cuadro de diálogo podría diferir de la siguiente imagen) y aceptamos:

El Artista Que Llevamos Dentro

"Todos llevamos un artista dentro", esa es la frase que mencioné en muchas ocasiones, en aquellos tiempos al trabajar con Paint en las clases básicas de ofimática. Ahora lo creo mucho más, de manera particular me gustaríar mencionar el post Todos pueden aprender a dibujar (en serio) del blog Sueños de azul de Jaime Wong.

Aunque ya hace años que he dejado de dibujar, pues siempre me encantó hacerlo, hasta mis padres me enviaròn a un curso en el INC de la heroica ciudad de Tacna, que me perdone el profe, pues no recuerdo su nombre pero hasta ahora recuerdo mucho de sus clases.

Bueno, en el blog mencionado líneas arriba, se anunció el lanzamiento de "Artística", un sitio que en vez de ser un curso formal de dibujo, pretende coleccionar tips que ayuden en el aprendizaje, se los recomiendo, aún si piensas que no tienes talento: solo habrá que trabajar un poco más, pero lo lograrás.

Allí hallé un blog orientado al tema por si les interesa.

En homenaje al subestimado paint les dejo este video:

Relacionando Tablas de MySQL

¡Saludos! En publicaciones anteriores hemos usado varias veces el entorno MySQL para ejercicios no muy complejos, pues, ahora daremos un paso adelante y veremos el tema de relacionar tablas en MySQL. En estos videos veremos la forma "difícil" usando cualquiera de las interfaces de comandos, y luego desde PHP My Admin.

Usando el entorno de comandos

Dreamweaver: Usando El Asistente Para Recuperar Datos

Para este ejercicio usaré Dreamweaver CS3 para recuperar y mostrar datos desde la base de datos “datos” de MySQL y de la tabla “clientes” (Sobre la instalación de estos servicios aquí).
La tabla “clientes tiene solo 4 campos, el primero además de ser el campo clave es auto-incremental, la estructura es (info sobre el uso de PHP My Admin en este post):

El script para la BD es el siguiente (he quitado los comentarios):

La Filosofía Python

Hace ya poco más de un mes tuvimos en Ica (Perú) el evento FLISOL del que lamentablemente por circunstancias personales no pude disfrutar tan plenamente como me hubiese gustado, sin embargo, fue muy instructivo escuchara a Antonio Ognio disertando respecto a la “Filosofía del Software Libre”, espero que alguien lo haya grabado y llegue a publicarlo (si es que aún no lo han hecho).
Pero en esta ocasión, investigando y buscando material para organizar una colección de recursos para aprender y desarrollar con Python, era inevitable hallar lo que se denomina “La filosofía Python”, muy similar a la filosofía UNIX, es un código que enaltece la legibilidad y transparencia de las fuentes.
Tal es así que al código que cumple esas premisas se dice que es “pythonic” (algo sí como paytónico o pitónico en español), por el contrario, el código enredado y complicado es “unpythonic”.
El llamado el Zen de Python (Tim Peters) menciona estas reglas, las mismas que se deben mostrar desde su versión 2.1.2 al ejecutar “import this”, estos puntos son:

Appserv en Windows: Apache + MySQL + PHP + PHPMyAdmin

Habitualmente cuando publico algo en otro lugar, lo publico a la par en mi blog, tal parece que se me pasó uno de ellos que en este momento pienso solucionar.
Básicamente la pregunta viene por la necesidad de usar el lenguaje PHP en modo local en Windows, aunque existen varias soluciones evitaré la manera “hacker” de agregar uno a uno los elementos necesarios para luego configurarlos también uno a uno, y siguiendo la ley de “El menor esfuerzo” mencionaré las herramientas que permiten agregar todos los servicios de una sola vez.
En ese sentido he trabajado con Appserv, XAMP y WAMP, en lo personal me siento mucho más cómodo con el primero (aunque guardo con recuerdo a XAMPP :-), pero los tres permitirán instalar los 4 servicios mencionados en el título de este post, además los tres son gratuitos. Y sin más preámbulo (existen varios tutoriales y video tutoriales para cada opción) empecemos con la instalación de Appserv en Windows.

• Link para descargar Appserv aquí, para más información visita el sitio oficial.

FLISOL 2012 en Ica (Perú)

Sábado 28 de abríl, solo faltan 19 días, en la Facultad de Ingeniería de Sistemas,
en la Ciudad Universitaria

Validar con JavaScript: Cadenas vacías

Empecemos por aclara que al hablar de validación, estamos hablando de comprobar que cierto valor es válido o correcto para continuar con una operación determinada y por consiguiente, detenemos o impedimos el proceso en el caso que el dato no sea correcto o válido.
Es lo habitual realizar este trabajo en la "máquina" del cliente, verificar su validez antes de enviar los datos, y para eso tenemos una buena herramienta con JavaScript y sus funciones.
Empecemos por la opción más sencilla, verificar que se halla ingresado algún dato en el control del formulario, por ejemplo, pensemos ene este diseño:
<body>
<form name="f1" action="" method="">
Tu nombre<input type="text" name="nombre" id="nombre" />
<input type="button" value="Enviar nombre" />
</form>
</body>
El diseño obtenido será:

Obviamente, deseamos evitar que el usuario envíe una cadena vacía al dar clic en el botón sin haber escrito dato alguno en el cuadro de texto, para ello empezaremos modificando la implementación del botón, agregando una llamada a la función "validar()":
<body>
<form name="f1" action="" method="">
Tu nombre<input type="text" name="nombre" id="nombre" />
<input type="button" value="Enviar nombre" onclick="validar" />
</form>
</body>

Validando Número-Cadena Con JavaScript

Durante la clase de ayer (semana 5) en el curso de Programación Web, tratamos el tema de validación de formularios con JavaScript, de lo que existe abundante información en la Web.
Durante el ejercicio abarcamos el caso para cadenas vacías (""), el número de caracteres (length), operadores numéricos (<, >, ==,<=, >=, !=), buscar un caracter (indexOf), ... pero por la prisa se me pasó validar que la edad ingresada sea un número, así que me comprometí a postear al respecto.
Primero, el formulario:

<form action="" method="post" name="form1"> Ingrese un n&uacute;mero <input name="numero" type="text" /><br /> <input name="" type="button" value="Validar" onclick="validar_num()" /> </form>