Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Slideshow responsive con CSS 3 y Javascript nativo

Otro slideshow a petición de Gustavo en un comentario del blog en el que indica que sería interesante que tuviera controles. Pues bien, tal como le comenté me puse manos a la obra y, espero que sea de su agrado ya que este slideshow responsive tiene algo más de curro que el anterior. Eso si, este ya no es tan liviano como el anterior ni en Javascript ni en CSS.

Por cierto Gustavo, no he puesto las imágenes como background, aunque podrías hacerlo incluyendo por cada elemento una imagen en tu CSS aplicando un alto.

Imagen slideshow responsive

Está inspirado en el de unslider.com, con la peculiaridad de no usar framework o librerías externas tipo JQuery, Prototype, Mootoools, etc. Las características que tiene esta demo son similares a las que proporciona unslider.com:

Navegación:
  • Por mousewheel del ratón
  • Por teclado
  • Por enlaces
  • Táctil para el móvil
Responsive

Se adapta perfectamente al tamaño de la pantalla en el que se visualiza. Pruébalo reduciendo el tamaño del browser con el que estés visitando esta página.

Configurable

Con unas pocas líneas de CSS puedes configurar el ancho y/o alto máximo de la galería. Es importante tener conocimientos básicos sobre las hojas de estilo. Para ello puedes sobreescribir las propiedades CSS en tú hoja de estilos, o puedes descargar la librería y modificar el CSS a tú gusto.

¿Cómo usar este SLIDESHOW?

En primer lugar debes descargar la librería o enlazar la librería desde tú código copiando estas líneas entre las etiquetas <head> del documento HTML:

5 técnicas para facilitar el cross browsing

En este artículo voy a exponer una serie de técnicas y recursos para facilitar el Cross Browsing. ¿Y qué es eso?, pues no es más que un "palabro" nuevo (bueno, ya no tanto) para definir a lo que se dedica un maquetador web (también leído en twitter como pintacajas), desarrollador web o, como nos gusta definirlo ahora, front-end developer. Consiste en que la web a desarrollar sea fiel al diseño e interacción en los distintos navegadores, y si es posible, en sus distintas versiones. Desde ya os puedo decir que esto es casi imposible, bueno, si descartas Internet Explorer 6 y 7 es más fácil, entonces, ¿qué hacemos? pues utilizar la mejora progresiva. Lo expuesto aquí también servirá para eso.

Volviendo al tema, una definición acertada sería la que hace Iván Mendoza en el artículo Cross Browsing y CSS3, de donde copio y pego la siguiente cita:

Cross Browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es válido para cualquier navegador.

El artículo tiene algo de tiempo, que no por eso está obsoleto, y además, el acierto en mencionar a Internet Explorer, que para eso es el navegador que dá más quebraderos de cabeza en esto del Cross Browsing, por lo menos en sus versiones más "castizas", y como podréis comprobar más adelante en este artículo. Algunos dirán que Internet Explorer 10 ya no es un IE como los de antes.

Reset CSS

Una técnica recomendadísima desde tiempos inmemorables. Yo la descubrí en los tiempos en los que la burbuja inmobiliaria estaba a puntito de estallar. Ampliamente usada por la comunidad, pero que los que empiezan y que aún no la han usado en sus desarrollos les recomiendo que lo hagan para los nuevas web.

¿En qué consiste? pues en resetear los estilos por defecto de cada navegador. Si amigos, cada navegador aplica un hoja de estilos, y además no es estándar para todos. Cada navegador usa una diferente. Por eso es tan común encontrarse que al aplicar reglas de diseño en CSS la web se vea diferente en los distintos navegadores (incluso versiones del mismo). Yo diría más, que sin aplicar reglas CSS, escribiendo él código HTML, también verás diferencias en distintos navegadores.

Un reset CSS que podemos aplicar como punto de partida es el propuesto por Eric Meyer (no olvidéis seguir por twitter a este "chaval") y que puedes ampliar según tus necesidades:

Slideshow con CSS3 y Javascript (mejorado)

A raíz de un comentario en el blog dejado por Abigail en el artículo Slideshow sencillo con CSS3 y JavaScript he decidido mejorar el script usado en ese artículo. En el comentario escribe que "no es capaz de implementar dos (o más) slideshow en una misma página". Esto es debido a que el script usado está accediendo al DOM mediante el ID padre.

Imagen de la demo slideshow múltiple

Tras recibir este comentario le propuse una solución, pero no me gustaba demasiado, me parece poco elegante esa solución, así que me puse manos a la obra para realizar las modificaciones necesarias en el script, html y css anteriores para que no hubiera problemas si quieres incluir varios slideshow en una misma página.

Como siempre me gusta dejar por adelantado el enlace a la demo. Múltiples slideshows con CSS y JS.

Si lo comparamos con el anterior son evidentes varias diferencias. La mayor de ellas, como he comentado anteriormente, es la forma de acceso al DOM, que ya no es por el atributo ID, sino por el CLASS de los elementos:

var elemento = document.getElementsByClassName('galeria');

Para ello echemos un vistazo a como he implementado el marcado en HTML:

<div class="galeria">
	<ul>
		<li class="selected"><img src="img/galeria_2/alba-rocker.jpg" alt="Dos rockeros muy rockeros" width="680" /></li>
		<li class="noselected"><img src="img/galeria_2/andres.jpg" alt="Un chico muy mosqueado" width="680"/></li>
		<li class="noselected"><img src="img/galeria_2/cafe.jpg" alt="La palabra café en una nevera" width="680"/></li>
		<li class="noselected"><img src="img/galeria_2/manifestacion.jpg" alt="Chica en la puerta del sol" width="680"/></li>		
	</ul>
</div>

Galería dinámica con Lightbox y PHP (II)

Ver los efectos de la página Original Hover Effects me ha motivado para crear una demo similar (la suya es más guay) implementándola como Galería dinámica con lightbox y PHP.

No penséis que va a ser exactamente igual, ya que también me ha motivado a escribir un nuevo código PHP que facilite la implementación de la galería, esta vez utilizando un clase en PHP y no implementando el código en la propia página.

Bueno, lo primero es lo primero, aquí os dejo la demo Galería dinámica con lightbox y PHP (II) y, a continuación vamos a ver las partes del código más importantes, aunque más abajo pondré enlaces para descargar el ejemplo completo en PHP y en HTML.

Slideshow sencillo con CSS3 y JavaScript

Aprovechando las capacidades de CSS3 y un poco de JavaScript, he decidido crear dos slideshow bastante sencillos, teniendo en cuenta los que podemos ver en algunas páginas últimamente.

Imagen del slideshow

Podéis ver las demos del slideshow con efecto opacidad y el slideshow con efecto persiana.

Para este ejemplo no se ha usado ninguna librería de JavaScript, lo que se consigue que este sea lo más liviano posible en cuanto a peso se refiere. Al ser un ejemplo bastante sencillo no he visto conveniente usar alguna, ya que el script solamente se encargará de modificar los class de una lista de imágenes, y el peso de la animación recae sobre el CSS y las nuevas propiedades que proporciona su última actualización.

Ejemplo slideshow efecto opacidad

HTML

Para ello vamos a ver el código HTML.

<ul id="galeria">
<li><img src="/blog/../img/rascafria-1.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-2.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-3.jpg" border="0" alt="Rascafría" /></li>
</ul>

Lightbox v 2.0.5 optimizado para IE9

Hace unos días estaba probando algunos de los recursos que he usado en mis web en el nuevo navegador IE9. En cuestión de segundos me asombró que algunos de estos recursos no funcionaban como me esperaba en la última versión del browser de Microsoft. Uno de ellos es la librería Lightbox.

Galería dinámica con Lightbox y PHP

Vamos a crear una galería dinámica, muy útil para que el cliente solo se limite a subir las imágenes que más le gusten (por FTP) a un directorio determinado. Para ello vamos a utilizar la librería lightbox.

Lo primero es descargar las librerías necesarias para utilizar el lightbox,  entre ellas se encuentran prototype.js y scriptaculous.js. Podeis descargarlo de la web de lightbox todos los archivos necesarios.

Imágenes embebidas con PHP

Está demostrado que el tiempo de carga de una página web depende en un 80% del cliente, es decir, el usuario. Las imágenes es uno de los elementos de la web que más penaliza el tiempo de carga de estas. Existe varias técnicas para reducirlo considerablemente. Hoy me voy a centrar en uno, imágenes embebidas.

Esta técnica consiste en incluir los bytes de la imagen utilizando el esquema data, al igual que usamos el esquema http para indicar las URL o mailto para el correo electrónico.

Página 1 de 2

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar