Diseño web

Desde Ateneu Popular recojo esta particular utilidad web que bien podría hacer las delicias de más de uno. Coged el concepto del Lorem Ipsum y aplicadlo en imágenes.

La idea está bastante bien, yo conocía Ipsum Image [en] pero Pixum está mejor. Lo que pasa es que no sé yo hasta qué punto es útil en el día a día. Si es para colocar una imagen temporal, ¿no vale lo mismo una cualquiera que tengas o el típico rectángulo? Pero oigan, que la mención se la merece porque tiene su miga.

Lorem Pixum [en]

PD: Eso sí, si queréis maquetas de calidad, lo mejor que podéis usar es {placekitten} :3

Nano en Twitter colgaba un valioso recurso para los que sólo sabemos hacer la o con un canuto en términos de programación. Free jQuery & CSS templates tiene como título la web y ofrece descargas gratuitas de plantillas bastante resultonas, funcionalmente hablando. Que si una con el footer pegado siempre abajo, que si otra con la navegación siempre visible… Esas cosas que para los que ya estáis puestos os resultan super fáciles de hacer pero que pueden conseguir que especímenes como yo pidan ayuda a seres divinos. Por lo tanto, bienvenidos sean!

Free jQuery & CSS templates [en]

Aunque no soy de los que va poniendo enlaces a temas de Wordpress debido a la gran variedad que hay y que no se puede tener contento a todo el mundo, creo que este caso en concreto es realmente interesante y muy válido para tenerlo en cuenta.

Knowledgebase es un tema que se puede encontrar en WPBundle [en] y que me parece una elección realmente acertada si nos queremos montar, por ejemplo, un almacén de recursos y tenerlo todo bien organizadito. La verdad es que ha sido como un flechazo a primera vista con el tema en cuestión y se adapta muy bien a las necesidades que se me ocurrían en su momento para hacer precisamente una web de ese estilo.

Echadle un ojo a la demo a ver qué os parece. La pega es que actualmente no se puede comprar individualmente este tema y hay que hacerse con el pack completo que ofrecen. Aún así creo que la inversión merece la pena viendo todo lo que adquieres.

Knowledgebase [en] (Me lo enseñó RUDE)

Después de traerme en su momento Sencha Animator, hoy y gracias a Pumpkin descubro otro recurso similar que os puede ser de utilidad para facilitar la tarea de crear animaciones con CSS de la misma manera que son (creo) de muchísima ayuda las tweenlibrary en Flash. Echadle un ojo y trastead.

Ceaser, CSS Easing Animation Tool [en]

Ahora más que nunca está a la orden del día el uso de media queries para poder ofrecer una versión adaptada de nuestros sitios web en función del dispositivo que esté haciendo la petición. Para que nos entendamos todos y en plan rápido nos sirve para decir por ejemplo “oye, si estás viendo la web y la ventana del navegador tiene un ancho inferior a 600px, muestra la web con esta CSS. Si no, usa esta otra hoja de estilo”.

No es que sea nada nuevo pero con el auge de dispositivos móviles y tablets la variedad de dispositivos y características que se deben contemplan a la hora de diseñar para web hacen recomendable el uso de estos métodos.

Bueno pues Media Queries es un showcase de sitios que adaptan sus contenidos de una manera efectiva. Parece que a día de hoy, hay galerías de todo y para todos.

Media Queries [en]

De los mismos creadores de Android Patterns me traigo un recurso super útil si estáis desarrollando aplicaciones para los juguetitos de Apple.

Si usáis Fireworks sabéis que es bastante fácil añadir interactividades simples con las que dotar al prototipo de un aspecto más cercano al desarrollo final que el que puede mostrar un simple jpeg. Ahora, con TAP, tenemos la posibilidad de incorporar nuevas habilidades a nuestros prototipos pensados para el iPad o el iPhone: detección de gestos o transiciones…

Acaba de salir del horno pero tiene muy buena pinta. Y todos estos “extras” son bienvenidos y agradecidos a la hora de presentar los prototipos, ¿verdad?

TAP, desarrolla prototipos interactivos para iPad y iPhone con Fireworks [en]

Este año tengo dos frentes abiertos en los que me gustaría meter la pezuña. Uno de ellos es marcar de cerca el asunto DPI para tenerlo bajo control y estar al tanto de lo que se cuece. En cualquier momento aparece un monitor de alta densidad y puede empezar la fiesta. Pero hasta la fecha parece que lo tengo controlado.

El otro es el ponerme de una vez por todas a ir probando cosas de HTML5 y CSS3. Se ven cosas verdaderamente resultonas como Youzee (aunque la culpa son esos sujetos que se dedican a hacer iconos-ilustraciones tan chulas) y no parece ser muy complicado. Además podemos ayudarnos de aplicaciones como Sencha, ¿no?

