uvedobles.com» Menus

Botones en CSS3

dedavid — Sun, 09 Jan 2011 14:57:07 +0000

Sencilla colección de botones bajo CSS3 desde botones cuadrados a botones con esquinas redondeadas y estilo burbuja o bubble.

Puedes descargar la hoja de estilos CSS en el siguiente enlace.

http://horaciobella.com/zardi/

Páginas relacionadas con este artículo:

Ver la disposición de una página web

dedavid — Wed, 22 Dec 2010 07:45:24 +0000

O como dicen los de lengua inglesa, ver el Wireframe, see the wireframe.

¿Qué es un wireframe?

Pues como ya decimos en el título un wireframe es un esquema de disposición de los diferentes elementos de una página web. Los módulos visuales sin textos en los que se distribuyen los contenidos.

La utilidad que le podemos dar es la del estudio y la inspiración, por ejemplo cuando una página web te gusta o te atrae por su usabilidad, ejecutas la herramienta y podrás ver su estructura, a partir de aquí inspira y expira código fuente hasta que la mejores.

En la captura de pantalla anterior te mostramos el wireframe de la página corporativa de nuestra aplicación de gestión online invOOice.com, una distribución la mar de sencilla y clara, en el header, selector de idiomas, logo, menú de navegación cuerpo de a tres columnas con imagen en cada una y un footer.

La aplicación para ver el wireframe

Esta aplicación es un Bookmarklet, es decir una aplicación web que se puede instalar como favorito, para instalarla:

Arrástra ESTO hasta tu barra de favoritos, si no te funciona dirígete a la página de autor y allí encontrarás más botones para instalarlo y una mayor documentación.

Os copiamos un vídeo de youtube sobre el funcionamiento de esta aplicación:

Enlace original: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

Páginas relacionadas con este artículo:

El mejor slider que he visto

dedavid — Tue, 05 Oct 2010 18:04:31 +0000

Bueno… esto va en serio, menudo slider multidimensional que han construido bajo jQuery… quita el hipo! Viene preparado para sistemas touch o taćtiles, aka iPad, iPhones y tablets y teléfonos Androideados, tiene unos efectitos muy elegantes y discretos y un montón de abalorios para decorar este fantástico slider accordion o acordeon de contenidos que puede hacer las veces de portfolio o de menú de prácticamente cualquier web, a nivel de usabilidad es muy correcto, le doy un 7 sobre 10 va… que no se diga.

Disponen de una licencia comercial, sin su marca, y una licencia Freeware con la marca pero totalmente preparada para integrar en WordPress. Haber si venden cantidades brutales y se nos demuestra que de esto, podemos vivir todos, amigos manitas del javascript!

Dadle un vistazo: http://www.slidedeck.com/wordpress/

Páginas relacionadas con este artículo:

Mini iconos para aplicaciones

dedavid — Wed, 28 Apr 2010 06:44:24 +0000

En contra de toda corriente artística de la actualidad en boga de los diseñadores v.2.0 donde afloran los CSS de fuentes de 11px “parriba” e iconos de 64×64 y algún que otro megaicono de 256 x 256 pixelacos hoy os traemos unos “fantabulosos” mini iconos super minimalistas del callao para que dotéis a vuestras aplicaciones web de un estos micro iconos creados por Brand Spanking New, la lupa se vende a parte.

A nivel técnico son 113 iconos con un tamaño de 10 x 10 píxeles y son de libre uso, incluído el uso comercial de los mismos aunque según la licencia de origen debéis mostrar su origen en los créditos del proyecto.

Para descargar aqui: Mini iconos para aplicaciones (72)

Páginas relacionadas con este artículo:

Estilos CSS del cursor

dedavid — Wed, 24 Mar 2010 15:32:33 +0000

Aquí tenéis toda los posibles estilos del cursor para que podáis aplicar bajo CSS, si pasáis el cursor por encima de “Prueba” veréis el resultado, este resultado diferirá de un navegador a otro, es decir el icono puede ser muy diferente entre FireFox, Safari, Chrome e Internet Explorer, el buen uso de la propiedad cursor hace las páginas web más usables sobre todo para estilos de menús basados en capas:

Valor	Prueba	Netscape	Explorer	Estilo CSS
default	Prueba	6+	4+	cursor:default
crosshair	Prueba	6+	4+	cursor:crosshair
hand	Prueba		4+	cursor:hand
pointer	Prueba	6+		cursor:pointer
Cross browser	Prueba		4+	cursor:pointer;cursor:hand
move	Prueba	6+	4+	cursor:move
text	Prueba	6+	4+	cursor:text
wait	Prueba	6+	4+	cursor:wait
help	Prueba	6+	4+	cursor:help
n-resize	Prueba	6+	4+	cursor:n-resize
ne-resize	Prueba	6+	4+	cursor:ne-resize
e-resize	Prueba	6+	4+	cursor:e-resize
se-resize	Prueba	6+	4+	cursor:se-resize
s-resize	Prueba	6+	4+	cursor:s-resize
sw-resize	Prueba	6+	4+	cursor:sw-resize
w-resize	Prueba	6+	4+	cursor:w-resize
nw-resize	Prueba	4+	4+	cursor:nw-resize
progress	Prueba		6+	cursor:progress
not-allowed	Prueba		6+	cursor:not-allowed
no-drop	Prueba		6+	cursor:no-drop
vertical-text	Prueba		6+	cursor:vertical-text
all-scroll	Prueba		6+	cursor:all-scroll
col-resize	Prueba		6+	cursor:col-resize
row-resize	Prueba		6+	cursor:row-resize
cursor:url(uri)	Prueba		6+	cursor:url(uri)

Páginas relacionadas con este artículo:

Menú de navegación desplegable en CSS3

dedavid — Mon, 15 Mar 2010 07:38:21 +0000

Excelente menú de navegación desplegable estilo Apple iPhone realizado bajo CSS3, a continuación el wireframe con la estructura de este sistema de menus:

Y ahora una captura con el fichero CSS y algunas anotaciones extraídas de la web original (en inglés):

Podéis verlo funcionando en: http://www.webdesignerwall.com/demo/css3-dropdown-menu/

Páginas relacionadas con este artículo:

Megamenus para tu web

dedavid — Tue, 09 Feb 2010 08:52:57 +0000

En más de una ocasión los abrás visto en diferentes páginas web, unos menús tamaño XXL que aparecen al situarte sobre una opción de menú de navegación más o menos discreta, donde al pasar el ratón por encima y por tanto realizar el correspondiente “over” pummmm megamenu en tus narices.

Entonces posiblemente abrás pensado si eso es bueno o es malo, si es usable o no lo es, pues como todo exceso al principio puede reproductir repulsión. A mi, el escritor de este artículo, no son muy de mi agrado si bien tras reflexionarlo quizá el gurú de la navegación Jacob Nielsen tenga razón y sean una de las formas más óptimas de navegar en una web con muchos enlaces.

Así pues que una vez Mr. jacob ha bendecido los megamenús para su uso vamos a darle una oportunidad, y mirad por donde hemos encontrado una web con una demos excelente, donde podemos ver un montón de posibles aplicaciones, la que más no a gustado además de la primera localizada en la opción “A” del primer menú, es la última demo donde lo que nos ofrece son direcciones físicas ordenadas alfabéticamente como si de un address book o agenda se tratase.

Enlace: http://www.ihwy.com/Labs/demos/current/jquery-listmenu-plugin.aspx

Páginas relacionadas con este artículo: