Pueden descargar los archivos para este tutorial:

• http://www.megaupload.com/?d=2F13FY3Z

Entenderán la ausencia de Daniel al decirles que entre los archivos necesarios para la realización de este tutorial se encuentran las fotos de su recién casado hijo.

Enhorabuena Daniel y gracias por volver !!!

Máscaras Cerradas

Hemos dicho que este tipo de máscaras si bien en general pueden cumplir funciones como ¨Trazados¨ de movimiento, principalmente, se emplean para ocultar o aislar sectores de una capa, esto es precisamente los que veremos a continuación, las utilizaremos en la creación de el dibujo de un film fotográfico exclusivamente realizado en AE. Muchos pensarán que esto se puede realizar en otros programas pero verán que esto no es tan así.

Este dibujo sencillo nos permitirá conocer y practicar la confección de máscaras cerradas e introducirnos de a poco en el manejo de algunos efectos.

Nuestra primera acción, será crear una capa sólida y la transformarla en un film, tal como se ve en el video que representa la composición final de esta entrega.

Como primera medida, abrir AE y crear una composición nueva con un ajuste predeterminado en Pal D1/DV y de unos 10 segundos de duración, guardar este proyecto como ¨Film¨.

1. Creamos un ¨Sólido¨ color ¨óxido ¨ (RGB=200,50,10) del tamaño de la composición
2. Tomar la herramienta de creación ¨Máscara rectangular¨ (Q) y con la capa Sólido Rojo seleccionada, dibujar un rectángulo, que servirá para dejar ver cada foto
3. Corrección del tamaño y la posición del Sólido Rojo: ir al panel Tiempo y desde la pestaña Máscara perteneciente a la capa Sólido Rojo, activar modo ¨Restar¨ ,acción que invierte el modo de transparencia de la máscara. El tamaño lo modificamos abriendo nuevamente la pestaña Máscara y haciendo clic sobre ¨Forma de máscara¨, desplegaremos el cuadro de diálogo que contiene los parámetros que definen la forma y los límites de la máscara. Debido a que nuestra máscara debe estar centrada, sus límites, deberán estar proporcionalmente ubicados con respecto a los límites del tamaño de pantalla elegido (720×576), para la máscara, podemos pensar en límites simples de calcular, es decir, podemos separar la máscara en 120 px a los costados y en 40 px encima y debajo de la misma, ingresar entonces, en el ¨Cuadro delimitador¨ de la ¨Forma de máscara¨, los siguientes valores:

   Superior = 40 px
   Izquierda = 120 px
   Derecha = 600 px (surge de restar 720 – 120)
   Inferior = 536 px (surge de restar 576 – 40)
   Aceptar (ver fig 1)

    
   Fig. 1

4. Creación de una capa de texto, que servirá para simular el número de película, y otras cuestiones (asa, etc) Las tipografías utilizadas en esta ocasión son Courier 25 para números y Webdings 25 para símbolos, ud puede utilizar las que le plazca, esto no conlleva mayor importancia. Una vez creada dicha capa de texto, rótela 90º posicionándola como se muestra en la fig 2 luego duplicarla para llevar el duplicado hasta el lateral opuesto.

   Renómbrelas como Texto 1 y 2 ya que AE por defecto coloca la 1º frase del texto como título

   
   Fig. 2 
   

5. Líneas de continuidad, Agregamos una Capa de Forma con el dibujo de un rectángulo delgado de color Verde que recorra uno de los laterales, por ejemplo.

   Esta capa se crea desde el menú principal Nuevo_Capa de forma. luego tomar la herramienta ¨Q ¨ y dibujar un rectángulo delgado cercano y paralelo al texto, luego triplicarla y modificar la intensidad del color de las copias, distanciándolas entre sí, tal como se muestra en la fig. 2.

   En la ampliación puede observarse las 3 líneas diferenciadas en grosor y tonalidad.

   Debe renombrarlas para tener una mejor visualización del panel Tiempo. Por ello, nómbrelas como ¨Gruesa¨, ¨Media¨ y ¨Fina¨ ya que si observa la fig., notará que he modificado el ancho de los duplicados para lograr un dibujo más aproximado a los rollos reales.

6. Texturizado del Sólido Rojo. Para ello ir al panel Proyecto, seleccionar el archivo ¨Textura roca¨ y arrastrarlo hasta la composición. Esta capa sólo cumple la función de texturización del Sólido rojo, por lo tanto, desactive su visualización desde el botón ¨Video¨ (icono ojo humano en la barra Definidores de Capa del panel Tiempo ) correspondiente a dicha capa (Textura roca)

   Con la capa ¨Sólido Rojo¨ seleccionada, aplique el efecto ¨Estilizar_Texturizar¨ y abriendo la pestaña ¨Capa de textura¨ perteneciente al efecto (ver panel de efectos en la fig. 3)

   
   Fig. 3

   De este efecto, seleccione la opción ¨Textura roca¨. De todas sus variables, sólo nos ocuparemos de ¨Contraste de Textura” al que le daremos un valor de 2 (punto máx.)

   Efecto Desenfoque:

   Agregamos el efecto Desenfoque de Canal desde el Menú de efectos, este tipo de desenfoque, actúa sobre los canales RGB y Alfa en forma individual, esto nos permite NO afectar el ¨agujero¨ producido por la Máscara 1. Aplicar entonces los siguientes valores: Desenf. de rojo = 100%, Desenf. de verde = 20%, y activar ¨Repetir pixeles de bordes¨ de la variable ¨Comportamiento de los bordes¨ esto último, ¨estira¨ los límites de la capa para que no se desenfoquen.

   Efecto Teñir:

   Por último, aplicar el efecto ¨Teñir¨ que podrá encontrarlo en la carpeta ¨Corrección de color¨ . Trabaje con un Nivel de Tinción del 62 % sobre una tonalidad Gris oscuro.

