|

30 scripts para galerías, presentaciones y lightboxes

ByLuis

Una gran colección de scripts que nos ayudarán a incluir nuestras galerías de fotos, presentaciones y lightboxes. 30 scripts en total, organizadas por:

  • Galerías y lightboxes en Ajax.
  • Galerías de imágenes basadas en Ajax.
  • Galerías CSS+Javascript.

De las 30 me gustaría destacar unas cuantas que son las que más me han gustado:

  • JonDesign’s SmoothGallery : usando mootools v1.0 para su desarrollo, se trata de un script de tan solo 16k, que añade fade, transparencias, thumbnails, vistas preliminares y todo ello con un diseño muy sencillo y llamativo.galeria1.png
  • Couloir.org: otra galería de imágenes en forma de presentación, con fade, redimensionamiento de la ventana y sonido.galeria2.png
  • Lightbox2: uno de los mejores y de los más conocidos, transparencias, fade y posibilidad de navegar entre las diferentes imágenes.galeria3.png
  • TripTracker: muy parecido a los anteriores, en este caso permite también acceder a la primera y última y enviar por email la ruta de la imagen en cuestión.galeria4.png
  • Cross Browser Multi-Page Photograph Gallery: Increible galería basada totalmente en CSS de la que ya hemos hecho referencia anteriormente, pero que siempre merece una mención.galeria5.png

30 Scripts For Galleries, Slideshows and Lightboxes

Similar Posts

|

BonBon Buttons

ByLuis

These are way above and beyond the level of any other “CSS3 buttons” I’ve seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states… the list goes on. Every trick in the book masterfully employed.They make my buttons …

Post original

| |

Frame: Modular CSS Framework

ByLuis

Frame is a modular CSS framework that supports: Layout, Typography, Forms, Code, Table, Reset, and Print styling. It is HTML5 compatible, and provides default styles and support for HTML5 elements. Frame is accompanied by an online tool that allows you to easily generate your own build (in case you don’t need to use all the features). …

Post original

| |

Laboratorio: control input selector para HTML

ByLuis

Uno de los controles que he visto en alguna aplicación (sobre todo de tipo editor gráfico), es aquella en la que el valor numérico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.
input-selector.png
La versión que he realizado modifica los input type=”text” que haya en la página que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mínimos y máximos que permite el controlador.

Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.

Read More “Laboratorio: control input selector para HTML”

37 pasos para un perfecto etiquetado HTML

ByLuis

Para aquellos que empiecen o para quienes aún sean un poco de la vieja escuela, el artículo al que hacemos referencia puede ser de gran ayuda ya que te explica desde lo más elemental a lo más semántico.
Hay un total de 37 puntos que nos explican qué es lo que debemos hacer o qué es cada cosa dentro de una página web. Empieza explicando lo que es un HTML, luego un XHTML, los diferentes tipos de XHTML, el DOCTYPE, la validación del documento, la codificación (recomendando UTF-8), el BOM dentro de un archivo UTF-8, las entidades, la semántica (el uso de cabeceras y de em o strong), los párrafos o los saltos de línea y muchas otras cosas más que recomendamos que leaís.
Bulletproof HTML: 37 Steps to Perfect Markup

| |

Recursos para crear bordes redondeados

ByLuis

nifty.pngPara aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.

Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.

Otra opción, quizá más sencilla y que nos gusta especialmente, es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.

Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.

Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.

|

Revisión sobre HTML5

ByLuis

Aunque ya en su momento hablamos de las etiquetas que traerá HTML5, no hemos llegado a hablar del resto de novedades que quieren introducir en HTML5.

Aunque en otros sitios ya se ha hablado de ello, al no haber encontrado un artículo que me pareciera sencillo y completo, sobre todo porque no solo comenta aspectos técnicos, sino un poco de base y explicación de por qué es necesaria esta nueva versión. En este caso se trata de un artículo que nos indica los cambios/novedades principales:

  • Nuevos elementos, los cuales ya hemos mencionado y que están divididos en las siguientes categorías: elementos metadata (title, base, link), elementos de sección para dividir las páginas en secciones (body, section, nav y article), elementos de bloque (blockquote, section, p y div), elementos inline (a, meter e img), elementos estructurados ol, blockquote y table), elementos interactivos entre el usuario y la página vía teclado o ratón (a, button y radio), control de formularios y otros.
  • Cambios de programación en el DOM, introduciendo la nueva versión del DOM.
  • Formularios web actualizados.
  • Eventos server-sent.
  • Capacidades para gráficos dinámicos.

An Overview of HTML 5

Vía / dzone