CENTRO TCNICO PRODUCTIVA INGSUP

Slider CSS sin JavascriptA da de hoy, todos sabemos cmo incorporar un magnficoslider(comonivo slider) o carrusel a nuestros sitios web. De hecho, unos sabemos cmo hacerlos y otros, aunque no saben realmente cmo hacerlo, s saben utilizar cualquiera de los mltiplesplugins de jQueryque te proporcionan el tan ansiado carrusel. Es ms, si utilizas wordpress tienes mltiplesplugins de carruselesque ya hacen prcticamente todo el trabajo por ti. Sin embargo, estosslidertienen en comn que necesitanJavaScriptpara funcionar.Ahora, gracias aCSS3podemos crear nuestros carruseles sin necesidad de utilizarJavaScript. Suuuuper-cool!! Vamos a ello!!!

La estructura HTML5 del Slider CSSPara poder hacer nuestro slider sin utilizar javascript, tendremos que trabajar con una estructura HTML un poco diferente a los carruseles tradicionales. Normalmente un carrusel se haca con una estructura parecida a esta:

Luego, un JS se encarga de modificar los estilos para crear el efecto del carrusel. En nuestro caso no podemos hacer algo s, porque no vamos a tener ningn javascript que altere el flujo de nuestra web.As pues, lo que vamos a tener como estructura es: Una serie de inputs radio que sern los que utilizaremos para controlar la transicin entre los elementos de nuestro carrusel. Segn qu input radio est seleccionado, se mostrar una diapositiva u otra de nuestroslider CSS sin JavascriptPara terminar, nuestro carrusel ser una serie de etiquetas div, de forma que cada elemento del slider ser una etiqueta div.

La etiqueta label, clave en nuestro Slider CSS sin JavascriptEn el cdigo se puede ver cmo cada input radio tiene una etiqueta label asociada, pero no est colocada junto al input, como es habitual en los formularios, sino que los he colocado debajo del carrusel. Esto es porque los input van a estar ocultos por CSS y las etiquetas label son las que van a funcionar como las flechas de anterior/siguiente tpicas de un slider. Por supuesto, en vez de como flechas de anterior/siguiente tambin pueden funcionar como los tpicos botones circulares apareciendo todos juntos y que segn pinches en uno u otro se mostrar la diapositiva del carrusel que corresponda.El cdigo CSS para crear nuestro slider CSS sin utilizar Javascript

Vamos a explicar un poco el funcionamiento de este CSS!

El por qu de los anchos utilizados en nuestro carrusel

En el CSS tenemos declarado que nuestro #slider-container tiene un ancho de 80% y un overflow hidden, esto lo hacemos para que:1. Todo nuestro slider CSS ocupe el 80% de la pantalla y nos salga centrado (el margin auto a izquierda y derecha).2. Con el overflow hidden, nos aseguramos de que se oculte el contenido del #slider-container que exceda el tamao de caja indicado a este div.En el CSS tenemos declarado que nuestro #slider-box tenga un ancho de 300%. El motivo de esta cifra es que nosotros queremos que cada elemento del slider CSS ocupe el 100% del #slider-container, como tenemos 3 elementos en nuestro carrusel (3 diapositivas), el ancho de su contenedor #slider-box tiene que ser el 100% * 3, o sea, el 300%.Tambin, en elCSS tenemos que cada elemento del carrusel, asociado a .slider-element, tiene un width del 33.333% y un float left. por qu?:1. Queremos que cada elemento del carrusel ocupe el 100% del #slider-container. Como la caja que contiene los elementos del slider CSS (#slider-box) tiene un ancho del 300% (3 veces el #slider-container) cada elemento del carrusel tiene que ocupar 1/3 del #slider-box, porque as tendr por ancho el 100% del #slider-container. Tiene que ocupar 1/3 porque son 3 elmentos los que tenemos, 1/3 de 100% es, aprox, el 33.333%. Como adems, el #slider-container tiene indicado que oculte el contenido que se exceda del ancho de esta caja, slo se mostrar un elemento del carrusel, ocultando los otros 2.2. Los elementos del carrusel flotan para que salgan todos en la misma lnea.Si tuvisemos 4 elementos en el carrusel, en lugar de 3, el #slider-box tendran un ancho de 400% y el .slider-element tendra un ancho del 25%