7. Aplicar el efecto ¨Componer Desenfoque¨ a las capas de Texto 1 y 2, otorgándoles un nivel del 20% para ambas capas

8. Aplicar el efecto ¨Componer Desenfoque¨ a las tres Capas de Forma Gruesa ,Media y Fina, con un nivel del 20% en el desenfoque

   Si hasta aquí, siguió los pasos correctamente, su interface se verá tal como la fig. 4

   
   Fig. 4
   
   La segunda etapa del dibujo corresponde a los agujeritos típicos de los rollos fotográficos, que nuevamente serán dibujados como máscaras. Observe que para que dichos agujeros afecten a nuestro dibujo en su totalidad, debemos Precomponer lo hecho hasta aquí. Para ello, multiseleccionar todas las capas que se ven en el panel Tiempo (son 7 en total), y pulsar las teclas ¨Ctrl + Shift + C¨, hecho esto, inmediatamente se abre el cuadro de diálogo referente a la nueva precomposición, que usted nombrará como ¨Film¨, luego ¨Aceptar¨

   Las máscaras que representen los agujeritos serán pequeñas y con posicionamientos muy precisos, por lo tanto necesitaremos desplegar las Reglas, las Guías y las Cuadrículas que facilitarán la tarea de dibujado. Hay 3 modos de desplegarlas, 1º) desde el teclado Ctrl + ‘ y Ctrl + R , 2º) desde el menú principal: Ver_mostrar cuadrícula y Ver_mostrar reglas y 3º) desde el botón ¨Opciones de Cuadrículas y Guías¨ ubicado al pié de la ventana Composición (ver fig 1), hecho esto, la ventana Comp. se mostrará como en la fig 5.

    

   Fig 5 Ventana Comp con Cuadrículas y Reglas

   Desde Preferencias, podemos modificar el color de las líneas y la distancia entre ellas, que por defecto, es de 80 px, por supuesto que hablamos de las líneas de mayor grosor de color verde, las más finas poseen 20 px de longitud. Entonces, los cuadrados formados son de 80 px x 80 px y de 20 px x 20 px

   Las Guías se manipulan de la misma forma que en Photoshop, se arrastran con el puntero del mouse desde el vértice superior izquierdo hasta donde deseamos ubicar el nuevo punto de orígen 0,0 para X,Y. Estas guías son de suma utilidad para medir objetos, distancias, etc.

   Dicho esto, continuamos con el dibujo.

9. Con la herramienta ¨Q ¨ dibujamos un pequeño rectángulo de 60 px de ancho por 20 px de alto, ubicado a 20 px de la Máscara 1 y a 40 px del extremo superior de la pantalla, tal como se muestra en la fig 6

   

   Fig 6 Ventana Comp. Ampliada con Zoom para apreciar mejor el dibujo de la pequeña máscara, notar que para que ésta muestre el fondo negro, debe aplicarle el modo ¨ Restar¨

10. Duplicamos la máscara pequeña para conformar los agujeros de arrastre de cinta. Una forma sencilla de duplicar (con la máscara seleccionada) es con el comando Ctrl + D , acción ésta, que duplica y copia la posición de la máscara original, quedando superpuestas entre sí (una encima de la otra)

11. Desplazamos la máscara copiada 40 px hacia abajo, esto se hace con el puntero puesto en modo Selección (V)`

    

12. La fig 7 muestra las mascaritas posicionadas a uno y otro lado de la Máscara 1, para desplazar cada mascarita duplicada hacia abajo, aproveche la herramienta V (Selección) combinada con la tecla Shift , acción que provoca un desplazamiento fijo sobre cualquiera de los ejes (X, o Y). Cuando manipula una máscara, preste atención al estado de ¨Selección¨ en que se encuentra, ya que la Selección debe ser total (máscara entera) para poder desplazarla. Si ud ve modificada la forma de la máscara, es porque la selección ha sido parcial (línea o nodo), la forma de seleccionara en su totalidad, es con doble clic sobre un segmento de la misma, ya que si los hace en otro sitio, probablemente transforme el visor Comp en Visor de Capas Una vez que ha terminado el re-posicionamiento, pulsar ¨Enter¨ comando que libera la herramienta.

    Trabaje con el Zoom manejándolo desde la ruedita del Mouse, si la combina con la tecla Ctrl, podrá ubicar el sector de interés con el puntero. Recuerde que la tecla Barra espaciadora, sustituye momentáneamente la herramienta actual por la herramienta Mano, esta última de gran utilidad para acomodar el visor al sector de interés Si aplica estas recomendaciones, realizará rápidamente todas las duplicaciones y las posicionará con suma facilidad. Sintetizando, los pasos son los siguientes:

    • Seleccionar la máscara original y aplicar Ctrl + D
    • Tomar la máscara duplicada, presionar Shift y y sin soltar, arrastrarla hacia abajo hasta la posición adecuada (40 xp hacia abajo)
    • Nuevamente Ctrl + D (acción que duplica la última máscara clonada)
    • Arrastrarla con Shift hacia abajo….
    • Repetir estas acciones hasta completar el dibujo

    NOTA: Observe que si Ud tiene el Zoom ampliado, no precisa reducirlo para arrastrar las máscaras hacia abajo, ya que la imagen se irá corriendo en la medida que el puntero exceda el sector visible o se escape del visor. Una forma rápida de restablecer la normalidad del visor y centrar la pantalla, es con doble clic sobre el ícono de la herramienta Mano en el panel Herramientas (importante: con el Visor Comp. Seleccionado)

    Una vez que ha completado las máscaras del sector izquierdo, puede multiseleccionarlas para duplicarlas todas a un tiempo y luego desplazarlas hasta el sector derecho. La multiselección puede hacerla desde el panel Tiempo seleccionando la Máscara 2, luego presionando a tecla Shift y sin soltarla, seleccionar la última máscara (la nº 11), luego haga Ctrl + D, arrastre con el puntero todas las máscaras hacia la derecha (manteniendo Shift) hasta ubicarlas a 20 px de la Máscara 1

    Si hasta acá salió todo correctamente, el panel Tiempo debe mostrar 21 Máscaras en total

    He agregado la máscara Nº 22 como simulacro de la típica muesca que tienen los rollos (ver Fig 8 y observarla en proyecto original)

13. Quitar las Reglas y las Cuadrículas con el fin de obtener una imagen más limpia, también puede pulsar Ctrl + Shift + H, para ocultar las líneas que definen a las máscaras y a las formas (ver fig 8)

    

    Fig 8 Hasta aquí, hemos logrado simular el cuadro de un típico rollo fotográfico, el cual usaremos en muchísimos efectos, incluyendo menús animados para DVD

14. Crear una nueva comp denominada ¨Cuadro 1¨, configurada para Pal D1/DV con una Duración de 10 seg.

15. Ir al panel Proyecto, abrir la carpeta Fotos y arrastrar la foto 001.jpg hasta nuestra comp. Cuadro 1, ubicada en el panel Tiempo de manera que se encuentre por debajo de la precomp. Film

16. Renombrar esta capa como Foto 1

17. Con Foto 1 seleccionada, presionar la tecla ¨S¨ para desplegar el parámetro Escala, e ingresar el valor de 24 %

    Este valor hará que la foto se vea tal como lo muestra la fig 9

    
    Fig 9

La siguiente tarea, es conformar al menos 10 o 15 composiciones semejantes a ésta pero con diferentes fotos.

Recuerde renombrar cada composición como Cuadro 2,3…. También renombre la Precomposición 1 como ¨Vacío¨

La mecánica para duplicar rápidamente las composiciones y obtener la cantidad necesaria de cuadros, es la siguiente:

1. Guardar el proyecto para proteger los cambios realizados hasta aquí, esta acción se realiza directamente con el comando Ctrl + S

2. Copiar la capa ¨Vacío¨ en la comp. Cuadro 1

3. Hacer Ctrl + N para crear una nueva composición

4. Renombrarla como ¨Cuadro 2¨ y luego ¨Aceptar¨

5. Pegar la capa ¨Vacío¨ con Ctrl + V

6. Arrastrar una nueva foto desde el panel Proyecto hasta el panel Tiempo de la nueva comp ubicándola por debajo de la capa ¨Vacío¨

7. Abrir el parámetro Escala ye reducir la imagen lo necesario

8. Reiterar estos pasos hasta completar al menos 10 comp.

Nota: para aquellos casos en que la proporción de la foto excede el tamaño de la máscara 1 e invade los agujeritos, debe aplicar 2 máscaras en modo ¨Restar¨ (ver fig 10). Hasta aquí, notará que la utilidad de las máscaras es indispensable y muy variada.

Recuerde aplicar ¨Copiar¨y ¨Pegar¨ máscaras y/o capas/precomps, etc cuando lo crea necesario, esto reduce enormemente el tiempo de trabajo.

Una sugerencia válida, es crear una carpeta especial para las composiciones en el panel Proyecto.

Una vez completadas las 10 composiciones, cerrarlas para que no entorpezcan la visual del panel Tiempo. Recuerde salvar el proyecto de tanto en tanto. Hecho esto empezamos a generar las animaciones.

Una de ellas puede ser una cadena de fotogramas que corra en perspectiva a través de la pantalla. Para lograr este efecto, necesitaremos una nueva comp que contenga varios Cuadros unidos por sus extremos simulando un verdadero rollo fotográfico.

1. Crear una nueva comp con Ctrl + N y nombrarla como ¨Rollo¨ Modificar la Altura a 5760 px, Modificar la Duración a 3 segundos, luego ¨Aceptar¨

2. Abrir la carpeta composiciones en el panel Proyecto y arrastrar las comp Cuadro 1 a la 10 hasta el panel Tiempo

3. Tal cual están multiseleccionadas, pulsar ¨P¨ para desplegar el parámetro Posición de todas las capas a un tiempo. Observe que las he llamado Capas a pesar de que son composiciones, pues bien, una composición se transforma en Capa cuando ésta pertenece a otra composición, es muy importante conservar todos los conceptos teóricos, ya que son la base de un buen aprendizaje

4. La forma de reposicionarlos es sumando o restando de a 576 px, ya que es la altura total de cada cuadro, pues a tomar lápiz y papel y a calcular las posiciones de cada capa. Como ejemplo diré que para la capa 2 debe restar 2880 – 576 = 2304 (valor que debe ingresar en el casillero de Posición Y), Los valores para la Posición Y de cada capa son los siguientes: 0, 576, 1152, 1720, 2304, 2880, 3456, 4032, 4608, 5182 respectivamente de arriba hacia abajo. Inmediatamente ud notará que falta cubrir el extremo inferior de la pantalla y por otro lado, se excede en el extremo superior, esto es así porque como ud recordará hemos dicho en otro tutorial, que las coordenadas de posición de una capa centrada con respecto a la comp, es el centro de la misma capa (288 px en Y y 360 px en X, en formato Pal). Para corregir este defasaje, debemos restar 288 en PY a cada capa. Para ello, seleccionar cada capa e ingresar en un casillero de PY – 288 (menos 288), recuerde también que AE acepta operaciones matemáticas dentro de los casilleros de las variables paramétricas, esta operación es individual para cada capa. También podríamos haber optado por arrancar la cuenta a partir de 288 y luego sumando de a 576 para llegar al mismo final con los siguientes nuevos valores para PY de cada capa: 288, 864 , 1440, 2008, 2592, 3168, 3744, 4320, 4896, 5470 respectivamente, pero al menos hemos practicado nuevas funciones útiles que no brinda AE.

 
Fig 11

La comp Rollo está lista para ser utilizada en numerosas animaciones (fig 11)

Observar que el tamaño de las 10 composiciones puestas una encima de la otra, forman la altura exacta que posee la comp Rollo, es decir 5760 px

A continuación, prepararemos un fondo animado para que interactúe con las películas

Animación 1 – Fondo animado

1. Crear una comp llamada ¨Fondo¨ con formato Pal D1/DV de 10 seg de duración

2. Crear un Sólido Azul

3. Aplicar a Sólido Azul, el efecto ¨Ruido fractal¨ de la carpeta ¨Ruido y granulado ¨

En este tutorial no vamos a explicar para qué sirve cada variable de este maravilloso efecto, si desean conocerlo a fondo, les recomiendo leer el Capítulo 5 pág.192 a la 198 de mi libro, ¨Aprenda el lenguaje de los efectos especiales Vol 2¨ basado en la versión CS4, para más información contacten con Cristian Eslava o dejen un comentario.

4. Ingresar las siguientes modificaciones a las variables del efecto ¨Ruido fractal¨:

• Tipo fractal = turbulencia suave
• Tipo de ruido = bloque
• Contraste = 200
• Brillo = -20 (negativo)
• Desbordamiento = Permitir resultados HDR
• Complejidad = 2

Como este efecto es producido por la combinación de capas de ¨Ruidos¨ , posee variables incluidas en el parámetro llamado ¨Configuración secundaria ¨y que modifican la forma en que esas capas se combinan. En este ejemplo, crearemos fotogramas clave para animar las variables de este parámetro, pero ud. puede modificarlas a su gusto y experimentar con ellas, los valores y fotogramas claves puestos para Config.Secundaria, son los siguientes:

• Tiempo 0 = crear un FC para las siguientes variables: Influencia, Escala y Rotación, con los valores predeterminados por defecto y sólo modificar Desplazamiento secundario = – 80 ; 200
• Tiempo 10 seg (final de la comp) = crear FC para: Influencia = 20 ; Escala = 100 ; Rotación = 360º ; Desplazamiento = 900 ; 500
• Evolución : sin FC ni modificaciones
• Opciones de evolución: tildar Evolución del ciclo (genera evolución sin fin)

Dejé el parámetro Transformar para el final porque es quizá el más importante para la generación de efectos visuales, experimente con él.

• Transformar: Rotación: FC para tiempo 0 y 180º para tiempo 10 seg

Escala = para tiempo 0 = 100% y para el final (10 seg) ingresar 200% (máximo)

Quitar el tilde a Escala Uniforme. Crear FC e ingresar los siguientes valores:

Tiempo 0 : Ancho = 200 % y Alto = 50% ; Tiempo 10seg : Ancho = 100% y Alto = 200%

Fig 11

La figura muestra un fotograma capturado para que ud. Compare con sus propios resultados. La animación de este fondo es una de las más sencillas que se pueden lograr rápidamente utilizando tan solo un sólido y un efecto. Imagine las combinaciones posibles que ud puede experimentar, agregando otras capas con otros efectos, en diferentes modos de fusión, etc,etc,etc.

Nota: para conocer un poco más acerca de este efecto, realice sólo dos cambios. Elija Giro dinámico para Tipo fractal y Polinomio para Tipo de ruido, estos dos ¨pequeños¨ cambios hará que el fondo original, se vea como nubes tormentosas, si desea generar nubes reales, debe teñir la coloración a gusto, y para hacerlo, posee una enorme cantidad de opciones, que quizá en otros tutos avanzaremos sobre ellas.

Hemos concluido el fondo animado para utilizarlo en nuestra composición final. Acto seguido, debemos generar una animación para nuestros rollos de películas fotográficas.

Animación 2 – Animación del Film

1. Crear una nueva comp. llamada ¨Rollo anim¨ configurada en un tamaño de 720×5760, (ojo que hemos multiplicado la altura x diez), con 25 cuadros por segundo, y con una Duración de 5 segundos

2. Arrastrar el archivo (comp) llamado ¨Rollo¨ hasta nuestra nueva comp en el panel Tiempo

3. Duplicar la capa ¨Rollo¨

4. Seleccionar ambas capas ¨Rollo¨ y pulsar ¨P¨ para desplegar el parámetro Posición de ambas capas a la vez

5. Para la capa Rollo 1, crear un FC para el tiempo 0 e ingresar PY = 2867 y para el final de la comp. PY = -2361 (negativo)

6. Para la capa Rollo 2, crear un FC para el tiempo 0 e ingresar PY = 8617 y para el final de la comp PY = 3888

Esta animación simula el pasaje de un film de abajo hacia arriba, que la utilizaremos varias veces en nuestra comp final

Composición final

En ella juntaremos el Fondo animado y varios Rollos animados.

1. Crear una nueva comp, llamada Comp. Final, configurada en Pal D1/DV (720×576) con una Duración de 10 seg

2. Arrastramos el archivo ¨Fondo anim¨(comp) hasta la nueva comp en el panel Tiempo

3. Arrastramos el archivo ¨Rollo anim¨ de la misma manera que en el punto anterior

4. Aplicarle la propiedad ¨Capa 3D¨

5. Desplegar los parámetros de transformación de Rollo anim y modificar lo siguiente:

Escala = 25 %;Rotación X = -50º (neg.);Rotación Z = -30º (neg.);Posición X = 200

6. Duplicar la capa Rollo anim

7. Desplegar sus parámetros de transformación, y modificar: Punto de anclaje Z = -500 (neg) y Opacidad = 50 % y agregarle el efecto ¨Componer desenfoque¨ de la carpeta ¨Desenfocar y enfocar¨ dejando sus parámetros tal cual están seteados por defecto

8. Arrastrar otro archivo ¨Rollo anim¨, activar Capa 3D, y modificar : Posición = 130,300,0 ; Escala = 25 % ; Rx = 90º ; Ry = -100º (negativo) ; Rz = -15º (neg.)

9. Incorporar otro archivo ¨Rollo anim¨, activar Capa 3D y modificar: Anclaje = 430,2880,5 ; Posición = 430,280,0 ; Escala = 40% y Rotación X = 75º

10. Agregar un nuevo archivo ¨Rollo anim¨ (el 4º), activar Capa 3D y modificar: Anclaje = 300,1900,-1440 (neg.) ; Posición = 650,470,0 ; Escala = 30 % ; Rx = 10º;Ry = 20º,Rz = 70º; Opacidad = 50 %. Agregar el efecto ¨Componer desenfoque¨

Estos valores son puestos al azar ya que no necesitamos ajustarnos a un modo determinado. EN el proyecto ud dencontrará que he agregado una capa de ajuste con el efecto ¨Resplandor¨ y he adicionado el efecto Deformación a cada ¨Rollo anim¨ para generar una sensación de perspectiva e infinitud. Además podríamos agregar trazos animados, textos, etc. En la medida que vayamos concluyendo esta etapa inicial, veremos aspectos más complejos que requieren conceptos previos que son los que venimos desarrollando hasta el momento.

Entregas anteriores:

1. Curso de Adobe After Effects por Daniel Paniagua | 1ª Entrega
2. Integración de Photoshop y After Effects | 2ª entrega
3. Cómo generar una animación en After Effects | 3ª entrega
4. Cámaras Viajeras I en After Effects | 4ª entrega
5. Cámaras Viajeras II en After Effects | 5ª entrega
6. Luces en After Effects | 6ª entrega
7. Utilización de Máscaras – Rotoscoping | 7ª entrega

Les recuerdo que aquellos que deseen aprender After Effects en profundidad, pueden adquirir el libro de mi autoría : ¨Aprenda el lenguaje de los efectos especiales Vol 2¨ basado en la versión CS4, para más información contacten con Cristian Eslava o dejen un comentario.

Gracias por vuestra atención, y hasta la próxima entrega.

Para cualquier duda sobre After Effects y edición de vídeo utilicen el foro sobre Edición de vídeo y After Effects.

Hasta aquí hemos llegado con esta entrega, espero que les haya servido, gracias por vuestra atención.

Un saludo a todos.

Daniel Paniagua

Por cierto la 1ª parte de la conferencia ya está en Vimeo por si queréis compartirla en vuestros blogs:

Os recuerdo el enlace del grupo de Adobe para apuntaros a la 2ª sesión el próximo 11 de noviembre de 11:30am a 13:30pm donde convertiremos ese boceto a un theme para WordPress:

Creación de una plantilla de WordPress con CS4 II

Cómo crear un theme para WordPress (1ª Parte) from Cristian Eslava on Vimeo.

El 11 de noviembre la 2ª parte, gratis y en directo

Estáis invitados a asistir a la 2ª parte de este seminario web, gratis y en directo:

Creación de una plantilla de WordPress con CS4 II

Será el próximo 11 de noviembre de 11:30am – 1:30pm

Sólo tienes que registrarte con tu cuenta de Adobe y te enviaremos la URL del seminario.

El temario programado para estas 2 horas:

1. Creación de Wireframe en Photoshop
2. Creación de layout en HTML. Estilos CSS básicos para layout.
3. Reemplazo de HTML por PHP. Uso de condicionales para otras páginas.
4. Adición de estilos para módulos. Creación y exportación de imágenes desde PS.
5. Uso de extensiones en Firebug para testeo. Compatibilidad con navegadores.
6. Herramientas y plugins (optimización de código, SEO, etc.)
7. Dudas y preguntas.

¡Espero veros!

Un enfoque crítico al Social Media Marketing, al Marketing 2.0 o como prefiere la RAE a la Mercadotecnia 2.0 al que aporta soluciones basadas en los conceptos de Empatía, Identidad, Foco, Coherencia y Simplicidad.

Extracto del artículo:

El Marketing como yo lo entiendo

El listado de calamidades es amplio, y los síntomas de la enfermedad del (viejo) marketing son evidentes:

− Queja usual: “el marketing es engañoso. La mayoría de esta gente vende motos” o cuando algo no funciona, se tiende a decir “eso es puro marketing”.

− El 76% de las personas cree que las marcas no dicen la verdad.

−  Se prima el corto plazo, la venta rápida = ¿Cuánto dura un mismo responsable de marketing en su puesto? En EEUU dicen que unos 23 meses, ¿y en España, qué tal va la ansiedad por los resultados?

− Todo el mundo trata de ser quien no es: el típico anuncio de padres intentando parecer guay ante los hijos, o la empresa que detecta una tendencia y se camufla en ella como si nada.

− La publicidad ha incurrido sistemáticamente en exageraciones, y por eso su credibilidad está bajo mínimos. Ha abusado de modelos intrusivos, del spam y no pocas veces de engaños y mentiras.

− Los presupuestos de marketing se dedican mayoritariamente a financiar campañas de comunicación, descuidando otros objetivos como la escucha del mercado para mejorar los productos.

− Se trata a los usuarios como tontos, como si no tuvieran capacidad de elegir, incluso con publicidad que ni se entiende. La arrogancia del publicista a menudo ofende la inteligencia de las audiencias.

2 recomendaciones personales al hilo del artículo:

BOB: Una agencia, un modo de entender la publicidad y un libro imprescindible y que puedes descargar en PDF

Mad Men: una serie de TV centrada en una agencia de publicidad de los años 60 en EEUU que últimamente me quita las horas de sueño.

Como puedes apreciar lo que en principio es una tienda virtual se convierte en una animación donde los productos interactúan, si alguien tiene a bien traducirlo dejar por favor un comentario.

• Versión cachonda con animación Flash que me envía Menchu
• Sitio oficial de HEMA

Dicotomías para el consumidor en pqpq.es 

• ¿Subirías el precio del agua para reducir su consumo?
• Consumo: Marcas Blancas vs. Marcas Premium
• Ropa durante una dieta | ¿Comprar o alquilar?
• Vivienda | ¿Comprar o alquilar?
• ¿Reclamas tus derechos como consumidor?

Dicotomías Flasheras en pqpq.es

• Diseño web ¿Flash o XHTML?
• Flash vs. Ajax

Cursos de diseño web en cursos v2b

Todos estos cursos son en formato videotutorial y tienen la garantía de video2brain.

• Curso de diseño web y Estilos CSS
• Curso de PHP
• Curso de JavaScript
• Curso TODO Web
• Curso Efectos Web

Puedes ver en esta demo más de 12 horas de vídeotutoriales completamente gratis.

La diferencia respecto a la web oficial de video2brain es que en ceslava ofrecemos los mismos cursos con un 15% de descuento, y de que gestionamos las subvenciones de la Fundación Tripartita para que estos cursos resulten gratuitos para trabajadores residentes en España. Puedes verlos online o descargarlos cómodamente a tu equipo.

Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:

• Suscripción Anual Online: sólo 189€
• Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.

Cualquier duda ponte en contacto, estaremos encantados de atenderte.

Como con Firebug puedes seleccionar, apuntar a elementos de la página con la función Bullseye y obtendrás los estilos que afectan a ese elemento y con Stakeout ocurre lo contrario, seleccionas una regla CSS y se marca el elemento HTML afectado.

No hay vista de código, lo que vemos en la interfaz es el navegador y a la derecha el panel con el CSS que se ha descargado, es decir, nada de configurar un sitio, pones la URL y empiezas a editar. Las reglas pueden permanecer contraídas, copiarlas, anularlas para ver el cambio…

Por supuesto que también puedes trabajar en local, aunque si incluyes los datos FTP subirás el CSS directamente al servidor y los cambios los harás en 2 clicks.

El código generado será válido y además podrás comprimirlo desde el mismo Stylizer. No está mal ¿no?

Estos vídeos muestran cómo se usa y toda su potencia.

Listado de funciones

En el sitio oficial tienes toda la información sobre las funciones, el software también tiene ayuda y tutoriales, aún así os listo algunas de las funciones que hacen de Stylizer una killer-app “Aplicación asesina” para cualquier diseñador web:

• autocompletado,
• atajos,
• referencias y descripciones,
• zoom,
• edición contextual, si seleccionas una regla se marcan los elementos html afectados y viceversa,
• accesos directos a propiedades CSS,

  

• testea en Firefox 3.5 e IE8,
• añade marcadores para las webs de uso más frecuente,
• edición y guardado en remoto,

  

• reglas,
• validación y avisos de errores de sintaxis,
• breadcrumb y multiselección de selectores para crear reglas,

  

• compresor de código incorporado,

  

• etc.

¿Más pruebas? Lo que dicen otros bloggers

Tendría que argumentar más porqué creo que es el mejor editor de CSS, si no basta con las funciones que acabo de describir puedes ver lo que de Stylizer ha escrito Pablo de Kabytes, Luis Javier Álvarez en Desarrollo Web o Kemie Guaida en Diseñorama.

Descarga Stylizer

La descarga es en un solo paquete aunque tenga 2 versiones, una gratuita (Basic) y otra comercial (Ultimate – 59€) con más funciones, esta es la comparativa. Los primeros 14 días tendrás disponibles todas las funciones de la versión Ultimate, si decides no comprarlo te quedas sólo con las de la versión Basic.

Descargar Stylizer

De momento no hay versión para Mac aunque trabajan en ella, al parecer corre bien en Linux.

Conclusiones

Stylizer es obra de Skybound una compañía canadiense que ha sabido entender las necesidades del diseñador web. Al estilo del fabuloso Firebug para Firefox podemos editar en vivo lo que hacemos, nos ahorra tiempo con la detección de errores de sintaxis, conexión FTP para editar en remoto, etc.

La única pega es que no es gratuito, si conoces alguno que sí lo sea y supere a Stylizer déjalo por favor en un comentario.

Tomen nota, señores de Adobe.

Dicotomías sobre software en pqpq.es

• Aplicaciones web vs. Aplicaciones de escritorio
• Software comercial vs. Software de Código Abierto
• Software legal vs. Software pirata

Cursos de diseño web en cursos v2b

Todos estos cursos son en formato videotutorial y tienen la garantía de video2brain.

• Curso de diseño web y Estilos CSS
• Curso de PHP
• Curso de JavaScript
• Curso TODO Web
• Curso Efectos Web

Puedes ver en esta demo más de 12 horas de vídeotutoriales completamente gratis.

La diferencia respecto a la web oficial de video2brain es que en ceslava ofrecemos los mismos cursos con un 15% de descuento, y de que gestionamos las subvenciones de la Fundación Tripartia para que estos cursos resulten gratuitos para trabajadores residentes en España. Puedes verlos online o descargarlos cómodamente a tu equipo.

Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:

• Suscripción Anual Online: sólo 189€
• Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.

Cualquier duda ponte en contacto, estaremos encantados de atenderte.

Aunque hay otras opciones para usar una fuente no de sistema (eCSStender, sIFR | Facelift | Typeface | Cufon | @font-face ) para los que seguimos usando CSS2.1 sin ninguna ayuda extra podemos consultar estas estadísticas sobre el porcentaje de equipos que tienes instalada tal o cual fuente.

Code Style: Most common fonts for Windows, Mac and Linux, font survey results

Puedes empezar con alguna más arriesgada, en Font Matrix tienes otra forma de ver las fuentes instaladas según el sistema operativo:

Los mejores Font Stacks

Consejos sobre cuáles son las mejores combinaciones para la propiedad CSS font-family, los mejores font stacks, hay muchos, destacamos estos artículos:

• Better CSS Font Stacks | Unit Verse
• Guide to CSS Font Stacks: Techniques and Resources | Smashing Magazine
• 8 Definitive Web Font Stacks [Design Tips & Tricks]

Entonces, ¿cuál es la mejor? ¿y la peor tipo para la web?

La peor por goleada todos sabemos cuál es ¿no?

Las mejores fuentes para web según los usuarios de pqpq.es:

1. Verdana: 6/14
2. Arial: 3/14
3. Helvetica: 2/14
4. Tahoma: 2/14
5. Trebuchet 1/14
6. Courier 1/14
7. Comic Sans: 1/14 (es lo que tiene la democracia XD)

Aporta tu opinión en El mejor y el peor tipo de letra para web

Tienes 2 opciones que ya comentamos en “Sobre la agonía de IE6”:

1. Puedes tomar la opción de renegar de él y no darle soporte o
2. puedes intentar que quienes aún utilizan este navegador vean correctamente tus sitios.

Literatura hay por toda la red pero creo que hay 3 sitios que merecen la pena resaltar para este fin, sitios que harán esta tarea mucho más fácil:

IE6 CSS Fixer: starter kit

Una herramienta web que facilita la creación de un CSS específico para IE6 que podrás utilizar mediante los comentarios condicionales. También puedes crear hacks pero te aconsejo los condicionales.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

Toda una colección de soluciones para los bugs de IE6 en una sola página. Se tratan de soluciones específicas,

eCSStender

Con la ayuda de javascript y de este joven paquete solucionas varios bugs.

Conclusiones

Los 3 enlaces mostrados no son ninguno la solución “global y mágica” pero sí unos puntos de apoyo para que cuando testees tus sitios – 11 formas de testear la compatibilidad de una web en distintos navegadores – no te lleves demasiadas sorpresas.

Por supuesto que según sea tu posición en la dicotomía “¿Apoyas la campaña en contra de IE6?” este artículo te será útil o completamente inútil.

Cursos de diseño web en cursos v2b

Todos estos cursos son en formato videotutorial y tienen la garantía de video2brain.

• Curso de diseño web y Estilos CSS
• Curso de PHP
• Curso de JavaScript
• Curso TODO Web
• Curso Efectos Web

Puedes ver en esta demo más de 12 horas de vídeotutoriales completamente gratis.

La diferencia respecto a la web oficial de video2brain es que en ceslava ofrecemos los mismos cursos con un 15% de descuento, y de que gestionamos las subvenciones de la Fundación Tripartia para que estos cursos resulten gratuitos para trabajadores residentes en España. Puedes verlos online o descargarlos cómodamente a tu equipo.

Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:

• Suscripción Anual Online: sólo 189€
• Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.

Cualquier duda ponte en contacto, estaremos encantados de atenderte.

Descarga plugin y ejemplo | Demo

En este otro enlace puedes ver 23 consejos sobre usabilidad en formularios:

Forms and data entry usability guidelines [en]

Dicotomías relacionadas con la usabilidad en pqpq.es

• Librerías javascript: Dojo, jQuery, MooTools, Prototype
• Flash vs. Ajax
• ¿Apoyas la campaña en contra de IE6?
• ¿Utilizas al navegar los botones de compartir?
• ¿Crees que es importante cumplir los estándares web del W3C?

Vamos a proponer varias formas de hacer estos PDF interactivos, para poder rellenarlos en nuestro equipo y ahorrarnos tiempo, papel y tinta.

En total damos 7 opciones, 2 comerciales, 2 de código abierto y 3 aplicaciones web. Si conoces alguna otra compártela en los comentarios.

2 Software comercial

1. Adobe, los creadores del formato tienen 2 aplicaciones para la creación de formularios PDF, los más extendidos: Adobe Acrobat y LiveCycle Designer, soft integrado en pero independiente de Acrobat, sólo para Windows.

    

   La mayor diferencia es que con LiveCycle Designer trabaja en XML con lo que puedes crear formularios y convertirlos fácilmente a HTML. Es también una buena opción para crear una plantilla en InDesign, exportar el XML y crear un formulario PDF donde los campos rellenados serán luego insertados en nuestro archivo .indd 

2. Nitro PDF: soft comercial ($99) con versión de prueba.

   

2 Software de código abierto

1. Scribus, la alternativa de código abierto a InDesign, aquí tenéis un tutorial. 

   

2. openPDF, un proyecto de código abierto, basado en otros también de código abierto como Scribus, multivalent, PDFBox e iText. Para la creación y edición de formularios PDF.

   

3 Generadores online

1. PDFamigo: Si necesitas crear un formulario PDF y no tienes el software o los conocimientos adecuados lo más fácil es visitar PDFAmigo, una app web donde con el método drag&drop dispones los elementos del formulario en la página.

   

   No necesita registro y es gratuito, pero el PDF llevará una marca de agua, no podrás subir imágenes y no podrás reeditarlo, en cambio si pagas 1 dólar te ahorras estas limitaciones.

2. Doculicious, una vez creado el formulario lo insertas en tu web. Una vez rellanado el usuario puede descargarse un PDF del formulario relleno. (vía wwwhatsnew) 
   
3. PDF Filler, no es para crear formularios es para convertir esos pdf con formato de formularios en formularios electrónicos y poder rellenarlos como explican en DigiZen. Puedes subirlos de tu equipo o directamente indicar una URL.

   

Dicotomías sobre software en pqpq.es 

• Aplicaciones web vs. Aplicaciones de escritorio
• Software comercial vs. Software de Código Abierto
• Software legal vs. Software pirata

Cursos relacionados en cursos v2b

Todos estos cursos son en formato videotutorial y tienen la garantía de video2brain.

Puedes ver en esta demo más de 12 horas de vídeotutoriales completamente gratis.

Tienen un 15% de descuento, gratuitos para trabajadores residentes en España. Puedes verlos online o descargarlos cómodamente a tu equipo.

• Adobe Acrobat 9
• Adobe InDesign CS4 Avanzado

Ofertas de suscripción, acceso a TODOS los cursos de video2brain durante 1 año por:

• Suscripción Anual Online: sólo 189€
• Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.