Blog Borchani Studios

Intentamos reunir las grandes Galeria de fotos Flash / AJAX / PHP en un solo lugar. La mayoría de ellos son totalmente gratuitos. Algunos, sin embargo, tienen algunas limitaciones a sus versiones libres, pero la verdad estan estupendas…

Gallery

Gallery te da una manera intuitiva de mezcla y gestión de fotografías a la perfección, ideal si usted está ejecutando un pequeño sitio personal o un gran sitio de la comunidad.
Requisitos: PHP 4.3.0 +, PHP safe_mode debe estar apagado, o ImageMagick NetPBM, MySQL 3 +

Visitar »

Plogger

Plogger Gallery integra tus fotos en tu pagina web, un completo paquete para compartir fotos con una atractiva interface fácil de administrar que hace la gestión de sus galerías muy simple.
Requisitos: MySQL + v3.23, GD1.0 + y + PHP4

Visitar »

Coppermine

Coppermine es múltiusos una galeria totalmente equipadacon script en PHP usando GD o ImageMagick como una biblioteca de imágenes con MySQL backend.
Requisitos: PHP 4.2.0 +, MySQL 3.23.23 +, ya sea GD o ImageMagick (cualquier versión)

Visitar »

4images Gallery

4images es una poderosa galería de imágenes web, entre las principales características incluyen sistema de comentarios, registro de usuarios, administración de áreas protegida con contraseña y plantillas HTML para el diseño de páginas.
Requisitos: PHP, MySQL

Visitar »

Minishowcase

Minishowcase es un pequeña galeria de fotos con php / javascript , con el soporte de AJAX que permite mostrar fácilmente sus imágenes en línea, sin complejos o la codificación de bases de datos, lo que permite disponer de un up-and-running funcionando en pocos minutos.
Requisitos: php / javascriptVisitar »

Galleriffic

Galleriffic es una pequeña galeria de fotos que utiliza un plugin de jQuery para el desempeño del renderizado rápido de la galería de fotos.
Requisitos:-jQuery 1.2.6Visitar »

dfGallery

DfGallery es una galeria de fotos hecha en Flash que trabaja con fotos alojadas desde una cuenta en Flickr, Picasa, Fotki, Photobucket.Requisitos: PHP 5Visitar »

ZenPhoto

Zenphoto es una galería de fotos en línea diseñado para ser “un simple álbum de fotos web”. Incluye dinámica de procesamiento de imágenes basada en carpetas(albunes)
Requisitos: 4,10 + PHP con soporte GD, MySQL 3.23 +Visitar »

NoobSlide

Atractivo plugin para imagenes slide. Deslizador 8 muestras en total.
Requisitos: Mootools v1.11 y v1.2Visitar »

Imago

Galería de Imágenes Ajax, con especial atención a la simplicidad y facilidad de uso. Esta galería tiene conectores para Flickr, SmugMug y SimpleViewer con el uso de sus archivos XML.
Requisitos: Mootools v1.11Visitar »

(E)² Photo Gallery

(E)2 Galería de fotos es una galería de código abierto. Diseñado para permitir que usted pueda cargar sus fotos a una carpeta que desee, la carpeta se carga automáticamente usando PHP.
Requisitos: Mootools v1.1

Visitar »

Pathfusion : Slideshow

Diapositivas con transición entre imágenes.
Requisitos: Mootools v1.11Visitar »

Galleria Javascript Jquery

Galleria javascript es una galería de imágenes escrito en jQuery. Carga las imágenes una a una a partir de una lista desordenada y muestra miniaturas de cada imagen cuando se carga. Se creará miniaturas (thumnails) usted decide escala o sin escala, centrada y recortada en un cuadro en miniatura definidos por CSS
Requisitos: jQueryVisitar »

PixelPost

Pixelpost es una galeria de código abierto, compatible con los estándares, en varios idiomas.Requisitos: 4,3 + PHP / MySQL 3.23.58 +Visitar »

SmoothGallery

Esta galería y el sistema de presentación de diapositivas le permite tener fácil y sin problemas (transversal fundido …) las galerías de imágenes, diapositivas, vitrinas y otras cosas en su sitio web …
Requisitos: Mootools v1.2Visitar »

FlashFlickr PhotoGallery

Una de fotos hechas en Flex2/AS3 utilizando la API de Flickr. Esta aplicación permite a los usuarios a navegar por sus fotos de Flickr, ver tus series, las etiquetas y notas.
Construido con Flex 2 / AS3.

Visit »

MooFlow

Si te gusta el iTunes como galería de imágenes. Es la secuencia de comandos atractiva que trae esta galeria.
Requisitos: Mootools v1.2

Visitar »

LightWindow

El clon de álbum más avanzado.
Requisitos: Prototype, Scriptaculous

Visitar »

Viewer – Mootools

Pase de diapositivas para mostrar las galerías de la imagen o las secciones de página.
Requisitos: Mootools v1.2

Visitar »

Slimbox

Slimbox visual 4kb es un clon del popular álbum JS v2.0 de Lokesh Dhakar, escrito usando el ultra framework de mootools.
Requisitos: Mootools v1.2

Visitar »

Revolver – Fast Image Rotation Engine

Revolver puede ser utilizado como un recipiente limpio, de forma muy sencilla de mostrar un portafolio de trabajos, catalogo de productos, fotoblog, o una simple galería de imágenes.
Requisitos: PHP 4 +

Visitar »

ImageFlow

ImageFlow es un JavaScript discreto y fácil de usar.
Requisitos: PHP 4.3.2 + con la extensión GD 2.0.1 +

Visitar »

BarackSlideshow

Un elegante y ligero script para diapositivas.
Requisitos: Mootools v1.2

Visitar »

SlideShow 2

Slideshow 2! es una clase javascript para Mootools 1.2 para transmitir y animar la presentación de imágenes en su sitio web.
Requisitos: Mootools v1.2

Visitar »

Showcase

CoverFlow como galería.
Requisitos: Prototype

Visitar »

PathFusion: Multibox

Otro clon del lightbox que soporta imágenes, flash, video, mp3, html.
Requisitos: Mootools v1.2

Visitar »

UvumiTools Gallery Plugin

Si estás harto de las galerias comunes y deseas dar algo nuevo y fresco a su sitio web con el UvumiTools Galería lo tendras.
Requisitos: Mootools v1.2

Visitar »

3D Curve Photo Gallery

3D Curve es una geleria de foros usando Flash Papervision3D y XML.
Requisitos: Adobe Flash (versión 9) es necesario para editar el archivo FLA.

Visitar »

Stack Photo Gallery

Galeria Flash basado en XML de Adobe Flash CS3 ActionScript 3.0.
Requisitos: Adobe Flash (versión 9) es necesario para editar el archivo FLA.

Visitar »

SqueezeBox – Expandable Lightbox

Squeezebox es un álbum inspirado en los modal box. Fácil de usar con elementos HTML, solicitudes Ajax , iFrames, películas SWF y más.
Requisitos: Mootools v1.2

Visitar »

MediaBox

Usando la biblioteca MooTools javascript, Mediabox permite abrir flash, vídeo y contenido HTML en una potencial “lightbox” estilo ventana.
Requisitos: Mootools v1.2

Visitar »

Space Gallery

Simple galería de imágenes construidas con jQuery.
Requisitos: jQuery

Visitar »

Javascript Image Gallery Using Mootools (parte 2)

HTML amigable Javascript para tu galería de imágenes utilizando mootools.
Requisitos: Mootools v1.2 Visitar »

Image Gallery v1.0

Galeria flash de imágenes. Al hacer clic en una miniatura, la imagen original se abre en una ventana como light box.
Requisitos: Flash

Ver Demo | Descargar

Circular Thumbnail Gallery

Requisitos: Adobe Flash (versión 9) es necesario para editar el archivo FLA.

Visitar »

Flash Gallery

Flash Gallery es una aplicación gratuita que permite diapositivas en su sitio web fácil y rápido.
Requisitos: PHP (no requred si usted trabaja con Flickr)

Visitar »

FlashLightBoxInjector

FlashLightBoxInjector es una clase PrototypeJS que llena el vacío entre Flash y Lightbox2.
Requisitos: PrototypeJS

Visitar »

Multiple Photo Gallery

Galeria flash de fotos para varias categorías incorporacion de imagenes a través de archivos XML.
Requisitos: Adobe Flash (versión 8 o superior) es necesario para editar el archivo FLA.

Visitar »

Milkbox

Otro clon de light, pero esta vez se ha escrito para Mootools 1.2.
Requisitos: Mootools v1.2

Visitar »

FotoViewr

Basado en la aplicación de galería de imágenes web que te permite crear galerías de imagen en 3D para tus fotos de Flickr. Incluso le proporcionan el código para incrustar la galería en su sitio o blog.
Requisitos: cuenta de Flickr

Visitar »

DhoniShow

Siempre deseaste una galería en línea fácil y rapido? Entonces DhoniShow es para tí. Ingresar sólo algunas imágenes en el código fuente HTML y JavaScript y listo.
Requisitos: 1,5 + Prototype y Scriptaculous

Visitar »

Zen Flash Gallery

Zen combina simplicidad y elegancia. El minimalismo va de la mano con la funcionalidad y no distrae al usuario de la visualización de imágenes como su principal función.
Requisitos: Sin requisitos especiales

Visitar »

Art Flash Gallery

Esta galeria de imagenes se mezcla orgánicamente con cualquier diseño gracias a la aparición de múltiples ajustes.
Requisitos: Sin requisitos especiales Visitar »

Slideroll Gallery AV

Galería AV crea personalizables galerias de fotos flash y video. Basta con arrastrar y soltar tus fotos y vídeos sobre el creador.
Compatibilidad: Windows y Mac OS X

Visitar »

JSGallery

Galería de imágenes AJAX construidas con Mootools.
Requisitos: Mootools v1.2

Visitar »

easyALBUM

Una galería de fotos DOM.
Requisitos: Sin requisitos

Visitar »

Flash Photo Browser

Flash galería de fotos muy similar a la galería de fotos en la lista anterior.
Requisitos: PHP, Flash Player 7 +

Visitar »

Phormer

Phormer es una Aplicacion PHP con administrador, que te ayuda a almacenar, clasificar y recortar tus fotos en la web con distintas características útiles!
Requisitos: PHP

Visitar »

Polaroid Gallery

Galería flash opensource. El script carga las imágenes y la imagen dinámica de los títulos externos xml flickr o un feed RSS. Entonces el script procesa los datos y crea una galería interactiva flash.
Requisitos: cuenta de Flickr, Flash para editar el archivo de FLA (Nota del autor: El archivo FLA no se ven muy bien comentados, y varias secciones que están en noruego)

Visitar »

Slideflow

Una presentación de diapositivas basadas en Ajax inspirados por Apple y su interfaz Cover Flow. Las fotos y los títulos se leen de un archivo XML, y las imágenes son pre-generados con las acciones de Photoshop.
Requisitos: Prototype y Scriptaculous

Visitar »

ImageFlow

Una galeria estilo de iTunes con el efecto CoverFlow.
Requisitos: Flash (opcional) para editar el archivo FLA

Visitar »

FancyBox

FancyBox jQuery álbum, al parecer otro clon.
Requisitos: jQuery

Visitar »

Flash Photo Gallery

Flash Photo Gallery es un servicio libre, simple galería de fotos construida en Macromedia Flash 2004, que utiliza archivos XML para almacenar la información sobre las imágenes para mostrar.
Requisitos: programa de edición de imágenes para crear miniaturas y un editor de texto para editar el archivo XML.

Visitar »

Control.Tabs

Control.Tabs crea una interfaz con pestañas de una lista desordenada de enlaces / anclas que apuntan a uno de los elementos en su página que tienen un atributo id. Se puede utilizar para mostrar imágenes.
Requisitos: PrototypeJS

Visitar »

Couloir Photo Gallery