Total, que estoy buscando libritos que oler leer y tenía guardados los de A Book Apart. Parecen ser un buen punto de inicio (nada que entre en demasiado detalle) y os quería dejar el enlace y preguntar si en la sala alguno se los ha leído.

A Book Apart [en]

Nota mental: Recordad que en Rosenfeld [en] también hay material con muy buena pinta. Guardad vuestras carteras o ateneos a las consecuencias!

Para los que somos un poco ceporros con el código, nos gusta que las cosas sean sencillitas de implementar. Y por fin tuve una excusa hace poco para probar Nivo Slider y me ha parecido un plato de muy buen gusto.

Nivo Slider es un slideshow que corre bajo jQuery, muy sencillo de usar y de configurar. En la web se puede ver una demo directamente y tiene toda la documentación en la que se explican sus características: navegación por teclado, tipos de transición, configuración…

Nivo Slider [en]

Tirando del autobombo que me caracteriza de cuando en cuando, quería comentaros que ha salido hace poquito el último curso que realicé para los amigos de video2brain. A estas alturas poco puedo decir sobre su servicio que no haya dicho ya pero a pesar de que me puedan decir que me repito más que la fabada, los cursos que ofrecen sirven como una plataforma de aprendizaje realmente válida y con unas opciones de suscripción muy, muy ajustadas. Os lo dice uno que se ha empapado de los cursos de After Effects.

En este caso han querido iniciar los cursos de Wordpress con un servidor. Wordpress de la A a la Z es un curso introductorio bastante extenso que sienta las bases sobre el uso y disfrute de este CMS.

No hablaría de los cursos aquí si no estuviese seguro de que aportan un mínimo de contenido de calidad. Incluso podría hacer cursos como churros (tanto en velocidad como en calidad) y me pagarían más. Pero prefiero hacer menos y hacer algo válido y potable. Por eso os sugiero que si estáis empezando (absténgase usuarios avanzados en este caso), le echéis un vistazo al índice a ver qué os parece. Y si tenéis alguna sugerencia o lo habéis visto y queréis comentarlo, soy todo ojos.

Y si queréis dejar el comentario porque se sortearán 3 accesos al curso entre todos ellos pues igual os apetece más.

Ah, y si os miráis el de Fireworks ya os tendré que invitar a algo

Se me ha olvidado un detalle importante, la fecha límite xD. El sorteo se hará el lunes 21 por lo que se podrá participar hasta el viernes anterior!

Febrero de 2011 llega con una nueva edición de DeviceDays, el evento que cada año organiza el equipo de BlocketPc, con un buen repertorio de talleres y conferencias, con sorteo de cositas y, por supuesto, al que sigue siendo gratis el acudir.

Las plazas suelen volar entre los que prueban una vez y luego repiten por lo que si os llama el desarrollo móvil y estáis por Barcelona el día 18 de Febrero, inscribiros ya. Servidor promete que será una buena experiencia.

DeviceDays 2011

Me escribe Jorge (en realidad me escribió hace ya bastante) para presentarme una iniciativa de Vimeo que le llegó a él. Se trata de liveBooks, un servicio destinado inicialmente a fotógrafos o personas que en un principio no saben o no gustan de pelearse con código o no quieren complicarse la tarea de tener sus trabajos presentes rápidamente en la red.

Se trata por tanto de un servicio que engloba gestor de contenidos, integración con Vimeo, servicios de diseño basados en plantillas que puedes tunear un poco, compatibilidad iPad, etc…, etc…

No sé; habiendo tantas opciones igualmente sencillas como Behance o Cargo (y gratis) a mí particularmente no me termina de convencer. Pero entiendo que si existe es porque hay un huequecito para un servicio así.

liveBooks [en]

Sigo pensando que los listados que inundan (y de los que yo mismo no me libro en más de una ocasión) llegan a “matar” el auténtico sentido de investigar e informarse pero hay alguno que merece ser destacado… al menos un poquito.

Es el caso de 60 Questions to Consider When Designing a Website, una lista de preguntas que vale la pena hacerse a la hora de ponerse con las manos en la masa. Unas están bien, otras son lógicas y otras te valdrán la pena en función del tiempo/presupuesto del que dispongas. Por eso, si no estás muy puesto en la materia, échale un ojo.

Además enlazan a una pequeña “checklist” que considero también lo suficientemente potable como para haceros conocedores. Ahí van los linkitos:

60 Questions to Consider When Designing a Website [en] + 25‐point Website Usability Checklist [en][PDF]

Descubrí la existencia de CSS Barcelona por la entrevista que le hicieron hace poquito a María de La Fábrica Verde y me la he guardado para revisar con más calma.

Me he enterado ahora que también tienen entrevistas a Míster Sutilo o a Torres Buriel. No negaré que las entrevistas a gente del sector siempre me han fascinado porque te ayudan a entender el lado humano de la profesión.

Sirva esto como recomendación para agregar CSS Barcelona en nuestros marcadores favoritos ya sea por las entrevistas y contenidos del blog o por el servicio de galería CSS que también ofrecen y en el cual podemos subir nuestros trabajos web. Asi que ale, todos “pa’dentro”

CSS Barcelona

Me ha resultado interesante reseñar este tema de Wordpress de esos que podemos usar cuando estamos haciendo cambios o planeamos lanzar una nueva web. Porque hay unos cuantos pero no había visto hasta la fecha uno que te permitiese mostrar una barra de progreso y todo. (Lo ví intentando acceder a TMC)

Beback es un tema desarrollado por Wordspop totalmente grauito por lo que si tienes alguna página aparcada, quizá te interese guardártelo.

Wordspop [en]

Ahora que ya es oficial el anuncio por parte de Adobe de su opción como editor de animaciones basadas en el nuevo estándar HTML y propiedades CSS3, Adobe EDGE (nombre que por cierto comparte con su más que recomendable Newsletter Edge [en]), me gustaría reseñar rápidamente Sencha Animator.

Viene a ser una herramienta que nos permite también trabajar en una especie de “línea de tiempo” y realizar animaciones de una manera mucho más intuitiva que si picamos el código directamente. A los que habéis animado en Flash y programas similares seguro que la tarea se os hace más llevadera ¿He dicho que es gratis? Bueno, hace falta registrarse para tener un nombre de usuario pero creo que para trastear merece la pena.

Sencha Animator [en]

Puedo jurar y perjurar que pensé que había hablado anteriormente sobre Basekit pero o el buscador no funciona bien o es que realmente no hay nada en los archivos.

Sea cual sea la realidad, ya es tarde porque pienso hacerlo ahora mismo. Y ¿qué es Basekit? Pues viendo el vídeo que tienen colgado en la web no me termina de quedar del todo claro. Pero me ha recordado mucho a Divine [en], esto es, herramientas que intentan facilitar en gran medida la tarea de pasar un diseño a algo entendible por un navegador. Lo que viene siendo código, vamos.

En este caso Basekit es una aplicación online con diferentes cuentas y precios [en] para intentar adaptarse a las necesidades de grupos de usuarios diferentes.

Siempre tendremos la alternativa de externalizarlo con sistemas como PSDaWEB o liarnos la manta a la cabeza con Drawter. Sea cual sea la opción escogida, la idea es que la línea entre diseño y código, se haga un poco menos empinada :)

Pensé que la Borderitis era algo que sólo yo había sufrido en algunos casos pero ya veo que es un mal común.

Excelente y super simple el artículo en Usability Post [en] sobre el exceso de anidamiento y zonas bordeadas que a veces se nos presenta al querer diferenciar zonas en web y que tiene solución bastante sencilla. Por si alguna vez te ha pasado y quieres ver que no estás sólo :D

A Mild Case Of Borderitis [en]

Francisco nos recomienda que le echemos un vistazo a HTML5 Boilerplate donde se nos da la oportunidad de descargar unas plantillas de documento web bien preparaditas y organizadas para no perder ni un detalle.

Su autor, míster Paul Irish [en] nos asegura que están basadas en todo el tiempo que lleva trabajando en el mundillo del desarrollo web y que ha intentado optimizar los archivos de la mejor manera posible. Viendo todo el trabajo de este hombre, seguro que más de uno agradecerá que comparta esta información.

HTML5 Boilerplate [en]

Buscando en Google a ver si se sabía algo sobre la futura nueva versión de Indexhibit me encontré a Stacey. La vi un poco paliducha y parece poca cosa pero su belleza está en el interior. Prueba a buscarle un huequecito en tu alojamiento y seguro que haces buenas migas con ella. Al menos eso es lo que me dijo a mí. Pero sigo siendo fiel a Indexhibit, he resistido a la tentación.

En cualquier caso, Stacey parece una muy buena opción para montarse sistemas de gestión de contenido rápidos que no den muchos quebraderos de cabeza, ¿verdad?

Stacey [en]

No sé cuántas veces he dicho ya que no soy programador de nada pero que me entretiene mucho “bichear en el código”. Por eso cuando me hablan usando “palabros” como API, JSON o cURL yo empiezo a asentir con la cabeza y simplemente balcuceo: “ahá” o “ahhh”.

Pero hace poco se me metió entre ceja y ceja el querer mostrar en los posts el número de veces que lo habéis compartido en Twitter o en Facebook. ¿Por qué? Puro “márketing de andar por casa”. El efecto llamada de ver que algo se ha compartido 30 veces siempre es más poderoso y anima a que alguien más lo haga, que el ver un número cercano al cero patatero o un simple “envíalo a twitter”. Ojo, ambos funcionan pero es cuestión de buscar la efectividad máxima.

(more…)