Si bien Fireworks no ha desparecido, ha mejorado y como dicen… llego para quedarse. Muchos lo llaman el hijo pequeño de Photoshop, otros dudan de su funcionalidad. En lo personal si eres diseñador web, debes conocer Fireworks (en ningún momento menosprecio Photoshop que quede claro).

Ahora hablemos de las novedades que Adobe nos ha dado para Fireworks CS5.

Export Area Tool

En la version pasada de Fireworks podiamos exportar una seccion de un gráfico si lo deseabamos, para esto debiamos usar la herramienta slice (rebanada) para despues exportarla(s).

Ahora con esta herramienta, encontrada detras de la herremianta crop, podemos seleccionar una parte de nuestro gráfico y dando doble clic sobre nuestra selección nos aparecera un menu de exportación similar al panel de Save for the Web & Devices.

Esta herramienta, aunque sencilla ahorrara mucho tiempo a muchos de nosotros.

Compound Shape

Sin duda una de las mas grandes mejoras, esta herramienta te permitira ahora crear vectores complejo sin necesidad de usar la pluma (aunque tambien se puede utilizar).

Si no es una herramienta, es un pequeño segmento en nuestro panel de propiedades que podremos usar para crear vectores complejos.

¿Como funciona?

Creamos una forma (ya se una rectangulo, circulo o poligono), despues con la forma seleccionada podemos seleccionar una de las opciones. La primera indica el modo regular, la segunda es para agregar una “union”, esto quiere decir que podemos “encimar” otra forma y se unira con la original, creando un solo conjunto de vectores.

Templates

Ahora Fireworks CS5 trae nuevas plantillas y documentos predeterminados, desde estas plantillas podemos crear arte para iPhone, diseños para pantallas moviles, hasta unas plantillas para web.

Otras novedades

Exportacion de Código HTML mejorada

Menu Contextual: Podemos insertar ahora botones y simbolos de manera mas sencilla. Podemos acceder a las preferecias de Fw desde el menu contextual.

Tambien pueden mandarnos su lista de deseos, esto quiere decir si tienen alguna sugerencia de template que realizar (negocio, despacho creativo, deportes, etc). Ustedes digan.

Seguiremos buscando la manera de liberar mas y mejores freebies para ustedes. Gracias!

Uno de los principales defectos que hemos descubierto tras el lanzamiento de la iPad, un aparato que te permitira ver las paginas web como deben ser (segun la pagina web de apple). Mas el gigante de la manzana ha dejado del lado nuevamente el Flash Player, el cual es utilizado en millones de paginas web e innumerable cantidad de juegos en el internet. Ahora todos nos preguntamos:

“Porque apple, siendo una empresa tan avanzada tecnologicamente y con una experiencia de años en el area de la computación y los gadgets ahora deja de lado algo tan esencial como un plugin para la navegación cotidiana?”

La respuesta es mas sencilla de lo que parece, y es:

Si Apple dejara libre el uso de Flash Player en sus dispositivos, el negocio de las fabulosisimas apps se terminaria. Tenemos el ejemplo de Google, que ha optado por utilizar HTML5 para poder prestar el servicio de Google Voice, de esta manera, si tuvieramos Flash Player en nuestro iPhone/iPod/iPad, podriamos acceder a inumerable cantidad de juegos en linea gratis, aplicaciones y otro tipo de contenido sin realizar ningun gasto extra.

Es por esto que han nacido paginas como www.iwantflash.com y otros posts que aqui les dejo. Si encuentran otro bueno mandamelo al twitter @jluisfg:

• Lee Brimlow – The iPad provides the ultimate browsing experience?
• Antonio Holguin – Links from around the web - Great site may NSFW in some cases
• Liz Fredrick – I <3 Apple but some apples are rotten.
• Flash Platform Blog – iPad a Broken link
• Doc Searls Weblog – Up the creek without an iPaddle

