Artículo de sombras en CSS sin emplear imágenes y como no morir en el intento – Chequeado en diferentes navegadores

Bueno, retomamos la costumbre de ir analizando recursos en este inmenso mar que denominamos internet, y la generosidad de los códigos que abundan por aqui, me tomaré un poco de tiempo para analizar algo tan mítico, como el mismo problema definido en el título.

Sombras bajo CSS, quien no ha renegado recientemente o alguna vez con ello. Esto implicaba un trabajo arduo entre el Photoshop y el manejo del CSS para que el diseño final quedara bien.

Ahora bajo CSS3 no es necesaria la implementación de imágenes para lograr este efecto, de hecho, como Nicolas Gallagher transcribe en su blog, es mucho mas simple lograrlo con lineas de código bajo CSS.

En su blog, principalmente en el articulo que hace referencia, nos brinda un ejemplo muy claro de como se implementa y se vé correctamente esta aplicacion de css en http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Ni lerdo ni perezoso, opté por analizar que navegadores soportan CSS3(mas que CSS es el efecto en si lo que soportarían, ya que según los navegadores las características soportadas varían en función a la empresa y que hayan decidido tomar, ya que del vamos todavía no hay concenso en el empleo unificado de atributos)  me dí con el siguiente resultado:

• Safari 4 y versiones superiores (lanzamiento inicio 2009)
• Opera 9 y versiones superiores (lazamiento mediados de 2006)
• Firefox 3.5 / Firefox 3.6 / Firefox 4 (lanzamiento mediados 2009)
• IExplorer 9 (15 sept. de 2010)

y la parte triste, pero celebre de los no soportados Seamonkey 1.1 / IExplorer 7 / IExplorer 8 (19 de marzo de 2009)

(Notese la inclusión del Seamonkey como premio consuelo y  la tan obvia tardanza ciertas implementaciones que forman parte de «CSS3» en IExplorer)

Les dejo el enlace para que puedan estudiarlo e implementarlo en sus sitios y proyectos. AQUI

Saludos!

 

 

 

Diseñadores y Photoshop CS4: resumen de atajos de las combinación de teclas para mejorar la productiviad

Hoy gracias al blog de http://morris-photographics.com les adjunto un listado completo de la combinación de las teclas para mejorar la rapidez de trabajo con Adobe Photoshop CS4

Se trata de 4 hojas con los atajos fundamentales, con lo cual se puede mejorar sensiblemente el rendimiento de trabajo, y evitar «desplazarse» de aqui para allá con el puntero del mouse.

En efecto, la mejor manera de aprenderlos, es ponerlos en práctica.

Código de interés: Multimedia Gallery for Images, Video and Audio… muy completo

Viendo dentro de los fotos y accediendo a diferentes recursos de galerias creadas en JScript, Flash, etc. ingresé a un galeria muy particular por sus características:

HTML5 compactible

Fallback en Flash para navegadores que no soporten HTML5

Muestra Imagenes, Video y Audio

Estética muy agradable

Facil de implementar

Listado de sitios para trabajo freelance, y algún recurso extra. Recomendado para los que inician.

Un poco a colación de lo que hablaba la vez pasada con un colega, sobre la posibilidades que te brinda internet y los espacios que uno puede o no cubrir con los trabajos, buscando por la red me topé con una lista mas que interesante de sitios que ofrecen trabajo para freelancers.

En esta caso la lista se divide en dos, donde en la primera se orienta mas a realizar trabajos de acuerdo al que mejor precio (para el cliente) proponga para el desarrollo del proyecto.

Es un buen lugar para inciar como también, será necesario contar con una cuenta en Paypal y tener nuestra tarjeta de crédito internacional, para poder realizar extracciones de dinero sobre una cuenta determinada. Es bueno resolver este tema primero, ya que una vez iniciado un proyecto, no queda mucho tiempo al menos hasta agarrar otro trabajo, y poder cobrarlo.

Hoja de Guia para diseñadores en HTML5

HTML5 y la nueva tendencia, googleando por ahí encontré la famosa Cheatsheet para HTML, la cual es muy util al momento de implementar un sitio bajo HTML5.

Basicamente esta hoja de guia es un ayuda memoria o atajo para no tener que estar buscando en la Red y naufragando en el intento.

Les adjunto la sabana con la hoja y las diferentes opciones, tanto desde Tags nuevos, obsoletos y los que se conservan, los atributos, eventos y demas.

Usabilidad y el objeto de hacer las cosas facil

Que necesitas saber acerca de la usabilidad

Ejemplo en la imagen sobre Usabilidad, no es lo lindo sino lo util y simple

Tener una buena estructura y navegabilidad con una distribucion pobre, no te brindara un futuro brillante para tu sitio web o aplicacion.
De igualmanera, tener una buena distribucion, con una pobre estructura y baja navegabilidad, tampoco te daria futuro alguno.
El aspecto estetico es un factor importante, pero hay que mantener en mente la usabilidad, y debe ser la primera en la lista.

Jscript para resolver problemas con CSS

Empleando Javascript para resolver 12 poblemas comunes en los navegadores
Original: Using Javascript to Fix 12 Common Browser Headaches

Leyendo el articulo de Noupe.com realmente cotejaron de manera precisa los
tipicos problemas que un diseñador a la hora de maquetar se enfrenta con las diferentes interpretaciones e implementaciones de (x)HTML.
Enumero brevemente los puntos, y al final les dejo el link para que accedan a leer con mas detalle cada uno de los problemas:

1 ) Ajustando igual altura en cajas (DIV) – sin usar tablas.
2 ) El muy conocido problema de PNG para IE6
3 ) Intercambiando CSS con JScript
4 ) Mejorando los selectores en CSS segun navegador.
5 ) Soporte de maximo y minimo ancho y alto para las propiedades.
6 ) Centrar elementos vertical y horizontalmente.
7 ) Mostrar correctamente comillas (inclusive anidadas) en IE
8 ) Incrementar el tamaño de los «Click targets» o zona para click, para obtener mejor atencion de los navegantes.
9 ) Retardar la carga de imagenes (grandes) en tu sitio. O como tambien se busca carga parcial de imagenes.

diseño de interfaces o GUI UX

Navegando y twitteando por alli llegué a un post, muy interesante donde nos hablan sobre los diferentes tipos de interfaces o Interfaces de usuarios, o del ingles User Interface, existentes.

Considero, tomando como ejemplo la aplicación del concepto de diseño sobre sistemas, que este tema al momento de desarrollar un sistema, no es menor, y volcandonos a la cuestión WEB creo que mas importante todavía ya que el feedback sobre la experiencia de uso que tendremos contra nuestro sitio, será un tanto menor, al no contar cara a cara con el usuario el cual nos guiaría en la ventajas y falencias que nuestro diseño presente. Básicamente estos diseño están orientados a objetos relacionado con la realidad.