Pag 1 de 212»

Crea menús para tu web con cssmenumaker

Diseño Web, Html 1 Comentario »

El menú en el diseño web es un recurso fundamental que ofrece niveles de navegación para que el usuario no se pierda en el contenido de una página web. La técnica de personalizar con css las listas de elementos ordenadas o desordenadas es la más utilizada por los diseñadores web. Sin embargo es un sistema engorroso que muchas veces se puede sustituir por menús javascript o frameworks que ya ofrecen la estructura.

cssmenumaker

css menu maker es un sistema sencillo que permite la creación de multitud de tipos de menús personalizados para la web on line, sin necesidad de tocar el código html. En los menús freemium se puede usar un asistente para crear el menú completo para tu web, con enlaces incluidos y una vez terminado descargar el código para integrarlo en tu web. Si usas un gestor de contenidos como wordpress o blogger las guías te ayudarán a personalizar el menú que has creado.

cssmenumaker

Si deseas acceder a los menús premium o guardar los que has personalizado debes adquirir una licencia Básica (9$ al año) o Premium (19$ al año). Si eres usuario de Dreamweaver la extensión de css menu maker para instalarla en el programa cuesta 29$. Los menús son compatibles con todos los navegadores actualizados.

votar

Slideshows javascript adaptables

Diseño Web, Html 1 Comentario »

Algunos recursos o comportamientos en la organización de los contenidos de una página web han llegado a ser fundamentales: menús de navegación, botones o zonas de información escondida, pestañas con información clasificada o los slideshows, permiten optimizar el espacio para ofrecer la máxima información.

slideshow

En el caso de los slideshows javascript, se ha perfeccionado el diseño, la funcionalidad y opciones como en Roundabout de fredhq creado con jquery, que ofrece un impresionante slide giratorio interactivo que debido al momento actual de máxima diversidad de dispositivos que se conectan a la web, se convierten en recursos obsoletos.

slideshow roundabout

Ya no basta con mostrar la información con un diseño bonito, ahora el diseño se tiene que adaptar a la pantalla, debe ser responsable (Responsive desing) y por tanto los recursos que se usan también.

slideshow bxslider

El clásico slideshow de imágenes se ha vuelto a reinventar con BXSLIDER que ofrece un slide en jquery personalizable con diseño adaptable a cualquier resolución y dispositivo en tiempo real.

slideshow layerslider

Y si buscas algo espectacular no te pierdas SLIDER REVOLUTION o LAYERSLIDER una herramienta que aprovecha las nuevas funcionalidades css3 ofreciendo un slideshow añadiendo las animaciones html que permiten las hojas de estilo. Con un diseño adaptable, los 10$ que cuesta, es una magnifica inversión para crear webs impactantes compatibles con todo tipo de dispositivos y resoluciones. También disponibles como plugin para Wordpress.

votar

Tagxedo genera nubes de palabras con estilo

Diseño Web, Diseño gráfico, Introducción, Utilidades 1 Comentario »

En lo que se refiere a herramientas para generar nubes de etiquetas, esos gráficos que muestran la densidad de palabras de un contenido especificado, resaltando con el tamaño de letra las más utilizadas, Tagxedo es el recurso online que suelo recomendar y utilizar.

tagxedo

Una completísima herramienta que permite, generar nubes de palabras a partir de una url, una dirección de twitter, Del.icio.us, noticias, una búsqueda o un canal RSS. Se pueden elegir patrones de formas (shape) a las que se debe adaptar la nube de palabras: una manzana, una paloma, un corazón, una estrella o la representación clásica de palabras escritas de forma desordenada. Entre los muchos parámetros de personalización se puede escoger ademas la orientación, la fuente de letra y el tema.

tagxedo

Una vez creada la nube de etiquetas el entorno de trabajo permitirá perfeccionar el gráfico final, permitiendo eliminar las palabras que no deseemos, cambiar colores, tipos de letra o rediseñando, desde este entorno, todo el gráfico. Una excelente herramienta que requiere el plugin Silverlight de Microsoft para funcionar.

votar

Crea enlaces con interambio de imágenes

Diseño Web, Html 6 Comentarios »

El diseño web cada día es más exigente y determinados comportamientos del ratón son fundamentales para facilitar la navegación entre los contenidos. Cambiar una o varias de las características del texto o la imagen de un enlace es casi un requerimiento fundamental: tamaño, color, opacidad, contorno, fondo o crear una animación…

hover imagen CSS o javascript

En el post botones css de texto y gráfico con rollover, he abordado esta tarea, pero en esta ocasión voy a explicar como realizar en enlace con cambio de imagen, para que por defecto se vea una imagen y al colocar el puntero del ratón sobre ella se vea otra.

Existen 2 formas de hacerlo, con javascript o con hojas de estilo. En ambos casos el resultado es muy similar.

1) Cambio de una imagen de enlace con Javascript:

Si eres aficionado a crear páginas web con Adobe Dreamweaver los comportamientos permiten crear el código javascript para el intercambio de imagen en un enlace. Sólo hay que insertar la imagen en reposo, seleccionarla y en la barra de comportamientos seleccionar el + para elegir la opción intercambiar imagen.

comportamiento o javascript

Seleccionado la imagen de reposo se pueden ver y cambiar los comportamientos definidos (onMouseOver, OnMouseOut) y seleccionando el body se pude ver o modificar el comportamiento (imágenes/em>) para escoger todas las imágenes que se desea precargar de la web.

preload comportamiento o javascript

En el código puedes ver las funciones javascript para precargar imágenes (MM_preloadImages) cambiar imagen (MM_swapImage) y restaurar imagen de reposo (MM_swapImgRestore).

Ver ejemplo. Descargar ejemplo.

2) Cambio de una imagen de enlace con CSS:

El mismo efecto se puede conseguir definiendo una clase CSS que se aplicará a la etiqueta del enlace deseado, para que se visualice la imagen de reposo o la imagen de sustitución deseada cuando se coloque el puntero del ratón encima.

css hover

En el ejemplo la clase opcionweb define la imagen de fondo (background-image) que no se repita la imagen (background-repeat) y la posicion de la imagen (background-position) el relleno (padding) define el espacio que debe verse, corresponde con la mitad del espacio horizontal de la imagen (240px) y el alto de la imagen (25px).

En el hover propiedad CSS que se activa cuando el puntero del ratón esta encima de la imagen, se definen las mismas características que en reposo, cambiando solo la imagen que se desea visualizar, el efecto para el usuario es que cambia la anterior cuando en realidad se sustituye.

Ver ejemplo. Descargar ejemplo.

votar

La primera web de la Unión Deportiva Salamanca (UDS)

Curiosidades, Diseño Web, Mis Trabajos 5 Comentarios »

Tristes momentos para la ciudad de Salamanca, de los muchos cierres que han acontecido estos días me afectan especialmente, el cierre de una de sus instituciones culturales de referencia, el CILIJ de la Fundación Germán Sánchez Ruipérez o la desaparición de su equipo de fútbol, la Unión Deportiva Salamanca (La UDS).

Unión Deportiva Salamanca (UDS)

Hoy me gustaría aportar mi granito de arena y rescatar del olvido como se gestó la primera web de la Unión Deportiva Salamanca (UDS). Corría el año 1998 cuando se preparaban las actos conmemorativos del 75 aniversario del Club, Martín García Vega informático de la UDS propuso a la entidad la creación de una web que recogiera la historia y la información del club, era la época en la que los primeros equipos de primera y segunda división empezaban a tener presencia en Internet.

El destino nos juntó a Martín García Vega, Fernando Cyborg y un servidor Pancho Opcionweb en el Centro de Estudios Gestión (CEG), después de dar una de nuestras clases de informática y con unas cañas, analizamos el proyecto y nos lanzamos con una propuesta ambiciosa, que realizamos con mucho cariño y que debía estar lista para después del verano de 1999, con el fin de englobarla en el paquete de celebraciones del 75 aniversario.

Unión Deportiva Salamanca (UDS)

El 17 de febrero de 1999 Martín registró el dominio udsalamanca.com, en Marzo de 1999 la esnic nos concedió udsalamanca.es (en aquella época los .es tardaban bastante más) y fue en 2001 cuando se registro udsalamanca.net y udsalamanca.org. La tecnología web de la época para portales web con mucho contenido nos hizo decantarnos por los marcos (frames), lo que nos permitió separar menú de navegación en el frame izquierdo con 2 niveles de navegación, del contenido frame derecho maquetado en su mayoría como se hacia en aquella época, con tablas. Tras 6 meses de trabajo se lanzó y en septiembre de 1999 con el inicio de la temporada, se presentó a la prensa. La web fue evolucionando, a las pocas semanas y por petición popular, se modificó la home para ofrecer los principales datos: resultados de los partidos de varias categorías (los dábamos en tiempo real), clasificación, estadísticas de goles… Todo ello sin gestores de contenido (CMS), editando el html con Frontpage, sin olvidar los GIFs animados :-)

Libro 25 aniversario del Helmantico (UDS)

La mayor parte de la información nos la proporcionó el libro del XXV aniversario del estadio Helmántico, que todavía guardo. Participé en la actualización de la web durante 2 años, posteriormente Martín se hizo cargo de ella en solitario. La versión que dejo en opcionweb para el disfrute de nostálgicos y aficionados, es de la web completa del 29 de noviembre de 1999 cuando cambiamos el formato de la home. Espero que os guste, puedes ver su posterior evolución en el tiempo desde la wayback machine. ¡Hala Unión!.

Blog Widget by LinkWithin
votar

Pag 1 de 212»


Entradas RSS Comentarios RSS Acceder Subir
twitter facebook Rss mail rssSígueme en Google Currents