Cmo se consigue la transicin de los elementos del slider CSSCuando utilizamos un selector con~ como:

Lo que estamos haciendo es seleccionar todos los #slider-container que vienen precedidos por un #element1Gracias a esto y a la pseudo-clase :checked podemos mover nuestro #slider-container alterando su margin-left, de forma que segn qu input radio est seleccionado se mostrar un elemento u otro del carrusel:

As se consigue que se mueva nuestro slider CSSEsto lo combinamos con un efecto transition:

Y ya tenemos el carrusel a tope!Activando las flechas para movernos por el slider CSSPodramos dejarlo aqu, tendramos unos inputs de tipo radio y segn el que se marque, se muestra un elemento u otro de nuestro slider CSS. Sin embargo, queda mejor utilizar las tpicas flechitas de anterior/siguiente.Bien, utilizamos la misma idea que para mover nuestro carrusel, pero asociado a los label en vez de al contenedor del slider:

As lo que hacemos es activar todos los label que hay dentro de #slider-arrows cuando el #element1 est seleccionado y, adems, los flotamos a la derecha. Aunque esto no es exactamente lo que queremos!Cuando lo que vemos es el primer elemento del carrusel (cuando #element1 est :checked), queremos que a la derecha salga la flecha de siguiente y que, al pinchar en ella, el #element2 pase a estar seleccionado. Esto significa que queremos que la flecha de la derecha sea el label asociado a #element2, que es el segundo label dentro de #slider-arrows, por lo que tenemos que informar va CSS que la regla se aplica slo al segundo label. Cmo lo hacemos? con el maravilloso nth-child:

Con esto ya hacemos que se aplique slo al label que queremos, esto lo podemos ampliar al resto de casos y a la flecha de la izquierda (anterior) dejando nuestro CSS como es:

Agrandar imgenes al pasar el mouse IEste efecto har que una imagen pequea tenga un efecto de zoom al pasar el cursor sobre ella en slo dos pasos. Este es el ejemplo:

Entra aPlantilla | Edicin de HTMLy antes de]]>pega lo siguiente:

Ahora cuando quieras crear el efecto usa este cdigo en tus post:

Ya slo cambia la URL de la imagen, el texto del pie de foto y en ancho y alto de la imagen; toma en cuenta que esas medidas son las que se vern en la imagen pequea (thumbnail).Tambin puedes personalizar el primer cdigo, puedes cambiar el fondo que tendr la imagen, el borde y el color del texto del pie de foto.

Agrandar imgenes al pasar el mouse IIAnteriormente vimos cmoagrandar una imagen al pasar el mousesobre ella, para ello agregamos unos estilos a la plantilla y un pequeo cdigo en la entrada. Esta vez haremos el mismo efecto de ampliar la imagen pero con un cdigo mucho ms sencillo y corto.Este es el ejemplo:

Slo debes cambiar laURL de la imagen(en su tamao normal) El primerwidthyheightson las medidas a las que se va agrandar la imagen al pasar el cursor, width es el ancho y height es el alto. Loswidthyheightque estn en color verde son el ancho y alto de la imagen en tamao pequeo, es decir, el thmbnail.

Aumentar imgenes al pasar el cursor con efecto deslizanteHay muchos mtodos paraexpandir imgenes al pasar el cursor, uno de ellos esExpando, un script que permite que la imagen aumente a su tamao real con un efecto deslizante, y al quitar el cursor la imagen regresa al tamao pequeo, tambin con el mismo efecto.Puedes ver el demo aqu mismo pasando el cursor sobre esta imagen en miniatura:

Para lograr este efecto en tus imgenes ingresa a laEdicin HTMLy agrega antes deel script:

