bitelemental

Recursos para el Webmaster (XVIII): +80 background patterns para tus diseños web

 28/10/2009

Esta vez es Noupe quien nos trae una extensa recopilación de patrones para utilizar como fondo en nuestros proyectos web. Cuando nuestra creatividad se ve mermada o cuando estemos exhaustos de tanto diseño, la utilización de backgrounds patterns es, sin duda, una solución bastante interesante.

» Enlace: 80 Stunning Background Patterns For Your Websites

Categoría(s): Recursos, Web
 patterns, recursos
  Sin comentarios

Recursos para el Webmaster (XVII): Quartz Icon Pack

 26/10/2009

Bonito paquete de iconos creados por Andy Gongea y disponibles en Smashing Magazine. Su licencia es libre, tanto para uso comercial como personal.

»Descargar: Quartz Icon Pack

Categoría(s): Recursos, Web
 iconos, recursos
  Sin comentarios

Bordes redondeados sin imágenes utilizando jQuery

 08/10/2009

Son muchos los efectos que podemos aportar a nuestros diseños utilizando alguna librería Javascript, como es el caso de jQuery. Uno de los más utilizados y más vistos  es el de redondear las esquinas de las cajas de texto, efecto que otorga elegancia y estilismo a nuestra página.

Si hacemos una mirada retrospectiva, para realizar el efecto comentado siempre teníamos que echar mano de imágenes:  elaborábamos el “background” deseado  y lo aplicábamos sobre la capa que necesitáramos mediante el uso de CSS. Aparte de ser una medida bastante arcaica y molesta, era la única a la que podíamos acudir si nuestro objetivo era conseguir unos bordes ovalados. Con Javascript la cosa ha cambiado bastante. Existe un plugin denominado NiftyCube que hace precisamente eso, sin la ayuda de ningún tipo de elemento adicional.

Además, tenemos la opción de configurar el grado de curvatura de nuestro borde. Y no sólo es aplicable a los elementos de tipo “div” (como muchos estarán pensando), sino que también podemos redondear los márgenes de elementos tales como  “p”, “h2″, “inputs”… Basta con descargar el archivo javascript y su hoja de estilos asociada. Una vez tengamos estos dos archivos, realizamos la siguiente llamada:

<script language="javascript">
   $(document).ready(function() {
      Nifty("div#id_elemento", "tipo_de_borde");
   });
</script>

Podéis ver todas las opciones disponibles a través de la página de NiftyCube.

» Ejemplo bordes redondeados sin imágenes utilizando jQuery | Descargar NiftyCube

Categoría(s): jQuery, tutoriales
 bordes, jQuery, tutorial
  3 comentarios

Resaltar el foco de un formulario con CSS

 05/10/2009

La usabilidad en los formularios de contacto web es una de las cosas que muchas veces no tenemos en cuenta y, sin embargo, es más importante de lo que creemos. Una de las directrices que debemos contemplar será la focalización de elementos, es decir, señalar de alguna forma el campo que el usuario está rellenando en ese momento.

Podemos conseguir esto de una forma muy sencilla, simplemente deberemos utilizar la pseudo-clase :focus del elemento input. Sólo son necesarias un par de líneas para aplicar este efecto y dotar a nuestro diseño de la funcionalidad deseada.

input:focus {
   border:1px solid #666;
   background:#FFFFCC;
}

Nota: Se ha comprobado el funcionamiento en Firefox, Chrome y Opera. Por desgracia, Internet Explorer (7 e inferiores) no soportan esta característica.

» Ejemplo resaltar el foco de un formulario con CSS

Categoría(s): CSS, Diseño
 css, Diseño
  4 comentarios

Wallpapers del mes de Octubre (2009)

 

Otra tanda de fondos de pantalla, como siempre, de la mano de Smashing Magazine. Esta recopilación corresponde al mes de Octubre de este año 2009.

»Enlace: Desktop Wallpaper Calendar: October 2009

Categoría(s): Diseño, Wallpapers
 octubre, Wallpapers
  Sin comentarios

Integración de Wordpress a un sitio web

 02/10/2009

Interesante artículo (visto en MoshuBlog) que quiero compartir con todos vosotros y que me salvó la vida en más de una ocasión. En él se explica con detalle cómo integrar las entradas de un blog de Wordpress a cualquier diseño web.

Dicha integración se especifica utilizando un escenario básico: tenemos una web realizada con PHP (alojado en www.ejemplo.com/index.php) con nuestra CSS y nuestro objetivo es referenciar las entradas de un blog que tenemos en un directorio aparte (sea www.ejemplo.com/blog) a través de una opción del menú principal (por ejemplo, Noticias). El resultado queremos que se visualice en la raíz principal del sitio (www.ejemplo.com/noticias.php).

Espero que os sea de ayuda.

» Enlace: Integrating WP in an existing site

Categoría(s): Diseño, wordpress
 Diseño, wordpress
  Sin comentarios