Interpolación de movimiento con guía

 Ya hemos tratado la interpolación clasica y de movimiento en las publicaciones anteriores, la primera que genera un movimiento rectilineo y la segunda que nos permite agregar cierta curvatura al trayecto, aunque limitada.

Esta tercera opción nos permite trazar una línea muy personalizada, la misma que marcará el trayecto o camino que deberá seguir la animación, debajo el video que hemos compartido en TikTok:

Procedimiento

Les comparto el procedimiento que menos complicaciones me ha presentado (creo que así no he tenido ninguna 😁), procedamos:

1. En tu área de trabajo agrega la forma que deseas animar, en la línea de tiempo agregaremos una capa dando clic derecho sobre la capa existente (por defecto debería llamarse Capa_1), clic en la opción 'Añadir guía de movimiento clásica'
   
   

Interpolación de movimiento en Adobe Animate

Las interpolaciones clásicas y las de movimiento generan movimiento rectilineos uniformes, sin embargo, las de movimiento nos permitirán una ligera personalización al permitir dar cierta curvatura a la ruta de movimiento.

Al agregar esta interpolación se mostrará visualmente la ruta, con la herramienta Selección será posible curvarla para modificar el movimiento del símbolo, aquí el video publicado en la cuenta de TikTok:

@icacreativa @¡DALE CURVAS A TUS ANIMACIONES EN ADOBE ANIMATE! 🚀✨ ¡Es más fácil de lo que crees! @Transforma lo predecible en ESPECTACULAR. No te conformes con menos. ¡Aprende a dominar el movimiento curvado y haz que tus diseños impacten de verdad! ¿Quieres ir más allá? 🌟 Ofrecemos capacitaciones personalizadas en diseño gráfico, animación y producción multimedia. ¡Aprende a tu ritmo y con un experto a tu lado! ¡Síguenos para no perderte ningún truco! Y si estás listo para una formación que impulse tu talento, envíanos un DM o visita el link en bio. ¡Tu futuro creativo te espera! @gabrielamilagros32 @mariagamboa05 @iestpparcona @jacdiaz01 @muni_parcona ♬ sonido original - icacreativa

Procedimiento

Interpolación indica mover entre dos polos o extremos, el inicio y el final, recomiendo el procedimiento que detallo a continuación para evitar posibles inconvenientes, empecemos:

1. Una vez tenemos nuestro escenario, selecciona el color de relleno y contorno, agregamos el elemento a animar, en ese primer fotograma clave clic derecho, opción 'Crear interpolación de movimiento'

Tuneando KDE Plasma al estilo virus de Windows

El canal li-khriss team es uno de mis favoritos, sacan cada curiosidad, como en este caso, personalizar el menú al estilo de los tiles de Windows, espero lo disfruten.

Es una opción que quizá resultará algo perversa para los linuxeros más ortodoxos, pero, podría resultar bastante amigable para quienes se han habituado a trabajar con el SO de la ventana, la decisión es de ustedes los usuarios.

Pixlr.com Herramientas Gratuitas de Diseño en Línea

Ya antes hemos hablado de las múltiples herramientas en línea para los más diversos propósitos, varias de ellas gratuitas.

Visiten el sitio de pixlr.com, en donde hallarán las siguientes 3 herramientas para trabajar en el diseño de gráficos:

Dependiendo de la herramienta que elijas podrías seleccionar una imagen con las siguientes opciones: de tu equipo, de una dirección URL, tomar una captura con la Webcam o seleccionar más de una para armar un collage.

Infografías, Banners, Foto de Portada y más con Canva

Se afirma que (figurativamente) todos tenemos un artista dentro, y considero que eso es cierto, siempre buscamos que las cosas queden bien para nuestro gusto (o el de alguien más), claro que los gustos cambian de personan a persona.

Desde algunas semanas atrás vengo usando Canva, una herramienta gratuita y sencilla para verter nuestro ingenio y crear diseños gráficos para los más diversos propósitos.

 

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á”.

Actualizando el núcleo (core) de Drupal 7.17 a 7.18

No es secreto mi afición por este gestor de contenido y ya tengo algunos posts previos en blogger y en PrimeraWeb, así que aprovecho la ocasión de haber recibido un mensaje de actualización para mi versión de Drupal en mi sitio (que realmente le doy muy poco uso):

También es posible revisar manualmente y de forma periódica desde tu propio sitio Drupal, ingresando a “Módulos” y luego a la pestaña “Actualizar”:

Notamos que se trata de una actualización del núcleo, el procedimiento es el mismo que podríamos usar para actualizar algún otro módulo, aunque cuando se trata de módulos contaremos con un asistente que facilita el trabajo, eso lo veremos en otro post.
A la izquierda ven ustedes el enlace que me llevara a la página para descargar el nuevo núcleo, podrían usar cualquiera de los formatos de descarga (targ.gz o zip), yo usaré en este tutorial la versión ZIP.

Photoshop: Seleccionar zona de bordes irregulares

En el campo de la edición gráfica, como en varios otros, la selección precisa de cierta zona o área es muy importante, tarea que no resulta muy complicada en superficies que presentan bordes bien delineados sea por mantenerse entre líneas rectas o casi rectas y colores regularmente diferenciados de las otras zonas que no deseamos seleccionar.
¡Claro! Ese es el entorno ideal, la cosa se complica un poco cuando presenta contornos ajenos o colores muy similares.
Este video es un buen ejemplo de trabajo con Photoshop en donde tenemos la zona del cielo cortada por el contorno irregular de un árbol, se resolverá la situación usando el canal azul para seleccionar el cielo.