Esta es la respuesta que tenemos al día de hoy. Asi que podemos adquirir nuestra fabulosa iPad, pero nos tendremos que acostumbrar a ver pieza de lego azules.

Utilizando estilos CSS podemos remover la imagen que indica la lista y podemos ubicar de manera horizontal cada elemento de la lista, para asi tener como resultado un menu. Los estilos que usaremos son:

• float – permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos. En el caso de la lista ubicara cada inciso de la lista a la derecha del anterior.
• padding - permite agregar un relleno a cada elemento de manera que no queden encimados los elementos.
• list-style-type - esta propiedad nos permite cambiar la imagen de la lista o en este caso para el menu, removerla.

Utilizaremos estilos compuestos, los cuales sirven para establecer estilos especificos. Por ejemplo: si contamos con una etiqueta div de clase “estilo1″ y dentro de esta etiqueta tenemos un enlace (o etiqueta a), entonces la regla de CSS seria estilo1 a es muy importante el espacio entre cada clase y etiqueta. Los estilos compuestos no tienen limite, pueden in de un simple estilo compuesto de una clase y una etiqueta, hasta tener un estilo asi (#container .estilo1 table .estilo3 li). El cual nos hablaria de un elemento de tipo lista dentro de una tabla con una clase llamada estilo 3 dentro de una division con una id container y una clase estilo1. Por revuelto que esto pueda sonar es importante que sea comprendido este concepto para continuar con el menu horizontal.

Para las personas que utilizan Dreamweaver, al momento de crear un estilo compuesto Dreamweaver nos da una muy sencilla explicación del estilo que estamos creando, lo cual los ayudara a no perderse en el proceso.

Para efecto de este tutorial, crearemos una división con un id menu y crearemos una lista dentro de esta division.

El propósito sera crear un estilo para las listas de la etiqueta menu, que de la propieda de flotar hacia la izquierda, de manera que se ubiquen una despues de la otra de manera horizontal.

Ventana de carga

El primer cambio que pudimos ver fue el cambio de la ventana de carga, recuerdan esa ventana que se anteponia a lo que estuvieramos haciendo practicamente bloqueando nuestra pantalla, pues para la siguiente version esta pantalla se colocara atras de todos nuestros programas para que de esta manera podamos continuar trabajando mientras el programa se carga. Un pequeño cambio, pero ayudara.

Deco Tool

Esa herramienta que llena de ramas nuestro escenario y que realmente no sirve para nada, ha sido actualizada y ahora cuenta con mas opciones aparte de las ramitas inservibles, de modo que hasta el peor diseñador del mundo puede realizar una ilustración bastante respetable.

Edición de Texto

En esta presentación pudimos ver impresionantes mejoras en la edición de texto gracias al uso de un nuevo Text Layout Framework(TLF), entre las principales capacidades estan:

• Soporte para caracteres internacionales
• Uso de columnas incluyendo trabajo con columnas de derecha a izquierda
• Texto vinculado. Para los diseñadores no les sera desconocido, pues actualmente se utiliza en Illustrator. Cuando creamos un campo de texto de un tamño preciso, suele suceder que el texto que  escribamos exceda las dimensiones del campo, para esto podemos extender un campo de texto en otro lado de nuestro escenario y ambos campos estaran vinculados.

Mejoras en la ayuda de codigo

Se mostraron importantes mejoras en el Code Hinting de Flash (esa pequeña ventana que nos muestra la sintaxis antes que terminemos). Ahora el code hinting nos ayudara al acceder a clases personalizadas sin ningun problema.

Code Snippets

Los snippets se encontraran en un nuevo panel, estos snippets son codigos de ejemplo que podemos copiar y usar en nuestra pelicula de flash, actualmente Dreamweaver cuenta con un pequeño panel de Snippets.
Integración con Flash Builder. Podremos ahora elegir al crear una clase, si deseamos escribirla en Flash o en Flash Builder, de elegir Flash Builder el programa se abrira para la edición del archivo de clase.

Nuevo formato (XFL)

Este sera el nuevo formato para Flash, el cual se encuentra basado en XML para una mejor lectura del archivo y mejor integración con otras herramientas.

Iphone

La mas importante y sonada mejora que hemos oido, fue que ahora Flash tendra la capacidad de crear aplicaciones para el iPhone, esto no significa que veremos un Flash Player para el iPhone, pues Mike Chambers nos comento que hasta el momento Apple no ha tenido la disponibilidad de trabajar con Adobe para el desarrollo del Flash Player para este dispositivo, sin embargo, Flash traducira el codigo en ActionScript 3 (no soportara AS2 o anteriores) y lo convertira en una aplicacion para iPhone, embebiendo el certificado pertinente(deberemos afiliarnos al programa de Adobe para desarrolladores de aplicaciones por supuesto)

Estas son las novedades que pudimos ver en mano de Lee Brimelow y Mike Chambers (quien realizo un juego para iPhone el mismo dia para la presentación).

En fin, para finales de este año esperamos quede liberada la version Beta al público como promete Adobe, si quieres enterarte en cuanto salga apuntate aqui.

Primero deberemos crear un rollover, y despues asignar los vinculos a cada botón.

Mi escenario inicial cuenta con un fondo, y una serie de movieclips, los cuales seran mis botones. Es importante que cada movieClip que asignado un nombre de instancia.

Para hacer un rollover con uno de nuestros botones vamos a utilizar 2 Eventos: El evento ROLL_OVER y el Evento ROLL_OUT. El nombre de instancia del boton que usare sera miBoton_mc.

Si analizamos un rollover y en base a los eventos que mencionamos arriba, entonces necesitamos realizar 2 secuencia de animación para el botón, una cuando el mouse se encuentre encima y otra cuando el mouse salga del boton.

Dentro del boton haremos una animación sencilla en la cual una forma se sobreponga y tambien el texto debera tomar otro color.

Debemos hacer la animación para llegar a este punto, y la animación para regresar al estado original. De tal manera que nuestra línea de tiempo debe quedar asi:

Ahora debemos colocar un par de fotogramas con la función stop() y usaremos etiquetas para poder detonar ciertas partes de la línea de tiempo despues. La línea de tiempo quedara de la siguiente manera:

Ahora si, tenemos preparada la línea de tiempo de nuestro botón. Vamos a nuestra línea de tiempo principal, y en el primer fotograma necesitamos agregar 2 listeners, uno para el evento ROLL_OVER y otro para el evento ROLL_OUT. De la siguiente manera:

Lo único que queda por hacer es, dentro de la función debemos utilizar un simple gotoAndPlay(“x1″) para la función detonada por el ROLL_OVER y el mismo gotoAndPlay(“x2) para la función detonada por el ROLL_OUT; recordemos que x1 es la etiqueta que le dimos a el primero de los fotgramas de la línea de tiempo del movieclip y la etiqueta x2 es la que esta justo a la mitad de la animación. De la siguiente forma:

Ahora tenemos que cuando ponemos el mouse encima del boton detona la primera parte de la animación (que viene siendo el over) y cuando el botón sale detona la segunda parte de la animación ( que es el out).

Apliquemos la misma acción a todos los botones, y el resultado sera el siguiente.

Para poder ver la mano que nos indica acerca de un botón debemos establecer una propiedad denominada buttonMode como verdadera, de la siguiente manera:

Ahora, debemos establecer los vinculos para cada botón, esto lo podemos hacer por medio de la función navigateToURL(), que espera una variable de tipo URLRequest entre parentesís. Entonces la función debe ser detonada por el evento CLICK, entonces quedaría como:

miBoton_mc.addEventListener(MouseEvent.CLICK, miFuncion);

y en la función que establecimos como miFunción debemos poner la función navigateToURL, de la siguiente manera:

navigateToURL(new URLRequest(“http://google.com”));

El código con la función debera quedar asi:

Y estableciendole una función a cada botón deberá quedar de la siguiente manera:

y el archivo raíz

TypeTester

Este sitio Web nos permite comparar hasta 3 fuentes diferentes, ya sea desde nuestro ordenador, o podemos seleccionar de una lista de fuentes optimas para Web (Web-Safe).

Podemos probar diferentes colores, tamaños, colores de fondo, espaciado entre letras,  alineación y mas.

TypeChart

Este Sitio tambien nos permite buscar entre una serie de fuentes Web-Safe y otra de sus ventajas es que nos permite copiar el codigo CSS.

Flypping Typical

En este sitio podemos probar diferentes fuentes en un mismo texto, y una ventaja principal de este sitio, es que toma todas las fuentes instaladas en nuestra computadora, y son esas fuentes en las que nos muestra nuestro texto.

CSS Property Indexer

Este es un listado de todas las propiedades CSS alfabeticamente, bastante útil cuando no encontramos la propiedad exacta.

Via: WebDesigner Depot

1. Analisis

El analisis de un sitio Web es muy importante, debemos analizar.

¿Que propósito tendra el sitio Web?

¿A que público estara dirigido?

¿Que prestigio tiene la marca?

¿Esta buscando nuevas visitas o es simplemente una renovación?

2. Diseño

Despues de contar con un análisis y saber el proposito y la idea que el cliente tiene para con el sitio Web, debemos plasmar una interface que sea lo que el cliente desea comunicar. Algunos puntos importantes que deben ser considerados dentro del Diseño son:

• Logotipo y colores
• Slogan
• Layout
• Tecnología a utilizar (Flash, HTML, Flash con HTML, Sistema de Manejo de Contenido, etc)
• Fuentes de Información
• Fotografías

3. Desarrollo

Durante la etapa del Desarrollo es únicamente el planteamiento de lo realizado en la etápa anterior, y es recomendable tener juntas periodicas con el cliente para saber que se esta llevando el proyecto por el camino deseado por la marca o empresa.

4. Implementación

Esta etápa consiste en subir el sitio a un servidor Web para su lanzamiento.

y el archivo raíz

Se puede hacer de muchas maneras, simplemente explicare como lo haría yo.

Primero haremos el boton principal, del cual saldran los submenus. Despues, crearemos los botones que serian los submenus. Luego necesitaremos un boton invisible detonara las acciones del menu dependiendo de donde se encuentre el mouse.

Mi escenario inicial se encuentra de la siguiente manera:

Escenario inicial

Tengo un boton, cuyos estados se encuentran vacios, excepto el del area activa. Despues tenemos los botones, los cuales en ActionScript haremos invisibles para que inicialmente no aparezca, y por ultimo, el boton que detonara toda la acción.

Empezamos por hacer a los botones invisible.

Ahora agregamos el listener al boton principal, y la función simplemente hara los botones nuevamente visible, y agregaremos los listeners de click para cada boton.

Agregamos el listener y la funcion

y el resultado seria el siguiente.

Ahora tenemos que agregar en esta misma función un listener que oculte los botones cuando el mouse salga del area de los botones, es decir, cuando el mouse este sobre el area activa (boton) que creamos antes, una función simplemente hara nuevamente invisibles los botones.

Y este sería el resultado final.

Y por ultimo, el punto principal de un menu, para agregar una función a cada boton, simplemente tendriamos que agregar el listener (addEventListener) en la primera función, y quitarlo (removeEventListener) en la segunda función, para que cuando el mouse pase sobre el boton principal, se agreguen los listeners, pero cuando pase por el area activa, se remuevan.

Podriamos utilizar la clase Tween para que se vea mas animado  nuestro menu desplegable, y simplemente tendriamos que dar de alta la clase dentro de la primero función.

Archivo raíz