Esta foto es una demostración de diapositivas de Flash comportamiento similar aplicado exclusivamente en JavaScript, HTML y CSS. El código se ofrece tal y como son – Couloir.org no ofrece soporte técnico.
Requisitos: Prototype y Scriptaculous

Visitar »

Flash Gallery Generator

Una robusta galería de fotos Flash y diapositivas.
Requisitos: Sin requisitos especiales

Visitar »

Dynamic Image Gallery and Slideshow

Este ligero JavaScript arma una galería de imágenes y diapositivas e incluye un sinfín de características a pesar de su ligero tamaño ( 3Kb).
Requisitos: Javascript

Visitar »

Flickr Slideshow Generador

Flickr Slideshow Generador le permite generar el código HTML necesario para incrustar una presentación de diapositivas personalizadas de Flickr en tu página o blog.
Requisitos: cuenta de Flickr

Visitar »

FlickrShow

Flickrshow es un peso ligero, cross-browser javascript con efecto de diapositivas, que le proporciona una forma sencilla de mostrar tus imágenes en Flickr en su propio sitio web.
Requisitos: cuenta de Flickr

Visitar »

FlShow

Este carrusel se puede utilizar como un bonito slideshow de fotos, una eficaz exhibición de productos, un atractivo menú en su sitio web, y mucho más.
Personalización a través de archivo XML

Visitar »

Highslide JS

Highslide JS es un JavaScript de codigo libre, ofreciendo un enfoque Web 2.0 ventanas emergentes. Se racionaliza la utilización de imágenes en miniatura y pop-ups HTML en las páginas web.
Requisitos: conocimientos básicos de HTML es necesario para instalar Highslide

Visitar »

GreyBox

GreyBox se puede utilizar para visualizar páginas web, imágenes y otros contenidos ricos.
Requisitos: conocimientos básicos de HTML es necesario.

Visitar »

Showcase Slideshow Con MooTools

Un tutorial de javascript que muestra cómo hacer una función de pase de diapositivas para mostrar su página de inicio con MooTools.
Requisitos: MooTools v1.2

Visitar »

slideViewer

slideViewer es otro peso ligero (1.5Kb) un plugin de jQuery que permite crear una galería de imágenes con sólo escribir unas líneas de código HTML, como una lista desordenada de imágenes.
Requisitos: jQuery 1.2.1 y el plugin de jQuery easing.1.2

Visitar »

jQuery visita virtual

Esta es una extensión del panorama simple viewer que le permite jugar un poco más con jQuery añadiendo interactividad al transformar algunas vistas panorámicas en una visita virtual!
Requisitos: jQuery

Visitar »

CrossSlide

CrossSlide jQuery es un plugin que se aplica en Javascript con algunas diapositivas se presenta animaciones, tradicionalmente disponibles sólo a través de la red de desarrolladores de Adobe Flash u otros plugins.
Requisitos: jQuery

Visitar »

Pamoorama

Pamoorama es un simple script que tiene por objeto visualizar su imagen en un entorno panorámico.
Requisitos: Mootools v1.11

Visitar »

jCarousel

jCarousel jQuery es un plugin para el control de una lista de temas en orden horizontal o vertical.
Requisitos: jQuery V1.2.1

Visitar »

PictureSlides

instant.js 2.2 le permite añadir un efecto instantáneo de imagen (incluyendo la inclinación) a las imágenes en sus páginas web.
Requisitos: jQuery V1.2.1

Visitar »

instant.JS

slided.js le permite añadir imágenes y la sombra de diapositivas con imágenes de sus páginas web.
Requisitos: sin requisitos Visitar »

slided.JS

slided.js le permite añadir imágenes y la sombra de diapositivas con imágenes de sus páginas web.
Requisitos: sin requisitos

Visitar »

Airtight Interactive SimpleViewer

SimpleViewer es un servicio gratuito y personalizable, visualización de imágenes de Flash.
Requisitos: editor de texto y software de edición de imágenes / software Picasa / Nota: versión Flash 8 + para editar el archivo FLA. Visitar »

Airtight Interactive TiltViewer

Aplicacion Flash de visualización de imágenes estilo 3D.
Requisitos: editor de texto y software de edición de imágenes / software Picasa / Nota: versión Flash8 + para editar el archivo FLA.

Visitar »

Airtight Interactive PostcardViewer

PostcardViewer es un simple flash basada en la imagen de Airtight Interactive.
Requisitos: editor de texto y software de edición de imágenes / software Picasa / Nota: versión Flash 8 + para editar el archivo FLA. Visitar »

Airtight Interactive AutoViewer

AutoViewer está diseñado para mostrar una secuencia lineal de imágenes y leyendas.
Requisitos: editor de texto y software de edición de imágenes / software Picasa / Nota: versión Flash 8 + para editar el archivo FLA.

Visitar »

Flash Page Flip Photo Gallery template for Picasa

Esta plantilla se basa en la versión gratuita del motor de FlashPageFlip en www.flashpageflip.com
Requisitos: software Picasa

Visitar »

Search-This Photo Viewer

El Photo Viewer utiliza Flash y XML. Todos los datos son almacenados en un archivo XML que facilita realizar modificaciones y actualizaciones.
Requisitos: Sin requisitos especiales

Visitar »

Agile Gallery – Flash Version

La versión de Flash AgileGallery es un servicio gratuito de galería de fotos Flash que rasga a través de la salida XML de Picasa (descarga gratuita de Google) y genera la paginación y la muestra miniaturas y fotos en tamaño completo junto con cualquier descripción en Picasa. También incluye una función de pase de diapositivas.
Requisitos: Picasa, Flash Player para ver la galería

Visitar »

FIG – Flash Image Gallery

FIG es una galería de aplicación que puede ser utilizado por cualquier persona para mostrar múltiples galerías de fotos, ilustraciones, imágenes u otros con descripciones.
Requisitos: no del lado del servidor idioma

Visitar »

WS-Slideshow

Presentación de diapositivas basadas en Flash para todos.
Requisitos: Plugin Flash Player, versión 9.0.28 o posterior

Visitar »

ShadowBox.js

Shadowbox es un visor de medios de comunicación en línea que apoye todas las web más populares de la publicación de los formatos de los medios de comunicación.
Requisitos: Javascript

Visitar »

Zoomy.js

Zoomy.js es una clase prototype que le permite crear fácilmente la imagen: el guión sencillo hacer magnificación de imágenes con opciones personalizables, como emergente y superposición de las cajas.
Requisitos: Prototype y Scriptaculous

Visitar »

Canvas Gallery with reflections (Beta)

Galería Prototype basado en reflection.js. Versión beta.
Requisitos: Prototype

Visitar »

jQuery Image Gallery

Galeria de imagenes Jquery
Requisitos: jQuery

Visitar »

Thumbnoo

Thumbnoo, muestra miniaturas con la opción de ampliarlas.
Requisitos: ningún requisito

Visitar »

Flowplayer – Scrollable

Si bien esta secuencia de comandos se utiliza principalmente para insertar vídeos en su sitio, también puede utilizar para mostrar imágenes.
Requisitos: jQuery

Visitar »

mooCicle

Javascript muestra la galería de motools.
Requisitos: Mootools v1.11

Visitar »

Interface Slideshow

Interfaz de presentación de diapositivas.
Requisitos: jQuery

Visitar Demo | Descargar

SexyLightBox

SexyLightBox álbum al parecer otro clon con Mootools.
Requisitos: Mootools v1.2

Visitar »

Auto-Generating Photo Gallery

Generar automáticamente una galería de fotos de un directorio de imágenes.
Requisitos: PHP, jQuery, FancyBox plugin

Visitar »

qGallery (Beta)

qGallery prototype es una versión beta y no funciona en IE todavía!. Espero que el autor será capaz de hacer comentarios sobre el futuro de qGallery.
Requisitos: PHP, jQuery, FancyBox plugin

Visitar »

Protoflow

ProtoFlow es un efecto coverflow escrito en JavaScript. Utiliza Reflection.js que hacer todas las reflexiones de imagen.
Requisitos: Prototype y Scriptaculous

Visitar »

PrettyPhoto

PrettyPhoto jQuery lightbox.
Requisitos: jQuery

Visitar »

Photo Slider

Galería de imágenes de diapositivas.
Requisitos: jQuery, photoslider.js

Visitar »

jQuery Cycle Plugin

Otro pase de diapositivas.
Requisitos: jQuery

Visitar »

jqGalScroll v2.1

jqGalScroll toma lista de imágenes y crea una galería de fotos desplazamiento suave desplazamiento vertical, horizontal o diagonal.
Requisitos: jQuery

Visitar »

Image/Photo Gallery Viewer using jQuery

El jqGalView jQuery Plugin le permite tomar una agrupación de imágenes y convertirlo en un flash-como imagen / galería de fotos.
Requisitos: jQuery

Visitar »

Suckerfish HoverLightbox Redux

Redux combina la Suckerfish menú desplegable con imagenes de tu album para ampliarla.
Requisitos: Prototype y Scriptaculous

Visitar »

Álbum 2

Sencillo y discreto script utilizado para superposición de imágenes en la página actual.
Requisitos: Prototype y Scriptaculous

Visitar »

The Lightbox Clones Matrix

Esto no es otra galería de fotos, pero una lista completa de todos los clones de lightbox para jQuery, Prototype y Scriptaculous, Mootools, YUI …

Visitar »

jQuery.popeye – an inline lightbox alternative

jQuery.popeye degrada con gracia en una lista desplegable de imágenes que enlazan a una versión ampliada.

Visitar »

La mayoría de las empresas conoce el potencial estratégico de su marca bien valorada y posicionada. Para ello, invierten gran capital para que su propia marca adquiera mayor valor, prestigio y reconocimiento.

En la actualidad, la creación de una nueva marca no sólo requiere de la inversión de recursos y aplicación de diversas estrategias. La creación de una marca implica realizar una apuesta a largo plazo ademas de poseer una estructura estable como base intangible de su identidad y la esencia de sus propios valores.

Hoy en día construir una marca es fácil, pero posicionarla en la mente del consumidor es todo un arte, en Borchani Studios ideamos la personalidad que su marca necesita para que genere resultados.

Tomese una par de segundos e imagine por un momento la bebida gaseosa mas famosa del mundo…

Seguro que estamos de acuerdo que es de chapa roja y comienza con C…, No?? sino quiza esta pensando localmente…

Esa personalidad que posee Coca Cola no se lo quita nadie, esta en su mente, quiza lo toma de vez en cuando y es que… la personalidad que posee esta marca se creo con mucho trabajo.

Trabajar con WordPress como herramienta de publicación. Aunque dicen que es sencillo, aquí dejo una colección de manuales, trucos y screencasts sobre este sistema de publicación.

• Codex de Wordpress » Esencial, la referencia completa. En inglés, con versión en español.
• Instalación y gestión básica de un blog (PDF, 19 pág.) » Educastur. Las tareas más importantes bien explicadas.
• WordPress y la creación de un sitio Web dinámico:
  metodología de instalación y puesta en marcha (PDF, 92 pág.) » Claudio Escobar y Joel Lagos. Via Aulablog. Información general, instalación y manejo
• Taller de blogs » Blog de instituto que va resolviendo nuevas tareas poco a poco. Incluye videos
• Blogs desde cero » Colección de pequeñas guías para comenzar desde cero
• Tutorial Wordpress » Conciso y breve, con los consejos principales
• WordPress Hispano » Portal hispano para Wordpress
• WordPress en Wikipedia » También en español
• Using WordPress to Run Church Websites Tutorial Series » Sorprendente por el título, pero con mucha información práctica
• WordPressMania » En italiano

Instalación

• Cómo instalar Wordpress » Cristalab
• Cómo instalar WordPress 2.0.1 desde cero » blogpocket
• ¿Cómo instalar Wordpress? (video) » Soporte-wordpress.org
• Installing Wordpress 2.0 (video) » I’d Rather Be Writing

Tareas

• Subir una imagen con Wordpress (video) » YouTube
• Programar una entrada para tu blog » davidarcos.net
• WordPress.com Step-by-Step Tutorial on How to Blog Using WordPress.com (video) » Para Wordpress.com en particular, pero con explicaciones prácticas para usuarios en general
• Integración de una galería de fotos de Flickr » MacBookers2.0
• ¿Cómo publicar un video de Google en Wordpress? (video) » Google Videos
• Tips de Wordpress » Cristalab
• Artículos con la etiqueta Wordpress » SigT (Actualizado)
• Evita contenido duplicado en WordPress » Sentidoweb.com
• Cómo personalizar la página de error en la base de datos » SigT (Actualizado)
• Cómo mover un blog de Wordpress a un nuevo servidor » Bloog.cl
• Migración de la nueva versión de Blogger a Wordpress » Blogestudio

Plantillas

• Themes Browser
• Temas para WordPress en castellano » aNieto2k
• Comprehensive list of 745+ Free WordPress 1.5 and 2.0 Themes » Lista enorme
• 83 Beautiful Wordpress Themes You (Probably) Haven’t Seen » Smashing Magazine
• Intro to Editing a WordPress Theme (video) » LearningNerd

Plugins

• WordPress Plugins
• WordPress Plugin Repository
• Plugins para Wordpress » Descripción en castellano en Mundogeek
• Los mejores plugins para WordPress » Sentidoweb
• JusOnLain? – Destripando el Plugin de WordPress » DaHouseCat’s Blog

En las redes sociales

• del.icio.us
• Blinklist
• Technorati
• Google Blog Search
• Google Videos y YouTube
• Flickr

Inspiración

• Aprende más sobre WordPress » Sentidoweb
• Tutorial Wordpress » e-profes.net

Uno de los menores santo grial de XHTML y CSS es producir una única lista ordenada semánticamente lógico que se envuelve en columnas verticales.

La situación ideal, en mi opinión, sería una lista única XHTML cuyo envoltorio está controlada totalmente por CSS. Además, la lista envuelto debe tolerar el cambio de tamaño de texto (fácil de realizar por un estilo todo en EMS).

CSS y los navegadores que lo soportan todavía no nos dan “envolver vertical”, así que tenemos que aumentar la lista básica de marcas con atributos adicionales y las normas de estilo para lograr el efecto. I’ll Take You There-o tan cerca como podemos conseguir utilizando los navegadores de hoy en día, pero en el camino vamos a ver una variedad de maneras de lograr un efecto similar.

Vamos a disparar para algo que parece un poco a esto:

(¿Por qué, usted ha sido, sin duda pensando, es este artículo titulado “CSS Swag”? En la caza de una metáfora de la multi-estilo de lista de columnas se muestra en la captura de pantalla anterior, me imaginé a una tira de tela que colgaba, retrocedió hasta a su altura inicial, cubierto de nuevo … Una rápida en Google me llevó a este término maravilloso, que yo había asociado sólo con el paquete un vagabundo de las posesiones de Australia, y una etimología gran arrogancia que vincula a tambalearse.)

Cuidado con el escalón

Te advierto que en la delantera. Si desea presentar una lista en varias columnas, tendrá que hacer concesiones. Usted puede sacrificar los estándares del W3C y la utilización de marcas obsoletas, se puede vivir con marcado que es menos de la semántica lógica, puede tolerar una mezcla de presentaciones con contenido, puede decir adiós a la compatibilidad del navegador, o puede utilizar el marcado que está cargada de atributos y estilo que es pesado con las normas. Cada carretera se cobra un peaje.

Si bien cada uno de estos métodos es bastante simple de configurar, la prueba de fuego llega cuando añadir o eliminar elementos de la lista en el curso de mantenimiento del sitio web. ¿Qué tan fácil de modificar es el método elegido? Idealmente, deberíamos ser capaces de simplemente insertar o eliminar elementos de la lista y ver la lista Vuelva a envolver en sí.

La realidad no es tan ideal. A diferencia de la envoltura horizontal que nuestros navegadores manejan de forma automática, ajuste vertical nos exige explícitamente que los elementos de lista aparecen en las columnas o en las columnas deben romper. Para mantener una lista modificada de ajuste correctamente, hay que reorganizar los elementos de lista, las clases y los atributos de cambio en el marcado, o modificar las normas en la hoja de estilos. La única técnica que se describe aquí que no necesita nada de eso Fuss (Método 1) que no tiene problemas de conducta graves. Finalmente, debido a las proporciones verticales son tan importantes aquí, la mayoría de estas listas se va a romper, si se supone que cada elemento de la lista ocupará una línea, sólo para tener un poco de abrigo para artículos de dos o más líneas.

Entonces, ¿por qué molestarse? Bueno, porque el efecto final es tan fresco y práctico. Envolviendo una lista en columnas pueden aliviar el visitante del sitio Web de la necesidad de desplazarse por una lista larga. De tres o cuatro lista de columnas puede llenar el ancho de una página, mientras que una columna flaco solo podía salir de la presentación en busca de anemia. Hay tantas razones para ajustar las listas, ya que hay diseñadores web: definitivamente más de unos pocos.

Para trabajar, entonces.
En primer lugar, eliminar todas los espacios en blanco

La prestación por defecto de una lista ordenada XHTML en los navegadores es la de una serie vertical único de los temas:

<ol>
    <li>Aloe</li>
    <li>Bergamot</li>
    <li>Calendula</li>
  </ol>

1. Aloe
2. Bergamot
3. Calendula

Para omitir algunas incoherencias navegador, he decidido marcar mis listas como esta:

<ol
    ><li>Aloe</li
    ><li>Bergamot</li
    ><li>Calendula</li
  ></ol>

Me he mudado el ángulo de cierre del viernes de soporte> de cada fila al comienzo de la siguiente fila. Esto evita que cada elemento de la lista en una fila de por sí para el beneficio de los lectores humanos y al mismo tiempo, elimina de manera efectiva todo el espacio en blanco entre las etiquetas, esta representación más sistemática de la producción a través de navegadores.

(Mi teoría favorita de por qué Internet Explorer incluye el espacio en blanco entre la lista de las etiquetas el tema en sus cálculos de renderizado es que es un atraco más de la época prehistórica, cuando elementos de la lista, como celdas de la tabla, no tenía etiquetas de cierre. Entonces , un navegador adecuadamente atención a todo el texto incluyendo espacios en blanco de una etiqueta de comienzo <li> a la siguiente. Cuando las etiquetas de cierre se han añadido a la mezcla, al parecer, nadie en Microsoft recordar-o se considere suficientemente importante para ajustar el la lógica para dejar de análisis entre una etiqueta de cierre </ li> y el comienzo de la próxima etiqueta <li>.)

Además, estoy añadiendo un hipervínculo a cada elemento de la lista. Esto me permite para detectar anomalías en la prestación de los anclajes cuando se aplican diferentes reglas CSS:

><li><a href=”#”>Aloe</a></li

Nota: la mayoría de mis ejemplos utilizan listas ordenadas por secuencia tema es de suma importancia en este ejercicio; listas desordenadas puede, por supuesto, ser sustituido.

Y una cosa más: las páginas de ejemplo adjunto a este artículo están marcados con un doctype estricto. Yo uso esta en el trabajo de toda mi web en estos días, porque parece que puedo obtener resultados más consistentes, cross-browser con menos llanto y el crujir de dientes. Si utiliza un doctype de transición o ejecutar en modo de peculiaridades, es posible que tenga que modificar el CSS para que estos métodos de comportarse cross-browser.

<div>
  <ol
    ><li><a href="#">Aloe</a></li
    ><li><a href="#">Bergamot</a></li
    ...
    ><li><a href="#">Oregano</a></li
    ><li><a href="#">Pennyroyal</a></li
  ></ol>
  <br />
</div><!-- .wrapper -->

/* allow room for 3 columns */
  ol
  {
    width: 30em;
  }

  /* float & allow room for the widest item */
  ol li
  {
    float: left;
    width: 10em;
  }

  /* stop the float */
  br
  {
    clear: left;
  }

  /* separate the list from subsequent markup */
  div.wrapper
  {
    margin-bottom: 1em;
  }

¿Cómo editar: los elementos pueden ser añadidos o eliminados sin más cambios en la XHTML or CSS.

Este método se adapta a dos de nuestros criterios para una solución ideal. La lista en sí es una simple lista de XHTML único y la columna de la envoltura está controlada por completo de la hoja de estilos. Sin embargo, está lejos de nuestro objetivo, porque la secuencia de la lista corre a través y luego hacia abajo en lugar de descender en columnas verticales. Además, no sobrevive bien en diferentes exploradores: Internet Explorer y Opera suprimir los marcadores de punto (números ol y balas de UL) cuando flotan elementos de la lista a la izquierda oa la derecha.

<ol
    ><li>item</li
    ><li>item</li
  ></ol>

  <ol start="3"
    ><li>item</li
    ><li>item</li
  ></ol>

  <ol
    ><li value="5">item</li
    ><li>item</li
    ><li>item</li
  ></ol>

Estos elementos de la lista se numerarán secuencialmente 1-6 por los navegadores y otros agentes de usuario que todavía soportan el marcado obsoleto.

Trabajo sólo la hoja de estilo, entonces, es flotar en la sub-listas de lado a lado, a continuación, desactive la carroza después de la última columna. (En los viejos tiempos antes de llegar la religión, sub-listas eran comúnmente coloca dentro de las celdas de tabla adyacentes.)

¿Cómo editar: Cuando elementos de la lista se agregan o eliminan, algunos elementos tendrán que ser trasladados de un sub-lista a otro para mantener una longitud de la columna coherente. Si el número de artículos por los cambios de columna, el principio y valores de atributos de valor en XHTML tendrá que ser ajustado para mantener la numeración correcta. No hay cambios CSS son necesarias.
Método 3: dividir las listas de numeración con el contenido generado por CSS

Si usted es dividir la lista en trozos, una herramienta más para la numeración de los artículos de forma contigua es la generación de contenido CSS, en donde una hoja de estilos hace que el texto aparezca que no existe en el marcado XHTML.

List item numbering and bulleting are actually two instances of content-generation, but they’re the only ones that are supported universally, probably because they date back to early HTML before CSS was born. The other forms of CSS content-generation are ill-supported in today’s browsers: of those tested, only Opera rendered this example properly.

The XHTML markup is similar to that in Method 2 but even cleaner: the list is divided into two or more sub-lists, but the start and value attributes are omitted.

Using CSS we suppress normal list item numbering, then apply the pseudo-element :before to insert incremental values:

ol li
  {
    list-style-type: none;
  }

  ol li:before
  {
    content: counter(item) ". ";
    counter-increment: item;
  }

Los ojos Sharp habrá alcanzado una diferencia sutil en el formato en la pantalla de arriba: los números generados con: antes de la prestación a ras de la izquierda, mientras que los navegadores suelen alinear lista ordenada de numeración alineados a la derecha. Esto afecta a la alineación de los valores de punto cuando el número de cambios de posiciones, como en 9 a 10 supra.

Cómo editar: cuando se añaden o eliminan de la lista general, algunos elementos tendrán que ser trasladadas de un sub-lista a otra en XHTML para mantener una longitud de la columna consistente. No es necesario profundizar el cambio a cualquiera de XHTML o CSS para preservar la correcta numeración.

Por desgracia, esta técnica no es práctico para cualquier propósito cross-browser hasta que haya más apoyo de los navegadores: antes de pseudo-elemento. Por ahora, el único navegador de Opera que puede hacerlo.
Numeración de las listas de separación con guión de

Mientras estamos en el tema de la generación de contenidos, voy a añadir de pasada que los productos en las listas de separación también puede ser “físicamente” numeradas de forma contigua por un script que inserta los números en los valores de partida, ya sea del lado del servidor en la página de generación de o-el lado del cliente a la página de carga.

Un script de servidor como ASP o PHP, leer los valores de elemento de la lista de una base de datos o un archivo plano, puede anteponer un número consecutivo para cada elemento, como está escrito en la página. También puede dividir el número total de elementos de la lista por el número de columnas deseado y generar la sub-lista de marcas. La tarea de la organización de la sub-listas de lado a lado se puede dejar a una hoja de estilo estático.

Un script de cliente como JavaScript puede localizar el sub-listas utilizando los identificadores o clases y iterar a través de los artículos, la inserción de partidas, la supresión de lista ordenada numeración normal, y el reparto una larga lista en sub-listas como sea necesario.

No hace falta decir (pero no) que cualquier solución que utilice el cliente de secuencias de comandos de gracia debe degradarse en los navegadores con secuencias de comandos desactivadas.
Envolviendo una lista única

Como hemos visto, el tema consecutivos dividir una lista en sub-listas y obligando a la numeración puede producir el efecto estético deseado, pero las soluciones no son tan satisfactoria para mí como una que preserve la integridad de la lista única de marcas.

Para cerrar una lista única en columnas, uso de CSS para agarrar cada elemento que comienza una nueva columna y arrastre de nuevo hasta el nivel de la primera partida y después a un margen de la nueva izquierda. La prestación normal hace el resto.

Ahora estamos botín talkin ‘!

Aquí hay tres formas de marcar esto:
Método 4: Ajuste de una lista única con XHTML

Si usted está dispuesto a controlar en la columna-wrap se produce utilizando el código XHTML, es bastante fácil para marcar cada artículo según el cual la columna que pertenece. Un nombre de clase adicional marca el primer elemento de cada columna.

He aquí un ejemplo abreviado:

 <ol
    ><li>item</li
    ><li>item</li

    ><li>item</li
    ><li>item</li

    ><li>item</li
    ><li>item</li
  ></ol>

La hoja de estilos utiliza estas clases para establecer las posiciones de la columna horizontal:

li.column1 { margin-left: 0em; }
  li.column2 { margin-left: 10em; }
  li.column3 { margin-left: 20em; }

Luego, el mandato de la línea de la altura de cada elemento y llevar el primer elemento de cada columna de nuevo hasta el nivel de la primera partida:

li
  {
    line-height: 1.2em;
  }

  li.reset
  {
    margin-top: -6em;
  }

Retorno Vertical = número de elementos de una columna * altura de cada elemento. En este caso, 5 puntos * 1.2em = 6em. (Cuando he tratado de hacer el line-height menor que 1.2em me he encontrado cruzada discrepancias navegador.)

Cómo editar: cuando se añaden o eliminan de la lista, el código XHTML debe ser ajustado para artículos de la columna adecuada las clases y la clase de reset debe ser trasladado al primer elemento de cada columna. Cuando el número de artículos por los cambios de columna, el li.reset CSS () norma debe modificarse en consecuencia.

Esta no es mi técnica preferida ya que la columna y embalaje, se controla desde el código XHTML en lugar de la hoja de estilos. La forma en que se mire, envolviendo una lista en columnas verticales es una cuestión de presentación, no de contenido, y por lo tanto debe ser controlada por la hoja de estilos en el interés de separar el contenido de la presentación.
Envolviendo una lista única con CSS

En Métodos de cinco y seis que siguen, los puntos en que la lista se ajusta a una nueva columna se controlan totalmente de la hoja de estilos.

El precio que pagamos es un código XHTML pesados, grávidas con nombres de clase. Check this out:

Preparamos el marcado mediante la asignación de una clase única a cada elemento de la lista:

<ol
    ><li>Aloe</a></li
    ><li>Bergamot</a></li
    ><li>Calendula</a></li
    ...
    ><li>Oregano</a></li
    ><li>Pennyroyal</a></li
  ></ol>

(Estoy usando la clase en lugar de id aquí, así que voy a tener la libertad de incluir más de una lista envueltos en la misma página, una clase puede aplicarse a más de un objeto, sino un identificador debe ser único. La cosa importante es que cada elemento se identifica dentro de su lista.)

En la hoja de estilo, se asigna un margen izquierda diferente a cada grupo de elementos que pertenecen a una columna:

li.aloe,
  li.berg,
  li.cale,
  li.dami,
  li.elde
  {
    margin-left: 0em;
  }

  li.feve,
  li.ging,
  li.hops,
  li.iris,
  li.juni
  {
    margin-left: 10em;
  }

  li.kava,
  li.lave,
  li.marj,
  li.nutm,
  li.oreg,
  li.penn
  {
    margin-left: 20em;
  }

Esto es una reminiscencia de la “ColumnN” clases en el método 4, sin embargo aquí la determinación de qué elemento pertenece a la columna que se decide exclusivamente en el lado del CSS de la calle.

¡Oh, la ironía de todo esto! La perspectiva de la asignación de una clase única a cada elemento de la lista es suficiente para hacer que los ojos de la cruz y los dedos se doblen. Después de todo, la razón por la que estamos usando listas ordenadas en primer lugar, es aprovechar de la lista de numeración automática de los navegadores que ofrecen. Si tenemos que el nombre de cada clase de elemento de lista única, ¿por qué no sólo el número de la lista de artículos a sí mismos y hacerse con él?

Tranquilo. Respira. La asignación de las clases de punto único, no se trata de la numeración de los artículos, se trata de la presentación de la lista de todo el encontrar maneras de convencer al navegador para que lo envuelve en columnas sin tener que cortar la lista en pedazos y pegarlos al lado del otro. En el diseño de páginas web que le asignamos a las clases y los identificadores de elementos de página de forma rutinaria para guiar la presentación CSS, que es lo que están ahí. No nos equivoquemos, la asignación de una clase diferente para cada ítem en una lista es la idea de nadie de código elegante, pero funciona, valida, y no (en mi humilde opinión) que el marcado intrínsecamente ‘un-semántico.

Si vale la pena su tiempo para administrar el código de cualquiera de estas técnicas cuando se modifica una lista dependerá de cuánto usted quiere listas de varias columnas a trabajar. Afortunadamente, no es gran cosa. Edición de listas pequeñas a mano es fácil, y si tienes una lista muy larga que está en constante cambio probablemente se debe generar desde una base de datos en el primer lugar. Un consuelo es que cuando estamos generando las páginas de un script de servidor que podemos asignar clases de pieza única lista automáticamente, de modo que no tenemos para conseguir nuestros dedos sucios. (O cansado.)
Método 5: Ajuste de una lista única utilizando posicionamiento absoluto

Debido a que ahora hemos identificado cada elemento singular dentro de la lista, un enfoque posible es simplemente la posición de cada elemento de forma explícita.

Tenga en cuenta que esta no es una solución práctica cruz navegador hoy en día para listas ordenadas, ya que ni Internet Explorer 6, ni Opera 7 se mostrarán los marcadores de la lista cuando elementos de la lista son de estilo (position: absolute;).

Para hacer este trabajo para el resto de los navegadores, la lista completa debe ser encerrado dentro de un div con (position: relative): aporta los elementos de lista absolutamente posicionado un marco de referencia para que podamos evitar que simplemente volar hasta el la parte superior de la página. Entonces es simplemente una cuestión de asignación de la posición vertical a cada elemento. Podemos hacer esto en las filas:

li
  {
    position: absolute;
  }

  li.aloe, li.feve, li.kava { top: 0.0em; }
  li.berg, li.ging, li.lave { top: 1.2em; }
  li.cale, li.hops, li.marj { top: 2.4em; }
  li.dami, li.iris, li.nutm { top: 3.6em; }
  li.elde, li.juni, li.oreg { top: 4.8em; }
  li.penn                   { top: 6.0em; }

¿Cómo editar: Cuando el número de artículos por los cambios de columna, la hoja de estilos tendrá que ser cambiado. Cuando los elementos se agregan o eliminan de la lista, la hoja de estilo debe ser editado para volver a determinar los elementos que residen en las columnas. Cada elemento de la lista nueva que se le asignará una clase única en XHTML.

Absolutamente posicionamiento cada elemento de una lista de control es un sueño de freak, el tipo de enfoque de muchos de nosotros cuando nos tomó por primera vez a la web desde el diseño de impresión y todavía no había aprendido a dejar ir. Para crear listas de varias columnas, no es necesario a la posición de cada elemento, como el método 6 demostrará, pero estoy incluyendo aquí en aras de la exhaustividad. Lo hace ‘break’ de manera diferente a Método 6, y que podría ser una base para la elección es el siguiente:

Si algún elemento de la lista es lo suficientemente largo para envolver a una segunda línea, ¿cómo puede eso afectar a la disposición de la lista? Cuando elementos de la lista son absolutamente posicionado como en el método 5, la disposición general se mantendrá sin cambios, pero el elemento de la lista que se envuelve se superpone el orden del día, en la lista que se cobrará su posición respecto a la anterior, sin texto, ya que la posición absoluta de cada toma producto fuera de la corriente. En cambio, en el método 6 debajo de cada columna de elementos de la lista desciende por el flujo normal, un elemento de la lista que envuelve a empujar los temas siguientes, el alargamiento de la columna es in Debido a que el método asume una altura de la columna fija, el retorno vertical, no será suficiente para que la siguiente columna de nuevo hasta la parte superior, crear un diseño escalonado.

Puede haber otras ramificaciones de la posición absoluta que afectará a nuestra elección: por ejemplo, algunos navegadores no permiten al usuario para resaltar el texto en bloques completamente posicionada.
Método 6: Envolver una sola lista, usando el flujo normal de

Por último, aquí está la técnica que prefieren utilizar: un solo semánticamente lista lógica y embalaje, cuya columna se controla por completo de CSS, se basa en el flujo normal, y trabaja en la mayoría de navegadores modernos.

Como en el método anterior, cada elemento de la lista se le asigna un nombre de clase única en XHTML, y el margen izquierdo de cada columna se establece en el CSS.

Lo que diferencia este método es que aquí usamos las clases de punto único para llevar el primer elemento de cada columna de nuevo a la cima con un margen negativo-top:

li
  {
    line-height: 1.2em;
  }

  li.feve,
  li.kava
  {
    margin-top: -6em;
  }

Una vez más, el retorno verticales = número de elementos de una columna * altura de cada elemento. En este caso, 5 puntos * 1.2em line-height = 6em.

Cómo editar: cuando se añaden o eliminan de la lista, la unicidad de nombres de clase el tema debe mantenerse en XHTML y la hoja de estilo debe ser ajustado a cambio de artículos a sus columnas correspondientes.
Gettin ‘de lujo

Con un poco de estilo y algunas imágenes de fondo, la lista puede estar listo a la fiesta sin romper el multi-flujo de la columna.

¿Y ahora?

Hay muchas maneras para mostrar una lista de múltiples columnas. Como hemos visto, muchos de ellos requieren un compromiso de estándares de la web o el navegador de compatibilidad, así como algunas marcas muy peludos y de estilo. La mejor opción, en mi opinión, es dar el código XHTML suficiente “ganchos” para permitir que la columna de la envoltura a ser controlado por completo de CSS.

Lo que realmente necesitamos es que alguna bombilla brillante para venir y averiguar cómo hacer esto con el formato de repuesto y concluyeron que el Santo Grial.

Ahora, ir adelante y botín!
Navegadores y ayudantes

Los ejemplos para este artículo aspecto sustancialmente la misma (salvo que se indique en el texto) en los navegadores Firefox 1.0, Internet Explorer 6, Mozilla 1.7.2, Netscape 7.1 y 6.2 y Opera 7.23, y en los navegadores Macintosh Firefox 1.0, Internet Explorer 5.2 y Safari 1.0.3.

Con menos éxito con estos métodos son Windows Internet Explorer 5.x y anteriores, Linux Konqueror 3, y Netscape 4.x Tal vez con la persuasión que podrían ser persuadidos a venir también.