por Omar Benyakhlef | Diseño de páginas web
Efecto glossy con Javascript
He encontrado en Netzgesta, un interesante artículo sobre cómo convertir botones normales en botones tipo glossy.
Ya hablamos en su día de la tendencia en diseño web que supuso este tipo de efecto, brillos, sombras,… Se trata de un scipt que redondea y da brillo a cualquier imagen que coloquemos en la web.
El resultado final es muy bueno, lo que luego tendréis que valorar es si merece o no la pena para vuestro caso particular, ya que en ocasiones consumirá mucho menos peso trabajar esas imágenes en photoshop.
Ver post original y descargar js
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Optimizar la CSS al máximo
Cuando hacemos un diseño web, tenemos que tener muy en cuenta cómo luego vamos a optimizarlo de la mejor manera, para que que no pese demasiado.
En el post anterior, Gabriel, me preguntaba cómo optimizar la CSS, espero que este post, os sirva de algo.
Hace un par de años, recuerdo volverme loco para hacer páginas que no superasen en ningún caso los 100kb de peso, era una auténtica pesadilla, ya que sólo la gráfica te llevaba casi la mitad.
Hoy en día las velocidades de carga son más rápidas, pero eso no significa que podamos permitirnos hacer nuestras páginas sin optimización alguna.
Además, cada vez son más, los usuarios que nos conectamos con un terminal de bolsillo, por lo que se agradece muy mucho, el poder navegar con fluidez sobre una página «ligera».
Tendremos pues que intentar optimizar al máximo nuestras imágenes, el Html y los archivos que mandamos cargar al navegador cuando lee nuestro código, como los .js y los .CSS
En este post vamos a tratar de conseguir la mejor CSS para nuestra web.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
ancho de capas con CSS
Ya hace tiempo hablábamos de cómo en diseño web, las tablas habían dejado paso a las capas, pues bien, uno de los problemas más habituales a los que nos enfrentamos es el poder controlar el ancho justo de una capa, ya que son varias las etiquetas que hacen que este ancho se vea alterado.
Quizás sea un tema demasiado obvio para la mayoría, pero dado que he tenido varios mails preguntándome por este aspecto, he decidido hacer un post para aclarar ideas.
Es frecuente si no conocemos bien las CSS, ver cómo a pesar de marcar el ancho con un width de una etiqueta <div>, este se ve alterado al meter los padding, margin, …
Esta es la explicación, de lo que sucede en estos casos. El ancho total de una capa, es igual a la suma del padding-left + padding-right + border-left + border-right + width Quizás sobre la explicación, pero ahí va:
- margin – es el espacio que dejamos fuera de la capa, a partir del cual comenzamos a pintar nuestra capa.
- padding – es el espacio interno a la capa, el que hará que se definan los márgenes dentro de la capa.
Aunque por defecto se supone que los navegadores leen como valor cero, el no declarar las etiquetas padding, border o margin, (padding: 0px; margin: 0px; border; 0px). Yo, para no tener problemas con los navegadores, coloco los bloques «contenedores» con sus propiedades a cero y luego dentro de ellos coloco otro div que tenga los padding, margin,.. que necesite para la maquetación. Normalmente comienzo a maquetar con el photoshop abierto. Mido los contenedores en el psd y los voy formando en el Html. Al dejar los «contenedores» sin bordes ni espacios, consigo encuadrar toda la web, y que se vea exactamente igual tanto en Explorer como en Firefox o cualquier otro navegador. En todo caso es conveniente siempre que estamos montando un Html, ir probando los avances, al menos, en Explorer y Firefox. POST RELACIONADOS:
por Omar Benyakhlef | Diseño de páginas web, Photoshop
Ilustrar con Photoshop
Photoshop es para el diseño web y para el diseño en general una herramienta totalmente imprescindible, hoy con gran sorpresa, una web de un ilustrador kuwaití, Ahmed Alrefaie, en ella muestra una galería de trabajos realizados únicamente con Photoshop.
El autor comenta que sus diseños son de principio a fin realizados con Photoshop, y que viene a tardar un mes en realizar cada una de sus obras, no dice nada de cuánto tiempo dedica al día 😉
Da la impresión en alguno de sus diseños, de que coge fotografías reales y las vectoriza para luego añadirle todo tipo de sombras y detalles, en cualquier caso, se trata de muy buenas ilustraciones y de una técnica muy refinada, que al menos hará dudar a todos aquellos que no veían en Photoshop una herramienta para ilustradores.
Ver portfolio de Ahmed Alrefaie
Más post relacionados con Photoshop
All my artwork is created from start to finish on Photoshop CS3, using only a mouse, I create outlines using the Pentool 
provided then color. Some refer to it as a Vector, and others Vexel, eitherway it uses precise and accurate lines and shapes in order to create sharp artwork. An average artwork I create takes approx. one month. That said I am lazy ;P
por Omar Benyakhlef | Diseño de páginas web
¿Para qué resolución de pantalla diseñar?
En el diseño web, uno de los primeros factores que valoramos a la hora de empezar a diseñar, es fijar un ancho máximo para que no se produzca scroll horizontal. Ya vimos en un post anterior, que el scroll vertical no era para nada preocupante, pero sin embargo el horizontal es casi un «pecado mortal».
Desde hace unos años, los diseñadores web, tomamos como referencia la resolución de 1024px de ancho. Teniendo en cuenta que tenemos que dejar espacio para la barra lateral del navegador (la barra de scroll) cuya medida por lo general es de unos 20px, nos quedaría un ancho máximo de unos 990px.
Yo particularmente tomo como referencia los 960px, ya que es divisible por una cantidad mayor de números.
Bien, parece pues, que para los diseños de webs de ancho fijo, la resolución de 1024px se ha estandarizado.
Si además compruebo las estadísticas que me da mi google analytics, veo que la mayoría usa esta resolución de pantalla, 23,67%, seguido por un 18,14% que usa 1280x1024px, un 17,75% que usa 1280x800px, sólo un 0,97% que usa 800×600 y el resto, resoluciones mayores a 1024px.
Son muchos los diseñadores que ocupan el 100% de la página, adaptando en porcentaje los anchos de sus CSS. A mi particularmente no me gusta, prefiero controlar el ancho de mis diseños, precisamente por eso, porque han sido pensados para un determinado ancho. Además 960px es suficiente espacio para distribuir de una manera legible toda la información. Además me gusta que quede «aire» alrededor de la página.
En todo caso creo que hemos de tener muy en cuenta el tipo de usuario que va a ver nuestra web, y dado que la inmensa mayoría usa los 1024px de ancho, yo seguiría diseñando para esa resolución, a no ser que se tratase de un tipo de web muy particular o con un target muy particular en los que las circunstancias aconsejasen hacer un diseño más ancho o ¿por qué no?, más estrecho.
¿Y tú qué opinas?
Más entradas relacionadas con la resolución de pantalla
por Omar Benyakhlef | Diseño de páginas web
Utilidades y ayudas para el diseñador web
Son numerosas las aplicaciones y sitios webs para ayudas al diseño web. Podemos conseguir todo tipo de pinceles, fuentes, fondos, iconos,… Pero el diseño web no es sólo photoshop o flash. Un buen diseñador web tiene que saber usabilidad, usar bien las CSS, conocer las últimas aplicaciones tipo Ajax (jQuery, Mootools,…), saber qué diseño es el más apropiado para lanzar un buen ataque SEO, en definitiva, un buen diseño web debe de tener en cuenta todos estos factores.
Cada proyecto es distinto al anterior y nos obliga a estar al día tanto de las tendencias como de la tecnología a aplicar.
Este blog está lleno de utilidades para diseño web, aquí os dejo enlaces que os serán de mucha utilidad:
(más…)
