Entradas con la etiqueta “diseño web”

La decisión de Adobe de abandonar Fireworks.

por admin. 0 Comentarios

Fireworks

Este año que termina Adobe ha decidido no continuar con el desarrollo de Fireworks, la herramienta de diseño y desarrollo para páginas web y aplicaciones. Desde entonces ha habido muchos comentarios en la red criticando a Adobe e incluso una petición de firmas para que Adobe libere el código fuente de la aplicación y deje que lo desarrolladores continúen su desarrollo. Adobe se ha empeñado en que los diseñadores usen Adobe Photoshop para el diseño web e interfaces creando nuevas funciones exclusivas para ello, pero la verdad es que Photoshop está lejos de ser la herramienta ideal para ese tipo de trabajos, está mucho mas enfocada al diseño de impresión y el retoque de fotografías. Los diseñadores web no necesitan una aplicación tan pesada ni tan costosa. Por no hablar del formato nativo de Photoshop (PSD) el cual tiene muchos inconvenientes frente al PNG.

En el trabajo diario del diseño web o diseño de interfaces de usuario (UI) surgen muchas necesidades que Fireworks cubre perfectamente y que Photoshop no hace;

– Fireworks utiliza PNG como formato nativo, formato mas liviano que el PSD y que además puede leer cualquier navegador web.

– Fireworks es una herramienta excelente para crear prototipos web y de aplicaciones y está enfocada a ello con herramientas específicas como la creación de múltiples páginas, estados, símbolos, herramientas que Photoshop no tiene.

– Con FW es posible abrir archivos de Illustrator totalmente editables. También se pueden guardar los archivos como Ai o EPS.

– Las Master Pages son fundamentales para el diseño de una web o aplicación multipágina porque permite crear secciones como la cabecera o el menú y utilizarlas en todas las páginas sin tener que copiarlo en cada una.

– Las herramientas de exportación de páginas o zonas de la página de FW es mucho mejor que la de Photoshop.

– En FW se puede exportar una sola página o todas de una vez y que cada página tenga un tamaño determinado, lo cual es ideal para crear diseños para diferentes soportes. Illustrator tiene las multipáginas que funcionan de forma similar.

– A la hora de presentar al cliente una prueba de una web o aplicación, con Fireworks puedes crear el prototipo html de forma que el cliente puede ver en su navegador como quedará la web, utilizando los botones del menú y viendo la interactividad real de la web navegando entre todas las secciones sin tener que escribir nada de código. En Photoshop simplemente no existe esa posibilidad. Para mi esta es una de las características mas importantes de FW en la ”Vida Real”. Cuando un cliente encarga el diseño de una web y quiere ver una prueba lo que quiere es abrir su navegador y ver como quedará su página y navegar entre las secciones y no ver un pdf estático con indicaciones escritas.

– La utilización de símbolos también es importante y mejora notablemente la productividad. Puedes cambiar múltiples botones o secciones de la web simplemente cambiando un solo símbolo.

– La herramienta Encontrar y sustituir permite sustituir un texto, color y otras propiedades de forma automática en una sola página o en todas. Si por ejemplo el cliente solicita un cambio de tipo de letra con esta herramienta se pueden cambiar todos los textos de toda la web de una sola vez.

– Existen infinidad de extensiones que hacen de Fireworks una herramienta aún mas poderosa; en la página de John Dunning se pueden encontrar muchas de gran utilidad como Generate web assets, que crea imágenes directamente sin tener que crear Slices, SVG para trabajar con el formato vectorial SVG en FW, Lorem Ipsum, que crea texto ipsum directamente en FW, GRIDS, para crear Grids que facilitan el diseño web, etc … Si quieres leer mas sobre el trabajo con extensiones en Fireworks pulsa aquí.

– Cuando se trabaja con patrones y componentes se suelen crear librerías que se guardan para su utilización en varios proyectos, especialmente cuando se trabaja en equipo. Una combinación excelente para trabajar con patrones se consigue con Fireworks y Evernote. Mas información >>

Existen millones de comentarios en la web criticando la decisión de Adobe y francamente espero que escuchen a los usuarios de sus aplicaciones y creen una herramienta que se adapte realmente a las necesidades del diseño web/UI. Dicen por ahí que Adobe ya está trabajando en una nueva herramienta …. ojalá !! Yo de momento sigo usando FW, sin duda la mejor herramienta para diseño en pantalla actual.

Mas información:

Extensiones para Fireworks
Artículos de Smashing Magazine sobre Fireworks
Firma la petición para liberar Fireworks

Diseño y Desarrollo web para MiPequeñaAyuda Perú

por admin. 0 Comentarios

MiPequeñaAyuda Perú es una ONG  que ayuda a eliminar la pobreza en Perú mediante la provisión de educación y formación profesional a las personas que de otra manera no tendrían acceso a estos programas formativos.

La empresa necesitaba crear una web donde mostrar la información específica de la ONG en Perú, todo ello editable por el cliente. Para ello se creó el diseño y se adaptó al gestor de contenidos WordPress.

La web se puede visitar en este enlace

MiPequeñaAyuda Perú

MiPequeñaAyuda Perú

 

Adobe presenta la Suite Edge con nuevas herramientas de diseño web

por admin. 0 Comentarios

Adobe Edge Products

El pasado 24 de Septiembre Adobe presentó las nuevas herramientas disponibles para la web , apostando claramente por html5 , css3 y javascript como las tecnologías del futuro.

La nueva suite se llama Adobe EdgeTools & Services y se compone de las siguientes herramientas:

EDGE ANIMATE:

Es un nuevo sistema de animación hecha en html5 y que básicamente precarga la librería JQuery y exporta las animaciones a CSS3.

EDGE REFLOW:

Se trata de una herramienta para crear diseños basados en rejillas y se adapten a cualquier dispositivo.

EDGE CODE:

Es un nuevo editor de código hecho en HTML5, y JS que podrá usarse tanto en el ordenador de escritorio, como el portátil o el Ipad y en local o en la nube; pretende competir con otros editores de moda y mucho mas livianos que Dreamweaver como Sublime Text o Coda entre otros …

EDGE INSPECT:

El antiguo Adobe Shadow aparece con este nuevo nombre; básicamente es como el Web Inspector de Chrome pero multiplataforma. Muy recomendable.

EDGE WEBFONTS:

Para competir con Google Web Fonts y otros proyectos que permiten utilizar fuentes gratuitas en los diseños web , Adobe ha creado una nueva herramienta para utilizar fuentes Open Source mediante CSS3.

Con ADOBE TYPEKIT se podrá utilizar fuentes comerciales.

PHONE GAP:

Otra herramienta surgida de una adquisición de Adobe que hace poco compró PhoneGap, proyecto que permite la conversión de aplicaciones creadas en HTML5 a aplicaciones nativas para las diferentes plataformas móviles y de escritorio.

ADOBE PROTO:

Si bien no pertenece a la nueva familia de productos Edge, es una nueva herramienta que permite crear wireframes interactivos y prototipos de sitios web y aplicaciones móviles en nuestra tableta, por ahora solo Android ;(

Mas información en la web de Adobe

Diseño y desarrollo de blog para Cartoon Club

por admin. 0 Comentarios

En este caso el cliente necesitaba realizar un blog que tuviera el mismo diseño que la página de su empresa Cartoon Club, integrando así su web con una plataforma que le permitiera escribir artículos, insertar imágenes y vídeos, etc … de forma sencilla.

El gestor de contenidos elegido fué WordPress por su facilidad de uso para el cliente, por lo que se creó una plantilla específica.

Blog de Cartoon Club

Blog de Cartoon Club