Y luego en tus entradas o donde lo quieras poner, usa este cdigo para tus imgenes:

Agrega la URL de la imagen donde se indica y listo, as de fcil y sencillo.La imagen que pongas deber ser la que tiene el tamao normal, y en donde se indica en color azul debers poner el tamao que tendr la miniatura.

Crear un libro de visitasCrear un libro de visitas permite a los internautas dar su opinin sobre tu web o sobre los servicios que ofreces. El libro de visitas es un mdulo gratuito y fcil de activar en una web.Es muy til para la web de un artista, de una asociacin, o para webs de alquileres vacacionales, como un hotel o una casa rural ya que permite a los internautas que visitan tu pgina web obtener en la misma web la opinin de otras personas, miembros o clientes, que ya han disfrutado del servicio o producto que propones.Por qu crear un libro de visitas?Aadir un libro de visitas a tu web permite a todos los internautas comentar tu web o los servicios que propones en ella.Esta herramienta te permiteobtener la opinin de los usuariospara poder mejorar tu web o tus servicios. Tambin es unmodo de publicidad simple y gratuito, ya que aparecern las opiniones ms beneficiosas para tu web y tu servicio o producto.El libro de visitas acta bien como complemento de otros mdulos comoel foro, o con los comentarios generales que puedes activar en tu web.La creacin de un libro de visitas permite lainteraccin con los internautasque aadir valor a tu pgina web. Es una herramienta interactiva, fcil de utilizar y un plus en general para tu web. No lo pienses ms!

Incluir un libro de visitas

Con emiweb, puedes incluir un libro de visitas en tu web en un slo clic. Aade un texto introductorio paraanimar a los internautas a dejar comentariosy elige cuntos comentarios quieres que se muestren por pgina.Puedes incluir en un men o en unapgina de contenidolos ltimos mensajes dejados en el libro de visitas. Es muy sencillo, se hace a travs de un widget, y es una buena manera de animar al resto de internautas a dejar sus comentarios.

Moderar los mensajes del libro de visitas

La interfaz de administracin del libro de visitas te permite gestionar completamente los mensajes dejados por los internautas. Puedespublicarlos, eliminarlos, o incluso editarlossi, por ejemplo, hay una falta de ortografa es muy sencillo!Adems, t decides si quieres que los mensajes del libro de visitasse publiquen directamente o despus de que los moderes. Y tambin puedes establecer el envo de un e-mail a los webmaster(s) de la web cuando se deje un nuevo mensaje.

Cundo puede ser til un libro de visitas?: La web de una asociacin(cmo fueron los eventos, opiniones sobre los poyectos de la asociacin, etc) Una web e-commerce(opiniones sobre la calidad del producto, el plazo para el envo...) Una web para una boda(comentarios de los invitados despus del evento, agradecimientos, etc) Una web de alquileres vacacionales(opinin de los clientes sobre las habitaciones, sobre los servicios disfrutados...) La web de un fotgrafo o de un artista(opinin sobre las obras, sugerencias del pblico, etc) La web de una comunidad,etc...CREACIN DE UN LIBRO DE VISITASUn elemento que suele estar presente en las pginas web es el llamado LIBRO DE VISITAS. Se trata de un espacio en que los visitantes dejan comentarios sobre la impresin que les ha causado la pgina. Existen muchos servidores que ofrecen gratuitamente estos elementos, no hay ms que poner "libro de visitas gratis" en el buscador Google y ver que nos salen millones de referencias. Yo he optado por el que ofreceGALICIACITYpues est en espaol, es fcil de usar y permite modificarlo y borrar mensajes inoportunos de algunos vndalos que andan por Internet.Lo primero que tenemos que hacer una vez en la pgina de creacin del libro de visitas de GALICIACITY es registrarnos completando un pequeo formulario.

Vemos que hay un vnculo para darse de alta y solicitar un Libro de visitas. Pinchamos en l y nos presenta lo siguiente.

Rellenamos los espacios teniendo cuidado al escribir los datos de correo electrnico y la direccin URL de la pgina en la que se va a poner el libro. Los datos de USUARIO y CONTRASEA debemos guardarlos en lugar seguro pues nos permitirn tener acceso a las modificaciones que queramos introducir en el libro.Pulsamos el botn CREAR MI LIBRO DE VISITAS y nos saldr una ventana con los datos que hemos puesto y nos pedir confirmacin. Una vez confirmado nos presenta esta ventana.

Crear un Formulario o Libro de Visitas (html gratis)

Poner una Cmara de Vigilancia en tu BlogEste peculiar gadget muestra una pequeacmarade vigilancia en la parte superior del blog, a mi modo de ver simula muy bien una verdaderacmara, la cmara se ve la siguiente manera, espero les guste.

Estacmara de vigilanciala verdad me parece muy buena como un accesorio ms a tener, ya que si bien en realidad su nica funcin es moverse, es divertido tener ungadgetde este tipo a la hora de que los visitantes circulen por nuestrositio web. Esperamos que les haya gustado estacmara de vigilancia de alta tecnologaque les dejamos aqu mismo.Lo bueno de la misma, es que prcticamente no consume nada y de hecho si tienes un sitio web como el nuevo, en blogger, es muy simple de colocar. Para agregar este gadget no tienes que hacer muchos pasos, es muy simple, y a continuacin te explicamos cmo se hace. Solo vamos aDiseo, Elementos de pgina, Aadir gadget, HTML Javascripty copia el siguiente cdigo.

Por ultimo guardas. Es tan simple como lo has leido arriba, en la parte de diseo creas el nuevo gadget, copias el texto que arriba te mostramos y listo.

Codigos Widget / HtmlSi Quieres Ponerle A Tu Web Unas Letras Diciendo UnMensajeLo Que Tu QuierasLe Das A Insertar Nuevo Luego AWidget/ Html Pegas EsteCdigo

..:::..Pon Tu Texto-Aqui..:::..Si Quieres Poner El Juego De PacMan Para Tu Pagina WebLe Das A Insertar Nuevo Luego AWidget/ Html Pegas EsteCdigo

Si Quieres Que No Te Copien Las Cosas De Tu WebLe Das A Insertar Nuevo Luego AWidget/ Html Pegas EsteCdigo

Si Quieres Ponerle Las Horas Restantes DelDaA Tu WebLe Das A Insertar Nuevo Luego AWidget/ Html Pegas EsteCdigoEl reloj...Si Quieres Un Recomendador De Paginas A Tu WebLe Das A Insertar Nuevo Luego AWidget/ Html Pegas EsteCdigoRECOMENDAR ESTA PGINA A UN AMIGO
Indica su e-mail:

var good;function checkEmailAddress(field) {// the following expression must be all on one line...var goodEmail = field.value.match(/b(^(S+@).+((.com)|(.net)|(.edu)|(.mil)|(.gov)|(.org)|(..{2,2}))$)b/gi);if (goodEmail){good = true} else {alert('Por favor introduce un e-mail valido')field.focus()field.select()good = false}}u = window.location;m = "Pienso que te puede interesar esta pgina...";function mailThisUrl(){good = falsecheckEmailAddress(document.eMailer.address)if (good){// the following expression must be all on one line...window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;}}Si Quieres Que En Tu Pagina El Cursor Desaparesca Y Sera Un Poco Dificil Manejarlo En Tu WebLo Copias Y Le Das A Insertar Nuevo Luego AWidget/ Html Pegas EsteCdigofunction right(e) {if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){alert("Coloca el mensaje aqu.");return false;}else if (navigator.appName == 'Microsoft Internet Explorer' &&(event.button == 2 || event.button == 3)) {alert("Coloca el mensaje aqu.");return false;}return true;}document.onmousedown=right;if (document.layers) window.captureEvents(Event.MOUSEDOWN);window.onmousedown=right;YLo Pegas Y Lo Guardas.

Pgina Web - II Pgina 22