Diseño Web

image

Hace unos días webdesigndev publicó un top con las 20 páginas sobre diseño web que ganan más dinero en internet. Las ganancias son producto de los ingresos por anuncios, ventas en programas de afiliados, miembros premium, tráfico, entre otros y no están plenamente confirmadas por los propios sitios...

Muchas veces cuando se diseña un sitio web o un tema de WordPress, es dificultoso conocer cual es el mejor color, cual es el más legible y cual provee el mejor contraste. CheckMyColours es un servicio online que se encarga de comprobar que el background y foreground combinen con todos los demás elementos de nuestra web.

Comprueba el contraste de los colores de tu web

Lo único que debemos hacer es dar la url del sitio web que queremos comprobar y CheckMyColours nos devolverá un completo y detallado reporte, basado en algoritmos sugeridos por la World Wide Web Consortium (W3C).

El reporte detalla los niveles de contraste entre los distintos elementos de la página, tales como imágenes, texto o cualquier CSS usado en el diseño. Está dividido en 3 categorías Ratio de contraste de luminosidad, diferencia de brillo y diferencia de color. Cuando uno hace clic en cada celda o fila del reporte, obtiene más información sobre el contraste del elemento.

CheckMyColours Recomendaciones de contraste

CheckMyColor no es una sustitución a ninguna otra herramienta, pero puede ser de ayuda a la hora de comprobar si el contraste de los colores de nuestra web es el adecuado.

Enlace | CheckMyColours
Vía | nirmaltv

Cómo definir el tamaño de fuente (font-size) con CSS

Este es un tip para trabajar con fuentes ems sin ningún problema. Recuerden que la ventaja de trabajar con ems, en lugar de pixeles, es la flexibilidad que tiene, permitiendo a los lectores poder incrementar o reducir el tamaño del texto a su gusto y antojo.

Para poder definir el tamaño de las fuentes con CSS de una manera coherente, debemos primero igualar 1em a 10px para toda la página.

body {
font-size: 62.5%; /* Igualamos 1em a 10px */
}

Y luego, establecer el tamaño de la fuente de las secciones o elementos de nuestro sitio, por ejemplo el contenido.

#content {
font-size: 1.6em;
line-height: 1.6em;
}

1.6em es igual a 16px.

El line-height es la distancia entre las lineas.

jQuery Menu es una gran aplicación que nos ayuda a crear menús desplegables con variados themes y estilos fácilmente. Transforma una lista desordenada de links en menús y sub-menús desplegables con fabulosos diseños y efectos.

Crea menús desplegables fácilmente con jQuery Menu

El script nos permite cambiar la apariencia del menú de manera muy sencilla, ya que utiliza ThemeRoller, con lo que podemos cambiar el tema del menú con solo hacer click o crear nuestros temas rápidamente.

Cuando una lista forma parte de otra lista, jQuery Menu por defecto crea un menú al estilo iPod (¡genial!). Además, utiliza los atributos de ARIA (Accessible Rich Internet Applications Suite).

Requiere jQuery y jQuery UI

Demo y descarga| jQuery Menu
Vía | webresourcesdepot

Sendn está compartiendo más de 10 plantillas para newsletters gratis de gran calidad, las cuales podemos usar en nuestras aplicaciones web, procesos de e-mail marketing, etc.

10 Plantillas para Newsletters Gratis

Los diseños son variados, existen algunos de 1 o 2 columnas, con o sin menús.

Las plantillas se pueden descargar en formato .ZIP con imágenes incluidas.

Los templates son de uso gratuito tanto en proyectos personales como comerciales.

Descargar | Free Newsletter Templates
Vía | webresourcesdepot

Simpletip, es un plugin de jQuery que nos permite crear tooltips flexibles. Estos tooltips se pueden colocar a cualquier elemento y ser, fácilmente, diseñados (tanto en presentación como posición) con CSS.

jquery-simple-tip-plugin

Los tooltips pueden ser estáticos, dinámicos o cargados vía Ajax. Aunque, se podría realizar una combinación de efectos para obtener un resultado más atractivo.

Simpletip ofrece diversas opciones para personalizar nuestro tooltip. El plugin está bien documentado y lleno de ejemplos.

Enlace | Simpletip
Vía | webresourcesdepot

Suscríbete

  • Suscribete a nuestro feed
  • Add to Google Reader or Homepage
  • Subscribe in NewsGator Online
  • Add to My AOL
  • Subscribe in Bloglines
  • Add to netvibes