Selección de cielo por canal azul from Jesus Rodríguez on Vimeo.

Tu Sitio Gratuito Con Wix

Recuerdo haber usado Wix hace ya algunos años y obviamente hoy ofrece muchas más opciones y se ve muy amigable.
Entre las características de su servicio debemos incluir:

1. No necesitas conocer lenguajes de desarrollo o diseño, para eso solo necesitas saber arrastrar y soltar.
   
2. El hosting (alojamiento) es completamente gratuito.
   
3. Ahora podrás elegir entre usar Flash o HTML 5.
   
4. Cientos de diseños disponibles.
   
5. Suficientes recursos, videos e información de ayuda.

Lo único que no me gusta es la auto-publicidad que hacen de su sitio en “tu” sitio, bueno, es gratuito y esos es normal en estos casos, pero quizá aún así consideren que les conviene el servicio, en ese caso…

Enpecemos

Primero necesitas registrarte, ingresemos al sitio de Wix en http://es.wix.com/ y buscamos el botón “Comienza ahora”:

Drupal Camp Perú 2012

El evento se desarrollará el próximo 4 y 5 de octubre en las instalaciones de la Universidad Autónoma del Perú, el ingreso al mismo será de 5 y 10 nuevos soles para estudiantes y público en general (lleve su DNI).

Informes e inscripciones en esta página.

Lágrimas de acero

"Tears of steel" es el título del cuarto cortometraje de la Fundación Blender (que tiene su canal en Youtube) en donde además de la calidad de la imagen y efectos de animación han incluido la "mezcla" de personas reales en el contexto virtual del video. ¡Disfrútenlo!

Como es propio de la fundación, se a trabajado con software libre, solamente con la la banda sonora que tal parece se encargó a una tercera empresa podría faltar la garantía de que se haya usado solo software libre (este dato lo encontré en el sitio de Icanux).
Debo ser honesto que la trama no me ha entusiasmado tanto, pero eso quizá se deba a que soy muy difícil de satisfacer, sin embargo, es innegable que la calidad de los efectos, imágenes y animación se va mejorando con cada nuevo cortometraje presentado (si no vieron "Sintel" el corto anterior se los recomiendo aquí).
La integración de realidad aumentada presenta muy buena calidad y abre nuevas expectativas.

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:

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):

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>

Implementando El Favicon En Tu Sitio Web

Cada cierto tiempo alguien llega a preguntarme sobre cómo hacer que su ícono favorito (usualmente el logo del negocio) se muestre a la izquierda de la barra de dirección del navegador, pues realmente resulta muy vistoso tenerlo allí cuando visitan tu sitio, como este, por ejemplo:

Pues no es complicado usar un favicon, que es como se le llama a este ícono, y hay mucha información al respecto (busca “colocar favicon” o similares), como no trato de reinventar la rueda y es muy sencillo, les cuento como lo hago:

1. Un ícono con la imagen que deseas usar recomendado: de 16 colores (4 bits), medida de 16px por 16px, ojo que es un ícono (*.ico) no una imagen, para diseñarla tienes aplicaciones como MicroAngelo, o tienes la opción de trabajar en línea, ya sea dibujando con Favicon Generator o convirtiendo una de tus imágenes en ícono con DynamicDrive.
2. Ahora debemos agregar una etiqueta link en el código HTML de tu página, entre las etiquetas <head> y </head>, usaremos dos atributos:
   
   1. rel: con el valor shortcut icon
   2. href: apuntando a la ubicación de tu favicon, la dirección podría ser absoluta o relativa, un ejemplo de dirección absoluta sería:
      http://www.misitioweb.com/imagenes/mifavicon.ico
      La dirección relativa dependerá de la ubicación de cada página, la etiqueta completa sería:
      <link rel=”shortcut icon” href=”http://www.misitioweb.com/imagenes/mifavicon.ico” />
3. Si gustas, pruébalo en modo local, no debería haber problema y luego sube todo al servidor

A estas alturas todos lo navegadores deben soportar el uso de favicons, pero algunos no lo muestran en su barra de dirección, si no en la pestaña respectiva.
Finalmente, una herramienta en línea más completa para diseñar tu favicon, animaciones y otras opciones de personalización en el sitio de HTML Kit.

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>

Configuracón De Sitio Remoto En Dreamweaver

Para muchas personas, incluso expertos en diseño e implementación Web, una de las herramientas más prácticas es Dreamweaver, y como en mi caso, desde antes que pasara a manos de la corporación Adobe.
Uno de los primeros pasos a aprender, que no es muy complicado, a quienes inician probando y trabajando en modo local, es la configuración de un nuevo sitio.
¿Qué es un sitio de Dreamweaver? entendamos como sitio, al grupo de archivos que componen el contenido de nuestro sitio web, permitiéndole a Dreamweaver gestionar de forma fácil los enlaces, ubicación de archivos, renombrar,... y actualizar todos estos datos.
El siguiente video muestra la forma de configurar un sitio remoto:

Aquí hallé el manual oficial de Dreamweaver CS en español y aquí el taller de videos de Adobe.

El Dibujo Es La Probidad Del Arte

"El dibujo es más que un medio, es un concepto, una forma de ver y entender el mundo que nos rodea"
David Jon Kassan

Gmail Motion: El Video

Ya antes lo mencioné en mis mi 'face' y lo 'twittié', pero creo que vale la pena re-repostearlo.
Se trata de Motion de Gmail, otra novedad en la forma de preparar tu email: