Desarrollo web » videotutorial

Rotación de la tierra en after effects

flmn — Tue, 23 Feb 2010 18:14:50 +0000

Hace ya algún tiempo desde el último vídeo de edición multimedia.

Euskaltawy, el compañero que se ha encargado todo este tiempo de los vídeos de adobe premiere, lleva tiempo muy ocupado. Ahora además, ha cambiado de trabajo y este le requiere más horas que el anterior. Por lo tanto. la sección de vídeo tutoriales de edición de vídeo queda oficialmente huérfana.

Para paliar un poco la mala noticia, os traigo un vídeo que me han recomendado en youtube. En este se explica como crear el efecto de rotación de la tierra con after effects.

Si os gusta, tenéis muchos más vídeos del mismo autor en su canal de youtube.

Cuenta atrás javascript

flmn — Fri, 11 Dec 2009 06:53:59 +0000

Aprovechando que las vacaciones de navidad están a la vuelta de la esquina, he grabado un vídeo donde muestro cómo funciona el objeto Date de javascript y cómo crear una sencilla cuenta atrás del 25 de diciembre.

Descargar vídeo (12 min – 21mb – 1440×900)
Descargar código

Curso de xHTML/CSS – segundo capítulo

flmn — Mon, 30 Nov 2009 14:56:10 +0000

Segunda parte del curso de XhTML y CSS. A partir de este vídeo tomo el testigo de Adrian, autor original del curso, debido a la imposibilidad de que este continuara con el mismo. A lo largo del tutorial trataremos los siguientes puntos:

Elementos de bloque
Elementos en línea
Marcadores básico de texto
Etiqueta span
Espacios en blanco, tabuladores y caracteres de nueva línea
Etiqueta pre

Podeis descargar el vídeo aquí (16 min – 41mb – 1440×900)

Puesta a punto de Ubuntu 9.10

flmn — Sat, 21 Nov 2009 13:00:15 +0000

Vídeo donde comento algunas aplicaciones y configuraciones con las que mejorar la experiencia de usuario en ubuntu karmic koala. Especialmente útil si llevais poco tiempo usando el sistema operativo del pinguino o simplemente teneis curiosidad sobre sus virtudes.

Recopilatorio de vídeos javascript

flmn — Wed, 11 Nov 2009 01:59:28 +0000

En net.tutsplus.com han publicado un post titulado 17 Hours of JavaScript from the Masters donde se recopilan algunos videotutoriales de reconocidos gurús del lenguaje.

Más de 17 horas de material que lamentablemente esta en ingles y requiere de un nivel mínimo de la lengua de shakespeare.

Convertir PSD a CSS y XHTML

flmn — Sun, 18 Oct 2009 11:21:20 +0000

Hace poco más de un mes comenzó en cristalab un curso en vídeo sobre la maquetación de diseños photoshop en CSS y xHTML, creado por micha. El curso no ha finalizado aún pero ya alcanza su quinta entrega.

Os dejo con la primera parte: organización de carpetas y cortar las imágenes necesarias para empezar a maquetar.

Si os gusto el vídeo aquí tenéis los links al resto del material:

Segunda entrega: Organizar y cortar los elementos del diseño .PSD
Tercera entrega: Estructura Visual y Armado de XHTML
Cuarta entrega: Concepto del Modelo de Bloque y Armado completo de Estructura con el CSS
Quinta entrega: Javascript

Videotutoriales de flash

flmn — Mon, 28 Sep 2009 14:40:28 +0000

Vía cristalab descubro flashfacilito, web que se dedica a la creación de tutoriales de flash. Si bien parte del contenido ofrecido es de pago también cuenta con abundante material gratuito, más de 65 videos en youtube, donde explica mediante ejemplos prácticos gran variedad de técnicas para sacarle provecho a Adobe flash.

Os dejo un video donde explica como crear una animación de la luna girando alrededor de la tierra sobre su órbita.

webtips 07 – drag and drop

flmn — Wed, 05 Aug 2009 05:38:32 +0000

Ya esta aquí la última entrega de webtips. En este video se muestra como crear un efecto de drag & drop como los utilizados en netvibes o igoogle.

He dejado de lado algunas mejoras que hubiera sido interesante mostrar, el script ya alcanzaba las 200 lineas de código y de hacerlo me hubiera sido imposible grabarlo todo en un único video. Por lo tanto he optado por dejarlo así. De todas formas se cubren los aspectos fundamentales del tema tratado. Espero que os guste.

descargar video
descargar código
Nos vemos en septiembre con nuevos cursos

Premiere cs3 cap 6 – ejercicio dvd

euskaltawy — Mon, 27 Jul 2009 18:41:12 +0000

En este capitulo veremos como importar un dvd en premiere para después editarlo y publicarlo nuevamente en dicho formato. A lo largo del video se muestran las distintas opciones que nos brinda adobe premiere cs3 para este cometido.

Tenéis el video en descarga directa en “read more”.

descargar video

Curso de xHTML 1.0 strict y CSS 2.1

Adrian — Sat, 25 Jul 2009 19:02:05 +0000

Hola amigos damos inicio al curso de xHTML y CSS, aquí tenéis los 2 primeros videos.

En esta clase haremos un acercamiento a como se hacen las paginas web, también tocaremos algunos conceptos y definiciones básicas de HTML y CSS conforme a estándares.

En el segundo video seguimos con el curso de xHTML y CSS, en esta clase estudiaremos y escribiremos en código lo elementos de estructura como párrafos divs bloques de cita y lineas horizontales.

Para finalizar dejamos el ejercicio practico. Eso es todo y hasta el próximo videotutorial.

descargar introducción
descargar primer video práctico

webtips 06 – Ventanas modales 2.0

flmn — Wed, 08 Jul 2009 12:38:14 +0000

Nueva entrega de webtips. En está ocasión el tema tratado son las populares ventanas modales, como las del lightbox, haciendo uso de jquery y css. El video es larguillo, 35 minutos, pero creo que se tratan algunos puntos bastante interesantes a la vez que desconocidos.

descargar código javascript
descargar vídeo

Nota: El vídeo hace uso de el codec H264. Si tienes algún problema para reproducirlo usa el vlc.
También puedes probar instalando el codec ffdshow si prefires reproducirlo con el media player.

Premiere cs3 cap 5 – Captura lineal y por lotes

euskaltawy — Mon, 29 Jun 2009 10:06:12 +0000

En este capitulo veremos como se hace una captura lineal, por lotes y veréis sus diferencias.
Imprescindible un cable Firewire!!

descargar primera parte
descargar segunda parte

Nota: El vídeo hace uso de el codec H264. Si tienes algún problema para reproducirlo usa el vlc. También puedes probar instalando el codec ffdshow si prefires reproducirlo con el media player.

webtips 05 – Efecto zoom

flmn — Thu, 25 Jun 2009 00:56:10 +0000

Quinta entrega de webtips. Con este vídeo entramos en la recta final de la serie ya que en septiembre comenzará un nuevo curso sobre seguridad web.

Si queréis podéis dejar algún comentario explicando que os ha parecido la serie de vídeos, si os gustaría que explicara alguna cosa más, profundizar más en algún tema/apartado… lo que queráis.

Tenéis la opción de descargar el vídeo (142 mb – 1440×900px) y el código.

NOTA:
En el código descargable la propiedad opacity del

es asignada mediante javascript en lugar de css.
El código ha sido testeado y funciona correctamente bajo Mozilla Firefox 3.0/3.5 preview, Google Chrome e Internet Explorer 8.

descargar código
descargar vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

Premiere cs3 cap 4 – Como hacer un Croma

euskaltawy — Mon, 15 Jun 2009 08:48:06 +0000

Tercer vídeo de adobe premiere. En esta ocasión veremos como funciona un croma y haremos uno casero. Veremos diferentes maneras de hacerlo con una clave de cromacidad y con ocho puntos de anclaje.

Una vez más tenéis el vídeo en youtube y el link para descargar el vídeo original (22 mb cada parte).

descargar primera parte
descargar segunda parte

Nota: El vídeo hace uso de el codec H264. Si tienes algún problema para reproducirlo usa el vlc

webtips 04: Optimizar la carga de una página web 2/2

flmn — Wed, 10 Jun 2009 22:48:04 +0000

Cuarta entrega de webtips, segunda parte. Seguimos con los consejos para agilizar la carga de nuestra web de la mano de Yslow.

En el vídeo se me olvida comentar la subpestaña tools de Yslow. En la misma encontrareis diferentes herramientas listas para usar (hace uso de páginas externas, pero eso es lo de menos). Aquí tenéis el listado de utilidades y sus respectivas descripciones:

JSLint - Run JSLint on all JavaScript code in this document
All JS – Show all JavaScript code in this document
All JS Beautified – Show all JavaScript code in this document in an easy to read format
All JS Minified – Show all JavaScript code in this document in a minified (no comments or white space) format
All CSS – Show all CSS code in this document
All Smush.it™ – Run Smush.it™ on all image components in this document
Printable View – Show a printable view of grades, component lists, and statistics

Enlaces a proyectos mencionados en el tutorial:

Apc
Sistema de cache para php que nos permite reducir la carga y ejecución de nuestro proyectos PHP sin cambiar una sola linea de código. Ver proceso de instalación en windows aquí.

Yslow
Extensión para el firefox/firebug que analiza nuestro proyecto web en busca de “cuellos de botella” que ralenticen la carga de nuestro site.

Akamai
El website de akamai en castellano

Amazon s3
Website de el servicio de almacenamiento distribuido de amazon, sin duda uno de los más populares hoy en día.

——-

descargar el vídeo
descargar la primera parte

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

webtips 04: Optimizar la carga de una página web 1/2

flmn — Tue, 09 Jun 2009 21:29:36 +0000

Cuarta entrega de webtips. En esta ocasión vamos a ver algunos consejos para agilizar la carga de nuestro proyecto web, tanto del lado de el servidor como de el cliente.

Aquí tenéis la primera parte de el vídeo, 24 minutos. Mañana pondré la segunda, 20 minutos más.

El audio “rasca” un poco, definitivamente tengo que hacerme con un micrófono nuevo que con este no me las arreglo. Tenéis los enlaces a las páginas vistas en el tutorial así como la descarga del vídeo completo en “leer más/read more”.

Enlaces a proyectos mencionados en el tutorial:

Apc
Sistema de cache para php que nos permite reducir la carga y ejecución de nuestro proyectos PHP sin cambiar una sola linea de código. Ver proceso de instalación en windows aquí.

Yslow
Extensión para el firefox/firebug que analiza nuestro proyecto web en busca de “cuellos de botella” que ralenticen la carga de nuestro site.

Akamai
El website de akamai en castellano

Amazon s3
Website de el servicio de almacenamiento distribuido de amazon, sin duda uno de los más populares hoy en día.

——-

descargar el vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

webtips 03: alternativas a sIFR en javascript

flmn — Sat, 30 May 2009 18:56:16 +0000

Tercera entrega de webtips. Hoy veremos como reemplazar dinámicamente las fuentes de nuestro proyecto web por cualquier fuente deseada al margen de que nuestros usuarios tengan dicha fuente instalada en sus ordenadores. 22 minutos de videotutorial donde veremos paso a paso el uso de esta técnica.

Esta semana como novedad también incluyo un articulo donde se resume y complementa el vídeo, el código usado listo para descargar y la ya habitual opción de bajar el vídeo original.

+ Info

El método font-family de javascript nos permite asignar una fuente a cada uno de los elementos de nuestra página web. En caso de hacer uso de una fuente que nuestros clientes o usuarios no tengan instalada en sus ordenadores o dispositivos móviles esta será reemplaza automáticamente por una disponible….

Existen multitud de técnicas para evitar este problema. La más rudimentaria es crear una imagen con la fuente deseada que haga la labor de cabecera o titular. El problema es que esta solución esta muy limitada y nos nos serviría, por ejemplo, para textos o titulares dinámicos (a menos que estemos dispuestos a cambiar de imagen cada vez que la web es actualizada).

Como programadores nuestro trabajo se basa en automatizar tareas como esta y a día de hoy contamos con multitud de formas de hacerlo. La primera opción, y más veterana, es hacerlo mediante flash. Proyectos como sIFR nos permiten el reemplazo de texto standard por textos flash haciendo uso de cualquier tipo de fuente. Con el tiempo fueron saliendo varias alternativas, algunas de ellas basadas en javascript, que son las que tratamos en el vídeo.

El reemplazo de texto por javascript se hace mediante canvas-VML y cuenta con algunas ventajas a tener en cuenta sobre los proyectos flash. La primera ventaja es la compatibilidad, javascript no necesita ningún plugin para funcionar. Por ejemplo en el caso de smartphones como puede ser el iPhone no existe ningún plugin para ejecutar o reproducir flash. Por el contrario si que cuenta con un navegador web perfectamente compatible con javascript.

Si bien es cierto que en España / Europa los usuarios que hacen uso de estos dispositivos para navegar es aun muy bajo, en países como EEUU o especialmente Japón el porcentaje de usuarios que acceden a paginas web con estos terminales es ya un porcentaje muy a tener en cuenta. Es presumible que esta tendencia se extienda a Europa durante los próximos 2-3 años, así que no está de más el ir adaptando nuestro sites para un futuro cercano/medio.

En el vídeo vemos 2 proyectos javascript que cumplen con la tarea asignada. Por un lado tenemos typeface y por otro cufon. Los pasos a seguir en ambos son muy parecidos: Descargarnos una fuente, descargarnos el js del proyecto que encontramos en sus webs, generar una fuente compatible con el proyecto (ambos tienen un generador online en sus respectivos sites) y linkarlo en nuestro proyecto para finalizar. En menos de 5 minutos podemos tenerlo todo funcionando.

Typeface es probablemente la mejor opción para diseñadores o programadores que no tengan conocimientos javascript. Es realmente sencillo de utilizar y su generador de fuentes es el que más me ha gustado de los dos. En cambio los resultados han sido más flojos que los de cufon en las pruebas realizadas.

Cufon por su parte cuenta con un generador que a los hispanohablantes nos puede resultar más problemático (no indica que caracteres incluye la fuente, vocales acentuadas por ejemplo). Los resultados, eso si, son muy satisfactorios y puede resultar más como de utilizar para aquellos que tengan unas nociones básicas de javascript. También cuenta con algunas opciones que no encontramos en typeface. A mi personalmente es el más me ha convencido.

———–

descargar demos

descargar el vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

adobe premiere 03

euskaltawy — Thu, 21 May 2009 20:13:15 +0000

Tercer vídeo de adobe premiere. Esta semana aprenderemos a configurar los diferentes ajustes del proyecto para que se adapte a nuestras necesidades. También veremos como subtitular un vídeo.

Una vez más tenéis el vídeo en youtube y el link para descargar el vídeo original (36 mb – 1024x 768 px).

descargar vídeo

Nota: El vídeo hace uso de el codec H264. Si tienes algún problema para reproducirlo usa el vlc

Webtips 02 : Efecto con jquery 2/2

flmn — Tue, 19 May 2009 08:57:55 +0000

Segundo videotutorial (segunda parte), 15 minutos de vídeo donde veremos los últimos pasos para crear el efecto que empezamos la semana pasada.

Tenéis el vídeo en youtube y el link para descargar el vídeo en hd (73 mb – 1440x 900 px).

descargar vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

adobe premiere 02

euskaltawy — Thu, 14 May 2009 13:51:45 +0000

Segundo video de adobe premiere. En esta ocasión tenemos un ejercicio práctico. veremos como cambiar el audio de un archivo de video.

NOTA: Al parecer el Camtasia (programa que uso para grabar los videos) no muestra los cambios de iconos del ratón.

Teneis el vídeo en youtube y el link para descargar el vídeo original en alta resolución (37 mb – 1024x 768 px).

descargar vídeo

Nota: El video ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc

Webtips 02 : Efecto con jquery 1/2

flmn — Thu, 14 May 2009 13:06:05 +0000

Segundo videotutorial, veremos un curioso efecto con css y jquery inspirado en el efecto parallax. Aquí teneis la primera parte del video, 26 min, que finalizara la semana que viene. Creo que este video ha quedado bastante mejor que el anterior. Pero bueno… ya me contareis

Como siempre os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (133 mb – 1440x 900 px).

descargar vídeo

Nota: El video ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc

videotutorial: adobe premiere 01

euskaltawy — Thu, 07 May 2009 12:35:19 +0000

Instalación y primeros pasos en adobe premiere cs3

Teneis el vídeo en youtube y el link para descargar el vídeo original en alta resolución (34 mb – 1024x 768 px).

descargar vídeo

Nota: El video ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc

videotutorial: sprites css

flmn — Tue, 05 May 2009 23:16:25 +0000

Primer vídeo de desarrollo web. Aprenderemos a usar sprites css con un ejemplo real. La calidad del sonido flojea un poco, mi primer vídeo… y con trancazo, mejorara en el próximo. Os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (98 mb – 1440x 900 px).

descargar vídeo

Nota: El video ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc

Introducción a los video tutoriales

flmn — Wed, 29 Apr 2009 22:38:48 +0000

A lo largo de las próximas semanas iremos sacando varios video tutoriales, tando euskaltawy como yo, que es la razón por la que este video-blog fue creado.

Os dejo un pequeño vídeo de introducción y el link para descargar el video original en alta resolucion (1440×900).

descargar vídeo

Nota: El vídeo ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc