designweb13

2008-09-30T12:37:00.009-03:00

Efectos en Flash. Efecto linterna con mascaras.

Buscando información en la web encontre este tutorial que me parecio interesante para compartir con ustedes y creo sera muy util para todos aquellos quienes estamos comenzando en el mundo del diseño con Flash.

.-Introducción.

Vamos a generar un efecto similar al de enfocar con una linterna en una imagen oscura (de hecho, completamente negra) con Flash 8 (también para MX2004).

Para ello vamos a usar las mascaras de Flash. En concreto el metodo setMask aplicado a una imagen.

Lo primero de todo, es crear tres capas en la linea de tiempo principal, al igual que muestra en la imagen. (Las podes renombrar a tu gusto).

Figura 1.1 - Capas a crear.

La capa imagen contendrá la imagen que queremos iluminar (bueno mostrar parcialmente por la mascara).

Podemos poner cualquier imagen de cualquier tamaño. Yo he escogido una que he encontrado en internet, y que he exportado a jpg, y luego importado a la b

iblioteca de Flash. Tened cuidado, por que por ejemplo si utilizaís FireWorks (o software similar) y utilizaís el metodo copiar (desde FireWorks) y Pegar (en Flash), se asume que la imagen es png y el fichero resultante, ocupa bastante espacio. Por ello es mejor, exportar la imagen y luego importarla a la biblioteca.

Posteriormente debeís convertir la imagen en un simbolo de tipo pelicula (si no no podremos aplicarle la mascara con ActionScript). La película r

esultante, la debes ubicar en la capa imagen, y importante que le asignes un nombre a la instancia creada.

En nuestro caso, a la instancia de la imagen, la hemos llamado luz_mc, si utilizaís otro nombre, recordad modificarlo en el código ActionScript.

Ahora tenemos que crear la mascara, que servirá como foco de la linterna. Para ello insertamos un nuevo simbolo (en nuestro caso llamado foco), y en el primer fotograma creamos un circulo (nosotros lo hemos hecho de 200x200). El nuevo simbolo creado lo ubicamos en la linea de tiempo principal, en la capa mascara, además al igual que hicimos anteriormente, le debemos asignar un nombre de instancia.

Nosotros la hemos llamado foco_mc.

A la instancia de foco_mc insertada en la capa mascar

a, le vamos a aplicar un efecto de desenfocar, para darle un aspecto de luz de foco mas realista. Desgraciadamente, esto solo es posible con Flash 8 y solo funciona en Players de la versión 8 y superiores. Cuando usemos un player inferior, simplemente veremos un circulo que muestra la imagen tal cual, y no con un aspecto de degradado.

Al clip foco_mc, como deciamos, le aplicamos un filtro de desenfocar, con unos parametros que nos gusten. Así es como lo hemos dejado nosotros.

Figura 1.2 - Efecto desenfocar sobre el foco.

Para que el efecto funcione como mascara sobre la imagen (luz_mc) que queremos ver, es importante que tengamos activada la opción Utilizar caché de mapa de bits en tiempo de ejecución, teniendo seleccionado el clip luz_mc si no no funcionara el efecto como mascara degradada, y simplemente veremos un circulo.

Con todo esto ya estamos preparados para ver nuestro efecto, ahora solo falta generar un poco de código ActionScript, para decirle a Flash que foco_mc es la mascara de luz_mc, y para generar un efecto que en tiempo de ejecución mueva esta luz conforme desplazamos el ratón por la imagen.

Este es el código ActionScript que teneís que introducir en el primer fotograma 1 de la capa Acciones.

luz_mc.setMask(foco_mc);

foco_mc.onMouseMove=center;

function center(){

this._x=_xmouse-this._width/2;

this._y=_ymouse-this._height/2;

}

El problema con Flash MX 2004, y con versiones anteriores a Flash Player 8, es que no podemos aplicar al circulo que actua como mascara el efecto de desenfoque, con lo cual la mascara actua como un simple circulo sin el efecto de degradado que produciría una luz difusa.

No obstante tampoco queda mal

Finalmente, comentar, que este es un ejemplo muy sencillo del uso de mascaras. El lector debe darse cuenta, de que igual que hicimos un circulo para usar como mascara, pudimos haber hecho un cuadrado, y así mismo que al igual que solo utilizamos un fotograma en la mascara, pudieramos haber realizado una compleja animación, con la que hubieramos obtenido resultados muy profesionales.

Probar a realizar algunas modificaciones en el clip llamado foco, y añadir algunos fotogramas mas variando el ancho y alto del circulo y podran ver a lo que nos referimos.

Esperamos que este tutorial les haya sido de utilidad.

2008-09-25T12:35:00.006-03:00

Cómo se pueden usar las máscaras para obtener una animación web.

Las Máscaras es un efecto utilizado frecuentemente en páginas web que contienen películas Flash.

Dicho efecto consiste en ocultar objetos que se encuentren en el escenario de Flash, y mostrarlos poco a poco, por algún objeto que tenga una interpolación de movimiento o cualquier otro efecto que sea producto de tu imaginación. La máscara no es solamente para ocultar objetos completamente, un ejemplo podría ser mostrar los objetos color gris y que un objeto con interpolación de movimiento los muestre de otro color cuando pase sobre ellos.

Para tener todo más claro, hagamos un ejemplo fácil:

1- En Flash, en la escena 1, toma la herramienta de texto (A) y escribe lo que desees, utiliza un tamaño de fuente grande para que el texto abarque gran parte del escenario...

2- Dirígete al fotograma (frame) numero 60 de la "capa 1", haz un click sobre él, y presiona F6, para que el tiempo de duración de la película sea más prolongado.

3- Crea otra capa (capa 2), después toma la "herramienta óvalo" y dibuja un óvalo:-)

4- Haz click derecho sobre el nombre de la "capa 2" y en el menú que se desplegará, selecciona la opción "Máscara" (Mask)

5- Ahora dirígete al fotograma número 1 de la "capa 2" (es donde está el óvalo), haz click derecho, y después haz click en la opción "Crear interpolación de movimiento".

6- Finalmente haz click en el fotograma número 60 de la "capa 2" y presiona la tecla F6 y mueve el óvalo como tú quieras, eres un Flasher, así que debes tener mucha imaginación.

Nuestra línea del tiempo tendría que ser parecida a la siguiente imagen:

Fuente: desarrolloweb.com

2008-09-19T22:31:00.002-03:00

La cuarta edición de Fundamentos Web reúne en Gijón a 300 especialistas

La cuarta edición del Congreso Internacional Fundamentos Web reunirá en Gijón el 27 y 28 de octubre a más de 300 especialistas en diseño y desarrollo web de varios países. El congreso está organizado por la Fundación CTIC y la oficina española del consorcio W3C.
La noticia en otros webs
El presidente y cofundador de Adaptive Path, Jesse James Garrett, explicará hacia dónde se dirige la Web mediante un análisis de las últimas innovaciones en desarrollo. Habrá una mesa redonda con representantes de los CMS (Content Management Systems), como Dries Buytaert (Drupal), Wilco Jansen (Joomla!) y Alejandro Alves (OpenCMS), moderados por el director de Estándares de Opera, Charles McCathieNevile, entre otras charlas.
La segunda jornada se dedica a la aplicación de Ajax no intrusivo, conferencia ofrecida por Peter-Paul Koch, y a los aspectos relacionados con la manera de ajustar el diseño Web a la conducta humana, conferencia impartida por Eric Fain.
Aparte de las conferencias, la cita de Gijón ha demostrado ser cada año un buen lugar de búsqueda de empleo.

Fuente: Diario el Pais

2008-09-17T22:39:00.001-03:00

Google integrará el servicio de Analytics y Adsense

Nuestras súplicas fueron escuchadas, ésta integración es esencial a la hora de analizar el rendimiento de nuestros contenidos, actualmente son muy pocos los datos que podemos obtener en la relación visitas e ingresos de nuestros sitios.
Aunque Google no lo ha hecho oficial, ya han circulado varias capturas de pantalla de la integración de ambos servicios.
Con ésto, ahora podremos ver qué páginas son las que nos generan más ganancias, qué sitios referidos nos convienen más para promocionarnos, cuántas veces dieron click en los anuncios de Adsense de un artículo determinado, e incluso hasta podríamos saber el eCPM y CTR por página.
Por ejemplo ahora podemos evaluar mejor las campañas de promoción que hagamos o evaluar a los sitios conocidos que envían mucho tráfico, digamos si tu nota sale publicada en Menéame y en BarraPunto ahora además de saber cuántas visitas te produjo, también puedes ver qué ganancias generaron y de esa forma evaluar qué tipo de usuario es el que cada sitio te envía y en dónde te conviene más anunciarte o que tus notas salgan publicadas en este caso.

Así que ahora solo nos falta esperar a que se concrete la característica. Después de todo Google debería tener muy claro que a mejores herramientas para sus editores, más pueden rentabilizar sus sitios y ellos igual ganar más.

2008-08-28T23:52:00.004-03:00

Graphic Designer Gokhan

Buscando diseñadores y trabajos de diseño en la web encontré este vídeo , es una presentación de trabajos de diseño acompañado de buena música .
Me atrajo la presentación del trabajo y el estilo de diseño me pareció interesante, lo dejo para que ustedes lo vean y saquen conclusiones por si mismos.

2008-08-25T19:30:00.010-03:00

Gerardo Lopez Diseño y Música

El diseño es una rama mas del arte y es genial cuando se ve una perfecta combinacion de varias, por ejemplo la música y el diseño gráfico, en este caso puntual es a lo que me refiero una mezcla perfecta de diseño en lo que respecta a la estética de una banda y su música.Esto lo a logrado Gerardo Lopez un diseñador Uruguayo que ha dado en el blanco en combinar el arte del diseño y la música de Dolby , uno al ver el logo o un afiché de la banda o cualquier expresión gráfica de la misma percibe la misa sensación que al escucharla. Gerardo Lopez a logrado trasladar el significado de la música de Dolby a sus trabajos graficos para la banda .Cabe destacar que Dolby es una banda con un estilo diferente a lo que escuchamos en Uruguay una banda con una fuerte tendencia del Britpop he influencias como R.E.M , Interpool ,etc.
La Banda va estar presentando el 30 de Agosto en Bj bar su Sitio Web el cual estará empapado por toda la influencia Inglesa y en el cual podremos ver el trabajo de Gerardo Lopez en la web en relación a Dolby. Gerardo Lopez fue ganador del premio Pericón en su tercera Edición (premio a los mejores sitios en Uruguay) con el sitio de O.S.E.
El sitio de la banda esta en construccion pero ya se deja entre ver algo de lo que va ser el diseño les dejo la dir del sitio www.dolbymvd.com

Logo de la Banda

2008-08-24T22:20:00.002-03:00

Un Clik Solidario

Encontre muy interesante esta iniciativa de un click solidario de Windows live Serch y la integre a mi blog para que podamos colaborar se que esto no va a cambiar el mundo pero tal ves pueda mejorarlo en algo , aunque sea un poco.

La informacion que les dejo es del sitio oficial www.unclicsolidario.com
Sobre la iniciativa
Seguro que te has preguntado muchas veces cómo puedes conseguir que el mundo sea un poquito mejor… hay muchos problemas que necesitan una solución urgente, ¿pero por dónde empezar?

Windows Live pone en tus manos una herramienta sencilla pero poderosa con la que podrás aportar tu granito de arena: los clics solidarios. Mediante la búsqueda en internet a través de “Un Clic, una Esperanza” estás colaborando con Acción Contra el Hambre para la construcción de un pozo en Gao, Mali, país perteneciente al Sahel Africano, una de la zonas más pobres del planeta.

Cada vez que hagas una búsqueda desde esta página, cambiará un poco la imagen principal hasta convertirse en una foto de lo que queremos conseguir en el futuro. Entonces, el proyecto de Acción Contra el Hambre para la construcción del pozo se hará realidad. Muchas gracias por tu colaboración y no dudes en compartirlo con tus contactos.

2008-08-17T23:20:00.004-03:00

Navegando encontré este sitio que esta muy bueno y tiene muchos recursos para diseñadores que en ciertas ocasiones son dificíles de encontrar pero en esta pagina están todos al alcance de nuestra mano.Les dejo la dirección para que lo comprueben ( aclaración esta en Ingles)

http://www.forwebdesigners.com/

2008-08-13T18:28:00.004-03:00

SmartFTP

SmartFTP es un cliente FTP (Protocolo de Transferencia de Archivos) . Este nos permite transferir los datos de nuestra computadora a un servidor es decir "subir nuestra pagina al servidor",lisa y llanamente esa es la función.
Es un programa sencillo de utilizar con una interfase practica muy similar a la de Internet Explorer.
Les dejo la dirección del sitio oficial donde podrán encontrar prácticos tutorías y descargar el programa.

www.smartftp.com

2008-08-07T00:09:00.007-03:00

Marcos en Dreamweaver

Los macos se utilizan para dividir un documento web en múltiples documentos Html, dejando paginas o documentos permanentemente en la ventana , mientras cambia otra de sus partes.

Por ejemplo una pagina web puede estar formada por tres marcos, uno que contenga la barra de navegación otro la cabecera y él ultimo la zona variable con el contenido. Esto significa que cada marco constituye un Html independiente de los demás.

Un conjunto de marcos permite que los marcos funcionen coordinadamente en la pagina, definen la estructura y las propiedades de la pagina.

Los marcos individuales son áreas definidas, de un determinado tamaño, dentro de una pagina html y en cada uno de estos se muestra un documento html.

Pasos para trabajar con marcos en Dreamweaver

Cree el conjunto de marcos y los marcos individuales

guarde los archivos usados en el sitio

Tener en cuenta que cada marco o conjunto de marcos es un documento html y hay que guardar cada uno independiente.

Definir las propiedades de los marcos y el conjunto, nombres, etc.

Comprobar los destinos de los vínculos de forma que el contenido aparezca en la zona correcta.

Bibliografía: Guía de aprendizaje Dreamweaver 4, Firework 4

Marta Beatriz Martins Carrizo

2008-08-04T17:48:00.005-03:00

Los diez mandamientos del Diseño Web

Navegando en la Web encontré esta información en isopixel.net sobre una nota publicada por Don Norma cofundador de Nielsen Norman Group y Khoi Vinh director de diseño de NYTimes.com. Me pareció muy interesante a tener encuenta y se las traigo a ustedes, espero la tengan en cuenta al sentarse al monitor o ante un papel en blanco a crear o bocetar un sitio, a mi entender son 10 puntos fundamentales a tener en cuenta para un buen diseño.

* 1. - No abusar de Flash: Es una tecnología potente pero que hay que usar con mesura ya que puede empeorar la usabilidad del sitio.

* 2.- No ocultar el contenido: La publicidad es necesaria para mantener un sitio, pero cuidado con usar técnicas intrusivas como pop-ups que tapan el contenido. Los banners colocados estratégicamente dan mejores resultados y no molestan al usuario.

* 3.- Hacer sitios ordenados: La web es un inmenso cajón de información. Es imprescindible contar con información bien ordenada, jerárquicamente.

* 4.- No abusar del efecto “glossy”: Es una técnica demasiado usada ya, muchos sitios la incorporan en sus diseños convirtiéndose en un cliché poco efectivo a estas alturas.

* 5.- Pon atención al dar nombre a un proyecto: La web2.0 también ha traído consigo una peculiar forma de generar nombres de proyectos. Cuidado con el uso de vocales, no usar demasiadas ni demasiado pocas.

* 6.- La tipografía es muy importante: A pesar de vivir en la Internet de la banda ancha y contenidos audiovisual, el texto sigue siendo fundamental y muy poderoso en el diseño web.

* 7.- Ten presente la experiencia del usuario: Es de vital importancia crear sitios que capturen y mantengan la atención de los usuarios

* 8.- La importancia de la web social: la web social ha provocado gran diversidad de usuarios, ahora tenemos varios tipos diferentes. Hay que tenerlo en cuenta cuando hagamos un trabajo, por ejemplo en los espacios publicitarios.

* 9.- Incorpora los nuevos medios: el uso de la Wikipedia, YouTube y demás servicios similares se ha convertido en algo muy común entre los usuarios. Incorpóralos en la medida de lo posible dentro de un proyecto.

* 10.- El contenido es el rey: dicho hasta la saciedad pero siempre está bien recordarlo: lo más importante es el contenido.

Fuente : isopixel.net

2008-08-03T20:21:00.000-03:00

Septimo Congreso de Diseño en Mar del plata Argentina

En el mes de octubre se llevara acabo el septimo congreso de Diseño en Mar del Plata Argentina.
En su septima edicion el congreso tendra una duracion de siete dias del 29 de setiembre al 5 de octubre , este es el mas importante de America contara con la presencia de los estudios de diseño más importantes del mercado y diseñadores de todas partes del mundo.
Mas de 8000 diseñadores en el estadio Polideportivo de Mar del plata intercambiando opiniones y trabajando en talleres con los mejores del medio, creo que es una gram oportunidad parar aprender , conocer gente y sobre todo empaparce una semana desde el desayuno a la previa de la noche y despues de diseño , tendencias y más.
www.Trimarchidg.net este es el sitio oficial del congreso, podran encontrar toda la informacion referente a precios de entradas , estadia , cronogramas de actividades, fotos de años anteriores y los estudios que participan del evento.
Vale la pena hacer un esfuerzo para asistir.
Los mantendremos informados

2008-08-03T18:20:00.001-03:00

Utilización de capas en Dreamweaver

Una capa es un elemento de diagramación, que puede contener texto,tablas,imágenes,formularios,etc.
Es decir podemos colocar cualquier cosa que se pueda insertar en el cuerpo de un documento HTML.
Al crear una capa se genera la etiqueta div o span.
Una ves creada una capa podrá utilizar la paleta de capas para seleccionarla,anidarla dentro de otra capa o cambiar su orden de apilamiento.
Para crear una capa podemos utilizar dos métodos: el menú o un icono.
Utilizando el menú: Creará una capa con un tamaño predeterminado en la posición donde ubico el cursor.
Utilizando el Icono: Podrá dibujar la capa del tamaño que desee y en el lugar que necesité.
Deberá visualizar el documento en la vista estándar antes de esto.

Método utilizar menú para crear capa.

Posicione el cursor donde desea crearla

En el menú insertar,opción capa . Aparecerá la capa como un recuadro con un manejador en el ángulo izquierdo.

Método utilizar la paleta objetos para crear una capa

En la paleta objetos verifique que el grupo objetos sea común , si no lo es marcarlo.

Haga un click en el icono que permite crear una capa el puntero del ratón adoptara el formato de cruz y nos permitirá dibujar la capa del tamaño que quiéramos , en el lugar que quiéramos.

Bibliografía: Guia de aprendizaje Dreamweaver 4 , Fireworks 4
Marta Beatriz Martins Carrizo.