Diseño web Ewhere

Podemos sentirnos afortunados de guardar muy buenas relaciones con muchos de nuestros clientes. Y Treelogic es uno de ellos.
Si ya nos encargaron en su momento la elaboración del catálogo gráfico para su proyecto Ewhere y la posterior adaptación a otro idioma, ahora nos confiaron la tarea de trasladar toda esa información a la red.
El principal problema con el que contábamos inicialmente fue el limitadísimo tiempo de desarrollo para la página por lo que debíamos pensar y actuar rápido. Afortunadamente contábamos con mucho contenido ya creado para el catálogo y podríamos centrar esfuerzos en elaborar la idea gráfica y el posterior desarrollo técnico.
La web de Ewhere está disponible en tres idiomas (español, inglés y portugués). Empleamos en ella un reproductor de vídeo Flash creado en el estudio, una galería javascript y Cufón para el reemplazo de textos. El resultado es una web de corte sobrio y sin elementos recargados, manteniendo así los requisitos iniciales que Treelogic nos solicitó.
La web con el diseño final está disponible en www.ewhere.es y también la tenemos en nuestra sección de trabajos de diseño web
Diseño web para Marbel

Hay veces que las necesidades para una página web son bastante concretas y no requieren de un desarrollo largo o de un proyecto excesivamente complicado. Buscar la presencia en Internet, explicar brevemente tus servicios y ofrecer un contacto directo con el cliente son las premisas que nuestro cliente buscaba en esta ocasión.
Para ello elaboramos una web muy sencilla, realmente tampoco los contenidos necesitaban de una divisón en secciones, en la que aplicamos los elementos característicos del cliente: logo, tonos corporativos…
Simplemente por destacar algún punto en concreto, preparamos unas pequeñas ilustraciones para darle un aspecto más desenfadado a la web e hicimos uso del plugin de jQuery scrollTo para el efecto de desplazamiento vertical de scroll.
Actualmente la web es accesible desde www.iemarbel.com. También tenemos otros desarrollos web a los que echar un vistazo.
Bienvenido CSS3
Aunque quizá sea demasiado pronto para darle una bienvenida con fuente de chocolate, figuritas de hielo y confeti sí que es buen momento para poder ir jugueteando con algunas de las características que esta nueva versión de CSS incluye y que nos van a poder permitir tener mayor libertad a la hora de crear gráficos para la web.
Realmente no tiene nada de malo el uso de imágenes estáticas pero el uso de propiedades CSS para generar los gráficos permite una mayor escalabilidad en el desarrollo y reduce algunos hipotéticos costes de producción. Si nos ponemos en un caso sencillo: creamos imágenes para unos botones en nuestra web y pasado un tiempo los queremos hacer más grandes. La imagen la tendríamos que rehacer por completo pero mediante el uso de algunas nuevas propiedades CSS nos podemos ahorrar estos pasos si hemos trabajado bien la hoja de estilos.
Me refiero a propiedades que te permiten crear sombras y degradados. ¿Cuántos botones hemos hecho hasta la fecha con alguno de estos elementos? Pues eso.
Si os dejáis caer por esta web vais a encontrar un montón de información y recursos sobre el uso de CSS y, los más interesante, un buen puñado de herramientas como Lineas Gradients o Transforms para ir probando estas cositas y ver su efecto en tiempo real. Un lujazo para los juguetones como ya digo.
Target _blank sin target _blank (o casi)
Un truquito rápido para los que no somos programadores sino emponzoñadores de código
. Si necesitas que los enlaces de una página web se abran en una ventana nueva, lo lógico es tirar de target=”_blank” ¿verdad? El problema es que no pasa la validación XHTML y si somos muy tiquismiquis con esto la cosa se complica. rel=”external” sí que valida pero los navegadores actualmente no interpretan esta propiedad para abrir los enlaces en nueva ventana. Entonces, ¿cómo lo hacemos?
Aunque hay unas cuantas formas de hacerlo, la más rápida y sencilla es usar jQuery. Cargamos la librería y simplemente necesitamos una línea para que todos los links con rel=”external” automáticamente se puedan abrir en una nueva ventana:
$(’a[rel=external]‘).attr(’target’,'_blank’);
Más fácil imposible ![]()
Buscamos diseñadores freelance
Supongo que a alguno de nuestros lectores les sonará el concepto “morir de éxito”. Aunque actualmente no se ha dado el caso no queremos que llegue a ocurrir esta situación en el estudio y por ello hemos pensado expandir nuestras redes de contactos a fin de tener una cartera de perfiles para cubrir picos puntuales de trabajo.
Tenéis bastante información sobre nosotros en la web del estudio aunque por norma general somos bastante majetes y muy profesionales en lo que hacemos.
¿Qué estamos buscando? Pues actualmente necesitamos perfiles de diseñador web. Y cuando decimos diseño, es diseño y no maquetación. Evidentemente si también maquetas tus diseños, ese punto extra que tienes ganado. Además es casi imprescindible que te sepas manejar bien con Fireworks. Usamos este programa para definir todo el diseño completo de la web. Photoshop nos vale también aunque preferimos el primero.
Para que te hagas una idea del nivel que pedimos aproximadamente en diseño web puedes echar un vistazo a la sección de trabajos web o puedes echarle un vistazo rápido a esta recopilación de diseño web de [Q]. No te pedimos que lleves uno o diez años diseñando, simplemente que valores tus capacidades y seas sincero con nosotros cuando nos digas si te ves capaz o no de poder colaborar con nosotros al menos a un nivel similar al que puedes ver.
Somos muy responsables y por tanto pedimos a nuestros colaboradores que también lo sean. Si estamos metidos en un proyecto, desde un inicio dejamos claros puntos importantes como fechas de entrega, plazos, presupuesto o formas de pago para que luego no haya confusiones. Lo que no queremos es que a medio camino veas que se te queda algo grande y nos dejes tirados porque entonces todos tenemos un problema. Por nuestra parte intentamos que todo el desarrollo se haga de la forma más fluida posible y hasta ahora nadie nos ha podido echar en cara que seamos unos ogros.
¿Qué tienes que hacer si te interesa? Mándanos un correo a armando_arroba_q-interactiva.com con tu nombre completo, de dónde eres y un enlace a tu portfolio o a algunos de los trabajos que hayas realizado últimamente para web. Es importante que indiques en el asunto “diseño freelance”. También puedes indicarnos si tienes algún punto extra como que te manejas bien en maquetación web, sabes InDesign (también tenemos bastante de editorial) o se te da bien jugar al parchís.
Leeremos (y veremos) vuestros correos para poder teneros “a la vista” y daros un toque cuando os necesitemos (y puede que no sea muy tarde). ¡Muchas gracias!
We’re not dead
He visto que se estaba acumulando demasiado polvillo en el blog. Pero no es culpa nuestra, sus señorías. Es culpa de ellos! Los proyectos! Y el problema es que son demasiados. Pero si el Equipo-A podía con casi todo, el Equipo-Q no va a ser menos.
El año 2010 acaba de empezar como quien dice y tiene pinta de ser un buen año laboral (físicamente no puedo decir lo mismo. Ya he caído un par de veces presa del señor invierno): tenemos entre manos proyectos grandes, proyectos pequeños y proyectos de proyectos. Y son para clientes de aquí, de allí, de arriba y de abajo. De Flash, editorial, de web, animación… No nos preguntéis cómo dan algunos con nosotros pero el caso es que nos encuentran y cuando nos prueban, suelen repetir. Ya estamos preparando incursiones en tierras que nos pillan algo lejos en un principio como puede ser Dinamarca o Nueva York. Si es que Asturies ye internacional!
Puede parecer mentira, pero cuando dejas un cliente satisfecho, casi siempre vuelve. Y se van acumulando junto a los nuevos y llegan los momentos en los que tienes que decir: “por favor, coja número y espere”. La verdad es que hasta me hace un poco de gracia esta situación de “overclienting”.
Lo que pasa es que también se ha dado la situación que algunos de estos proyectos han requerido que nuestro [Q]Boss nos abandonase temporalmente y se fuese a explorar tierras madrileñas y catalanas. Y lo peor es que la cosa no acaba ahí. El periplo del jefe continua y me sumo yo al carro. El dúo sacapuntas se va a las frías tierras austriacas para preparar unos cuantos cursos en video2brain. El jefe tiene cosas chulas. Yo por mi parte haré un par de cursos de la cría del ornitorrinco y conducción extrema del triciclo. Y estamos en trámites de “engañar” a elOtro[Q] para que también se prepare unos buenos cursos de CSS más adelante. Os mantendré al tanto! Lo que pasa es que tardaré un poco porque a la vuelta, [Q]Boss se queda pero yo sigo mi travesía hasta Barcelona para formar parte del jurado de Select I.
Ya véis. Ni dos meses de 2010 y [Q] está que arde. Esperemos que sea buena señal y podamos seguir con vosotros por aquí!
Dale caña a tu Fireworks con extension manager!
A estas alturas muchos sabéis que soy de los que usa Fireworks en vez de Photoshop para el diseño web…y para muchas otras cosas en general. El caso es que pese a que lo considero realmente un muy buen programa (sí, se cuelga mucho, lo sé.), echaba de menos algunas cositas que sí que tengo en Photoshop y me hacían la vida más fácil. Una de ellas es el copy merged (copiar combinado creo que es la versión española). Lo echo MUCHO de menos en archivos con gran densidad de capas y elementos.
Total, que he desempolvado un viejo link que me pasó Rude para arreglar esto. Así de paso os descubro a John Dunning [en] y su MEGA colección de extensiones para Fireworks [en].
Si no lo conociáis y usáis este programa, echad un vistazo a la cantidad de buenos recursos que tiene ahí dentro y que estoy seguro os harán mejorar vuestros quehaceres con el programa. Yo ya tengo mi Copy Merged [en] en Fireworks, además de muchas otras cosas más como SelectPoints [en] y la imprescindible Smart Knife [en]. Parece que los Reyes Magos han llegado antes de lo previsto
Y de paso recordad que en Fireworks Developer Center [en] siempre hay mucha miga interesante.
Safari también tiene secretos
Y es que hay cositas que no sé por qué se tienen escondidas a nosotros, los usuarios “pezuñiles”. Sí hombre, esos que no sabemos realmente qué estamos haciendo cuando pulsamos el botón rojo pero que no podemos dejar de sentirnos atraídos por tan notorio color. A mí me pasa lo mismo con lo que hay detrás de una web, que no tengo realmente idea de HTML y CSS pero me gusta toquetear.
Aunque realmente lo he descubierto gracias al compañero Canteli por otros temas, el caso es que ni Harry Potter se sabe este truco de magia. Apunta:
- 0- Cierra Safari si lo tienes abierto
- 1- Abre Terminal
- 2- Escribe
defaults write com.apple.Safari IncludeDebugMenu 1 - 3- Vuelve a abrir Safari y te encontrarás con un nuevo menú.

Bonito, ¿verdad? Toda una especie de Web Developer pero en el navegador más conocido de la manzanita mordida. Realmente es el menu Debug del navegador pero supervitaminado para que tengas acceso a un montón de información útil: tiempos de carga, código HTML y CSS, consola de errores…
Como pega pues ponerle que el código no se puede editar on the fly como sí te lo permite Firebug por ejemplo. Aún así, un menú realmente útil que ya no volverá a ser invisible para mí.
PD: En realidad el menú de desarrollo también lo puedes activar desde Preferencias >> Avanzado. Pero no es la opción “geek” xD.
Mamá, quiero ser Walt Disney

Recuerdo cuando era pequeñajo que me dedicaba a hacer sencillas animaciones en el pie de la mayoría de libros de texto que tenía en clase. De aquellas no tenía conocimiento teórico de la materia, obvio. Pero es sencillo imaginarse cómo crear movimiento mediante la ligera transparencia que existía al superponer una página encima de otra. Movía un poquito una patita, otro poco un bracito y así n-veces hasta hacer que los monigotes corriesen de un lado a otro del libro pegando volteretas y haciendo movimientos que nuestras leyes de la física pondrían rápidamente en entredicho.
Han pasado muuuuchos años y yo no he vuelto a animar en la vida. Tampoco es que haya dibujado mucho más la verdad. Por eso, este proyecto ha sido uno de los retos más difíciles con los que me he visto la cara hasta ahora.
¿Cueces o enriqueces?
Señores, hoy he tenido una revelación. He visto cosas que jamás creeríais que existen, mundos en los que no hay políticos corruptos y en los que no existe el spam. Y también he visto macarrones. Sí, macarrones.
Supongamos que tienes un cliente al que le empiezan a sonar las tripas. Él, adorador que es de la buena y tradicional pasta italiana, te pide un plato de macarrones con el que saciar su apetito. Y tú sabes que un comensal satisfecho es un comensal que repite. Por tanto, le informas de tu buena labor cocinera. Narras que una buena ración de macarrones a la parmesana, preparados con mimo y esmero, transportaran sus papilas gustativas más allá donde el Avecrem jamás ha llegado.
Nuestro querido y futuro consumidor no tarda en babear y a frotarse el abdomen ante lo que se avecina. Pero la felicidad se torna en consternación cuando descubre horrorizado que dicho manjar le va a suponer un desembolso que no termina de entender. Pero si son unos macarrones!
La jornada concluye con un cliente agridulce que se ha quedado con hambre tras haber degustado un buen plato de macarrones cocidos y recalentados en microondas. A un precio bastante más ajustado, eso sí. Quiza la próxima vez debiera pensar seriamente si el ahorro es un beneficio o no. Y que vivan los macarrones!