Tag archivados diseño web

Holmes CSS detective: herramienta de diagnóstico de hojas de estilo

Buscando utilidades para validación de código CSS hemos encontrado holmes.css – CSS Markup Detective. Se trata de una herramienta stand-alone de diagnóstico de hojas de estilo que nos muestra, resaltados, los trozos de código inválidos, inaccesibles, obsoletos (http://www.w3.org/TR/html5/obsolete.html#obsoletos) o que presentan una marcación HTML (incluido HTML5) errónea.
Continuar leyendo →

Comentarios desactivados

Sitios web destacados por The CSS Awards [inspiración]

The CSS Awards es un nuevo ‘showcase’ donde se incorporan las tendencias en diseño web en general y de CSS en particular. La web tiene el objetivo de premiar a los mejores websites realizados en CSS, y el gran valor añadido del proyecto es que estos premios son otorgados por los diseñadores, agencias y bloggers más importantes y reconocidos internacionalmente, pudiendo el usuario saber que nota le ha asignado cada juez por los cuatro criterios de valoración: Diseño, Creatividad/Personalidad, Contenido y Usabilidad. El propósito de estos premios es valorar el diseño, la creatividad y el esfuerzo de los diseñadores, estudios y agencias web.

Incluimos la selección realizada por el equipo de The CSS Awards de sitios web destacados.
Continuar leyendo →

Comentarios desactivados

Parallax Scrolling: introducción y ejemplos

En el artículo 11 Tendencias de Diseño Web para 2011 incluíamos la técnica Parallax Scrolling como una de las que tendrían más preponderancia durante este año en cuanto a tendencias de diseño web.

El uso de parallax scrolling está en la línea de sustituir Flash por otras tecnologías que permitan incluir efectos visuales. Se trata de un efecto que genera la ilusión de estar visualizando un espacio en tres dimensiones utilizando imágenes distribuidas en capas que se mueven a un ritmo diferente.

Para implementarlo se pueden recurrir a trucos CSS o utilizar plugins jQuery como Spritely. Su utilización puede ser más efectiva incluyéndolo como un elemento secundario en nuestro diseño , por ejemplo, como un encabezado o pie de página o como fondo de la misma.
Continuar leyendo →

Comentarios { 1 }

+600 iconos minimalistas gratis para diseño de interfaz de usuario

DefaultIcon es un repositorio de iconos minimalistas que destancan por su excelente calidad, claridad y por estas desarrollados todos ellos en color negro. Por su temática, están especialmente orientados para ser utilizados en el diseño de interfaz de usuario en sitios web, dispositivos portátiles (iPhone, iPad, dispositivos Android, etc.),  aplicaciones de escritorio, y en general cualquier tipo de interfaz.

Repositorio de iconos minimalistas gratuitos

Repositorio de iconos minimalistas gratuitos

El conjunto es completamente personalizable, ya que está disponible en formato eps. El paquete también incluye el formato png, en color negro, y los tamaños 16 × 16, 32 × 32, 48 × 48, 64 × 64, 128 × 128, 256 × 256. Los iconos son libres para su redistribución, comercial y no comercial, siempre y cuando la licencia se pesa sin cambios y en su totalidad, con créditos a interactivemania:

Default Icon by interactivemania is licensed under a Creative Commons Attribution-No Derivative Works 3.0 .

Comentarios { 1 }

2 libros prácticos para aprender a diseñar sobre WordPress

Rockable Press acaba de publicar la segunda parte del libro How to be a Rockstar WordPress Designer. En la primera parte de esta colección sus autores abordaban todos los aspectos técnicos necesarios para aprender a desarrollar plantillas en WordPress, incluyendo los elementos gráficos y el código para implementarlas (ficheros gráficos PSD y código HTML, CSS y PHP). Los ejemplos desarrollados en el manual son

En esta segunda entrega, se continua con el aprendizaje de diseño de sitios web sobre WordPress, enseñandonos aspectos avanzados de desarrollo como son los tipos de post personalizados, los widgets, metaboxes,  funciones avanzadas de gestión de imágenes, shortcodes, internacionalización y traducción temas, etc. En este enlace tenéis el índice del libro y el primer capítulo en PDF.

En este enlace podéis adquirir ambos manuales por 39$ .

 

Manual practico de diseño sobre WordPress

Comentarios { 1 }

Cómo utilizar jQuery NIVO Image Slider en Drupal [tutorial]

En un proyecto en el que nos encontramos embarcados hemos necesitado incluir un slider con imágenes en una instalación de Drupal. Para otros muchos desarrollos (sobre WordPress, Codeigniter, etc.) habíamos utilizado el plugin jQuery Nivo Image Slider, pero aun no lo habíamos incluido en ningún diseño sobre Drupal.

Habitualmente lo elegimos porque incluye bastantes tipos de transiciones para las imágenes, genera un código bastante sencillo, es bastante adaptable y ligero, permite elementos HTML como enlaces, captions, etc. y, además está liberado con licencia MIT.

jquery Nivo image slider

Nivo Slider con el tema por defecto y Thumbnails

En el caso de su utilización en Drupal, además se integra fácilmente con módulos básicos de este gestor de contenidos como ImageCache y Views.

En este post os comentamos los pasos que hemos realizado para añadir este elemento.

Continuar leyendo →

Comentarios { 1 }

Compression Plugin made by Cork Tiles